feat: implement drag-and-drop functionality for adding apps to sidebar favorites

- Add drag-and-drop support in AppList for app items
- Implement drag event handlers to manage drag state and data transfer
- Enhance AppSidebar to handle drop events and visual feedback during dragging

Author: itstauq

src-frontend/components/app-sidebar.tsx

@@ -47,25 +47,27 @@ import {
   Star,
   X,
 } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 const EMAIL_PLACEHOLDER = "[email protected]";
 
 export function AppSidebar() {
   const router = useRouter();
   const pathname = usePathname();
   const isMobile = useIsMobile();
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
   const { navigateTo } = useFileSystemStore();
   const { datasite } = useConnectionStore();
   const [email, setEmail] = useState<string>(EMAIL_PLACEHOLDER);
 
   // Use Zustand store for sidebar state
   const {
+    activeItem,
     favorites,
     openSections,
-    activeItem,
     removeFavorite,
-    toggleSection,
     setActiveItem,
+    toggleSection,
   } = useSidebarStore();
 
   useEffect(() => {
@@ -164,8 +166,22 @@ export function AppSidebar() {
     }
   };
 
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    setIsDraggingOver(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    // Only set dragging to false if we're leaving the drop zone entirely
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+      setIsDraggingOver(false);
+    }
+  };
+
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault();
+    setIsDraggingOver(false);
     const data = e.dataTransfer.getData("application/json");
     if (data) {
       try {
@@ -191,11 +207,6 @@ export function AppSidebar() {
     }
   };
 
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "copy";
-  };
-
   const handleRemoveFavorite = (id: string, e: React.MouseEvent) => {
     e?.stopPropagation();
     removeFavorite(id);
@@ -243,9 +254,14 @@ export function AppSidebar() {
             </CollapsibleTrigger>
             <CollapsibleContent>
               <div
-                className="space-y-1 py-2 pr-2 pl-4"
+                className={cn(
+                  "space-y-1 py-2 pr-2 pl-4 transition-colors",
+                  isDraggingOver &&
+                    "bg-accent/50 border-primary rounded-md border-2 border-dashed",
+                )}
                 onDrop={handleDrop}
                 onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
               >
                 {favorites.length === 0 ? (
                   <p className="text-muted-foreground px-3 py-2 text-xs">

src-frontend/components/apps/app-list.tsx

@@ -35,6 +35,12 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { toast } from "@/hooks/use-toast";
 import { type App, installApp, listApps } from "@/lib/api/apps";
 import { useForm } from "react-hook-form";
@@ -170,6 +176,18 @@ export function AppList({ onSelectApp, onUninstall }: AppListProps) {
     }
   };
 
+  const handleDragStart = (e: React.DragEvent, app: App) => {
+    // Create a drag item with app data for the sidebar
+    const dragItem = {
+      id: app.info.id,
+      name: app.info.name,
+      type: "app" as const,
+    };
+
+    e.dataTransfer.setData("application/json", JSON.stringify(dragItem));
+    e.dataTransfer.effectAllowed = "copy";
+  };
+
   const getTabButtonClassNames = (tab: string) =>
     cn(
       "hover:text-muted-foreground h-auto px-3 py-1",
@@ -257,13 +275,33 @@ export function AppList({ onSelectApp, onUninstall }: AppListProps) {
                   {filteredApps.map((app) => (
                     <tr
                       key={app.info.id}
-                      className="hover:bg-muted/50 cursor-pointer"
+                      className="hover:bg-muted/50 group cursor-pointer"
                       onClick={() => onSelectApp(app.info.id)}
+                      draggable
+                      onDragStart={(e) => handleDragStart(e, app)}
                     >
                       <td className="px-6 py-4">
                         <div className="flex items-center gap-3">
                           <AppIcon name={app.info.name} />
                           <span className="font-medium">{app.info.name}</span>
+                          <TooltipProvider>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <div className="text-muted-foreground cursor-grab opacity-0 transition-opacity group-hover:opacity-100">
+                                  <svg
+                                    className="h-3 w-3"
+                                    fill="currentColor"
+                                    viewBox="0 0 20 20"
+                                  >
+                                    <path d="M7 2a2 2 0 1 1 .001 4.001A2 2 0 0 1 7 2zm0 6a2 2 0 1 1 .001 4.001A2 2 0 0 1 7 8zm0 6a2 2 0 1 1 .001 4.001A2 2 0 0 1 7 14zm6-8a2 2 0 1 1-.001-4.001A2 2 0 0 1 13 6zm0 2a2 2 0 1 1 .001 4.001A2 2 0 0 1 13 8zm0 6a2 2 0 1 1 .001 4.001A2 2 0 0 1 13 14z" />
+                                  </svg>
+                                </div>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p>Drag to add to sidebar favorites</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
                         </div>
                       </td>
                       <td className="px-6 py-4">