@muhgholy/next-drive 2.2.0 → 2.2.2

package/dist/client/index.js

@@ -7,15 +7,15 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { X, ChevronRight, Check, Circle, Loader2, Folder, FolderPlus, Menu, RotateCcw, Trash2, Group, ArrowUpDown, Calendar, ArrowDownAZ, ArrowUpAZ, ArrowDown01, ArrowUp01, LayoutGrid, List, Upload, Cloud, AlertCircle, Pencil, Database, HardDrive, ChevronsUpDown, Settings2, Trash, Plus, FolderOpen, Clock, CheckCircle2 } from 'lucide-react';
+import { X, ChevronRight, Check, Circle, Loader2, Folder, FolderPlus, Menu, RotateCcw, Trash2, Group, ArrowUpDown, Calendar, ArrowDownAZ, ArrowUpAZ, ArrowDown01, ArrowUp01, LayoutGrid, List, RefreshCw, Upload, CheckCircle2, Cloud, AlertCircle, Pencil, HardDrive, Database, ChevronsUpDown, Plus, Settings2, Trash, FolderOpen, Clock } from 'lucide-react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, pointerWithin, closestCenter, useDroppable } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, arrayMove, SortableContext, rectSortingStrategy, useSortable } from '@dnd-kit/sortable';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { startOfWeek, subWeeks, isToday, isYesterday, isAfter } from 'date-fns';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { CSS } from '@dnd-kit/utilities';
-import * as ProgressPrimitive from '@radix-ui/react-progress';
 
 var DriveContext = createContext(null);
 var DriveProvider = (props) => {
@@ -34,6 +34,7 @@ var DriveProvider = (props) => {
   const [path, setPath] = useState([{ id: null, name: "Home" }]);
   const [accounts, setAccounts] = useState([]);
   const [activeAccountId, setActiveAccountIdState] = useState(initialActiveAccountId);
+  const [availableProviders, setAvailableProviders] = useState({ google: false });
   const [quota, setQuota] = useState(null);
   const [viewMode, setViewMode] = useState(() => {
     if (typeof window !== "undefined") return window.innerWidth < 768 ? "LIST" : "GRID";
@@ -105,6 +106,8 @@ var DriveProvider = (props) => {
   const refreshAccounts = useCallback(async () => {
     const res = await callAPI("listAccounts");
     if (res.status === 200 && res.data) setAccounts(res.data.accounts);
+    const infoRes = await callAPI("information");
+    if (infoRes.status === 200 && infoRes.data) setAvailableProviders(infoRes.data.providers);
   }, [callAPI]);
   const refreshQuota = useCallback(async () => {
     const res = await callAPI("quota");
@@ -123,6 +126,7 @@ var DriveProvider = (props) => {
     setCurrentView("BROWSE");
     setSearchQuery("");
     setSelectedFileIds([]);
+    setIsLoading(true);
     if (!item) {
       setCurrentFolderId(null);
       setPath([{ id: null, name: "Home" }]);
@@ -139,6 +143,7 @@ var DriveProvider = (props) => {
     setCurrentView("BROWSE");
     setSearchQuery("");
     setSelectedFileIds([]);
+    setIsLoading(true);
     const newPath = path.slice(0, -1);
     setPath(newPath);
     setCurrentFolderId(newPath[newPath.length - 1]?.id || null);
@@ -225,11 +230,13 @@ var DriveProvider = (props) => {
     setItems,
     isLoading,
     error,
+    fetchItems,
     // Accounts
     accounts,
     activeAccountId,
     setActiveAccountId,
     refreshAccounts,
+    availableProviders,
     // Storage
     quota,
     refreshQuota,
@@ -1029,6 +1036,7 @@ var DialogConfirmation = (props) => {
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(
     DialogContent,
     {
+      showCloseButton: false,
       onInteractOutside: (e) => {
         if (disableEscapeKeyDown) {
           e.preventDefault();
@@ -1082,7 +1090,8 @@ var DriveDndContext = createContext({
   draggingItemId: null
 });
 var useDriveDnd = () => useContext(DriveDndContext);
-var DriveDndProvider = ({ children }) => {
+var DriveDndProvider = (props) => {
+  const { children } = props;
   const { items, setItems, sortBy, setSortBy, moveItem, callAPI, currentView } = useDrive();
   const [dragOverFolderId, setDragOverFolderId] = useState(null);
   const [draggingItemId, setDraggingItemId] = useState(null);
@@ -1149,6 +1158,39 @@ var DriveDndProvider = ({ children }) => {
     }
   ) : children });
 };
+function Progress({
+  className,
+  value,
+  indicatorClassName,
+  indeterminate = false,
+  ...props
+}) {
+  const isIndeterminate = indeterminate || value === void 0;
+  return /* @__PURE__ */ jsx(
+    ProgressPrimitive.Root,
+    {
+      "data-slot": "progress",
+      className: cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ProgressPrimitive.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: cn(
+            "bg-primary h-full flex-1 transition-all",
+            isIndeterminate && "w-1/3 animate-indeterminate",
+            !isIndeterminate && "w-full",
+            indicatorClassName
+          ),
+          style: isIndeterminate ? void 0 : { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    }
+  );
+}
 var ContextMenu = ContextMenuPrimitive.Root;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuSubTrigger = React3.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
@@ -1260,7 +1302,8 @@ var ContextMenuSeparator = React3.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
-var SortableItem = ({ id, children, disabled, isDragOverTarget }) => {
+var SortableItem = (props) => {
+  const { id, children, disabled, isDragOverTarget } = props;
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id, disabled });
   const style = {
     transform: isDragOverTarget ? void 0 : CSS.Transform.toString(transform),
@@ -1271,7 +1314,8 @@ var SortableItem = ({ id, children, disabled, isDragOverTarget }) => {
   };
   return /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners, children });
 };
-var FileItem = ({ item, isSelected, isDragOver, onSelect, onDoubleClick, onRename, onDelete, onRestore }) => {
+var FileItem = (props) => {
+  const { item, isSelected, isDragOver, onSelect, onDoubleClick, onRename, onDelete, onRestore } = props;
   const { apiEndpoint, viewMode, currentView } = useDrive();
   const isFolder = item.information.type === "FOLDER";
   const tokenParam = item.token ? `&token=${item.token}` : "";
@@ -1460,34 +1504,36 @@ var DriveFileGrid = (props) => {
   };
   const enableDrag = currentView === "BROWSE";
   if (isLoading && items.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: cn("flex-1 flex items-center justify-center", className), children: /* @__PURE__ */ jsx(Loader2, { className: "size-8 animate-spin text-muted-foreground" }) });
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex-1 flex flex-col", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "h-1 w-full shrink-0", children: /* @__PURE__ */ jsx(
+        Progress,
+        {
+          indeterminate: true,
+          className: "h-full rounded-none bg-primary/10",
+          indicatorClassName: "bg-primary"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "size-8 animate-spin text-muted-foreground" }) })
+    ] });
   }
   if (error) {
-    return /* @__PURE__ */ jsx("div", { className: cn("flex-1 flex items-center justify-center p-8", className), children: /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("p", { className: "text-destructive font-medium", children: error }) }) });
+    return /* @__PURE__ */ jsx("div", { className: cn("flex-1 flex items-center justify-center p-8", className), children: /* @__PURE__ */ jsx("p", { className: "text-destructive font-medium text-center", children: error }) });
   }
   if (processedItems.length === 0) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: cn("flex-1 flex flex-col items-center justify-center p-8 text-center", className), children: [
-        /* @__PURE__ */ jsx("div", { className: "size-16 rounded-2xl bg-muted/50 dark:bg-muted/30 flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx(Folder, { className: "size-8 text-muted-foreground/60" }) }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: currentView === "SEARCH" ? "No files match your search" : currentView === "TRASH" ? "Trash is empty" : "This folder is empty" })
-      ] }),
-      /* @__PURE__ */ jsx(
-        DialogConfirmation,
-        {
-          open: dialogs.newFolder,
-          onClose: () => setDialogs((prev) => ({ ...prev, newFolder: false })),
-          title: "Create New Folder",
-          description: "Enter a name for the new folder",
-          inputs: [{ type: "INPUT", id: "name", name: "Folder name", required: true }],
-          onConfirm: async (inputs) => {
-            await createFolder(inputs.name);
-            return [true];
-          }
-        }
-      )
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex-1 flex flex-col items-center justify-center p-8 text-center", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "size-16 rounded-2xl bg-muted/50 dark:bg-muted/30 flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx(Folder, { className: "size-8 text-muted-foreground/60" }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: currentView === "SEARCH" ? "No files match your search" : currentView === "TRASH" ? "Trash is empty" : "This folder is empty" })
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isLoading && /* @__PURE__ */ jsx("div", { className: "h-1 w-full shrink-0", children: /* @__PURE__ */ jsx(
+      Progress,
+      {
+        indeterminate: true,
+        className: "h-full rounded-none bg-primary/10",
+        indicatorClassName: "bg-primary"
+      }
+    ) }),
     /* @__PURE__ */ jsxs("div", { className: cn("flex-1 overflow-y-auto min-h-0 p-2 sm:p-3 md:p-4", className), children: [
       /* @__PURE__ */ jsx("div", { className: "space-y-4 sm:space-y-6", children: Object.entries(groupedItems).map(([groupName, groupItems]) => /* @__PURE__ */ jsxs("div", { children: [
         groupBy !== "NONE" && /* @__PURE__ */ jsxs("h3", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2 sm:mb-3 px-1", children: [
@@ -1585,7 +1631,7 @@ var DriveFileGrid = (props) => {
     )
   ] });
 };
-var DriveHeader = () => {
+var DriveHeader = ({ className }) => {
   const {
     viewMode,
     setViewMode,
@@ -1608,7 +1654,7 @@ var DriveHeader = () => {
     createFolder
   } = useDrive();
   const [dialogs, setDialogs] = useState({ delete: false, emptyTrash: false, newFolder: false });
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b bg-muted/30 dark:bg-muted/20 p-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-2 bg-muted/30 dark:bg-muted/20 p-2", className), children: [
     currentView === "BROWSE" && /* @__PURE__ */ jsxs(
       Button,
       {
@@ -1878,6 +1924,18 @@ var DriveHeader = () => {
     )
   ] });
 };
+var DriveContentProgress = () => {
+  const { isLoading } = useDrive();
+  if (!isLoading) return null;
+  return /* @__PURE__ */ jsx("div", { className: "h-1 w-full shrink-0", children: /* @__PURE__ */ jsx(
+    Progress,
+    {
+      indeterminate: true,
+      className: "h-full rounded-none bg-primary/10",
+      indicatorClassName: "bg-primary"
+    }
+  ) });
+};
 var DroppablePathItem = (props) => {
   const { id, name, isLast, onClick } = props;
   const { currentFolderId } = useDrive();
@@ -1909,7 +1967,7 @@ var DroppablePathItem = (props) => {
       variant: "ghost",
       size: "sm",
       className: cn(
-        "h-auto font-normal text-xs sm:text-sm px-1.5 sm:px-2 py-0.5 sm:py-1 truncate max-w-25 sm:max-w-37.5",
+        "h-6 font-normal text-xs sm:text-sm px-1.5 sm:px-2 truncate max-w-25 sm:max-w-37.5",
         isOver && !isCurrentFolder && "ring-2 ring-primary bg-primary/10 scale-105"
       ),
       onClick,
@@ -1919,9 +1977,9 @@ var DroppablePathItem = (props) => {
     }
   );
 };
-var DrivePathBar = () => {
+var DrivePathBar = ({ className }) => {
   const { path, navigateToFolder } = useDrive();
-  return /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-1 sm:gap-1.5 text-sm text-muted-foreground bg-muted/30 px-2 sm:px-3 py-1.5 sm:py-2 rounded-md border w-full overflow-x-auto flex-nowrap min-w-0", "aria-label": "Breadcrumb", role: "navigation", children: path.map((item, index) => {
+  return /* @__PURE__ */ jsx("ol", { className: cn("flex items-center gap-1 sm:gap-1.5 text-sm text-muted-foreground overflow-x-auto flex-nowrap min-w-0", className), "aria-label": "Breadcrumb", role: "navigation", children: path.map((item, index) => {
     const isLast = index === path.length - 1;
     return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1 sm:gap-1.5 shrink-0", children: [
       index > 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50 text-xs", "aria-hidden": "true", children: "/" }),
@@ -1937,33 +1995,8 @@ var DrivePathBar = () => {
     ] }, item.id ?? "root");
   }) });
 };
-function Progress({
-  className,
-  value,
-  indicatorClassName,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    ProgressPrimitive.Root,
-    {
-      "data-slot": "progress",
-      className: cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        ProgressPrimitive.Indicator,
-        {
-          "data-slot": "progress-indicator",
-          className: cn("bg-primary h-full w-full flex-1 transition-all", indicatorClassName),
-          style: { transform: `translateX(-${100 - (value || 0)}%)` }
-        }
-      )
-    }
-  );
-}
-var UploadStatusIcon = ({ status }) => {
+var UploadStatusIcon = (props) => {
+  const { status } = props;
   switch (status) {
     case "complete":
       return /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 text-emerald-500" });
@@ -1982,7 +2015,7 @@ var DriveUpload = (props) => {
   const [isDragging, setIsDragging] = useState(false);
   const [showUploadsDialog, setShowUploadsDialog] = useState(false);
   const inputRef = useRef(null);
-  const { currentFolderId, setItems, apiEndpoint, activeAccountId, withCredentials } = useDrive();
+  const { currentFolderId, setItems, apiEndpoint, activeAccountId, withCredentials, fetchItems, isLoading } = useDrive();
   const { uploads, uploadFiles, cancelUpload, cancelAllUploads } = useUpload(apiEndpoint, activeAccountId, withCredentials, (uploadedItem) => {
     if (uploadedItem) {
       setItems((prev) => [uploadedItem, ...prev]);
@@ -2102,6 +2135,18 @@ var DriveUpload = (props) => {
             "aria-hidden": "true"
           }
         ),
+        activeAccountId && /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => fetchItems(),
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            disabled: isLoading,
+            title: "Refresh",
+            children: /* @__PURE__ */ jsx(RefreshCw, { className: cn("!size-4 shrink-0", isLoading && "animate-spin") })
+          }
+        ),
         /* @__PURE__ */ jsxs(
           Button,
           {
@@ -2110,8 +2155,8 @@ var DriveUpload = (props) => {
             size: "sm",
             disabled: hasUploadsInProgress,
             children: [
-              /* @__PURE__ */ jsx(Upload, { className: "size-4 mr-1.5" }),
-              " Upload"
+              /* @__PURE__ */ jsx(Upload, { className: "!size-4 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { children: "Upload" })
             ]
           }
         ),
@@ -2123,8 +2168,8 @@ var DriveUpload = (props) => {
             size: "sm",
             onClick: () => setShowUploadsDialog(true),
             children: [
-              activeUploads.length > 0 && /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 mr-1.5 animate-spin" }),
-              activeUploads.length > 0 ? `(${activeUploads.length})` : "Status"
+              activeUploads.length > 0 ? /* @__PURE__ */ jsx(Loader2, { className: "!size-4 shrink-0 animate-spin" }) : /* @__PURE__ */ jsx(CheckCircle2, { className: "!size-4 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { children: activeUploads.length > 0 ? `(${activeUploads.length})` : "Status" })
             ]
           }
         )
@@ -2235,7 +2280,8 @@ var DriveStorageIndicator = (props) => {
     ] })
   ] });
 };
-var ChooserSidebar = () => {
+var ChooserSidebar = (props) => {
+  const { onNavigate } = props;
   const {
     accounts,
     activeAccountId,
@@ -2243,14 +2289,20 @@ var ChooserSidebar = () => {
     callAPI,
     refreshAccounts,
     currentView,
-    setCurrentView
+    setCurrentView,
+    availableProviders
   } = useDrive();
   const [renameDialog, setRenameDialog] = useState({ open: false, account: null });
   const [deleteDialog, setDeleteDialog] = useState({ open: false, account: null });
   const [newName, setNewName] = useState("");
+  const [oauthLoading, setOauthLoading] = useState(false);
+  const [oauthAbort, setOauthAbort] = useState(null);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
   const currentAccount = activeAccountId ? accounts.find((a) => a.id === activeAccountId) : null;
   const currentAccountName = currentAccount?.name || "Local Storage";
   const currentAccountEmail = currentAccount?.email || "On this device";
+  const hasAnyProvider = availableProviders.google;
+  const isDropdownDisabled = accounts.length === 0 && !hasAnyProvider;
   const handleRename = async () => {
     if (!renameDialog.account || !newName.trim()) return;
     await callAPI("renameAccount", { method: "PATCH", query: { id: renameDialog.account.id }, body: JSON.stringify({ name: newName.trim() }) });
@@ -2266,90 +2318,157 @@ var ChooserSidebar = () => {
     setDeleteDialog({ open: false, account: null });
     return [true];
   };
-  const openOAuthPopup = async () => {
-    const res = await callAPI("getAuthUrl", { query: { provider: "GOOGLE" } });
-    if (res.status !== 200 || !res.data?.url) {
-      alert(res.message || "Failed");
-      return;
-    }
+  const openOAuthPopup = () => {
     const width = 600, height = 600;
     const left = window.screen.width / 2 - width / 2;
     const top = window.screen.height / 2 - height / 2;
-    window.open(res.data.url, "Connect to Google Drive", `width=${width},height=${height},top=${top},left=${left}`);
-    const cleanup = () => {
-      window.removeEventListener("message", ml);
-      window.removeEventListener("storage", sl);
-    };
-    const ml = (e) => {
-      if (e.data === "oauth-success") {
-        cleanup();
-        refreshAccounts();
-      }
-    };
-    const sl = (e) => {
-      if (e.key === "next-drive-oauth-success") {
-        cleanup();
-        refreshAccounts();
+    const popup = window.open("about:blank", "Connect to Google Drive", `width=${width},height=${height},top=${top},left=${left}`);
+    if (!popup) {
+      alert("Popup blocked. Please allow popups for this site.");
+      return;
+    }
+    const controller = new AbortController();
+    setOauthAbort(controller);
+    setOauthLoading(true);
+    (async () => {
+      try {
+        const res = await callAPI("getAuthUrl", { query: { provider: "GOOGLE" } });
+        if (controller.signal.aborted) {
+          popup.close();
+          return;
+        }
+        if (res.status !== 200 || !res.data?.url) {
+          popup.close();
+          setOauthLoading(false);
+          setOauthAbort(null);
+          alert(res.message || "Failed to initialize account connection");
+          return;
+        }
+        popup.location.href = res.data.url;
+        const cleanup = () => {
+          window.removeEventListener("message", ml);
+          window.removeEventListener("storage", sl);
+          setOauthLoading(false);
+          setOauthAbort(null);
+        };
+        const ml = (e) => {
+          if (e.data === "oauth-success") {
+            cleanup();
+            refreshAccounts();
+            setDropdownOpen(true);
+          }
+        };
+        const sl = (e) => {
+          if (e.key === "next-drive-oauth-success") {
+            cleanup();
+            refreshAccounts();
+            setDropdownOpen(true);
+          }
+        };
+        window.addEventListener("message", ml);
+        window.addEventListener("storage", sl);
+        const checkPopupClosed = setInterval(() => {
+          if (popup.closed) {
+            clearInterval(checkPopupClosed);
+            cleanup();
+          }
+        }, 500);
+      } catch {
+        popup.close();
+        setOauthLoading(false);
+        setOauthAbort(null);
+        alert("Failed to connect. Please try again.");
       }
-    };
-    window.addEventListener("message", ml);
-    window.addEventListener("storage", sl);
+    })();
+  };
+  const cancelOAuth = () => {
+    oauthAbort?.abort();
+    setOauthLoading(false);
+    setOauthAbort(null);
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full w-full bg-muted/5 dark:bg-muted/10", children: [
-    /* @__PURE__ */ jsx("div", { className: "p-2 border-b border-border/50", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "w-full justify-between px-2 h-11 hover:bg-muted/50 dark:hover:bg-muted/30", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-left min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("div", { className: cn(
-            "size-7 rounded-md flex items-center justify-center shrink-0",
-            activeAccountId ? "bg-blue-500/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400" : "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400"
-          ), children: activeAccountId ? /* @__PURE__ */ jsx(Database, { className: "size-3.5" }) : /* @__PURE__ */ jsx(HardDrive, { className: "size-3.5" }) }),
+    /* @__PURE__ */ jsx("div", { className: "p-2 border-b border-border/50", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      isDropdownDisabled ? (
+        /* Static display when no accounts and no providers */
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center gap-2 px-2 h-11 min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "size-7 rounded-md flex items-center justify-center shrink-0 bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400", children: /* @__PURE__ */ jsx(HardDrive, { className: "size-3.5" }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: currentAccountName }),
-            /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground truncate", children: currentAccountEmail })
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: "Local Storage" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground truncate", children: "On this device" })
           ] })
-        ] }),
-        /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5 text-muted-foreground/60 shrink-0" })
-      ] }) }),
-      /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56", align: "start", children: [
-        /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide", children: "Storage" }),
-        /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setActiveAccountId(null), className: "gap-2 py-2", children: [
-          /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm", children: "Local Storage" }),
-          activeAccountId === null && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary" })
-        ] }),
-        accounts.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        accounts.map((account) => /* @__PURE__ */ jsxs("div", { className: "flex items-center group", children: [
-          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setActiveAccountId(account.id), className: "flex-1 gap-2 py-2 pr-1", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm truncate", children: account.name }),
-              /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground truncate", children: account.email })
-            ] }),
-            activeAccountId === account.id && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary" })
+        ] })
+      ) : /* @__PURE__ */ jsxs(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "flex-1 min-w-0 justify-between px-2 h-11 hover:bg-muted/50 dark:hover:bg-muted/30", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-left min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: cn(
+              "size-7 rounded-md flex items-center justify-center shrink-0",
+              activeAccountId ? "bg-blue-500/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400" : "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400"
+            ), children: activeAccountId ? /* @__PURE__ */ jsx(Database, { className: "size-3.5" }) : /* @__PURE__ */ jsx(HardDrive, { className: "size-3.5" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: currentAccountName }),
+              /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground truncate", children: currentAccountEmail })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5 text-muted-foreground/60 shrink-0" })
+        ] }) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56", align: "start", children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide", children: "Storage" }),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => {
+            setActiveAccountId(null);
+            setCurrentView("BROWSE");
+            onNavigate?.();
+          }, className: "gap-2 py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm", children: "Local Storage" }),
+            activeAccountId === null && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary" })
           ] }),
