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>
+  );
+}