feat: modernize mobile layout with shadcn/ui tabs and improved navigation

  - Replace custom button-based mobile navigation with professional shadcn/ui tabs
  - Add @radix-ui/react-tabs dependency for accessible tab functionality
  - Refactor MobileLayout component to use Tabs, TabsList, TabsTrigger, and TabsContent
  - Implement proper tab state management with automatic editor switching
  - Add vertical divider between tabs and user avatar in mobile toolbar
  - Preserve master password functionality in mobile UserButton menu
  - Split MainLayout into separate Desktop and Mobile layout components
  - Update folder panel to show full width on mobile, fixed width on desktop
  - Hide desktop user profile section on mobile devices
  - Add scroll support to ChangeMasterPasswordDialog for better mobile UX
  - Remove back arrow from notes panel on mobile for cleaner interface

Author: batalabs

package.json

@@ -67,6 +67,7 @@
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@tailwindcss/vite": "^4.1.11",
     "@tiptap/extension-code-block-lowlight": "^2.26.1",
     "@tiptap/extension-task-item": "^2.26.1",

pnpm-lock.yaml

@@ -206,7 +206,7 @@ export default function FolderPanel({
 
   return (
     <>
-      <div className="border-border bg-background flex h-full w-64 flex-col overflow-hidden border-r transition-all duration-300">
+      <div className="border-border bg-background flex h-full w-full md:w-64 flex-col overflow-hidden border-r transition-all duration-300">
         <div className="border-border h-17 shrink-0 border-b p-3">
           <div className="flex items-center justify-between">
             <h3 className="text-foreground text-lg font-semibold">Folders</h3>
@@ -286,7 +286,7 @@ export default function FolderPanel({
           <ThemeToggle />
         </div>
 
-        <div className="border-border mt-auto border-t p-4">
+        <div className="border-border mt-auto border-t p-4 hidden md:block">
           <div className="flex items-center gap-3">
             <UserButton
               appearance={{

src/components/folders/index.tsx

@@ -0,0 +1,32 @@
+import FolderPanel from '@/components/folders';
+import NotesPanel from '@/components/notes/NotesPanel';
+import Index from '@/components/editor';
+import type { FolderPanelProps, FilesPanelProps, EditorProps } from '@/types/layout';
+
+interface DesktopLayoutProps {
+  folderSidebarOpen: boolean;
+  filesPanelOpen: boolean;
+  folderPanelProps: FolderPanelProps;
+  filesPanelProps: FilesPanelProps;
+  editorProps: EditorProps;
+}
+
+export function DesktopLayout({
+  folderSidebarOpen,
+  filesPanelOpen,
+  folderPanelProps,
+  filesPanelProps,
+  editorProps,
+}: DesktopLayoutProps) {
+  return (
+    <div className="bg-background flex h-screen">
+      <FolderPanel isOpen={folderSidebarOpen} {...folderPanelProps} />
+      <NotesPanel isOpen={filesPanelOpen} {...filesPanelProps} />
+      <div className="flex flex-1 flex-col">
+        <main className="flex-1 overflow-hidden">
+          <Index {...editorProps} />
+        </main>
+      </div>
+    </div>
+  );
+}