-          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-7 mr-1 opacity-0 group-hover:opacity-100 transition-opacity", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(Settings2, { className: "size-3.5 text-muted-foreground" }) }) }),
-            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-36", children: [
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => {
-                setNewName(account.name);
-                setRenameDialog({ open: true, account });
-              }, children: [
-                /* @__PURE__ */ jsx(Pencil, { className: "size-3.5 mr-2" }),
-                " Rename"
+          accounts.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          accounts.map((account) => /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onClick: () => {
+                setActiveAccountId(account.id);
+                setCurrentView("BROWSE");
+                onNavigate?.();
+              },
+              className: "gap-2 py-2",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm truncate", children: account.name }),
+                  /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground truncate", children: account.email })
+                ] }),
+                activeAccountId === account.id && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary" })
+              ]
+            },
+            account.id
+          )),
+          hasAnyProvider && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+              /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
+                /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Add Account" })
               ] }),
-              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => setDeleteDialog({ open: true, account }), children: [
-                /* @__PURE__ */ jsx(Trash, { className: "size-3.5 mr-2" }),
-                " Remove"
-              ] })
+              /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: availableProviders.google && /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: openOAuthPopup, children: "Google Drive" }) })
             ] })
           ] })
-        ] }, account.id)),
-        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
-          /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
-            /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Add Account" })
+        ] })
+      ] }),
+      currentAccount && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-9 shrink-0 hover:bg-muted/50 dark:hover:bg-muted/30", children: /* @__PURE__ */ jsx(Settings2, { className: "size-4 text-muted-foreground" }) }) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-40", children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground truncate", children: currentAccount.name }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => {
+            setNewName(currentAccount.name);
+            setRenameDialog({ open: true, account: currentAccount });
+          }, children: [
+            /* @__PURE__ */ jsx(Pencil, { className: "size-3.5 mr-2" }),
+            " Rename"
           ] }),
