Preview

packages/frontend-web/components/dashboard-layout.tsx

@@ -30,6 +30,8 @@ import {
   FileText,
   PanelLeftClose,
   PanelLeftOpen,
+  Folder,
+  HelpCircle,
 } from "lucide-react";
 import { cn } from "@/libs/utils";
 import { GeneratePasswordDialog } from "@/components/generate-password-dialog";
@@ -58,7 +60,7 @@ import { secureSetItem } from '@/libs/local-storage-utils';
 import { SearchModal } from "@/components/search-modal";
 import { logout } from "@/libs/utils";
 import { SidebarNav } from "@/components/sidebar-nav";
-import { ChatWidget } from "@/components/chat-widget";
+import { SupportModal } from "@/components/support-modal";
 
 interface DashboardLayoutProps {
   children: React.ReactNode;
@@ -257,6 +259,7 @@ export function DashboardLayout({ children, locale = "en" }: DashboardLayoutProp
   const [showFavoritesDialog, setShowFavoritesDialog] = useState(false);
   const [favoriteTags, setFavoriteTags] = useState(["Personal", "Work", "Banking"]);
   const [showSearchModal, setShowSearchModal] = useState(false);
+  const [showSupportModal, setShowSupportModal] = useState(false);
   const [currentLocale, setCurrentLocale] = useState(locale);
 
   const languageLabels: Record<string, string> = {
@@ -504,6 +507,13 @@ export function DashboardLayout({ children, locale = "en" }: DashboardLayoutProp
       path: "/dashboard",
       icon: <Home className="h-4 w-4" />
     });
+
+    enabledModules.push({
+      key: "drive",
+      labelKey: "drive",
+      path: "/dashboard/drive",
+      icon: <Folder className="h-4 w-4" />
+    });
 
     if (selectedProject.features.login?.enabled) {
       enabledModules.push({
@@ -599,7 +609,6 @@ export function DashboardLayout({ children, locale = "en" }: DashboardLayoutProp
   return (
     <div className="flex min-h-screen bg-background">
       <ExtensionMessenger />
-      <ChatWidget />
       <SearchModal
         isOpen={showSearchModal}
         onClose={() => setShowSearchModal(false)}
@@ -702,6 +711,23 @@ export function DashboardLayout({ children, locale = "en" }: DashboardLayoutProp
               <TooltipContent>Toggle theme</TooltipContent>
             </Tooltip>
           </TooltipProvider>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button 
+                  variant="ghost" 
+                  size="icon" 
+                  onClick={() => setShowSupportModal(true)}
+                  className="rounded-full h-8 w-8"
+                >
+                  <HelpCircle className="h-4 w-4" />
+                  <span className="sr-only">Support</span>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Support & Queries</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </header>
 
         <main className="flex flex-1">
@@ -711,6 +737,7 @@ export function DashboardLayout({ children, locale = "en" }: DashboardLayoutProp
 
       {showGeneratePassword && <GeneratePasswordDialog onClose={() => setShowGeneratePassword(false)} />}
       {showProjectDialog && <ProjectDialog onClose={() => setShowProjectDialog(false)} />}
+      {showSupportModal && <SupportModal onClose={() => setShowSupportModal(false)} />}
     </div>
   );
 }

packages/frontend-web/components/drive-content.tsx

@@ -3,6 +3,7 @@
 import { useState, useCallback, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { RootState } from "@/libs/Redux/store";
+import { useSearchParams, useRouter, usePathname } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import {
   Folder as FolderIcon,
@@ -69,6 +70,10 @@ interface DriveFile {
 
 export function DriveContent() {
   const { translate } = useTranslator();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
   const selectedWorkspaceId = useSelector(
     (state: RootState) => state.workspace.selectedWorkspaceId
   );
@@ -90,6 +95,7 @@ export function DriveContent() {
     getFolderPath,
     getSubfolders,
     uploadFile,
+    uploadFolder,
     renameFile,
     moveFile,
     deleteFiles,
@@ -98,6 +104,7 @@ export function DriveContent() {
     previewFile,
     isUploading,
     uploadProgress,
+    uploadStatusMessage,
     isDownloading,
     downloadProgress,
   } = useDriveManagement({
@@ -124,6 +131,28 @@ export function DriveContent() {
   const [previewBlobUrl, setPreviewBlobUrl] = useState<string | null>(null);
   const [previewingFile, setPreviewingFile] = useState<DriveFile | null>(null);
 
+  // Sync currentFolder with URL parameter
+  useEffect(() => {
+    const folderId = searchParams.get('folder');
+
+    if (!folderId) {
+      // No folder parameter means we're at root
+      setCurrentFolder(null);
+    } else if (folders.length > 0) {
+      // Find the folder by ID
+      const folder = folders.find(f => f.folder_id === folderId);
+
+      // Only update if the folder exists and is different from current
+      if (folder && folder.folder_id !== currentFolder?.folder_id) {
+        setCurrentFolder(folder);
+      } else if (!folder && currentFolder) {
+        // Folder doesn't exist, reset to root
+        setCurrentFolder(null);
+        router.replace(pathname);
+      }
+    }
+  }, [searchParams, folders, currentFolder, router, pathname, setCurrentFolder]);
+
   // Get current subfolders to display
   const currentSubfolders = getSubfolders(currentFolder?.folder_id || null);
 
@@ -134,22 +163,22 @@ export function DriveContent() {
   const breadcrumbPath = getFolderPath(currentFolder?.folder_id || null);
 
   const handleFolderClick = (folder: Folder) => {
-    setCurrentFolder(folder);
+    // Update URL with folder parameter to create browser history entry
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('folder', folder.folder_id);
+    router.push(`${pathname}?${params.toString()}`);
   };
 
   const handleBackClick = () => {
     if (!currentFolder) return;
 
-    if (currentFolder.parent_id) {
-      const parentFolder = folders.find(f => f.folder_id === currentFolder.parent_id);
-      setCurrentFolder(parentFolder || null);
-    } else {
-      setCurrentFolder(null);
-    }
+    // Use browser back to navigate through history
+    router.back();
   };
 
   const handleHomeClick = () => {
-    setCurrentFolder(null);
+    // Navigate to root by removing folder parameter
+    router.push(pathname);
   };
 
   const handleCreateFolder = () => {
@@ -300,7 +329,11 @@ export function DriveContent() {
               <Button
                 variant="ghost"
                 size="sm"
-                onClick={() => setCurrentFolder(folder)}
+                onClick={() => {
+                  const params = new URLSearchParams(searchParams.toString());
+                  params.set('folder', folder.folder_id);
+                  router.push(`${pathname}?${params.toString()}`);
+                }}
               >
                 {folder.name}
               </Button>
@@ -322,7 +355,7 @@ export function DriveContent() {
           )}
           <Button onClick={handleUploadFile} variant="outline" className="gap-2">
             <UploadIcon className="h-4 w-4" />
-            {translate("upload_file", "drive", { default: "Upload File" })}
+            {translate("upload", "drive", { default: "Upload" })}
           </Button>
           <Button onClick={handleCreateFolder} className="gap-2">
             <Plus className="h-4 w-4" />
@@ -332,7 +365,7 @@ export function DriveContent() {
       </div>
 
       {/* Folders and Files Grid */}
-      <div className="border border-border/30 rounded-md p-6">
+      <div className="border border-border/30 rounded-md p-6 min-h-[calc(100vh-16rem)]">
         {isLoading ? (
           <div className="p-8 text-center">
             <p className="text-muted-foreground">
@@ -423,7 +456,7 @@ export function DriveContent() {
             <div className="flex gap-2">
               <Button onClick={handleUploadFile} variant="outline" className="gap-2">
                 <UploadIcon className="h-4 w-4" />
-                {translate("upload_file", "drive", { default: "Upload File" })}
+                {translate("upload", "drive", { default: "Upload" })}
               </Button>
               <Button onClick={handleCreateFolder} className="gap-2">
                 <Plus className="h-4 w-4" />
@@ -471,8 +504,10 @@ export function DriveContent() {
         onFileUploaded={fetchFolders}
         currentFolder={currentFolder}
         uploadFile={uploadFile}
+        uploadFolder={uploadFolder}
         isUploading={isUploading}
         uploadProgress={uploadProgress}
+        uploadStatusMessage={uploadStatusMessage}
       />
 
       {selectedFile && (

packages/frontend-web/components/project-dialog.tsx

@@ -54,7 +54,6 @@ const defaultFeatures = {
   ssh_key: { enabled: false, is_client_side_encryption: false },
   env: { enabled: false, is_client_side_encryption: false },
   notes: { enabled: false, is_client_side_encryption: false },
-  drive: { enabled: false, is_client_side_encryption: false },
 };
 
 // Define featureMenuItems to include icons for each module
@@ -299,12 +298,6 @@ const featureMenuItems: {
       </svg>
     ),
   },
-  {
-    key: "drive",
-    labelKey: "drive",
-    path: "/dashboard/drive",
-    icon: <Folder className="h-4 w-4" />,
-  },
 ];
 
 export function ProjectDialog({ onClose, forceCreate = false }: ProjectDialogProps) {

packages/frontend-web/components/sidebar-nav.tsx

@@ -179,13 +179,6 @@ const navigationCategories: NavigationCategory[] = [
           </svg>
         ),
         feature_key: "notes"
-      },
-      {
-        key: "drive",
-        labelKey: "drive",
-        path: "/dashboard/drive",
-        icon: <Folder className="h-4 w-4" />,
-        feature_key: "drive"
       }
     ]
   },
@@ -361,8 +354,7 @@ const defaultFeatures = {
   email: { enabled: false, is_client_side_encryption: false },
   ssh_key: { enabled: false, is_client_side_encryption: false },
   env: { enabled: false, is_client_side_encryption: false },
-  notes: { enabled: false, is_client_side_encryption: false },
-  drive: { enabled: false, is_client_side_encryption: false }
+  notes: { enabled: false, is_client_side_encryption: false }
 }
 
 export function SidebarNav({
@@ -499,6 +491,20 @@ export function SidebarNav({
               {!isCollapsed && translate("overview", "dashboard")}
             </Link>
 
+            <Link
+              href={`/${currentLocale}/dashboard/drive`}
+              className={cn(
+                "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
+                pathname === `/${currentLocale}/dashboard/drive`
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+                isCollapsed && "justify-center"
+              )}
+            >
+              <Folder className="h-4 w-4" />
+              {!isCollapsed && translate("drive", "dashboard")}
+            </Link>
+
             {visibleCategories.map((category) => (
               <div key={category.id}>
                 {!isCollapsed && (