implementing favorite apps feature (#1410)

This PR implements favorite apps feature and addresses issue #827 
    
<!-- This is an auto-generated description by cubic. -->
---

## Summary by cubic
Adds a favorite apps feature with a star toggle in the sidebar.
Favorites are grouped separately and persisted, with optimistic UI
updates and e2e tests.

- **New Features**
- Added isFavorite to the apps schema and an IPC handler
(add-to-favorite) to toggle and persist the state.
  - Updated AppList to show “Favorite apps” and “Other apps” sections.
- Introduced AppItem component with a star button; uses
useAddAppToFavorite for optimistic updates and toasts.
  - Added Playwright tests to verify favoriting and unfavoriting.

- **Migration**
- Run DB migrations to add the apps.is_favorite column (defaults to 0).

<!-- End of auto-generated description by cubic. -->

src/components/AppList.tsx

@@ -1,5 +1,4 @@
 import { useNavigate } from "@tanstack/react-router";
-import { formatDistanceToNow } from "date-fns";
 import { PlusCircle, Search } from "lucide-react";
 import { useAtom, useSetAtom } from "jotai";
 import { selectedAppIdAtom } from "@/atoms/appAtoms";
@@ -8,19 +7,21 @@ import {
   SidebarGroupContent,
   SidebarGroupLabel,
   SidebarMenu,
-  SidebarMenuItem,
 } from "@/components/ui/sidebar";
 import { Button } from "@/components/ui/button";
 import { selectedChatIdAtom } from "@/atoms/chatAtoms";
 import { useLoadApps } from "@/hooks/useLoadApps";
 import { useMemo, useState } from "react";
 import { AppSearchDialog } from "./AppSearchDialog";
-
+import { useAddAppToFavorite } from "@/hooks/useAddAppToFavorite";
+import { AppItem } from "./appItem";
 export function AppList({ show }: { show?: boolean }) {
   const navigate = useNavigate();
   const [selectedAppId, setSelectedAppId] = useAtom(selectedAppIdAtom);
   const setSelectedChatId = useSetAtom(selectedChatIdAtom);
   const { apps, loading, error } = useLoadApps();
+  const { toggleFavorite, isLoading: isFavoriteLoading } =
+    useAddAppToFavorite();
   // search dialog state
   const [isSearchDialogOpen, setIsSearchDialogOpen] = useState(false);
 
@@ -35,6 +36,17 @@ export function AppList({ show }: { show?: boolean }) {
       })),
     [apps],
   );
+
+  const favoriteApps = useMemo(
+    () => apps.filter((app) => app.isFavorite),
+    [apps],
+  );
+
+  const nonFavoriteApps = useMemo(
+    () => apps.filter((app) => !app.isFavorite),
+    [apps],
+  );
+
   if (!show) {
     return null;
   }
@@ -54,6 +66,11 @@ export function AppList({ show }: { show?: boolean }) {
     // We'll eventually need a create app workflow
   };
 