-          /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: openOAuthPopup, children: "Google Drive" }) })
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => setDeleteDialog({ open: true, account: currentAccount }), children: [
+            /* @__PURE__ */ jsx(Trash, { className: "size-3.5 mr-2" }),
+            " Disconnect"
+          ] })
         ] })
       ] })
     ] }) }),
@@ -2359,7 +2478,10 @@ var ChooserSidebar = () => {
         {
           variant: "ghost",
           className: cn("w-full justify-start gap-2.5 h-9 px-2.5 font-medium", currentView !== "TRASH" ? "bg-primary/10 text-primary hover:bg-primary/15" : "hover:bg-muted/50"),
-          onClick: () => setCurrentView("BROWSE"),
+          onClick: () => {
+            setCurrentView("BROWSE");
+            onNavigate?.();
+          },
           children: [
             /* @__PURE__ */ jsx(FolderOpen, { className: "size-4" }),
             " My Files"
@@ -2371,7 +2493,10 @@ var ChooserSidebar = () => {
         {
           variant: "ghost",
           className: cn("w-full justify-start gap-2.5 h-9 px-2.5 font-medium", currentView === "TRASH" ? "bg-destructive/10 text-destructive hover:bg-destructive/15" : "hover:bg-muted/50"),
-          onClick: () => setCurrentView("TRASH"),
+          onClick: () => {
+            setCurrentView("TRASH");
+            onNavigate?.();
+          },
           children: [
             /* @__PURE__ */ jsx(Trash2, { className: "size-4" }),
             " Trash"
@@ -2380,7 +2505,7 @@ var ChooserSidebar = () => {
       )
     ] }),
     /* @__PURE__ */ jsx("div", { className: "p-2.5 border-t border-border/50 bg-background/50 dark:bg-background/30", children: /* @__PURE__ */ jsx(DriveStorageIndicator, {}) }),
-    /* @__PURE__ */ jsx(Dialog, { open: renameDialog.open, onOpenChange: (open) => !open && setRenameDialog({ open: false, account: null }), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-sm", children: [
+    /* @__PURE__ */ jsx(Dialog, { open: renameDialog.open, onOpenChange: (open) => !open && setRenameDialog({ open: false, account: null }), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-sm", showCloseButton: false, children: [
       /* @__PURE__ */ jsxs(DialogHeader, { children: [
         /* @__PURE__ */ jsx(DialogTitle, { children: "Rename Account" }),
         /* @__PURE__ */ jsx(DialogDescription, { children: "Enter a new display name." })
@@ -2396,21 +2521,32 @@ var ChooserSidebar = () => {
       {
         open: deleteDialog.open,
         onClose: () => setDeleteDialog({ open: false, account: null }),
-        title: "Remove Account",
-        description: `Disconnect "${deleteDialog.account?.name}"? Synced files will be removed.`,
+        title: "Disconnect Account",
+        description: `Disconnect "${deleteDialog.account?.name}"? Access will be revoked and synced files will be removed.`,
         onConfirm: handleDelete
       }
-    )
+    ),
+    /* @__PURE__ */ jsx(Dialog, { open: oauthLoading, onOpenChange: (open) => !open && cancelOAuth(), children: /* @__PURE__ */ jsx(DialogContent, { className: "sm:max-w-xs", showCloseButton: false, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 py-4", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "size-8 text-primary animate-spin" }),
+      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "text-base", children: "Connecting..." }),
+        /* @__PURE__ */ jsx(DialogDescription, { className: "text-sm mt-1", children: "Preparing Google authentication" })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: cancelOAuth, children: "Cancel" })
+    ] }) }) })
+  ] });
+};
+var MobileSidebarSheet = () => {
+  const [sheetOpen, setSheetOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Sheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: [
+    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-9 md:hidden shrink-0", children: /* @__PURE__ */ jsx(Menu, { className: "size-5" }) }) }),
+    /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-72 p-0", hideCloseButton: true, children: [
+      /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation" }),
+      /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: "Storage and navigation" }),
+      /* @__PURE__ */ jsx(ChooserSidebar, { onNavigate: () => setSheetOpen(false) })
+    ] })
   ] });
 };
