Excalidraw Manager

"use sidebar"
import React, { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import {
  Plus,
  Search,
  MoreVertical,
  Trash2,
  File as FileIcon,
  Loader2,
  ExternalLink,
  Pencil
} from "lucide-react"

export default function ExcalidrawManager() {
  const [files, setFiles] = useState([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState("")
  const [renameDialogOpen, setRenameDialogOpen] = useState(false)
  const [fileToRename, setFileToRename] = useState(null)
  const [newName, setNewName] = useState("")

  const loadFiles = async () => {
    try {
      setLoading(true)
      // Read root directory
      const fileNames = await eidos.currentSpace.fs.readdir("~")

      // Filter for .excalidraw files
      const excalidrawFiles = fileNames.filter(f => f.endsWith(".excalidraw"))
      const pngFiles = new Set(fileNames.filter(f => f.endsWith(".png")))

      // Get stats for each file
      const filesWithStats = await Promise.all(
        excalidrawFiles.map(async (name) => {
          const pngName = name.replace(/\.excalidraw$/, ".png")
          const hasThumbnail = pngFiles.has(pngName)
          try {
            const stat = await eidos.currentSpace.fs.stat(`~/${name}`)
            let mtime = stat.mtime ? new Date(stat.mtime) : new Date()
            if (isNaN(mtime.getTime())) mtime = new Date()
            return { name, ...stat, mtime, hasThumbnail, pngName }
          } catch (e) {
            return { name, mtime: new Date(), hasThumbnail, pngName }
          }
        })
      )

      // Sort by modified time desc
      filesWithStats.sort((a, b) => b.mtime - a.mtime)
      setFiles(filesWithStats)
    } catch (error) {
      console.error("Failed to load files", error)
      eidos.currentSpace.notify("Failed to load files: " + error.message, "error")
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    loadFiles()
  }, [])

  const handleCreate = async () => {
    const name = `Untitled ${new Date().toISOString().slice(0, 10)} ${Date.now().toString().slice(-4)}.excalidraw`
    const content = JSON.stringify({
      type: "excalidraw",
      version: 2,
      source: "https://excalidraw.com",
      elements: [],
      appState: { viewBackgroundColor: "#ffffff", gridSize: null },
      files: {}
    })

    try {
      await eidos.currentSpace.fs.writeFile(`~/${name}`, content)
      await loadFiles()
      eidos.currentSpace.notify("Created new drawing")
    } catch (error) {
      eidos.currentSpace.notify("Failed to create file", "error")
    }
  }

  const handleDelete = async (name) => {
    if (!confirm(`Delete ${name}?`)) return
    try {
      await eidos.currentSpace.fs.unlink(`~/${name}`)
      await loadFiles()
      eidos.currentSpace.notify("File deleted")
    } catch (error) {
      eidos.currentSpace.notify("Failed to delete file", "error")
    }
  }

  const openRenameDialog = (file) => {
    setFileToRename(file)
    setNewName(file.name.replace(".excalidraw", ""))
    setRenameDialogOpen(true)
  }

  const handleRenameSubmit = async () => {
    if (!fileToRename || !newName.trim()) return

    const oldName = fileToRename.name
    let finalNewName = newName.trim()
    if (!finalNewName.endsWith(".excalidraw")) {
      finalNewName += ".excalidraw"
    }

    if (oldName === finalNewName) {
      setRenameDialogOpen(false)
      return
    }

    try {
      await eidos.currentSpace.fs.rename(`~/${oldName}`, `~/${finalNewName}`)
      
      if (fileToRename.hasThumbnail) {
        const oldPng = oldName.replace(".excalidraw", ".png")
        const newPng = finalNewName.replace(".excalidraw", ".png")
        try {
            await eidos.currentSpace.fs.rename(`~/${oldPng}`, `~/${newPng}`)
        } catch (e) {
            console.warn("Failed to rename thumbnail", e)
        }
      }

      await loadFiles()
      eidos.currentSpace.notify("File renamed")
      setRenameDialogOpen(false)
    } catch (error) {
      console.error(error)
      eidos.currentSpace.notify("Failed to rename file: " + error.message, "error")
    }
  }

  const filteredFiles = files.filter(f => f.name.toLowerCase().includes(search.toLowerCase()))

  return (
    <div className="p-4 md:p-6 h-screen flex flex-col bg-background text-foreground">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6 md:mb-8">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-primary/10 rounded-lg text-primary">
            <FileIcon className="w-6 h-6" />
          </div>
          <div>
            <h1 className="text-2xl font-bold tracking-tight">Excalidraw</h1>
            <p className="text-sm text-muted-foreground">Manage your drawings</p>
          </div>
        </div>
        <Button onClick={handleCreate} className="w-full sm:w-auto gap-2">
          <Plus className="w-4 h-4" /> New Drawing
        </Button>
      </div>

      <div className="flex gap-4 mb-6">
        <div className="relative flex-1 md:max-w-md">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search drawings..."
            className="pl-9"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
        </div>
      </div>

      {loading ? (
        <div className="flex-1 flex items-center justify-center">
          <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
        </div>
      ) : filteredFiles.length === 0 ? (
        <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
          <div className="p-4 bg-muted rounded-full mb-4">
            <FileIcon className="w-8 h-8 opacity-50" />
          </div>
          <p>No Excalidraw files found</p>
          <Button variant="link" onClick={handleCreate}>Create your first drawing</Button>
        </div>
      ) : (
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4 overflow-y-auto pb-10 pr-2">
          {filteredFiles.map((file) => (
            <Card key={file.name} className="group relative hover:shadow-md transition-all cursor-pointer overflow-hidden border-muted">
              <div
                className="aspect-[1.4] bg-muted/30 flex items-center justify-center border-b relative overflow-hidden"
                onClick={() => eidos.currentSpace.navigate(`/file-handler#~/${file.name}`)}
              >
                {file.hasThumbnail ? (
                  <img
                    src={`/~/${file.pngName}`}
                    alt={file.name}
                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                  />
                ) : (
                  <>
                    <div className="absolute inset-0 bg-grid-black/[0.02] dark:bg-grid-white/[0.02]" />
                    <span className="text-4xl select-none transform group-hover:scale-110 transition-transform duration-300">🎨</span>
                  </>
                )}

                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors items-center justify-center opacity-0 group-hover:opacity-100 hidden md:flex">
                  <Button variant="secondary" size="sm" className="gap-2">
                    <ExternalLink className="w-3 h-3" /> Open
                  </Button>
                </div>
              </div>
              <CardContent className="p-3">
                <div className="flex justify-between items-start gap-2">
                  <div className="min-w-0 flex-1">
                    <h3 className="font-medium truncate text-sm" title={file.name}>
                      {file.name.replace(".excalidraw", "")}
                    </h3>
                    <p className="text-xs text-muted-foreground mt-1">
                      {file.mtime.toLocaleString()}
                    </p>
                  </div>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon" className="h-7 w-7 -mr-2 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
                        <MoreVertical className="w-3 h-3" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem onClick={() => eidos.currentSpace.navigate(`/file-handler#~/${file.name}`)}>
                        <ExternalLink className="w-4 h-4 mr-2" />
                        Open
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={(e) => {
                        e.stopPropagation()
                        openRenameDialog(file)
                      }}>
                        <Pencil className="w-4 h-4 mr-2" />
                        Rename
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        className="text-destructive focus:text-destructive"
                        onClick={(e) => {
                          e.stopPropagation()
                          handleDelete(file.name)
                        }}
                      >
                        <Trash2 className="w-4 h-4 mr-2" />
                        Delete
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      <Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Rename Drawing</DialogTitle>
            <DialogDescription>
              Enter a new name for your drawing.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="name" className="text-right">
                Name
              </Label>
              <Input
                id="name"
                value={newName}
                onChange={(e) => setNewName(e.target.value)}
                className="col-span-3"
                onKeyDown={(e) => {
                  if (e.key === "Enter") handleRenameSubmit()
                }}
                autoFocus
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setRenameDialogOpen(false)}>Cancel</Button>
            <Button onClick={handleRenameSubmit}>Save changes</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}