@stacksjs/defaults 0.70.362 → 0.70.365

package/resources/components/Dashboard/Content/CommentsDashboard.stx

@@ -116,6 +116,10 @@ function closeDelete(): void {
     deletingComment.set(null)
 }
 
+function deleteDescription(): string {
+  return `The comment from ${deletingComment()?.authorName || 'Anonymous'} cannot be restored.`
+}
+
 async function deleteComment(): Promise<void> {
   const comment = deletingComment()
   if (!comment)
@@ -166,7 +170,13 @@ onMount(() => {
   </section>
 </div>
 
-<div :if="Boolean(deletingComment())" class="flex fixed inset-y-0 right-0 z-[55] items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete comment dialog" class="absolute inset-0 bg-black/45" @click="closeDelete()"></button>
-  <section role="dialog" aria-modal="true" aria-label="Permanently delete comment?" class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl"><h2 class="font-semibold text-gray-900 text-lg dark:text-white">Permanently delete comment?</h2><p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">The comment from <strong>{{ deletingComment()?.authorName || 'Anonymous' }}</strong> cannot be restored.</p><div :if="deleteError()" role="alert" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ deleteError() }}</div><div class="flex gap-2 justify-end mt-6"><Button :disabled="deleting()" variant="secondary" @click="closeDelete()">Cancel</Button><Button :loading="deleting()" variant="danger" @click="deleteComment()">Delete permanently</Button></div></section>
-</div>
+<ConfirmDialog
+  :isOpen="Boolean(deletingComment())"
+  title="Permanently delete comment?"
+  :description="deleteDescription()"
+  confirmLabel="Delete permanently"
+  :busy="deleting()"
+  :error="deleteError()"
+  @close="closeDelete"
+  @confirm="deleteComment"
+/>

package/resources/components/Dashboard/Content/ContentTaxonomyDashboard.stx

@@ -11,6 +11,12 @@ interface TaxonomyRecord {
   postCount: number
 }
 
+interface TaxonomyDraft {
+  name: string
+  slug: string
+  description: string
+}
+
 const resource = useReactiveProp('resource', 'categories')
 const title = useReactiveProp('title', 'Categories')
 const description = useReactiveProp('description', '')
@@ -19,10 +25,6 @@ const loading = state(true)
 const loadError = state('')
 const search = state('')
 const dialogOpen = state(false)
-const name = state('')
-const slug = state('')
-const taxonomyDescription = state('')
-const slugTouched = state(false)
 const saving = state(false)
 const saveError = state('')
 const deletingRecord = state<TaxonomyRecord | null>(null)
@@ -63,33 +65,6 @@ function secondaryMetric(): number {
     : records().filter(record => record.active).length
 }
 
-function slugify(value: string): string {
-  return value
-    .normalize('NFKD')
-    .replace(/[\u0300-\u036F]/g, '')
-    .trim()
-    .toLowerCase()
-    .replace(/['"]/g, '')
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-}
-
-effect(() => {
-  if (!dialogOpen() || slugTouched())
-    return
-  slug.set(slugify(name()))
-})
-
-function markSlugTouched(): void {
-  slugTouched.set(true)
-}
-
-function normalizeSlug(): void {
-  const normalized = slugify(slug())
-  if (normalized !== slug())
-    slug.set(normalized)
-}
-
 async function loadRecords(): Promise<void> {
   loading.set(true)
   loadError.set('')
@@ -110,10 +85,6 @@ async function loadRecords(): Promise<void> {
 }
 
 function openCreate(): void {
-  name.set('')
-  slug.set('')
-  taxonomyDescription.set('')
-  slugTouched.set(false)
   saveError.set('')
   dialogOpen.set(true)
 }
@@ -123,17 +94,13 @@ function closeCreate(): void {
     dialogOpen.set(false)
 }
 
-async function createRecord(): Promise<void> {
+async function createRecord(draft: TaxonomyDraft): Promise<void> {
   saving.set(true)
   saveError.set('')
   try {
     await dashboardApi(`/api/dashboard/${resource()}`, {
       method: 'POST',
-      body: {
-        name: name().trim(),
-        slug: slugify(slug()),
-        description: taxonomyDescription().trim(),
-      },
+      body: draft,
     })
     dialogOpen.set(false)
     pushToast('success', `${singular().replace(/^\w/, letter => letter.toUpperCase())} created`)
@@ -157,6 +124,19 @@ function closeDelete(): void {
     deletingRecord.set(null)
 }
 
+function deleteTitle(): string {
+  return `Delete ${singular()}?`
+}
+
+function deleteDescription(): string {
+  const record = deletingRecord()
+  return record ? `${record.name} will be permanently removed.` : ''
+}
+
+function deleteLabel(): string {
+  return `Delete ${singular()}`
+}
+
 async function deleteRecord(): Promise<void> {
   const record = deletingRecord()
   if (!record)
@@ -218,17 +198,22 @@ onMount(() => {
   </section>
 </div>
 
-<div :if="dialogOpen()" class="flex fixed inset-y-0 right-0 z-[55] items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close taxonomy dialog" class="absolute inset-0 bg-black/45" @click="closeCreate()"></button>
-  <section role="dialog" aria-modal="true" :aria-label="'New ' + singular()" class="relative max-w-lg w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <form @submit.prevent="createRecord()">
-      <div class="p-6"><h2 class="font-semibold text-gray-900 text-lg dark:text-white">New {{ singular() }}</h2><div :if="saveError()" role="alert" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ saveError() }}</div><div class="grid gap-4 mt-5"><label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Name</span><input x-model="name" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label><label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Slug</span><input x-model="slug" required class="mt-1 px-3 py-2 w-full font-mono text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" @input="markSlugTouched" @blur="normalizeSlug" /></label><label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Description</span><textarea x-model="taxonomyDescription" rows="3" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"></textarea></label></div></div>
-      <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700"><Button :disabled="saving()" variant="secondary" @click="closeCreate()">Cancel</Button><Button type="submit" :disabled="saving() || !name().trim() || !slug().trim()" :loading="saving()">Create {{ singular() }}</Button></footer>
-    </form>
-  </section>
-</div>
-
-<div :if="Boolean(deletingRecord())" class="flex fixed inset-y-0 right-0 z-[55] items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete taxonomy dialog" class="absolute inset-0 bg-black/45" @click="closeDelete()"></button>
-  <section role="dialog" aria-modal="true" :aria-label="'Delete ' + singular() + '?'" class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl"><h2 class="font-semibold text-gray-900 text-lg dark:text-white">Delete {{ singular() }}?</h2><p class="mt-2 text-gray-500 text-sm dark:text-neutral-400"><strong>{{ deletingRecord()?.name || '' }}</strong> will be permanently removed.</p><div :if="deleteError()" role="alert" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ deleteError() }}</div><div class="flex gap-2 justify-end mt-6"><Button :disabled="deleting()" variant="secondary" @click="closeDelete()">Cancel</Button><Button :loading="deleting()" variant="danger" @click="deleteRecord()">Delete {{ singular() }}</Button></div></section>
-</div>
+<TaxonomyEditorDialog
+  :open="dialogOpen()"
+  :kind="singular()"
+  :busy="saving()"
+  :error="saveError()"
+  @close="closeCreate"
+  @submit="createRecord"
+/>
+
+<ConfirmDialog
+  :isOpen="Boolean(deletingRecord())"
+  :title="deleteTitle()"
+  :description="deleteDescription()"
+  :confirmLabel="deleteLabel()"
+  :busy="deleting()"
+  :error="deleteError()"
+  @close="closeDelete"
+  @confirm="deleteRecord"
+/>

package/resources/components/Dashboard/Content/CreateFolderDialog.stx

@@ -0,0 +1,45 @@
+<script client>
+const open = useReactiveProp('open', false)
+const location = useReactiveProp('location', 'Storage root')
+const busy = useReactiveProp('busy', false)
+const error = useReactiveProp('error', '')
+const folderName = state('')
+const emit = defineEmits()
+let wasOpen = false
+
+effect(() => {
+  const isOpen = open()
+  if (isOpen && !wasOpen)
+    folderName.set('')
+  wasOpen = isOpen
+})
+
+function close(): void {
+  if (!busy())
+    emit('close')
+}
+
+function submit(): void {
+  const name = folderName().trim()
+  if (name)
+    emit('submit', name)
+}
+</script>
+
+<Modal :isOpen="open()" title="Create folder" :description="'Add a folder inside ' + location() + '.'" size="sm" :closable="!busy()" @close="close">
+  <form id="create-folder-form" @submit.prevent="submit">
+    <label class="block">
+      <span class="font-medium text-stone-700 text-sm dark:text-neutral-200">Folder name</span>
+      <input x-model.trim="folderName" name="name" required maxlength="255" autocomplete="off" class="mt-1 px-3 py-2 w-full text-stone-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-stone-300 rounded-lg dark:border-neutral-700" />
+    </label>
+  </form>
+
+  <div :if="error()" role="alert" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
+
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button :disabled="busy()" variant="secondary" @click="close">Cancel</Button>
+      <Button type="submit" form="create-folder-form" :disabled="!folderName().trim()" :loading="busy()">Create folder</Button>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/Content/FileDetailsDrawer.stx

@@ -0,0 +1,31 @@
+<script client>
+interface FileItem {
+  id: string
+  name: string
+  type: string
+  size: number
+  path: string
+  lastModified: string | null
+  mime_type?: string
+  url?: string
+  thumbnail?: string
+  starred: false
+  shared: boolean
+}
+
+const item = useReactiveProp('item', null as FileItem | null)
+const disk = useReactiveProp('disk', '')
+const title = derived(() => item()?.name || 'File details')
+const description = derived(() => `File details · ${disk()} disk`)
+const emit = defineEmits()
+</script>
+
+<Drawer :isOpen="Boolean(item())" :title="title()" :description="description()" size="sm" @close="emit('close')">
+  <div class="p-5">
+    <MediaInfoPanel :item="item()" />
+    <Button :if="item()?.url" tag="a" :href="item()?.url" target="_blank" rel="noopener" fullWidth class="mt-5">
+      <span class="h-4 w-4 i-hugeicons-link-square-02"></span>
+      Open file
+    </Button>
+  </div>
+</Drawer>

package/resources/components/Dashboard/Content/FileManagerDashboard.stx

@@ -82,20 +82,15 @@ const scanLimit = state(1000)
 
 const selectedItem = state<FileItem | null>(null)
 const showCreateFolderModal = state(false)
-const newFolderName = state('')
 const creatingFolder = state(false)
 const createError = state('')
 const showUploadModal = state(false)
-const selectedFiles = state<File[]>([])
 const uploading = state(false)
 const uploadError = state('')
 const itemToDelete = state<FileItem | null>(null)
 const deleting = state(false)
 const deleteError = state('')
 
-const folderNameInput = useRef<HTMLInputElement>('fileManagerFolderName')
-const uploadInput = useRef<HTMLInputElement>('fileManagerUploadInput')
-
 const fileTypeIcons: Record<string, string> = {
   pdf: 'i-hugeicons-pdf-01',
   doc: 'i-hugeicons-doc-01',
@@ -176,14 +171,6 @@ const volumePercent = derived(() => {
 const capacityKnown = derived(() => stats().disk.totalBytes !== null && stats().disk.availableBytes !== null)
 const currentFolderLabel = derived(() => currentFolderPath() || 'Storage root')
 const emptyHint = derived(() => searchQuery() ? 'No items match your search.' : 'This folder is empty.')
-const selectedFilesLabel = derived(() => {
-  if (!selectedFiles().length)
-    return 'No files selected'
-  if (selectedFiles().length === 1)
-    return selectedFiles()[0]?.name || '1 file selected'
-  return `${selectedFiles().length} files selected`
-})
-
 const sidePanelClass = derived(() => `border-r border-black/[0.06] dark:border-white/[0.08] bg-[#F5F3EE]/70 dark:bg-neutral-900/40 backdrop-blur-2xl transition-all duration-300 ${showSidePanel() ? 'w-64' : 'w-0 overflow-hidden'}`)
 const segmentBase = 'inline-flex items-center px-2.5 py-1.5 rounded-md text-sm font-medium transition-colors'
 const segmentActive = 'bg-white dark:bg-neutral-700 text-stone-800 dark:text-white shadow-sm'
@@ -295,10 +282,8 @@ function toggleSortOrder(): void {
 }
 
 function openCreateFolder(): void {
-  newFolderName.set('')
   createError.set('')
   showCreateFolderModal.set(true)
-  void nextTick(() => folderNameInput.current?.focus())
 }
 
 function closeCreateFolder(): void {
@@ -306,10 +291,7 @@ function closeCreateFolder(): void {
     showCreateFolderModal.set(false)
 }
 
-async function createFolder(): Promise<void> {
-  const name = newFolderName().trim()
-  if (!name)
-    return
+async function createFolder(name: string): Promise<void> {
   creatingFolder.set(true)
   createError.set('')
   try {
@@ -329,47 +311,18 @@ async function createFolder(): Promise<void> {
   }
 }
 
-function resetUploadSelection(): void {
-  selectedFiles.set([])
-  if (uploadInput.current)
-    uploadInput.current.value = ''
-}
-
 function openUpload(): void {
   uploadError.set('')
-  resetUploadSelection()
   showUploadModal.set(true)
 }
 
 function closeUpload(): void {
-  if (!uploading()) {
+  if (!uploading())
     showUploadModal.set(false)
-    resetUploadSelection()
-  }
-}
-
-function acceptFiles(files: FileList | File[]): void {
-  selectedFiles.set(Array.from(files))
-  uploadError.set('')
 }
 
-function handleFileSelection(event: Event): void {
-  const input = event.target as HTMLInputElement
-  if (input.files)
-    acceptFiles(input.files)
-}
-
-function handleDrop(event: DragEvent): void {
-  if (event.dataTransfer?.files)
-    acceptFiles(event.dataTransfer.files)
-}
-
-function handleDragOver(): void {
-  uploadError.set('')
-}
-
-async function uploadFiles(): Promise<void> {
-  if (!selectedFiles().length)
+async function uploadFiles(files: File[]): Promise<void> {
+  if (!files.length)
     return
   uploading.set(true)
   uploadError.set('')
@@ -377,12 +330,11 @@ async function uploadFiles(): Promise<void> {
     const formData = new FormData()
     formData.append('disk', selectedDisk())
     formData.append('path', currentFolderPath())
-    for (const file of selectedFiles())
+    for (const file of files)
       formData.append('files', file)
     await dashboardApi('/api/dashboard/files/uploads', { method: 'POST', formData })
-    const count = selectedFiles().length
+    const count = files.length
     showUploadModal.set(false)
-    resetUploadSelection()
     pushToast('success', `${count} ${count === 1 ? 'file' : 'files'} uploaded`)
     await loadFiles()
   }
@@ -405,6 +357,17 @@ function closeDelete(): void {
     itemToDelete.set(null)
 }
 
+function deleteTitle(): string {
+  const item = itemToDelete()
+  return item ? `Delete ${item.name}` : 'Delete item'
+}
+
+function deleteDescription(): string {
+  return itemToDelete()?.type === 'folder'
+    ? 'The folder and everything inside it will be permanently deleted.'
+    : 'This file will be permanently deleted.'
+}
+
 async function deleteItem(): Promise<void> {
   const item = itemToDelete()
   if (!item)
@@ -430,25 +393,6 @@ async function deleteItem(): Promise<void> {
   }
 }
 
-function handleKeydown(event: KeyboardEvent): void {
-  if (event.key !== 'Escape')
-    return
-  if (itemToDelete()) {
-    closeDelete()
-    return
-  }
-  if (showUploadModal()) {
-    closeUpload()
-    return
-  }
-  if (showCreateFolderModal()) {
-    closeCreateFolder()
-    return
-  }
-  selectedItem.set(null)
-}
-
-useEventListener('keydown', handleKeydown)
 onMount(() => { void loadFiles() })
 </script>
 
@@ -568,37 +512,33 @@ onMount(() => { void loadFiles() })
   </div>
 </div>
 
-<aside :if="selectedItem()" aria-label="File details" class="flex fixed inset-y-0 right-0 z-40 flex-col max-w-sm w-full bg-white/95 dark:bg-neutral-900/95 border-black/[0.06] border-l dark:border-white/[0.08] shadow-2xl backdrop-blur-2xl">
-  <header class="flex items-center justify-between p-4 border-b border-black/[0.06] dark:border-white/[0.08]"><div><p class="font-semibold text-sm text-stone-900 dark:text-white">File details</p><p class="mt-0.5 text-stone-500 text-xs dark:text-neutral-400">{{ selectedDisk }} disk</p></div><Button variant="ghost" iconOnly ariaLabel="Close file details" @click="selectedItem.set(null)"><span class="block h-5 w-5 i-hugeicons-cancel-01"></span></Button></header>
-  <div class="overflow-y-auto flex-1 p-5"><MediaInfoPanel :item="selectedItem()" /><Button :if="selectedItem()?.url" tag="a" :href="selectedItem()?.url" target="_blank" rel="noopener" fullWidth class="mt-5"><span class="h-4 w-4 i-hugeicons-link-square-02"></span>Open file</Button></div>
-</aside>
-
-<div :if="showCreateFolderModal()" class="flex fixed inset-0 z-[55] items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close new folder dialog" class="absolute inset-0 bg-black/45" @click="closeCreateFolder()"></button>
-  <form role="dialog" aria-modal="true" aria-labelledby="file-manager-folder-title" class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-800 border border-stone-200 rounded-xl dark:border-neutral-700 shadow-xl" @submit.prevent="createFolder()">
-    <h2 id="file-manager-folder-title" class="font-semibold text-lg text-stone-900 dark:text-white">Create folder</h2><p class="mt-1 text-sm text-stone-500 dark:text-neutral-400">Add a folder inside {{ currentFolderLabel }}.</p>
-    <div :if="createError()" role="alert" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ createError() }}</div>
-    <label class="block mt-5"><span class="font-medium text-sm text-stone-700 dark:text-neutral-200">Folder name</span><input ref="fileManagerFolderName" x-model.trim="newFolderName" required maxlength="255" autocomplete="off" class="mt-1 px-3 py-2 w-full text-sm text-stone-900 dark:text-white bg-white dark:bg-neutral-900 border border-stone-300 rounded-lg dark:border-neutral-700" /></label>
-    <div class="flex gap-2 justify-end mt-6"><Button :disabled="creatingFolder()" variant="secondary" @click="closeCreateFolder()">Cancel</Button><Button type="submit" :disabled="creatingFolder() || !newFolderName().trim()" :loading="creatingFolder()">Create folder</Button></div>
-  </form>
-</div>
-
-<div :if="showUploadModal()" class="flex fixed inset-0 z-[55] items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close upload dialog" class="absolute inset-0 bg-black/45" @click="closeUpload()"></button>
-  <form role="dialog" aria-modal="true" aria-labelledby="file-manager-upload-title" class="relative p-6 max-w-lg w-full bg-white dark:bg-neutral-800 border border-stone-200 rounded-xl dark:border-neutral-700 shadow-xl" @submit.prevent="uploadFiles()">
-    <h2 id="file-manager-upload-title" class="font-semibold text-lg text-stone-900 dark:text-white">Upload files</h2><p class="mt-1 text-sm text-stone-500 dark:text-neutral-400">Upload to {{ currentFolderLabel }}. Each file can be up to 10 MB.</p>
-    <div :if="uploadError()" role="alert" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ uploadError() }}</div>
-    <label class="flex flex-col items-center justify-center mt-5 p-8 text-center border-2 border-dashed border-stone-300 rounded-xl dark:border-neutral-600 hover:border-blue-400 dark:hover:border-blue-600 cursor-pointer" @dragover.prevent="handleDragOver()" @drop.prevent="handleDrop($event)"><span class="h-10 w-10 text-stone-400 i-hugeicons-upload-01"></span><span class="mt-3 font-semibold text-sm text-stone-800 dark:text-white">Choose files or drop them here</span><span class="mt-1 text-stone-500 text-xs dark:text-neutral-400">{{ selectedFilesLabel }}</span><input ref="fileManagerUploadInput" type="file" class="sr-only" multiple @change="handleFileSelection($event)" /></label>
-    <ul :if="selectedFiles().length" class="overflow-y-auto mt-4 space-y-1 max-h-32 text-sm"><template :for="file in selectedFiles"><li class="flex gap-4 items-center justify-between px-3 py-2 bg-stone-50 dark:bg-neutral-900 rounded-lg"><span class="text-stone-700 truncate dark:text-neutral-200">{{ file.name }}</span><span class="flex-shrink-0 font-mono text-stone-400 text-xs dark:text-neutral-500">{{ formatFileSize(file.size) }}</span></li></template></ul>
-    <div class="flex gap-2 justify-end mt-6"><Button :disabled="uploading()" variant="secondary" @click="closeUpload()">Cancel</Button><Button type="submit" :disabled="uploading() || !selectedFiles().length" :loading="uploading()">Upload</Button></div>
-  </form>
-</div>
-
-<div :if="itemToDelete()" class="flex fixed inset-0 z-[60] items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete dialog" class="absolute inset-0 bg-black/45" @click="closeDelete()"></button>
-  <section role="alertdialog" aria-modal="true" aria-labelledby="file-manager-delete-title" class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-800 border border-stone-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <div class="flex gap-3 items-start"><span class="flex flex-shrink-0 items-center justify-center h-10 w-10 text-red-600 bg-red-50 dark:bg-red-950/40 rounded-full"><span class="h-5 w-5 i-hugeicons-delete-02"></span></span><div><h2 id="file-manager-delete-title" class="font-semibold text-lg text-stone-900 dark:text-white">Delete {{ itemToDelete()?.name }}</h2><p class="mt-1 text-sm text-stone-500 dark:text-neutral-400">{{ itemToDelete()?.type === 'folder' ? 'The folder and everything inside it will be permanently deleted.' : 'This file will be permanently deleted.' }}</p></div></div>
-    <div :if="deleteError()" role="alert" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ deleteError() }}</div>
-    <div class="flex gap-2 justify-end mt-6"><Button :disabled="deleting()" variant="secondary" @click="closeDelete()">Cancel</Button><Button :loading="deleting()" variant="danger" @click="deleteItem()">Delete permanently</Button></div>
-  </section>
-</div>
+<FileDetailsDrawer :item="selectedItem()" :disk="selectedDisk()" @close="selectedItem.set(null)" />
+
+<CreateFolderDialog
+  :open="showCreateFolderModal()"
+  :location="currentFolderLabel()"
+  :busy="creatingFolder()"
+  :error="createError()"
+  @close="closeCreateFolder"
+  @submit="createFolder"
+/>
+
+<FileUploadDialog
+  :open="showUploadModal()"
+  :location="currentFolderLabel()"
+  :busy="uploading()"
+  :error="uploadError()"
+  @close="closeUpload"
+  @submit="uploadFiles"
+/>
+
+<ConfirmDialog
+  :isOpen="Boolean(itemToDelete())"
+  :title="deleteTitle()"
+  :description="deleteDescription()"
+  confirmLabel="Delete permanently"
+  :busy="deleting()"
+  :error="deleteError()"
+  @close="closeDelete"
+  @confirm="deleteItem"
+/>

package/resources/components/Dashboard/Content/FileUploadDialog.stx

@@ -0,0 +1,89 @@
+<script client>
+const open = useReactiveProp('open', false)
+const location = useReactiveProp('location', 'Storage root')
+const busy = useReactiveProp('busy', false)
+const error = useReactiveProp('error', '')
+const files = state<File[]>([])
+const fileInput = useRef<HTMLInputElement>('dashboardFileUploadInput')
+const emit = defineEmits()
+let wasOpen = false
+
+const selectedFilesLabel = derived(() => {
+  if (!files().length)
+    return 'No files selected'
+  if (files().length === 1)
+    return files()[0]?.name || '1 file selected'
+  return `${files().length} files selected`
+})
+
+effect(() => {
+  const isOpen = open()
+  if (isOpen && !wasOpen)
+    reset()
+  wasOpen = isOpen
+})
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0)
+    return '0 Bytes'
+  const units = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+  const index = Math.min(units.length - 1, Math.floor(Math.log(bytes) / Math.log(1024)))
+  return `${Number.parseFloat((bytes / 1024 ** index).toFixed(2))} ${units[index]}`
+}
+
+function reset(): void {
+  files.set([])
+  if (fileInput.current)
+    fileInput.current.value = ''
+}
+
+function acceptFiles(value: FileList | File[]): void {
+  files.set(Array.from(value))
+}
+
+function handleFileSelection(event: Event): void {
+  const input = event.target as HTMLInputElement
+  if (input.files)
+    acceptFiles(input.files)
+}
+
+function handleDrop(event: DragEvent): void {
+  if (event.dataTransfer?.files)
+    acceptFiles(event.dataTransfer.files)
+}
+
+function close(): void {
+  if (!busy())
+    emit('close')
+}
+
+function submit(): void {
+  if (files().length)
+    emit('submit', [...files()])
+}
+</script>
+
+<Modal :isOpen="open()" title="Upload files" :description="'Upload to ' + location() + '. Each file can be up to 10 MB.'" :closable="!busy()" @close="close">
+  <form id="file-upload-form" @submit.prevent="submit">
+    <label class="flex flex-col items-center justify-center p-8 text-center border-2 border-dashed border-stone-300 rounded-xl dark:border-neutral-600 hover:border-blue-400 dark:hover:border-blue-600 cursor-pointer" @dragover.prevent @drop.prevent="handleDrop($event)">
+      <span class="h-10 w-10 text-stone-400 i-hugeicons-upload-01"></span>
+      <span class="mt-3 font-semibold text-stone-800 text-sm dark:text-white">Choose files or drop them here</span>
+      <span class="mt-1 text-stone-500 text-xs dark:text-neutral-400">{{ selectedFilesLabel() }}</span>
+      <input ref="dashboardFileUploadInput" name="files" type="file" class="sr-only" multiple @change="handleFileSelection($event)" />
+    </label>
+    <ul :if="files().length" class="overflow-y-auto mt-4 space-y-1 max-h-32 text-sm">
+      <template :for="file in files">
+        <li class="flex gap-4 items-center justify-between px-3 py-2 bg-stone-50 dark:bg-neutral-900 rounded-lg"><span class="text-stone-700 truncate dark:text-neutral-200">{{ file.name }}</span><span class="flex-shrink-0 font-mono text-stone-400 text-xs dark:text-neutral-500">{{ formatFileSize(file.size) }}</span></li>
+      </template>
+    </ul>
+  </form>
+
+  <div :if="error()" role="alert" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
+
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button :disabled="busy()" variant="secondary" @click="close">Cancel</Button>
+      <Button type="submit" form="file-upload-form" :disabled="!files().length" :loading="busy()">Upload</Button>
+    </div>
+  </template>
+</Modal>