-var MobileSidebarSheet = () => /* @__PURE__ */ jsxs(Sheet, { children: [
-  /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-9 md:hidden shrink-0", children: /* @__PURE__ */ jsx(Menu, { className: "size-5" }) }) }),
-  /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-72 p-0", children: [
-    /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation" }),
-    /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: "Storage and navigation" }),
-    /* @__PURE__ */ jsx(ChooserSidebar, {})
-  ] })
-] });
 var DriveFileChooser = (props) => {
   const {
     value,
@@ -2522,9 +2658,9 @@ var DriveFileChooser = (props) => {
       /* @__PURE__ */ jsxs(Dialog2Body, { className: "flex flex-col md:flex-row", children: [
         /* @__PURE__ */ jsx("div", { className: "hidden md:flex w-52 lg:w-56 border-r shrink-0", children: /* @__PURE__ */ jsx(ChooserSidebar, {}) }),
         /* @__PURE__ */ jsx(DriveDndProvider, { children: /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-w-0 min-h-0", children: [
-          /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b", children: /* @__PURE__ */ jsx(DriveHeader, {}) }),
-          /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center gap-2 px-3 py-2 border-b bg-muted/20 dark:bg-muted/10", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(DrivePathBar, {}) }),
+          /* @__PURE__ */ jsx(DriveHeader, { className: "border-b" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b bg-muted/20 dark:bg-muted/10", children: [
+            /* @__PURE__ */ jsx(DrivePathBar, { className: "flex-1" }),
             /* @__PURE__ */ jsx(DriveUpload, { compact: true, accept })
           ] }),
           /* @__PURE__ */ jsx(DriveFileGrid, { mimeFilter: accept, className: "flex-1" })
@@ -2540,7 +2676,8 @@ var DriveFileChooser = (props) => {
     ] }) })
   ] });
 };
