Convert V2 UI to server-side data loading

- Convert page components to async server components using Drive_ls()
- Split V2DirectoryView into server component (data processing) and V2DirectoryClient (interactivity)
- Remove client-side useEffect + fetch API calls for directory listing
- Data now loaded server-side and passed as props for better static rendering
- Mutations still use page refresh to show updated data

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

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

4 files changed, 641 insertions, 685 deletions

diff --git a/frontend/app/v2/[...path]/page.tsx b/frontend/app/v2/[...path]/page.tsx
index 4af0167..3b4cbb8 100644
--- a/frontend/app/v2/[...path]/page.tsx
+++ b/frontend/app/v2/[...path]/page.tsx
@@ -1,4 +1,5 @@
 import { V2DirectoryView } from "@/components/v2/V2DirectoryView"
+import { Drive_ls } from "@/lib/drive_server"
 
 export default async function V2DirectoryPage({
   params,
@@ -7,6 +8,7 @@ export default async function V2DirectoryPage({
 }) {
   const { path: pathSegments } = await params
   const currentPath = '/' + (pathSegments?.join('/') || '')
-
-  return <V2DirectoryView path={currentPath} />
+  
+  const files = await Drive_ls(currentPath, false)
+  return <V2DirectoryView path={currentPath} files={files} />
 }
\ No newline at end of file
diff --git a/frontend/app/v2/page.tsx b/frontend/app/v2/page.tsx
index e693c77..09418a2 100644
--- a/frontend/app/v2/page.tsx
+++ b/frontend/app/v2/page.tsx
@@ -1,5 +1,7 @@
 import { V2DirectoryView } from "@/components/v2/V2DirectoryView"
+import { Drive_ls } from "@/lib/drive_server"
 
-export default function V2RootPage() {
-  return <V2DirectoryView path="/" />
+export default async function V2RootPage() {
+  const files = await Drive_ls("/", false)
+  return <V2DirectoryView path="/" files={files} />
 }
\ No newline at end of file
diff --git a/frontend/components/v2/V2DirectoryClient.tsx b/frontend/components/v2/V2DirectoryClient.tsx
new file mode 100644
index 0000000..0d9a63a
--- /dev/null
+++ b/frontend/components/v2/V2DirectoryClient.tsx
@@ -0,0 +1,591 @@
+"use client"
+
+import type React from "react"
+import { useState, useRef } from "react"
+import Link from "next/link"
+import {
+  ChevronRight,
+  File,
+  Folder,
+  Upload,
+  Trash2,
+  Move,
+  MoreHorizontal,
+  HardDrive,
+  Edit,
+  Link as LinkIcon,
+  Info,
+  LogIn,
+  LogOut,
+} from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Progress } from "@/components/ui/progress"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Checkbox } from "@/components/ui/checkbox"
+import { toast } from "@/hooks/use-toast"
+import { DriveLsEntry } from "@/lib/drive_types"
+import { UPLOAD_MAX_FILE_SIZE, UPLOAD_MAX_FILES } from "@/lib/constants"
+import { V2MoveDialog } from "./V2MoveDialog"
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 Bytes"
+  const k = 1024
+  const sizes = ["Bytes", "KB", "MB", "GB"]
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
+}
+
+function formatDate(timestamp: number): string {
+  return new Date(timestamp * 1000).toISOString().split('T')[0]
+}
+
+function formatDateTime(timestamp: number): string {
+  const date = new Date(timestamp * 1000)
+  const dateStr = date.toISOString().split('T')[0]
+  const timeStr = date.toLocaleTimeString('en-US', { 
+    hour12: false, 
+    hour: '2-digit', 
+    minute: '2-digit',
+    second: '2-digit'
+  })
+  return `${dateStr} at ${timeStr}`
+}
+
+interface Breadcrumb {
+  name: string
+  path: string
+}
+
+interface V2DirectoryClientProps {
+  path: string
+  files: DriveLsEntry[]
+  breadcrumbs: Breadcrumb[]
+}
+
+export function V2DirectoryClient({ path, files, breadcrumbs }: V2DirectoryClientProps) {
+  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set())
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false)
+  const [infoDialogOpen, setInfoDialogOpen] = useState(false)
+  const [moveDialogOpen, setMoveDialogOpen] = useState(false)
+  const [currentItem, setCurrentItem] = useState<DriveLsEntry | null>(null)
+  const [newName, setNewName] = useState("")
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [uploading, setUploading] = useState(false)
+
+  const [isLoggedIn, setIsLoggedIn] = useState(true) // Mock logged in state
+
+  const maxStorage = 1073741824 // 1GB
+  const usedStorage = 0 // TODO: Calculate from files if needed
+  const storagePercentage = (usedStorage / maxStorage) * 100
+
+  const toggleFileSelection = (filePath: string) => {
+    const newSelected = new Set(selectedFiles)
+    if (newSelected.has(filePath)) {
+      newSelected.delete(filePath)
+    } else {
+      newSelected.add(filePath)
+    }
+    setSelectedFiles(newSelected)
+  }
+
+  const selectAll = () => {
+    setSelectedFiles(new Set(files.map(file => file.path)))
+  }
+
+  const deselectAll = () => {
+    setSelectedFiles(new Set())
+  }
+
+  const openRenameDialog = (item: DriveLsEntry) => {
+    setCurrentItem(item)
+    setNewName(item.path.split('/').pop() || '')
+    setRenameDialogOpen(true)
+  }
+
+  const openInfoDialog = (item: DriveLsEntry) => {
+    setCurrentItem(item)
+    setInfoDialogOpen(true)
+  }
+
+  const openMoveDialog = () => {
+    setMoveDialogOpen(true)
+  }
+
+  const copyPermalink = (item: DriveLsEntry) => {
+    const permalink = `${window.location.origin}/drive/file/${item.path}`
+    navigator.clipboard.writeText(permalink).then(() => {
+      toast({
+        title: "Link copied!",
+        description: "Permalink has been copied to clipboard",
+      })
+    })
+  }
+
+  const handleRename = () => {
+    if (currentItem && newName.trim()) {
+      // TODO: Implement actual rename API call
+      setRenameDialogOpen(false)
+      setCurrentItem(null)
+      setNewName("")
+      toast({
+        title: "Renamed successfully",
+        description: `Item renamed to "${newName.trim()}"`,
+      })
+      // Refresh page to show changes
+      window.location.reload()
+    }
+  }
+
+  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const uploadedFiles = event.target.files
+    if (!uploadedFiles || uploadedFiles.length === 0) return
+
+    // Validate file count
+    if (uploadedFiles.length > UPLOAD_MAX_FILES) {
+      toast({
+        title: "Too many files",
+        description: `You can only upload up to ${UPLOAD_MAX_FILES} files at once`,
+        variant: "destructive"
+      })
+      return
+    }
+
+    // Validate file sizes
+    const oversizedFiles = Array.from(uploadedFiles).filter(file => file.size > UPLOAD_MAX_FILE_SIZE)
+    if (oversizedFiles.length > 0) {
+      toast({
+        title: "Files too large",
+        description: `Maximum file size is ${formatFileSize(UPLOAD_MAX_FILE_SIZE)}. Found ${oversizedFiles.length} oversized file(s)`,
+        variant: "destructive"
+      })
+      return
+    }
+
+    setUploading(true)
+    let successCount = 0
+    let errorCount = 0
+
+    try {
+      // Upload files sequentially to the current directory
+      for (const file of Array.from(uploadedFiles)) {
+        try {
+          const formData = new FormData()
+          formData.append('file', file)
+          
+          // Construct the upload path (current path + filename)
+          const uploadPath = path === '/' ? file.name : `${path.slice(1)}/${file.name}`
+          // Encode each path segment for the URL - Next.js will decode it back for the API
+          const encodedPath = uploadPath.split('/').map(encodeURIComponent).join('/')
+          
+          const response = await fetch(`/api/fs/${encodedPath}`, {
+            method: 'PUT',
+            headers: {
+              'AUTH': '1' // Development auth header
+            },
+            body: formData
+          })
+
+          if (!response.ok) {
+            const error = await response.json()
+            throw new Error(error.error || `Upload failed with status ${response.status}`)
+          }
+
+          successCount++
+        } catch (error) {
+          console.error(`Failed to upload ${file.name}:`, error)
+          errorCount++
+        }
+      }
+
+      // Show results
+      if (successCount > 0) {
+        toast({
+          title: "Upload successful",
+          description: `${successCount} file(s) uploaded successfully${errorCount > 0 ? `, ${errorCount} failed` : ''}`
+        })
+        
+        // Refresh page to show changes
+        window.location.reload()
+      }
+
+      if (errorCount > 0 && successCount === 0) {
+        toast({
+          title: "Upload failed",
+          description: `All ${errorCount} file(s) failed to upload`,
+          variant: "destructive"
+        })
+      }
+
+    } catch (error) {
+      console.error('Upload error:', error)
+      toast({
+        title: "Upload failed",
+        description: error instanceof Error ? error.message : 'Unknown error occurred',
+        variant: "destructive"
+      })
+    } finally {
+      setUploading(false)
+      // Reset the input
+      event.target.value = ''
+    }
+  }
+
+  const handleDelete = async (itemPaths: string[]) => {
+    // TODO: Implement actual delete API calls
+    setSelectedFiles(new Set())
+    
+    toast({
+      title: "Deleted successfully",
+      description: `${itemPaths.length} item(s) deleted`,
+    })
+    
+    // Refresh page to show changes
+    window.location.reload()
+  }
+
+  const handleLogin = () => {
+    // Redirect to external auth page (configured via env var)
+    const authUrl = process.env.NEXT_PUBLIC_AUTH_URL || "/auth/login"
+    window.location.href = authUrl
+  }
+
+  const handleLogout = () => {
+    // Handle logout (would typically clear tokens, etc.)
+    setIsLoggedIn(false)
+    // Could also redirect to logout endpoint
+  }
+
+  const handleMove = async (destinationPath: string) => {
+    // TODO: Implement actual move API calls
+    console.log('Moving files:', Array.from(selectedFiles), 'to:', destinationPath)
+    setSelectedFiles(new Set())
+    setMoveDialogOpen(false)
+    
+    toast({
+      title: "Moved successfully",
+      description: `${selectedFiles.size} item(s) moved to ${destinationPath}`,
+    })
+    
+    // Refresh page to show changes
+    window.location.reload()
+  }
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      {/* Header with Breadcrumbs */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <HardDrive className="h-6 w-6" />
+            <h1 className="text-2xl font-bold">Drive V2</h1>
+          </div>
+          
+          {/* Breadcrumbs */}
+          <nav className="flex items-center gap-1 text-sm text-muted-foreground">
+            {breadcrumbs.map((crumb, index) => (
+              <div key={crumb.path} className="flex items-center gap-1">
+                {index > 0 && <ChevronRight className="h-3 w-3" />}
+                {index === breadcrumbs.length - 1 ? (
+                  <span className="text-foreground font-medium">{crumb.name}</span>
+                ) : (
+                  <Link 
+                    href={crumb.path}
+                    className="hover:text-foreground transition-colors"
+                  >
+                    {crumb.name}
+                  </Link>
+                )}
+              </div>
+            ))}
+          </nav>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          <Button 
+            onClick={() => fileInputRef.current?.click()}
+            disabled={uploading}
+          >
+            <Upload className="mr-2 h-4 w-4" />
+            {uploading ? "Uploading..." : "Upload Files"}
+          </Button>
+          {isLoggedIn ? (
+            <Button variant="outline" onClick={handleLogout}>
+              <LogOut className="mr-2 h-4 w-4" />
+              Logout
+            </Button>
+          ) : (
+            <Button onClick={handleLogin}>
+              <LogIn className="mr-2 h-4 w-4" />
+              Login
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Storage Info */}
+      <div className="bg-card rounded-lg border p-4">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-sm font-medium">Storage Usage</span>
+          <span className="text-sm text-muted-foreground">
+            {formatFileSize(usedStorage)} of {formatFileSize(maxStorage)} used
+          </span>
+        </div>
+        <Progress value={storagePercentage} className="h-2" />
+        <div className="flex justify-between text-xs text-muted-foreground mt-1">
+          <span>{storagePercentage.toFixed(1)}% used</span>
+          <span>{formatFileSize(maxStorage - usedStorage)} available</span>
+        </div>
+      </div>
+
+      {/* Bulk Actions */}
+      {selectedFiles.size > 0 && (
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <span className="text-sm font-medium text-blue-900">
+              {selectedFiles.size} item{selectedFiles.size !== 1 ? "s" : ""} selected
+            </span>
+            <Button variant="outline" size="sm" onClick={deselectAll}>
+              Deselect All
+            </Button>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={openMoveDialog}
+            >
+              <Move className="mr-2 h-4 w-4" />
+              Move Selected
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handleDelete(Array.from(selectedFiles))}
+              className="text-red-600 hover:text-red-700"
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              Delete Selected
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* File Table */}
+      <div className="border rounded-lg">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[40px]"></TableHead>
+              <TableHead>Name</TableHead>
+              <TableHead>Size</TableHead>
+              <TableHead>Modified</TableHead>
+              <TableHead className="w-[50px]">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {files.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
+                  This directory is empty
+                </TableCell>
+              </TableRow>
+            ) : (
+              files.map((file) => {
+                const isSelected = selectedFiles.has(file.path)
+                const fileName = file.path.split('/').pop() || file.path
+                
+                return (
+                  <TableRow 
+                    key={file.path} 
+                    className={`hover:bg-muted/50 ${isSelected ? "bg-muted/30" : ""}`}
+                  >
+                    <TableCell className="w-[40px]" onClick={(e) => e.stopPropagation()}>
+                      <Checkbox 
+                        checked={isSelected} 
+                        onCheckedChange={() => toggleFileSelection(file.path)} 
+                      />
+                    </TableCell>
+                    <TableCell className="font-medium">
+                      <div className="flex items-center gap-2">
+                        {file.type === "dir" ? (
+                          <>
+                            <Folder className="h-4 w-4 text-blue-500" />
+                            <Link 
+                              href={`/v2${file.path}`}
+                              className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer"
+                            >
+                              {fileName}
+                            </Link>
+                          </>
+                        ) : (
+                          <>
+                            <File className="h-4 w-4 text-gray-500" />
+                            {file.blob ? (
+                              <a
+                                href={`/blob/${file.blob}?filename=${encodeURIComponent(fileName)}`}
+                                className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                              >
+                                {fileName}
+                              </a>
+                            ) : (
+                              <span>{fileName}</span>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell>{formatFileSize(file.size || 0)}</TableCell>
+                    <TableCell>{formatDate(file.lastmod)}</TableCell>
+                    <TableCell onClick={(e) => e.stopPropagation()}>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem onClick={() => openRenameDialog(file)}>
+                            <Edit className="mr-2 h-4 w-4" />
+                            Rename
+                          </DropdownMenuItem>
+                          <DropdownMenuItem onClick={() => copyPermalink(file)}>
+                            <LinkIcon className="mr-2 h-4 w-4" />
+                            Copy Permalink
+                          </DropdownMenuItem>
+                          <DropdownMenuItem onClick={() => openInfoDialog(file)}>
+                            <Info className="mr-2 h-4 w-4" />
+                            Info
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem 
+                            onClick={() => handleDelete([file.path])} 
+                            className="text-red-600"
+                          >
+                            <Trash2 className="mr-2 h-4 w-4" />
+                            Delete
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                )
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Rename Dialog */}
+      <Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Rename {currentItem?.type === "dir" ? "Folder" : "File"}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="newName">New Name</Label>
+              <Input
+                id="newName"
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    handleRename()
+                  }
+                }}
+                placeholder="Enter new name"
+              />
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button variant="outline" onClick={() => setRenameDialogOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={handleRename} disabled={!newName.trim()}>
+                Rename
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Info Dialog */}
+      <Dialog open={infoDialogOpen} onOpenChange={setInfoDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              {currentItem?.type === "dir" ? (
+                <Folder className="h-5 w-5 text-blue-500" />
+              ) : (
+                <File className="h-5 w-5 text-gray-500" />
+              )}
+              {currentItem?.type === "dir" ? "Folder" : "File"} Information
+            </DialogTitle>
+          </DialogHeader>
+          {currentItem && (
+            <div className="space-y-4">
+              <div className="space-y-3">
+                <div>
+                  <Label className="text-sm font-medium text-muted-foreground">Name</Label>
+                  <p className="text-sm break-words">{currentItem.path.split('/').pop()}</p>
+                </div>
+                <div>
+                  <Label className="text-sm font-medium text-muted-foreground">Size</Label>
+                  <p className="text-sm">{formatFileSize(currentItem.size || 0)}</p>
+                </div>
+                <div>
+                  <Label className="text-sm font-medium text-muted-foreground">Modified</Label>
+                  <p className="text-sm">{formatDateTime(currentItem.lastmod)}</p>
+                </div>
+                <div>
+                  <Label className="text-sm font-medium text-muted-foreground">Modified By</Label>
+                  <p className="text-sm">{currentItem.author}</p>
+                </div>
+                <div>
+                  <Label className="text-sm font-medium text-muted-foreground">Type</Label>
+                  <p className="text-sm capitalize">{currentItem.type}</p>
+                </div>
+                <div>
+                  <Label className="text-sm font-medium text-muted-foreground">Path</Label>
+                  <p className="text-sm font-mono text-xs">{currentItem.path}</p>
+                </div>
+              </div>
+              <div className="flex justify-end">
+                <Button variant="outline" onClick={() => setInfoDialogOpen(false)}>
+                  Close
+                </Button>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Move Dialog */}
+      <V2MoveDialog
+        open={moveDialogOpen}
+        onOpenChange={setMoveDialogOpen}
+        selectedCount={selectedFiles.size}
+        onMove={handleMove}
+      />
+
+      <input 
+        ref={fileInputRef} 
+        type="file" 
+        multiple 
+        className="hidden" 
+        onChange={handleFileUpload} 
+      />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/frontend/components/v2/V2DirectoryView.tsx b/frontend/components/v2/V2DirectoryView.tsx
index 03532e8..97fa9a8 100644
--- a/frontend/components/v2/V2DirectoryView.tsx
+++ b/frontend/components/v2/V2DirectoryView.tsx
@@ -1,694 +1,55 @@
-"use client"
-
-import type React from "react"
-import { useState, useRef, useEffect } from "react"
-import Link from "next/link"
-import {
-  ChevronRight,
-  File,
-  Folder,
-  Upload,
-  Trash2,
-  Move,
-  MoreHorizontal,
-  HardDrive,
-  Edit,
-  Link as LinkIcon,
-  Info,
-  LogIn,
-  LogOut,
-  Home,
-} from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { Progress } from "@/components/ui/progress"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuSeparator,
-} from "@/components/ui/dropdown-menu"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Checkbox } from "@/components/ui/checkbox"
-import { toast } from "@/hooks/use-toast"
 import { DriveLsEntry } from "@/lib/drive_types"
-import { UPLOAD_MAX_FILE_SIZE, UPLOAD_MAX_FILES } from "@/lib/constants"
-import { V2MoveDialog } from "./V2MoveDialog"
-
-function formatFileSize(bytes: number): string {
-  if (bytes === 0) return "0 Bytes"
-  const k = 1024
-  const sizes = ["Bytes", "KB", "MB", "GB"]
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
-}
-
-function formatDate(timestamp: number): string {
-  return new Date(timestamp * 1000).toISOString().split('T')[0]
-}
-
-function formatDateTime(timestamp: number): string {
-  const date = new Date(timestamp * 1000)
-  const dateStr = date.toISOString().split('T')[0]
-  const timeStr = date.toLocaleTimeString('en-US', { 
-    hour12: false, 
-    hour: '2-digit', 
-    minute: '2-digit',
-    second: '2-digit'
-  })
-  return `${dateStr} at ${timeStr}`
-}
+import { V2DirectoryClient } from "./V2DirectoryClient"
 
 interface V2DirectoryViewProps {
   path: string
+  files: DriveLsEntry[]
 }
 
-export function V2DirectoryView({ path }: V2DirectoryViewProps) {
-  const [files, setFiles] = useState<DriveLsEntry[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set())
-  const [renameDialogOpen, setRenameDialogOpen] = useState(false)
-  const [infoDialogOpen, setInfoDialogOpen] = useState(false)
-  const [moveDialogOpen, setMoveDialogOpen] = useState(false)
-  const [currentItem, setCurrentItem] = useState<DriveLsEntry | null>(null)
-  const [newName, setNewName] = useState("")
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const [uploading, setUploading] = useState(false)
-
-  const [isLoggedIn, setIsLoggedIn] = useState(true) // Mock logged in state
-
-  const maxStorage = 1073741824 // 1GB
-  const usedStorage = 0 // TODO: Calculate from files if needed
-  const storagePercentage = (usedStorage / maxStorage) * 100
-
-  // Generate breadcrumbs from path
-  const generateBreadcrumbs = (currentPath: string) => {
-    if (currentPath === '/') {
-      return [{ name: 'Root', path: '/v2' }]
-    }
-    
-    const parts = currentPath.split('/').filter(Boolean)
-    const breadcrumbs = [{ name: 'Root', path: '/v2' }]
-    
-    let accumulatedPath = ''
-    parts.forEach((part, index) => {
-      accumulatedPath += '/' + part
-      breadcrumbs.push({
-        name: decodeURIComponent(part), // Decode URL encoded characters
-        path: '/v2' + accumulatedPath
-      })
-    })
-    
-    return breadcrumbs
-  }
-
-  const breadcrumbs = generateBreadcrumbs(path)
-
-  // Sort files: directories first, then files, all alphabetically
-  const sortFiles = (files: DriveLsEntry[]): DriveLsEntry[] => {
-    return [...files].sort((a, b) => {
-      // Directories first, then files
-      if (a.type === "dir" && b.type === "file") return -1;
-      if (a.type === "file" && b.type === "dir") return 1;
-      
-      // Both same type, sort alphabetically by name (case-insensitive)
-      const aName = a.path.split('/').pop() || a.path;
-      const bName = b.path.split('/').pop() || b.path;
-      return aName.toLowerCase().localeCompare(bName.toLowerCase());
-    });
-  };
-
-  // Function to refresh directory contents
-  const refreshDirectory = async () => {
-    try {
-      const encodedPath = path === '/' ? '' : path.split('/').filter(Boolean).map(encodeURIComponent).join('/')
-      const response = await fetch(`/api/fs/${encodedPath}`)
-      if (!response.ok) {
-        throw new Error(`Failed to fetch directory: ${response.statusText}`)
-      }
-      const entries = await response.json()
-      setFiles(sortFiles(entries)) // Sort the files before setting state
-    } catch (err) {
-      console.error('Error refreshing directory:', err)
-      toast({
-        title: "Failed to refresh",
-        description: "Could not refresh directory contents",
-        variant: "destructive"
-      })
-    }
-  }
-
-  // Load directory contents
-  useEffect(() => {
-    async function loadDirectoryData() {
-      try {
-        setLoading(true)
-        setError(null)
-        await refreshDirectory()
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load directory data')
-        console.error('Error loading directory data:', err)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    loadDirectoryData()
-  }, [path])
-
-  const toggleFileSelection = (filePath: string) => {
-    const newSelected = new Set(selectedFiles)
-    if (newSelected.has(filePath)) {
-      newSelected.delete(filePath)
-    } else {
-      newSelected.add(filePath)
-    }
-    setSelectedFiles(newSelected)
-  }
-
-  const selectAll = () => {
-    setSelectedFiles(new Set(files.map(file => file.path)))
-  }
-
-  const deselectAll = () => {
-    setSelectedFiles(new Set())
-  }
-
-  const openRenameDialog = (item: DriveLsEntry) => {
-    setCurrentItem(item)
-    setNewName(item.path.split('/').pop() || '')
-    setRenameDialogOpen(true)
-  }
-
-  const openInfoDialog = (item: DriveLsEntry) => {
-    setCurrentItem(item)
-    setInfoDialogOpen(true)
-  }
-
-  const openMoveDialog = () => {
-    setMoveDialogOpen(true)
-  }
-
-  const copyPermalink = (item: DriveLsEntry) => {
-    const permalink = `${window.location.origin}/drive/file/${item.path}`
-    navigator.clipboard.writeText(permalink).then(() => {
-      toast({
-        title: "Link copied!",
-        description: "Permalink has been copied to clipboard",
-      })
-    })
-  }
-
-  const handleRename = () => {
-    if (currentItem && newName.trim()) {
-      // TODO: Implement actual rename API call
-      const updatedFiles = files.map((file) => {
-        if (file.path === currentItem.path) {
-          return { ...file, path: file.path.replace(/[^/]+$/, newName.trim()) }
-        }
-        return file
-      })
-      setFiles(sortFiles(updatedFiles)) // Sort after rename
-      setRenameDialogOpen(false)
-      setCurrentItem(null)
-      setNewName("")
-      toast({
-        title: "Renamed successfully",
-        description: `Item renamed to "${newName.trim()}"`,
-      })
-    }
-  }
-
-  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const uploadedFiles = event.target.files
-    if (!uploadedFiles || uploadedFiles.length === 0) return
-
-    // Validate file count
-    if (uploadedFiles.length > UPLOAD_MAX_FILES) {
-      toast({
-        title: "Too many files",
-        description: `You can only upload up to ${UPLOAD_MAX_FILES} files at once`,
-        variant: "destructive"
-      })
-      return
-    }
-
-    // Validate file sizes
-    const oversizedFiles = Array.from(uploadedFiles).filter(file => file.size > UPLOAD_MAX_FILE_SIZE)
-    if (oversizedFiles.length > 0) {
-      toast({
-        title: "Files too large",
-        description: `Maximum file size is ${formatFileSize(UPLOAD_MAX_FILE_SIZE)}. Found ${oversizedFiles.length} oversized file(s)`,
-        variant: "destructive"
-      })
-      return
-    }
-
-    setUploading(true)
-    let successCount = 0
-    let errorCount = 0
-
-    try {
-      // Upload files sequentially to the current directory
-      for (const file of Array.from(uploadedFiles)) {
-        try {
-          const formData = new FormData()
-          formData.append('file', file)
-          
-          // Construct the upload path (current path + filename)
-          // The path should already be properly decoded by Next.js page params
-          const uploadPath = path === '/' ? file.name : `${path.slice(1)}/${file.name}`
-          // Encode each path segment for the URL - Next.js will decode it back for the API
-          const encodedPath = uploadPath.split('/').map(encodeURIComponent).join('/')
-          
-          const response = await fetch(`/api/fs/${encodedPath}`, {
-            method: 'PUT',
-            headers: {
-              'AUTH': '1' // Development auth header
-            },
-            body: formData
-          })
-
-          if (!response.ok) {
-            const error = await response.json()
-            throw new Error(error.error || `Upload failed with status ${response.status}`)
-          }
-
-          successCount++
-        } catch (error) {
-          console.error(`Failed to upload ${file.name}:`, error)
-          errorCount++
-        }
-      }
-
-      // Show results
-      if (successCount > 0) {
-        toast({
-          title: "Upload successful",
-          description: `${successCount} file(s) uploaded successfully${errorCount > 0 ? `, ${errorCount} failed` : ''}`
-        })
-        
-        // Refresh the directory
-        await refreshDirectory()
-      }
-
-      if (errorCount > 0 && successCount === 0) {
-        toast({
-          title: "Upload failed",
-          description: `All ${errorCount} file(s) failed to upload`,
-          variant: "destructive"
-        })
-      }
-
-    } catch (error) {
-      console.error('Upload error:', error)
-      toast({
-        title: "Upload failed",
-        description: error instanceof Error ? error.message : 'Unknown error occurred',
-        variant: "destructive"
-      })
-    } finally {
-      setUploading(false)
-      // Reset the input
-      event.target.value = ''
-    }
-  }
-
-  const handleDelete = async (itemPaths: string[]) => {
-    // TODO: Implement actual delete API calls
-    const updatedFiles = files.filter(file => !itemPaths.includes(file.path))
-    setFiles(sortFiles(updatedFiles)) // Sort after delete (though order shouldn't change for deletion)
-    // Remove deleted items from selection
-    const newSelected = new Set(selectedFiles)
-    itemPaths.forEach((path) => newSelected.delete(path))
-    setSelectedFiles(newSelected)
-    
-    toast({
-      title: "Deleted successfully",
-      description: `${itemPaths.length} item(s) deleted`,
+// Generate breadcrumbs from path
+function generateBreadcrumbs(currentPath: string) {
+  if (currentPath === '/') {
+    return [{ name: 'Root', path: '/v2' }]
+  }
+  
+  const parts = currentPath.split('/').filter(Boolean)
+  const breadcrumbs = [{ name: 'Root', path: '/v2' }]
+  
+  let accumulatedPath = ''
+  parts.forEach((part, index) => {
+    accumulatedPath += '/' + part
+    breadcrumbs.push({
+      name: decodeURIComponent(part), // Decode URL encoded characters
+      path: '/v2' + accumulatedPath
     })
-  }
-
-  const handleLogin = () => {
-    // Redirect to external auth page (configured via env var)
-    const authUrl = process.env.NEXT_PUBLIC_AUTH_URL || "/auth/login"
-    window.location.href = authUrl
-  }
-
-  const handleLogout = () => {
-    // Handle logout (would typically clear tokens, etc.)
-    setIsLoggedIn(false)
-    // Could also redirect to logout endpoint
-  }
+  })
+  
+  return breadcrumbs
+}
 
-  const handleMove = async (destinationPath: string) => {
-    // TODO: Implement actual move API calls
-    console.log('Moving files:', Array.from(selectedFiles), 'to:', destinationPath)
-    setSelectedFiles(new Set())
-    setMoveDialogOpen(false)
+// Sort files: directories first, then files, all alphabetically
+function sortFiles(files: DriveLsEntry[]): DriveLsEntry[] {
+  return [...files].sort((a, b) => {
+    // Directories first, then files
+    if (a.type === "dir" && b.type === "file") return -1;
+    if (a.type === "file" && b.type === "dir") return 1;
     
-    toast({
-      title: "Moved successfully",
-      description: `${selectedFiles.size} item(s) moved to ${destinationPath}`,
-    })
-    
-    // Refresh directory after move
-    await refreshDirectory()
-  }
+    // Both same type, sort alphabetically by name (case-insensitive)
+    const aName = a.path.split('/').pop() || a.path;
+    const bName = b.path.split('/').pop() || b.path;
+    return aName.toLowerCase().localeCompare(bName.toLowerCase());
+  });
+}
 
+export function V2DirectoryView({ path, files }: V2DirectoryViewProps) {
+  const sortedFiles = sortFiles(files)
+  const breadcrumbs = generateBreadcrumbs(path)
+  
   return (
-    <div className="container mx-auto p-6 space-y-6">
-      {/* Header with Breadcrumbs */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <div className="flex items-center gap-2">
-            <HardDrive className="h-6 w-6" />
-            <h1 className="text-2xl font-bold">Drive V2</h1>
-          </div>
-          
-          {/* Breadcrumbs */}
-          <nav className="flex items-center gap-1 text-sm text-muted-foreground">
-            {breadcrumbs.map((crumb, index) => (
-              <div key={crumb.path} className="flex items-center gap-1">
-                {index > 0 && <ChevronRight className="h-3 w-3" />}
-                {index === breadcrumbs.length - 1 ? (
-                  <span className="text-foreground font-medium">{crumb.name}</span>
-                ) : (
-                  <Link 
-                    href={crumb.path}
-                    className="hover:text-foreground transition-colors"
-                  >
-                    {crumb.name}
-                  </Link>
-                )}
-              </div>
-            ))}
-          </nav>
-        </div>
-        
-        <div className="flex items-center gap-2">
-          <Button 
-            onClick={() => fileInputRef.current?.click()}
-            disabled={uploading}
-          >
-            <Upload className="mr-2 h-4 w-4" />
-            {uploading ? "Uploading..." : "Upload Files"}
-          </Button>
-          {isLoggedIn ? (
-            <Button variant="outline" onClick={handleLogout}>
-              <LogOut className="mr-2 h-4 w-4" />
-              Logout
-            </Button>
-          ) : (
-            <Button onClick={handleLogin}>
-              <LogIn className="mr-2 h-4 w-4" />
-              Login
-            </Button>
-          )}
-        </div>
-      </div>
-
-      {/* Loading State */}
-      {loading && (
-        <div className="flex items-center justify-center py-8">
-          <div className="text-center">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-2"></div>
-            <p className="text-sm text-muted-foreground">Loading directory contents...</p>
-          </div>
-        </div>
-      )}
-
-      {/* Error State */}
-      {error && (
-        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
-          <div className="text-sm text-red-800">
-            <strong>Error loading directory:</strong> {error}
-          </div>
-        </div>
-      )}
-
-      {/* Storage Info */}
-      {!loading && !error && (
-        <div className="bg-card rounded-lg border p-4">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-sm font-medium">Storage Usage</span>
-            <span className="text-sm text-muted-foreground">
-              {formatFileSize(usedStorage)} of {formatFileSize(maxStorage)} used
-            </span>
-          </div>
-          <Progress value={storagePercentage} className="h-2" />
-          <div className="flex justify-between text-xs text-muted-foreground mt-1">
-            <span>{storagePercentage.toFixed(1)}% used</span>
-            <span>{formatFileSize(maxStorage - usedStorage)} available</span>
-          </div>
-        </div>
-      )}
-
-      {/* Bulk Actions */}
-      {!loading && !error && selectedFiles.size > 0 && (
-        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-center justify-between">
-          <div className="flex items-center gap-4">
-            <span className="text-sm font-medium text-blue-900">
-              {selectedFiles.size} item{selectedFiles.size !== 1 ? "s" : ""} selected
-            </span>
-            <Button variant="outline" size="sm" onClick={deselectAll}>
-              Deselect All
-            </Button>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={openMoveDialog}
-            >
-              <Move className="mr-2 h-4 w-4" />
-              Move Selected
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => handleDelete(Array.from(selectedFiles))}
-              className="text-red-600 hover:text-red-700"
-            >
-              <Trash2 className="mr-2 h-4 w-4" />
-              Delete Selected
-            </Button>
-          </div>
-        </div>
-      )}
-
-      {/* File Table */}
-      {!loading && !error && (
-        <div className="border rounded-lg">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-[40px]"></TableHead>
-                <TableHead>Name</TableHead>
-                <TableHead>Size</TableHead>
-                <TableHead>Modified</TableHead>
-                <TableHead className="w-[50px]">Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {files.length === 0 ? (
-                <TableRow>
-                  <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
-                    This directory is empty
-                  </TableCell>
-                </TableRow>
-              ) : (
-                files.map((file) => {
-                  const isSelected = selectedFiles.has(file.path)
-                  const fileName = file.path.split('/').pop() || file.path
-                  
-                  return (
-                    <TableRow 
-                      key={file.path} 
-                      className={`hover:bg-muted/50 ${isSelected ? "bg-muted/30" : ""}`}
-                    >
-                      <TableCell className="w-[40px]" onClick={(e) => e.stopPropagation()}>
-                        <Checkbox 
-                          checked={isSelected} 
-                          onCheckedChange={() => toggleFileSelection(file.path)} 
-                        />
-                      </TableCell>
-                      <TableCell className="font-medium">
-                        <div className="flex items-center gap-2">
-                          {file.type === "dir" ? (
-                            <>
-                              <Folder className="h-4 w-4 text-blue-500" />
-                              <Link 
-                                href={`/v2${file.path}`}
-                                className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer"
-                              >
-                                {fileName}
-                              </Link>
-                            </>
-                          ) : (
-                            <>
-                              <File className="h-4 w-4 text-gray-500" />
-                              {file.blob ? (
-                                <a
-                                  href={`/blob/${file.blob}?filename=${encodeURIComponent(fileName)}`}
-                                  className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer"
-                                  target="_blank"
-                                  rel="noopener noreferrer"
-                                >
-                                  {fileName}
-                                </a>
-                              ) : (
-                                <span>{fileName}</span>
-                              )}
-                            </>
-                          )}
-                        </div>
-                      </TableCell>
-                      <TableCell>{formatFileSize(file.size || 0)}</TableCell>
-                      <TableCell>{formatDate(file.lastmod)}</TableCell>
-                      <TableCell onClick={(e) => e.stopPropagation()}>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-                              <MoreHorizontal className="h-4 w-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem onClick={() => openRenameDialog(file)}>
-                              <Edit className="mr-2 h-4 w-4" />
-                              Rename
-                            </DropdownMenuItem>
-                            <DropdownMenuItem onClick={() => copyPermalink(file)}>
-                              <LinkIcon className="mr-2 h-4 w-4" />
-                              Copy Permalink
-                            </DropdownMenuItem>
-                            <DropdownMenuItem onClick={() => openInfoDialog(file)}>
-                              <Info className="mr-2 h-4 w-4" />
-                              Info
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem 
-                              onClick={() => handleDelete([file.path])} 
-                              className="text-red-600"
-                            >
-                              <Trash2 className="mr-2 h-4 w-4" />
-                              Delete
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </TableCell>
-                    </TableRow>
-                  )
-                })
-              )}
-            </TableBody>
-          </Table>
-        </div>
-      )}
-
-      {/* Rename Dialog */}
-      <Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Rename {currentItem?.type === "dir" ? "Folder" : "File"}</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div>
-              <Label htmlFor="newName">New Name</Label>
-              <Input
-                id="newName"
-                value={newName}
-                onChange={(e) => setNewName(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") {
-                    handleRename()
-                  }
-                }}
-                placeholder="Enter new name"
-              />
-            </div>
-            <div className="flex justify-end gap-2">
-              <Button variant="outline" onClick={() => setRenameDialogOpen(false)}>
-                Cancel
-              </Button>
-              <Button onClick={handleRename} disabled={!newName.trim()}>
-                Rename
-              </Button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* Info Dialog */}
-      <Dialog open={infoDialogOpen} onOpenChange={setInfoDialogOpen}>
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              {currentItem?.type === "dir" ? (
-                <Folder className="h-5 w-5 text-blue-500" />
-              ) : (
-                <File className="h-5 w-5 text-gray-500" />
-              )}
-              {currentItem?.type === "dir" ? "Folder" : "File"} Information
-            </DialogTitle>
-          </DialogHeader>
-          {currentItem && (
-            <div className="space-y-4">
-              <div className="space-y-3">
-                <div>
-                  <Label className="text-sm font-medium text-muted-foreground">Name</Label>
-                  <p className="text-sm break-words">{currentItem.path.split('/').pop()}</p>
-                </div>
-                <div>
-                  <Label className="text-sm font-medium text-muted-foreground">Size</Label>
-                  <p className="text-sm">{formatFileSize(currentItem.size || 0)}</p>
-                </div>
-                <div>
-                  <Label className="text-sm font-medium text-muted-foreground">Modified</Label>
-                  <p className="text-sm">{formatDateTime(currentItem.lastmod)}</p>
-                </div>
-                <div>
-                  <Label className="text-sm font-medium text-muted-foreground">Modified By</Label>
-                  <p className="text-sm">{currentItem.author}</p>
-                </div>
-                <div>
-                  <Label className="text-sm font-medium text-muted-foreground">Type</Label>
-                  <p className="text-sm capitalize">{currentItem.type}</p>
-                </div>
-                <div>
-                  <Label className="text-sm font-medium text-muted-foreground">Path</Label>
-                  <p className="text-sm font-mono text-xs">{currentItem.path}</p>
-                </div>
-              </div>
-              <div className="flex justify-end">
-                <Button variant="outline" onClick={() => setInfoDialogOpen(false)}>
-                  Close
-                </Button>
-              </div>
-            </div>
-          )}
-        </DialogContent>
-      </Dialog>
-
-      {/* Move Dialog */}
-      <V2MoveDialog
-        open={moveDialogOpen}
-        onOpenChange={setMoveDialogOpen}
-        selectedCount={selectedFiles.size}
-        onMove={handleMove}
-      />
-
-      <input 
-        ref={fileInputRef} 
-        type="file" 
-        multiple 
-        className="hidden" 
-        onChange={handleFileUpload} 
-      />
-    </div>
+    <V2DirectoryClient 
+      path={path} 
+      files={sortedFiles} 
+      breadcrumbs={breadcrumbs}
+    />
   )
 }
\ No newline at end of file