✨ feat: Implement Favorites functionality with controllers, hooks, and UI components

client/src/hooks/useFavorites.ts

@@ -0,0 +1,99 @@
+import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
+import store from '~/store';
+import type { FavoriteModel } from '~/store/favorites';
+import { useGetFavoritesQuery, useUpdateFavoritesMutation } from '~/data-provider';
+
+export default function useFavorites() {
+  const [favorites, setFavorites] = useRecoilState(store.favorites);
+  const getFavoritesQuery = useGetFavoritesQuery();
+  const updateFavoritesMutation = useUpdateFavoritesMutation();
+
+  useEffect(() => {
+    if (getFavoritesQuery.data) {
+      setFavorites({
+        agents: getFavoritesQuery.data.agents || [],
+        models: getFavoritesQuery.data.models || [],
+      });
+    }
+  }, [getFavoritesQuery.data, setFavorites]);
+
+  const saveFavorites = (newFavorites: typeof favorites) => {
+    setFavorites(newFavorites);
+    updateFavoritesMutation.mutate(newFavorites);
+  };
+
+  const addFavoriteAgent = (id: string) => {
+    const agents = favorites?.agents || [];
+    if (agents.includes(id)) return;
+    const newFavorites = {
+      ...favorites,
+      agents: [...agents, id],
+    };
+    saveFavorites(newFavorites);
+  };
+
+  const removeFavoriteAgent = (id: string) => {
+    const agents = favorites?.agents || [];
+    const newFavorites = {
+      ...favorites,
+      agents: agents.filter((item) => item !== id),
+    };
+    saveFavorites(newFavorites);
+  };
+
+  const addFavoriteModel = (model: FavoriteModel) => {
+    const models = favorites?.models || [];
+    if (models.some((m) => m.model === model.model && m.endpoint === model.endpoint)) return;
+    const newFavorites = {
+      ...favorites,
+      models: [...models, model],
+    };
+    saveFavorites(newFavorites);
+  };
+
+  const removeFavoriteModel = (model: string, endpoint: string) => {
+    const models = favorites?.models || [];
+    const newFavorites = {
+      ...favorites,
+      models: models.filter((m) => !(m.model === model && m.endpoint === endpoint)),
+    };
+    saveFavorites(newFavorites);
+  };
+
+  const isFavoriteAgent = (id: string) => {
+    return (favorites?.agents || []).includes(id);
+  };
+
+  const isFavoriteModel = (model: string, endpoint: string) => {
+    return (favorites?.models || []).some((m) => m.model === model && m.endpoint === endpoint);
+  };
+
+  const toggleFavoriteAgent = (id: string) => {
+    if (isFavoriteAgent(id)) {
+      removeFavoriteAgent(id);
+    } else {
+      addFavoriteAgent(id);
+    }
+  };
+
+  const toggleFavoriteModel = (model: FavoriteModel) => {
+    if (isFavoriteModel(model.model, model.endpoint)) {
+      removeFavoriteModel(model.model, model.endpoint);
+    } else {
+      addFavoriteModel(model);
+    }
+  };
+
+  return {
+    favorites,
+    addFavoriteAgent,
+    removeFavoriteAgent,
+    addFavoriteModel,
+    removeFavoriteModel,
+    isFavoriteAgent,
+    isFavoriteModel,
+    toggleFavoriteAgent,
+    toggleFavoriteModel,
+  };
+}