-var SidebarContent = ({ onNavigate }) => {
+var SidebarContent = (props) => {
+  const { onNavigate } = props;
   const {
     accounts,
     activeAccountId,
@@ -2549,7 +2686,7 @@ var SidebarContent = ({ onNavigate }) => {
     refreshAccounts,
     currentView,
     setCurrentView,
-    isLoading
+    availableProviders
   } = useDrive();
   const [renameDialog, setRenameDialog] = useState({
     open: false,
@@ -2560,9 +2697,14 @@ var SidebarContent = ({ onNavigate }) => {
     account: null
   });
   const [newName, setNewName] = useState("");
+  const [oauthLoading, setOauthLoading] = useState(false);
+  const [oauthAbort, setOauthAbort] = useState(null);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
   const currentAccount = activeAccountId ? accounts.find((a) => a.id === activeAccountId) : null;
   const currentAccountName = currentAccount?.name || "Local Storage";
   const currentAccountEmail = currentAccount?.email || "On this device";
+  const hasAnyProvider = availableProviders.google;
+  const isDropdownDisabled = accounts.length === 0 && !hasAnyProvider;
   const handleRename = async () => {
     if (!renameDialog.account || !newName.trim()) return;
     await callAPI("renameAccount", {
@@ -2582,68 +2724,111 @@ var SidebarContent = ({ onNavigate }) => {
     setDeleteDialog({ open: false, account: null });
     return [true];
   };
-  const openOAuthPopup = async () => {
-    const res = await callAPI("getAuthUrl", { query: { provider: "GOOGLE" } });
-    if (res.status !== 200 || !res.data?.url) {
-      alert(res.message || "Failed to initialize account connection");
-      return;
-    }
+  const openOAuthPopup = () => {
     const width = 600, height = 600;
     const left = window.screen.width / 2 - width / 2;
     const top = window.screen.height / 2 - height / 2;
-    window.open(res.data.url, "Connect to Google Drive", `width=${width},height=${height},top=${top},left=${left}`);
-    const cleanup = () => {
-      window.removeEventListener("message", messageListener);
-      window.removeEventListener("storage", storageListener);
-    };
-    const messageListener = (event) => {
-      if (event.data === "oauth-success") {
-        cleanup();
-        refreshAccounts();
-      }
-    };
-    const storageListener = (event) => {
-      if (event.key === "next-drive-oauth-success") {
-        cleanup();
-        refreshAccounts();
+    const popup = window.open("about:blank", "Connect to Google Drive", `width=${width},height=${height},top=${top},left=${left}`);
+    if (!popup) {
+      alert("Popup blocked. Please allow popups for this site.");
+      return;
+    }
+    const controller = new AbortController();
+    setOauthAbort(controller);
+    setOauthLoading(true);
+    (async () => {
+      try {
+        const res = await callAPI("getAuthUrl", { query: { provider: "GOOGLE" } });
+        if (controller.signal.aborted) {
+          popup.close();
+          return;
+        }
+        if (res.status !== 200 || !res.data?.url) {
+          popup.close();
+          setOauthLoading(false);
+          setOauthAbort(null);
+          alert(res.message || "Failed to initialize account connection");
+          return;
+        }
+        popup.location.href = res.data.url;
+        const cleanup = () => {
+          window.removeEventListener("message", messageListener);
+          window.removeEventListener("storage", storageListener);
+          setOauthLoading(false);
+          setOauthAbort(null);
+        };
+        const messageListener = (event) => {
+          if (event.data === "oauth-success") {
+            cleanup();
+            refreshAccounts();
+            setDropdownOpen(true);
+          }
+        };
+        const storageListener = (event) => {
+          if (event.key === "next-drive-oauth-success") {
+            cleanup();
+            refreshAccounts();
+            setDropdownOpen(true);
+          }
+        };
+        window.addEventListener("message", messageListener);
+        window.addEventListener("storage", storageListener);
+        const checkPopupClosed = setInterval(() => {
+          if (popup.closed) {
+            clearInterval(checkPopupClosed);
+            cleanup();
+          }
+        }, 500);
+      } catch (err) {
+        popup.close();
+        setOauthLoading(false);
+        setOauthAbort(null);
+        alert("Failed to connect. Please try again.");
       }
-    };
-    window.addEventListener("message", messageListener);
-    window.addEventListener("storage", storageListener);
+    })();
+  };
+  const cancelOAuth = () => {
+    oauthAbort?.abort();
+    setOauthLoading(false);
+    setOauthAbort(null);
   };
   return /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex flex-col bg-muted/5 dark:bg-muted/10", children: [
-    /* @__PURE__ */ jsx("div", { className: "h-1 w-full", children: isLoading && /* @__PURE__ */ jsx(
-      Progress,
-      {
-        value: void 0,
-        className: "h-full rounded-none bg-transparent",
-        indicatorClassName: "animate-pulse bg-primary/60"
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { className: "p-2 border-b border-border/50", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "w-full justify-between px-2 h-11 hover:bg-muted/50 dark:hover:bg-muted/30", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 text-left min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("div", { className: cn(
-            "size-7 rounded-md flex items-center justify-center shrink-0",
-            activeAccountId ? "bg-blue-500/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400" : "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400"
-          ), children: activeAccountId ? /* @__PURE__ */ jsx(Database, { className: "size-3.5" }) : /* @__PURE__ */ jsx(HardDrive, { className: "size-3.5" }) }),
+    /* @__PURE__ */ jsx("div", { className: "p-2 border-b border-border/50", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      isDropdownDisabled ? (
+        /* Static display when no accounts and no providers */
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center gap-2.5 px-2 h-11 min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "size-7 rounded-md flex items-center justify-center shrink-0 bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400", children: /* @__PURE__ */ jsx(HardDrive, { className: "size-3.5" }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: currentAccountName }),
-            /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground truncate", children: currentAccountEmail })
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: "Local Storage" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground truncate", children: "On this device" })
           ] })
-        ] }),
-        /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5 text-muted-foreground/60 shrink-0" })
-      ] }) }),
-      /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56", align: "start", children: [
-        /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide", children: "Storage" }),
-        /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => {
-          setActiveAccountId(null);
-          setCurrentView("BROWSE");
-          onNavigate?.();
-        }, className: "gap-2 py-2", children: activeAccountId === null && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary" }) }),
-        accounts.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        accounts.map((account) => /* @__PURE__ */ jsxs("div", { className: "flex items-center group", children: [
-          /* @__PURE__ */ jsxs(
+        ] })
+      ) : /* @__PURE__ */ jsxs(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "flex-1 min-w-0 justify-between px-2 h-11 hover:bg-muted/50 dark:hover:bg-muted/30", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 text-left min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: cn(
+              "size-7 rounded-md flex items-center justify-center shrink-0",
+              activeAccountId ? "bg-blue-500/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400" : "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400"
+            ), children: activeAccountId ? /* @__PURE__ */ jsx(Database, { className: "size-3.5" }) : /* @__PURE__ */ jsx(HardDrive, { className: "size-3.5" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: currentAccountName }),
+              /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground truncate", children: currentAccountEmail })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5 text-muted-foreground/60 shrink-0" })
+        ] }) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56", align: "start", children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide", children: "Storage" }),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => {
+            setActiveAccountId(null);
+            setCurrentView("BROWSE");
+            onNavigate?.();
+          }, className: "gap-2 py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm", children: "Local Storage" }),
+            activeAccountId === null && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary" })
+          ] }),
+          accounts.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          accounts.map((account) => /* @__PURE__ */ jsxs(
             DropdownMenuItem,
             {
               onClick: () => {
@@ -2651,7 +2836,7 @@ var SidebarContent = ({ onNavigate }) => {
                 setCurrentView("BROWSE");
                 onNavigate?.();
               },
-              className: "flex-1 gap-2 py-2 pr-1",
+              className: "gap-2 py-2",
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
                   /* @__PURE__ */ jsx("p", { className: "text-sm truncate", children: account.name }),
@@ -2659,49 +2844,52 @@ var SidebarContent = ({ onNavigate }) => {
                 ] }),
                 activeAccountId === account.id && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary" })
               ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "size-7 mr-1 opacity-0 group-hover:opacity-100 transition-opacity",
-                onClick: (e) => e.stopPropagation(),
-                children: /* @__PURE__ */ jsx(Settings2, { className: "size-3.5 text-muted-foreground" })
-              }
-            ) }),
-            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-36", children: [
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => {
-                setNewName(account.name);
-                setRenameDialog({ open: true, account });
-              }, children: [
-                /* @__PURE__ */ jsx(Pencil, { className: "size-3.5 mr-2" }),
-                "Rename"
+            },
+            account.id
+          )),
+          hasAnyProvider && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+              /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
+                /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Add Account" })
               ] }),