+  const handleToggleFavorite = (appId: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    toggleFavorite(appId);
+  };
+
   return (
     <>
       <SidebarGroup
@@ -95,28 +112,27 @@ export function AppList({ show }: { show?: boolean }) {
               </div>
             ) : (
               <SidebarMenu className="space-y-1" data-testid="app-list">
-                {apps.map((app) => (
-                  <SidebarMenuItem key={app.id} className="mb-1">
-                    <Button
-                      variant="ghost"
-                      onClick={() => handleAppClick(app.id)}
-                      className={`justify-start w-full text-left py-3 hover:bg-sidebar-accent/80 ${
-                        selectedAppId === app.id
-                          ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                          : ""
-                      }`}
-                      data-testid={`app-list-item-${app.name}`}
-                    >
-                      <div className="flex flex-col w-full">
-                        <span className="truncate">{app.name}</span>
-                        <span className="text-xs text-gray-500">
-                          {formatDistanceToNow(new Date(app.createdAt), {
-                            addSuffix: true,
-                          })}
-                        </span>
-                      </div>
-                    </Button>
-                  </SidebarMenuItem>
+                <SidebarGroupLabel>Favorite apps</SidebarGroupLabel>
+                {favoriteApps.map((app) => (
+                  <AppItem
+                    key={app.id}
+                    app={app}
+                    handleAppClick={handleAppClick}
+                    selectedAppId={selectedAppId}
+                    handleToggleFavorite={handleToggleFavorite}
+                    isFavoriteLoading={isFavoriteLoading}
+                  />
+                ))}
+                <SidebarGroupLabel>Other apps</SidebarGroupLabel>
+                {nonFavoriteApps.map((app) => (
+                  <AppItem
+                    key={app.id}
+                    app={app}
+                    handleAppClick={handleAppClick}
+                    selectedAppId={selectedAppId}
+                    handleToggleFavorite={handleToggleFavorite}
+                    isFavoriteLoading={isFavoriteLoading}
+                  />
                 ))}
               </SidebarMenu>
             )}

src/components/appItem.tsx

@@ -0,0 +1,67 @@
+import { formatDistanceToNow } from "date-fns";
+import { Star } from "lucide-react";
+import { SidebarMenuItem } from "@/components/ui/sidebar";
+import { Button } from "@/components/ui/button";
+import { App } from "@/ipc/ipc_types";
+
+type AppItemProps = {
+  app: App;
+  handleAppClick: (id: number) => void;
+  selectedAppId: number | null;
+  handleToggleFavorite: (appId: number, e: React.MouseEvent) => void;
+  isFavoriteLoading: boolean;
+};
+
+export function AppItem({
+  app,
+  handleAppClick,
+  selectedAppId,
+  handleToggleFavorite,
+  isFavoriteLoading,
+}: AppItemProps) {
+  return (
+    <SidebarMenuItem className="mb-1 relative ">
+      <div className="flex w-[200px] items-center">
+        <Button
+          variant="ghost"
+          onClick={() => handleAppClick(app.id)}
+          className={`justify-start w-full text-left py-3 hover:bg-sidebar-accent/80 ${
+            selectedAppId === app.id
+              ? "bg-sidebar-accent text-sidebar-accent-foreground"
+              : ""
+          }`}
+          data-testid={`app-list-item-${app.name}`}
+        >
+          <div className="flex flex-col w-4/5">
+            <span className="truncate">{app.name}</span>
+            <span className="text-xs text-gray-500">
+              {formatDistanceToNow(new Date(app.createdAt), {
+                addSuffix: true,
+              })}
+            </span>
+          </div>
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={(e) => handleToggleFavorite(app.id, e)}
+          disabled={isFavoriteLoading}
+          className="absolute top-1 right-1 p-1 mx-1 h-6 w-6 z-10"
+          key={app.id}
+          data-testid="favorite-button"
+        >
+          <Star
+            size={12}
+            className={
+              app.isFavorite
+                ? "fill-[#6c55dc] text-[#6c55dc]"
+                : selectedAppId === app.id
+                  ? "hover:fill-black hover:text-black"
+                  : "hover:fill-[#6c55dc] hover:stroke-[#6c55dc] hover:text-[#6c55dc]"
+            }
+          />
+        </Button>
+      </div>
+    </SidebarMenuItem>
+  );
+}

src/db/schema.ts

@@ -39,6 +39,9 @@ export const apps = sqliteTable("apps", {
   installCommand: text("install_command"),
   startCommand: text("start_command"),
   chatContext: text("chat_context", { mode: "json" }),
+  isFavorite: integer("is_favorite", { mode: "boolean" })
+    .notNull()
+    .default(sql`0`),
 });
 
 export const chats = sqliteTable("chats", {

src/hooks/useAddAppToFavorite.ts

@@ -0,0 +1,36 @@
+import { useMutation } from "@tanstack/react-query";
+import { IpcClient } from "@/ipc/ipc_client";
+import { showError, showSuccess } from "@/lib/toast";
+import { useAtom } from "jotai";
+import { appsListAtom } from "@/atoms/appAtoms";
+
+export function useAddAppToFavorite() {
+  const [_, setApps] = useAtom(appsListAtom);
+
+  const mutation = useMutation<boolean, Error, number>({
+    mutationFn: async (appId: number): Promise<boolean> => {
+      const result = await IpcClient.getInstance().addAppToFavorite(appId);
+      return result.isFavorite;
+    },
+    onSuccess: (newIsFavorite, appId) => {
+      setApps((currentApps) =>
+        currentApps.map((app) =>
+          app.id === appId ? { ...app, isFavorite: newIsFavorite } : app,
+        ),
+      );
+      showSuccess("App favorite status updated");
+    },
+    onError: (error) => {
+      showError(error.message || "Failed to update favorite status");
+    },
+  });
+
+  return {
+    toggleFavorite: mutation.mutate,
+    toggleFavoriteAsync: mutation.mutateAsync,
+    isLoading: mutation.isPending,
+    error: mutation.error,
+    isError: mutation.isError,
+    isSuccess: mutation.isSuccess,
+  };
+}

src/ipc/handlers/app_handlers.ts

@@ -1075,6 +1075,53 @@ export function registerAppHandlers() {
     },
   );
 
+  ipcMain.handle(
+    "add-to-favorite",
+    async (
+      _,
+      { appId }: { appId: number },
+    ): Promise<{ isFavorite: boolean }> => {
+      return withLock(appId, async () => {
+        try {
+          // Fetch the current isFavorite value
+          const result = await db
+            .select({ isFavorite: apps.isFavorite })
+            .from(apps)
+            .where(eq(apps.id, appId))
+            .limit(1);
+
+          if (result.length === 0) {
+            throw new Error(`App with ID ${appId} not found.`);
+          }
+
+          const currentIsFavorite = result[0].isFavorite;
+
+          // Toggle the isFavorite value
+          const updated = await db
+            .update(apps)
+            .set({ isFavorite: !currentIsFavorite })
+            .where(eq(apps.id, appId))
+            .returning({ isFavorite: apps.isFavorite });
+
+          if (updated.length === 0) {
+            throw new Error(
+              `Failed to update favorite status for app ID ${appId}.`,
+            );
+          }
+
+          // Return the updated isFavorite value
+          return { isFavorite: updated[0].isFavorite };
+        } catch (error: any) {
+          logger.error(
+            `Error in add-to-favorite handler for app ID ${appId}:`,
+            error,
+          );
+          throw new Error(`Failed to toggle favorite status: ${error.message}`);
+        }
+      });
+    },
+  );
+
   ipcMain.handle(
     "rename-app",
     async (

src/ipc/ipc_client.ts

@@ -274,6 +274,20 @@ export class IpcClient {
     return this.ipcRenderer.invoke("get-app", appId);
   }
 
+  public async addAppToFavorite(
+    appId: number,
+  ): Promise<{ isFavorite: boolean }> {
+    try {
+      const result = await this.ipcRenderer.invoke("add-to-favorite", {
+        appId,
+      });
+      return result;
+    } catch (error) {
+      showError(error);
+      throw error;
+    }
+  }
+
   public async getAppEnvVars(
     params: GetAppEnvVarsParams,
   ): Promise<{ key: string; value: string }[]> {

src/ipc/ipc_types.ts

@@ -99,6 +99,7 @@ export interface App {
   vercelDeploymentUrl: string | null;
   installCommand: string | null;
   startCommand: string | null;
+  isFavorite: boolean;
 }
 
 export interface Version {

src/preload.ts

@@ -127,6 +127,8 @@ const validInvokeChannels = [
   "prompts:create",
   "prompts:update",
   "prompts:delete",
+  // adding app to favorite
+  "add-to-favorite",
   // Test-only channels
   // These should ALWAYS be guarded with IS_TEST_BUILD in the main process.
   // We can't detect with IS_TEST_BUILD in the preload script because