feat: structure 2

2026-04-07 00:15:00 +02:00
parent 46a0d7aba8
commit 6d1b227fb9
15 changed files with 7433 additions and 94 deletions
--- a/frontend/src/components/dialogs/AddSourceFolderDialog.tsx
+++ b/frontend/src/components/dialogs/AddSourceFolderDialog.tsx
@@ -0,0 +1,146 @@
+import { useState } from 'react'
+import { X, FolderPlus, AlertCircle } from 'lucide-react'
+import clsx from 'clsx'
+
+interface AddSourceFolderDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  onAdd: (path: string, recursive: boolean) => Promise<void>
+}
+
+export function AddSourceFolderDialog({ isOpen, onClose, onAdd }: AddSourceFolderDialogProps) {
+  const [folderPath, setFolderPath] = useState('')
+  const [recursive, setRecursive] = useState(true)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    if (!folderPath.trim()) {
+      setError('Please enter a folder path')
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      await onAdd(folderPath.trim(), recursive)
+      setFolderPath('')
+      setRecursive(true)
+      onClose()
+    } catch (err: any) {
+      setError(err.message || 'Failed to add source folder')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleClose = () => {
+    if (!isLoading) {
+      setFolderPath('')
+      setError(null)
+      onClose()
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div 
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={handleClose}
+      />
+      
+      {/* Dialog */}
+      <div className="relative z-10 w-full max-w-md rounded-lg bg-surface border border-border p-6 shadow-xl">
+        {/* Header */}
+        <div className="mb-4 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <FolderPlus className="h-5 w-5 text-primary" />
+            <h2 className="text-lg font-semibold text-text">Add Source Folder</h2>
+          </div>
+          <button
+            onClick={handleClose}
+            disabled={isLoading}
+            className="rounded p-1 text-text-muted hover:bg-surface-2 hover:text-text disabled:opacity-50"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Path Input */}
+          <div>
+            <label htmlFor="folderPath" className="mb-1 block text-sm text-text-muted">
+              Folder Path
+            </label>
+            <input
+              id="folderPath"
+              type="text"
+              value={folderPath}
+              onChange={(e) => setFolderPath(e.target.value)}
+              placeholder="/path/to/photos"
+              disabled={isLoading}
+              className={clsx(
+                'w-full rounded border bg-bg px-3 py-2 text-sm text-text placeholder-text-faint',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+                'disabled:opacity-50',
+                error ? 'border-reject' : 'border-border'
+              )}
+            />
+            <p className="mt-1 text-xs text-text-muted">
+              Enter the full path to the folder containing your photos
+            </p>
+          </div>
+
+          {/* Recursive Checkbox */}
+          <div className="flex items-center gap-2">
+            <input
+              id="recursive"
+              type="checkbox"
+              checked={recursive}
+              onChange={(e) => setRecursive(e.target.checked)}
+              disabled={isLoading}
+              className="h-4 w-4 rounded border-border bg-bg text-primary focus:ring-2 focus:ring-primary focus:ring-offset-0"
+            />
+            <label htmlFor="recursive" className="text-sm text-text">
+              Include subfolders
+            </label>
+          </div>
+
+          {/* Error Message */}
+          {error && (
+            <div className="flex items-center gap-2 rounded bg-reject/10 p-3 text-sm text-reject">
+              <AlertCircle className="h-4 w-4 flex-shrink-0" />
+              <span>{error}</span>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={handleClose}
+              disabled={isLoading}
+              className="rounded bg-surface-2 px-4 py-2 text-sm text-text hover:bg-surface-offset disabled:opacity-50"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isLoading || !folderPath.trim()}
+              className="rounded bg-primary px-4 py-2 text-sm text-white hover:bg-primary/90 disabled:opacity-50"
+            >
+              {isLoading ? 'Adding...' : 'Add Folder'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}