-              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsxs(
-                DropdownMenuItem,
-                {
-                  className: "text-destructive focus:text-destructive",
-                  onClick: () => setDeleteDialog({ open: true, account }),
-                  children: [
-                    /* @__PURE__ */ jsx(Trash, { className: "size-3.5 mr-2" }),
-                    "Remove"
-                  ]
-                }
-              )
+              /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: availableProviders.google && /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: openOAuthPopup, children: "Google Drive" }) })
             ] })
           ] })
-        ] }, account.id)),
-        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
-          /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
-            /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Add Account" })
+        ] })
+      ] }),
+      currentAccount && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "size-9 shrink-0 hover:bg-muted/50 dark:hover:bg-muted/30",
+            children: /* @__PURE__ */ jsx(Settings2, { className: "size-4 text-muted-foreground" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-40", children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground truncate", children: currentAccount.name }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => {
+            setNewName(currentAccount.name);
+            setRenameDialog({ open: true, account: currentAccount });
+          }, children: [
+            /* @__PURE__ */ jsx(Pencil, { className: "size-3.5 mr-2" }),
+            "Rename"
           ] }),
-          /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: openOAuthPopup, children: "Google Drive" }) })
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              className: "text-destructive focus:text-destructive",
+              onClick: () => setDeleteDialog({ open: true, account: currentAccount }),
+              children: [
+                /* @__PURE__ */ jsx(Trash, { className: "size-3.5 mr-2" }),
+                "Disconnect"
+              ]
+            }
+          )
         ] })
       ] })
     ] }) }),
