Add Create Folder functionality with dialog interface

- New /api/mkdir endpoint for authenticated folder creation
- Create Folder button positioned left of Upload Files button
- Modal dialog with input validation and keyboard shortcuts
- Proper error handling and success notifications
- Uses existing CLI Drive_mkdir function for backend operations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

2 files changed, 137 insertions, 0 deletions

diff --git a/frontend/app/api/mkdir/route.ts b/frontend/app/api/mkdir/route.ts
new file mode 100644
index 0000000..18e1bbc
--- /dev/null
+++ b/frontend/app/api/mkdir/route.ts
@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { Auth_get_user } from '@/lib/auth'
+import { Drive_mkdir } from '@/lib/drive_server'
+
+// POST /api/mkdir - Create directory
+export async function POST(request: NextRequest) {
+  try {
+    // Check user authentication
+    const user = await Auth_get_user()
+    if (!user.isLoggedIn) {
+      return NextResponse.json({ error: 'User not authenticated' }, { status: 401 })
+    }
+
+    // Parse request body to get directory info
+    const body = await request.json()
+    const { path, name } = body
+
+    if (!path || typeof path !== 'string') {
+      return NextResponse.json({ error: 'Path is required' }, { status: 400 })
+    }
+
+    if (!name || typeof name !== 'string' || name.trim() === '') {
+      return NextResponse.json({ error: 'Directory name is required' }, { status: 400 })
+    }
+
+    // Construct full directory path
+    const dirName = name.trim()
+    const fullPath = path === '/' ? `/${dirName}` : `${path}/${dirName}`
+
+    // Create directory using Drive_mkdir
+    try {
+      await Drive_mkdir(fullPath, user.email)
+      
+      return NextResponse.json({
+        success: true,
+        message: `Directory "${dirName}" created successfully`,
+        path: fullPath
+      })
+
+    } catch (error) {
+      console.error(`Failed to create directory ${fullPath}:`, error)
+      return NextResponse.json({
+        error: error instanceof Error ? error.message : 'Failed to create directory'
+      }, { status: 500 })
+    }
+
+  } catch (error) {
+    console.error('Mkdir API error:', error)
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
\ No newline at end of file
diff --git a/frontend/components/drive/DriveDirectoryClient.tsx b/frontend/components/drive/DriveDirectoryClient.tsx
index 4657141..eee83c3 100644
--- a/frontend/components/drive/DriveDirectoryClient.tsx
+++ b/frontend/components/drive/DriveDirectoryClient.tsx
@@ -17,6 +17,7 @@ import {
   Info,
   LogIn,
   LogOut,
+  FolderPlus,
 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
@@ -77,8 +78,10 @@ export function DriveDirectoryClient({ path, files, breadcrumbs }: DriveDirector
   const [renameDialogOpen, setRenameDialogOpen] = useState(false)
   const [infoDialogOpen, setInfoDialogOpen] = useState(false)
   const [moveDialogOpen, setMoveDialogOpen] = useState(false)
+  const [createFolderDialogOpen, setCreateFolderDialogOpen] = useState(false)
   const [currentItem, setCurrentItem] = useState<DriveLsEntry | null>(null)
   const [newName, setNewName] = useState("")
+  const [newFolderName, setNewFolderName] = useState("")
   const fileInputRef = useRef<HTMLInputElement>(null)
   const [uploading, setUploading] = useState(false)
 
@@ -294,6 +297,46 @@ export function DriveDirectoryClient({ path, files, breadcrumbs }: DriveDirector
     window.location.reload()
   }
 
+  const handleCreateFolder = async () => {
+    if (!newFolderName.trim()) return
+
+    try {
+      const response = await fetch('/api/mkdir', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          path: path,
+          name: newFolderName.trim()
+        })
+      })
+
+      const result = await response.json()
+
+      if (response.ok) {
+        setCreateFolderDialogOpen(false)
+        setNewFolderName("")
+        toast({
+          title: "Folder created",
+          description: result.message,
+        })
+        
+        // Refresh page to show changes
+        window.location.reload()
+      } else {
+        throw new Error(result.error || `Failed to create folder`)
+      }
+    } catch (error) {
+      console.error('Create folder error:', error)
+      toast({
+        title: "Failed to create folder",
+        description: error instanceof Error ? error.message : 'Unknown error occurred',
+        variant: "destructive"
+      })
+    }
+  }
+
   return (
     <div className="container mx-auto p-6 space-y-6">
       {/* Header with Breadcrumbs */}
@@ -326,6 +369,13 @@ export function DriveDirectoryClient({ path, files, breadcrumbs }: DriveDirector
         
         <div className="flex items-center gap-2">
           <Button 
+            variant="secondary"
+            onClick={() => setCreateFolderDialogOpen(true)}
+          >
+            <FolderPlus className="mr-2 h-4 w-4" />
+            Create Folder
+          </Button>
+          <Button 
             onClick={() => fileInputRef.current?.click()}
             disabled={uploading}
           >
@@ -593,6 +643,39 @@ export function DriveDirectoryClient({ path, files, breadcrumbs }: DriveDirector
         onMove={handleMove}
       />
 
+      {/* Create Folder Dialog */}
+      <Dialog open={createFolderDialogOpen} onOpenChange={setCreateFolderDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create New Folder</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 pt-2">
+            <div className="space-y-2">
+              <Label htmlFor="folderName">Folder Name</Label>
+              <Input
+                id="folderName"
+                value={newFolderName}
+                onChange={(e) => setNewFolderName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    handleCreateFolder()
+                  }
+                }}
+                placeholder="Enter folder name"
+              />
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button variant="outline" onClick={() => setCreateFolderDialogOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={handleCreateFolder} disabled={!newFolderName.trim()}>
+                Create Folder
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
       <input 
         ref={fileInputRef} 
         type="file"