@@ -2744,7 +2932,7 @@ var SidebarContent = ({ onNavigate }) => {
       )
     ] }),
     /* @__PURE__ */ jsx("div", { className: "p-2.5 border-t border-border/50 bg-background/50 dark:bg-background/30", children: /* @__PURE__ */ jsx(DriveStorageIndicator, {}) }),
-    /* @__PURE__ */ jsx(Dialog, { open: renameDialog.open, onOpenChange: (open) => !open && setRenameDialog({ open: false, account: null }), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-sm", children: [
+    /* @__PURE__ */ jsx(Dialog, { open: renameDialog.open, onOpenChange: (open) => !open && setRenameDialog({ open: false, account: null }), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-sm", showCloseButton: false, children: [
       /* @__PURE__ */ jsxs(DialogHeader, { children: [
         /* @__PURE__ */ jsx(DialogTitle, { children: "Rename Account" }),
         /* @__PURE__ */ jsx(DialogDescription, { children: "Enter a new display name for this storage account." })
@@ -2768,37 +2956,34 @@ var SidebarContent = ({ onNavigate }) => {
       {
         open: deleteDialog.open,
         onClose: () => setDeleteDialog({ open: false, account: null }),
-        title: "Remove Account",
-        description: `Are you sure you want to disconnect "${deleteDialog.account?.name}"? Synced files will be removed from local cache.`,
+        title: "Disconnect Account",
+        description: `Are you sure you want to disconnect "${deleteDialog.account?.name}"? Access will be revoked and synced files will be removed from local cache.`,
         onConfirm: handleDelete
       }
-    )
+    ),
+    /* @__PURE__ */ jsx(Dialog, { open: oauthLoading, onOpenChange: (open) => !open && cancelOAuth(), children: /* @__PURE__ */ jsx(DialogContent, { className: "sm:max-w-xs", showCloseButton: false, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 py-4", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "size-8 text-primary animate-spin" }),
+      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "text-base", children: "Connecting..." }),
+        /* @__PURE__ */ jsx(DialogDescription, { className: "text-sm mt-1", children: "Preparing Google authentication" })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: cancelOAuth, children: "Cancel" })
+    ] }) }) })
   ] });
 };
-var DriveSidebar = () => {
+var DriveSidebar = ({ className }) => {
   const [sheetOpen, setSheetOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsxs(Sheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: [
-      /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          className: "h-9 w-9",
-          "aria-label": "Open menu",
-          children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
-        }
-      ) }),
-      /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-70 sm:w-80 p-0", hideCloseButton: true, children: [
-        /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
-        /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: "Storage accounts and navigation" }),
-        /* @__PURE__ */ jsx(SidebarContent, { onNavigate: () => setSheetOpen(false) })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "hidden lg:flex w-full h-full", children: /* @__PURE__ */ jsx(SidebarContent, {}) })
-  ] });
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs(Sheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: [
+    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-9", "aria-label": "Open menu", children: /* @__PURE__ */ jsx(Menu, { className: "size-5" }) }) }),
+    /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-70 sm:w-80 p-0", hideCloseButton: true, children: [
+      /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
+      /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: "Storage accounts and navigation" }),
+      /* @__PURE__ */ jsx(SidebarContent, { onNavigate: () => setSheetOpen(false) })
+    ] })
+  ] }) });
 };
-var SortableItem2 = ({ id, children, disabled, isDragOverTarget }) => {
+var SortableItem2 = (props) => {
+  const { id, children, disabled, isDragOverTarget } = props;
   const {
     attributes,
     listeners,
@@ -3016,13 +3201,14 @@ var DriveExplorer = (props) => {
     }
     return null;
   })();
-  return /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full w-full overflow-hidden bg-background/50 dark:bg-background/30", children: [
-    /* @__PURE__ */ jsxs("div", { className: "h-14 px-3 sm:px-4 border-b bg-background/95 dark:bg-background/80 backdrop-blur-sm shrink-0 flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(DriveSidebar, {}) }),
-      /* @__PURE__ */ jsx("div", { className: "hidden lg:flex flex-1 min-w-0", children: /* @__PURE__ */ jsx(DrivePathBar, {}) }),
+  return /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full w-full overflow-hidden bg-background/50 dark:bg-background/30 relative", children: [
+    /* @__PURE__ */ jsx(DriveContentProgress, {}),
+    /* @__PURE__ */ jsxs("div", { className: "h-12 px-3 sm:px-4 border-b bg-background/95 dark:bg-background/80 backdrop-blur-sm flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(DriveSidebar, { className: "lg:hidden" }),
+      /* @__PURE__ */ jsx(DrivePathBar, { className: "hidden lg:flex flex-1" }),
       /* @__PURE__ */ jsx(DriveUpload, { compact: true, accept: mimeFilter })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "lg:hidden px-3 py-2 border-b bg-background/95 dark:bg-background/80 backdrop-blur-sm shrink-0", children: /* @__PURE__ */ jsx(DrivePathBar, {}) }),
+    /* @__PURE__ */ jsx("div", { className: "lg:hidden px-3 py-2 border-b bg-background/95 dark:bg-background/80 backdrop-blur-sm", children: /* @__PURE__ */ jsx(DrivePathBar, {}) }),
     stateContent || /* @__PURE__ */ jsxs(ContextMenu, { children: [
       /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("flex-1 overflow-y-auto min-h-0 container mx-auto p-2 sm:p-3 md:p-4", className), children: [
         /* @__PURE__ */ jsx("div", { className: "space-y-4 sm:space-y-6 pb-8 sm:pb-12", children: Object.entries(groupedItems).map(([groupName, groupItems]) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
@@ -3178,6 +3364,26 @@ var DriveExplorer = (props) => {
   ] }) });
 };
 
-export { DriveDndProvider, DriveExplorer, DriveFileChooser, DriveFileGrid, DriveHeader, DrivePathBar, DriveProvider, DriveSidebar, DriveStorageIndicator, DriveUpload, useDrive, useDriveDnd, useUpload };
+// src/client/index.ts
+if (typeof document !== "undefined") {
+  const STYLE_ID = "next-drive-styles";
+  if (!document.getElementById(STYLE_ID)) {
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = `
+@keyframes indeterminate {
+    0% { transform: translateX(-100%); }
+    50% { transform: translateX(200%); }
+    100% { transform: translateX(-100%); }
+}
+.animate-indeterminate {
+    animation: indeterminate 1.5s ease-in-out infinite;
+}
+        `;
+    document.head.appendChild(style);
+  }
+}
+
+export { DriveContentProgress, DriveDndProvider, DriveExplorer, DriveFileChooser, DriveFileGrid, DriveHeader, DrivePathBar, DriveProvider, DriveSidebar, DriveStorageIndicator, DriveUpload, useDrive, useDriveDnd, useUpload };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map