@stacksjs/defaults 0.70.229 → 0.70.230

package/views/dashboard/content/files/index.stx

@@ -2,705 +2,7 @@
 
 @section('content')
 @title('Dashboard - File Manager')
-<script server>
-// Seed the grid from a real Storage disk (stacksjs/stacks#245). Defaults to the
-// `public` disk, which carries real media + public URLs so image/video previews
-// render. Best-effort: any failure leaves the payload empty and the client
-// script falls back to the built-in demo tree below.
-let serverFileTreeJson = ''
-try {
-  const { buildStorageFileTree } = await import('../../../../resources/functions/dashboard/files-tree')
-  const tree = await buildStorageFileTree({ disk: 'public' })
-  if (tree)
-    serverFileTreeJson = JSON.stringify(tree)
-}
-catch {}
-</script>
-<div class="flex flex-col h-full">
-  <div data-file-tree hidden>{{ serverFileTreeJson }}</div>
-  <div class="flex flex-1">
-    <div :class="sidePanelClass()">
-      <div :show="showSidePanel" class="flex flex-col h-full">
-        <div class="p-4 border-b border-black/5 dark:border-white/10">
-          <h3 class="font-semibold text-sm text-stone-500 tracking-wider uppercase dark:text-neutral-400">Storage</h3>
-          <div class="mt-2" style="height: 120px;"><canvas id="files_storage_chart"></canvas></div>
-          <div class="mt-2 text-stone-500 text-xs dark:text-neutral-400">
-            <div class="flex justify-between py-0.5"><span>Used</span><span>{{ usedLabel }}</span></div>
-            <div class="flex justify-between py-0.5"><span>Available</span><span>{{ availableLabel }}</span></div>
-            <div class="flex justify-between py-0.5 font-medium text-stone-700 dark:text-neutral-300"><span>Total</span><span>{{ totalLabel }}</span></div>
-          </div>
-        </div>
 
-        <div class="p-4 border-b border-black/5 dark:border-white/10">
-          <h3 class="font-semibold text-sm text-stone-500 tracking-wider uppercase dark:text-neutral-400">Storage by Type</h3>
-          <div class="mt-2" style="height: 120px;"><canvas id="files_type_chart"></canvas></div>
-          <div class="mt-2 text-stone-500 text-xs dark:text-neutral-400">
-            <div class="flex justify-between py-0.5"><span>Documents</span><span>{{ docsLabel }}</span></div>
-            <div class="flex justify-between py-0.5"><span>Images</span><span>{{ imgsLabel }}</span></div>
-            <div class="flex justify-between py-0.5"><span>Videos</span><span>{{ videosLabel }}</span></div>
-            <div class="flex justify-between py-0.5"><span>Other</span><span>{{ otherLabel }}</span></div>
-          </div>
-        </div>
-
-        <nav class="overflow-y-auto flex-1 px-2 py-2">
-          <div class="space-y-px">
-            <button @click="navigateToRoot()" :class="navRowClass(currentFolderId() === root().id)">
-              <div class="h-[18px] w-[18px] text-blue-500 i-hugeicons-home-02"></div>
-              Home
-            </button>
-            <button :class="navRowClass(false)">
-              <div class="h-[18px] w-[18px] text-amber-400 i-hugeicons-star"></div>
-              Starred
-              <span class="ml-auto tabular-nums text-[12px] text-stone-400 dark:text-neutral-500">{{ starredCount }}</span>
-            </button>
-            <button :class="navRowClass(false)">
-              <div class="h-[18px] w-[18px] text-emerald-500 i-hugeicons-share-01"></div>
-              Shared
-              <span class="ml-auto tabular-nums text-[12px] text-stone-400 dark:text-neutral-500">{{ sharedCount }}</span>
-            </button>
-          </div>
-          <div class="mt-5">
-            <h3 class="mb-1 px-2.5 font-semibold text-[11px] text-stone-400 dark:text-neutral-500">Folders</h3>
-            <div class="space-y-px">
-              <template :for="folder in topLevelFolders">
-                <button @click="navigateToFolder(folder)" :class="navRowClass(currentFolderId() === folder.id)">
-                  <div class="h-[18px] w-[18px] text-amber-400 i-hugeicons-folder-02"></div>
-                  {{ folder.name }}
-                  <span class="ml-auto tabular-nums text-[12px] text-stone-400 dark:text-neutral-500">{{ (folder.items ?? []).length }}</span>
-                </button>
-              </template>
-            </div>
-          </div>
-        </nav>
-
-        <div class="p-3 border-black/5 border-t dark:border-white/10">
-          <button @click="openUploadModal()" class="flex gap-2 items-center justify-center px-4 py-2 w-full font-medium text-[13px] text-white bg-blue-500 hover:bg-blue-600 rounded-lg shadow-sm">
-            <div class="mr-2 h-5 w-5 i-hugeicons-upload-01"></div>
-            Upload Files
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div class="flex flex-1 flex-col bg-white dark:bg-neutral-900">
-      <div class="p-4 bg-white/70 dark:bg-neutral-900/50 border-b border-black/5 dark:border-white/10 backdrop-blur-xl">
-        <div class="flex items-center justify-between">
-          <button @click="toggleSidePanel()" class="p-2 text-gray-500 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-700 rounded-md">
-            <div class="h-5 w-5 i-hugeicons-menu-01"></div>
-          </button>
-
-          <div class="ml-4 max-w-lg w-full lg:max-w-xs">
-            <div class="relative">
-              <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-                <div class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></div>
-              </div>
-              <input x-model="searchQuery" type="search" placeholder="Search files and folders..." class="block placeholder-gray-500 dark:placeholder-gray-400 pl-10 pr-3 py-2 w-full leading-5 text-gray-900 sm:text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500" />
-            </div>
-          </div>
-
-          <div class="flex items-center space-x-2">
-            <div class="flex gap-0.5 p-0.5 bg-black/[0.05] dark:bg-white/[0.06] rounded-lg">
-              <button @click="setViewMode('grid')" :class="gridViewClass()">
-                <div class="h-5 w-5 i-hugeicons-grid-view"></div>
-              </button>
-              <button @click="setViewMode('list')" :class="listViewClass()">
-                <div class="h-5 w-5 i-hugeicons-right-to-left-list-number"></div>
-              </button>
-            </div>
-
-            <select x-model="sortBy" class="block pl-3 pr-10 py-2 w-full text-base text-gray-900 sm:text-sm dark:text-white bg-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500">
-              <option value="name">Name</option>
-              <option value="lastModified">Date</option>
-              <option value="size">Size</option>
-            </select>
-
-            <button @click="toggleSortOrder()" class="p-2 text-gray-500 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-700 rounded-md">
-              <div :class="sortOrderIconClass()"></div>
-            </button>
-          </div>
-
-          <div class="flex items-center space-x-2">
-            <button @click="openCreateFolderModal()" class="inline-flex items-center px-3 py-2 font-medium text-sm text-white bg-indigo-600 hover:bg-indigo-700 rounded-md">
-              <div class="mr-2 h-4 w-4 i-hugeicons-folder-add"></div>
-              New Folder
-            </button>
-            <button @click="openUploadModal()" class="inline-flex items-center px-3 py-2 font-medium text-sm text-white bg-indigo-600 hover:bg-indigo-700 rounded-md">
-              <div class="mr-2 h-4 w-4 i-hugeicons-upload-01"></div>
-              Upload
-            </button>
-          </div>
-        </div>
-
-        <nav class="flex mt-4">
-          <ol class="flex items-center space-x-1">
-            <template :for="(path, index) in currentPath">
-              <li>
-                <div class="flex items-center">
-                  <span :show="index > 0" class="mx-1 text-gray-400 dark:text-neutral-500">/</span>
-                  <button @click="navigateToPath(index)" class="font-medium text-gray-500 text-sm dark:text-neutral-400 hover:text-gray-700 dark:hover:text-gray-300">{{ path }}</button>
-                </div>
-              </li>
-            </template>
-          </ol>
-        </nav>
-      </div>
-
-      <div class="overflow-auto flex-1 p-4 bg-stone-50/50 dark:bg-neutral-900">
-        <div :show="filteredItems().length === 0" class="flex flex-col items-center justify-center h-full text-center">
-          <div class="h-16 w-16 text-gray-400 dark:text-neutral-600 i-hugeicons-folder-02"></div>
-          <h3 class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No items</h3>
-          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ emptyHint }}</p>
-        </div>
-
-        <div :show="filteredItems().length > 0 && viewMode() === 'grid'" class="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
-          <template :for="item in filteredItems">
-            <div @click="onItemClick(item)" :class="gridCardClass(item)">
-              <MediaCard :item="item" />
-              <div class="flex absolute right-2 top-2 space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                <button @click="onStarClick(item, $event)" :class="gridStarButtonClass(item)">
-                  <div class="h-4 w-4 i-hugeicons-star"></div>
-                </button>
-                <button @click="onShareClick(item, $event)" :class="gridShareButtonClass(item)">
-                  <div class="h-4 w-4 i-hugeicons-share-01"></div>
-                </button>
-              </div>
-            </div>
-          </template>
-        </div>
-
-        <div :show="filteredItems().length > 0 && viewMode() === 'list'" class="overflow-hidden ring-1 ring-stone-200/80 rounded-xl dark:ring-neutral-700 shadow-sm">
-          <table class="min-w-full divide-stone-100 divide-y dark:divide-neutral-700">
-            <thead class="bg-stone-50/80 dark:bg-neutral-800">
-              <tr>
-                <th class="pl-6 pr-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Name</th>
-                <th class="px-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Size</th>
-                <th class="px-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Modified</th>
-                <th class="relative pl-3 pr-6 py-3.5"><span class="sr-only">Actions</span></th>
-              </tr>
-            </thead>
-            <tbody class="bg-white dark:bg-neutral-800 divide-stone-100 divide-y dark:divide-neutral-700">
-              <template :for="item in filteredItems">
-                <tr @click="onItemClick(item)" class="hover:bg-stone-50/50 dark:hover:bg-neutral-700/50 transition-colors cursor-pointer">
-                  <td class="pl-6 pr-3 py-3.5 text-sm whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div :class="rowIconClass(item)"></div>
-                      <div class="font-medium text-stone-800 dark:text-white">{{ item.name }}</div>
-                    </div>
-                  </td>
-                  <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-400">{{ item.type === 'folder' ? '-' : formatFileSize(item.size ?? 0) }}</td>
-                  <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-400">{{ formatDate(item.lastModified) }}</td>
-                  <td class="relative pl-3 pr-6 py-3.5 font-medium text-right text-sm whitespace-nowrap">
-                    <div class="flex justify-end space-x-2">
-                      <button @click="onStarClick(item, $event)" :class="starButtonClass(item)"><div class="h-5 w-5 i-hugeicons-star"></div></button>
-                      <button @click="onShareClick(item, $event)" :class="shareButtonClass(item)"><div class="h-5 w-5 i-hugeicons-share-01"></div></button>
-                      <button @click="onDeleteClick(item, $event)" class="text-gray-400 hover:text-red-500"><div class="h-5 w-5 i-hugeicons-waste"></div></button>
-                    </div>
-                  </td>
-                </tr>
-              </template>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Meema-style file info / preview slide-over -->
-  <div :show="showInfoPanel" class="fixed inset-0 z-20">
-    <div class="absolute inset-0 bg-gray-900/40 dark:bg-black/50" @click="closeInfoPanel()"></div>
-    <aside class="flex absolute inset-y-0 right-0 flex-col max-w-sm w-full bg-white/80 dark:bg-neutral-900/70 border-black/5 border-l dark:border-white/10 shadow-xl backdrop-blur-2xl">
-      <div class="flex items-center justify-between p-4 border-b border-black/5 dark:border-white/10">
-        <h3 class="font-semibold text-sm text-stone-500 tracking-wider uppercase dark:text-neutral-400">Details</h3>
-        <button @click="closeInfoPanel()" class="p-1.5 text-gray-400 dark:text-neutral-500 hover:text-gray-600 dark:hover:text-neutral-300 hover:bg-gray-100 dark:hover:bg-neutral-700 rounded-md">
-          <div class="h-5 w-5 i-hugeicons-cancel-01"></div>
-        </button>
-      </div>
-      <div class="overflow-auto flex-1 p-5">
-        <MediaInfoPanel :item="selectedItem()" />
-      </div>
-    </aside>
-  </div>
-
-  <div :show="showCreateFolderModal" class="fixed inset-0 overflow-y-auto z-10">
-    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-neutral-900 dark:bg-opacity-75" @click="closeCreateFolderModal()"></div>
-    <div class="flex sm:block items-end justify-center pb-20 pt-4 px-4 sm:p-0 min-h-screen text-center">
-      <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
-      <div class="inline-block overflow-hidden pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl align-bottom sm:align-middle">
-        <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-white">Create New Folder</h3>
-        <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Enter a name for the new folder.</p>
-        <input x-model="newFolderName" type="text" placeholder="Folder name" class="block mt-4 w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-indigo-500 focus:ring-indigo-500 shadow-sm" />
-        <div class="sm:flex sm:flex-row-reverse mt-5">
-          <button type="button" @click="createNewFolder()" class="inline-flex justify-center px-4 py-2 sm:ml-3 w-full sm:w-auto font-medium text-base text-white sm:text-sm bg-indigo-600 hover:bg-indigo-700 rounded-md shadow-sm">Create</button>
-          <button type="button" @click="closeCreateFolderModal()" class="inline-flex justify-center mt-3 px-4 py-2 sm:mt-0 w-full sm:w-auto font-medium text-base text-gray-700 sm:text-sm dark:text-neutral-200 bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 shadow-sm">Cancel</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div :show="showUploadModal" class="fixed inset-0 overflow-y-auto z-10">
-    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-neutral-900 dark:bg-opacity-75" @click="closeUploadModal()"></div>
-    <div class="flex sm:block items-end justify-center pb-20 pt-4 px-4 sm:p-0 min-h-screen text-center">
-      <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
-      <div class="inline-block overflow-hidden pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl align-bottom sm:align-middle">
-        <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-white">Upload Files</h3>
-        <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Select files to upload to the current folder.</p>
-        <div class="flex justify-center mt-4 pb-6 pt-5 px-6 border-2 border-dashed border-gray-300 rounded-md dark:border-neutral-600">
-          <div class="space-y-1 text-center">
-            <div class="mx-auto h-12 w-12 text-gray-400 dark:text-neutral-500 i-hugeicons-upload-01"></div>
-            <div class="flex text-gray-600 text-sm dark:text-neutral-400">
-              <label for="file-upload" class="relative font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 bg-white dark:bg-neutral-800 rounded-md cursor-pointer">
-                <span>Upload a file</span>
-                <input id="file-upload" type="file" class="sr-only" multiple />
-              </label>
-              <p class="pl-1">or drag and drop</p>
-            </div>
-            <p class="text-gray-500 text-xs dark:text-neutral-400">PNG, JPG, GIF, PDF, DOCX up to 10MB</p>
-          </div>
-        </div>
-        <div class="sm:flex sm:flex-row-reverse mt-5">
-          <button type="button" class="inline-flex justify-center px-4 py-2 sm:ml-3 w-full sm:w-auto font-medium text-base text-white sm:text-sm bg-indigo-600 hover:bg-indigo-700 rounded-md shadow-sm">Upload</button>
-          <button type="button" @click="closeUploadModal()" class="inline-flex justify-center mt-3 px-4 py-2 sm:mt-0 w-full sm:w-auto font-medium text-base text-gray-700 sm:text-sm dark:text-neutral-200 bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 shadow-sm">Cancel</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div :show="showDeleteConfirmation" class="fixed inset-0 overflow-y-auto z-10">
-    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-neutral-900 dark:bg-opacity-75" @click="closeDeleteConfirmation()"></div>
-    <div class="flex sm:block items-end justify-center pb-20 pt-4 px-4 sm:p-0 min-h-screen text-center">
-      <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
-      <div class="inline-block overflow-hidden pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl align-bottom sm:align-middle">
-        <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-white">Delete Item</h3>
-        <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Are you sure you want to delete this item? This action cannot be undone.</p>
-        <div class="sm:flex sm:flex-row-reverse mt-5">
-          <button type="button" @click="deleteSelectedItems()" class="inline-flex justify-center px-4 py-2 sm:ml-3 w-full sm:w-auto font-medium text-base text-white sm:text-sm bg-red-600 hover:bg-red-700 rounded-md shadow-sm">Delete</button>
-          <button type="button" @click="closeDeleteConfirmation()" class="inline-flex justify-center mt-3 px-4 py-2 sm:mt-0 w-full sm:w-auto font-medium text-base text-gray-700 sm:text-sm dark:text-neutral-200 bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 shadow-sm">Cancel</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<script client>
-
-interface FileItem {
-  id: number
-  name: string
-  type: string
-  size?: number
-  path: string
-  lastModified: string
-  starred: boolean
-  shared: boolean
-  // Present on real Storage-backed items (#245) so MediaCard can render true
-  // previews; absent on the demo tree.
-  mime_type?: string
-  url?: string
-  items?: FileItem[]
-}
-
-interface ChartLike { destroy: () => void }
-type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
-
-const fileTypeIcons: Record<string, string> = {
-  pdf: 'i-hugeicons-pdf-01', doc: 'i-hugeicons-doc-01', docx: 'i-hugeicons-doc-01',
-  xls: 'i-hugeicons-xls-01', xlsx: 'i-hugeicons-xls-01',
-  ppt: 'i-hugeicons-ppt-01', pptx: 'i-hugeicons-ppt-01',
-  jpg: 'i-hugeicons-jpg-01', jpeg: 'i-hugeicons-jpg-01',
-  png: 'i-hugeicons-png-01', gif: 'i-hugeicons-gif-01', svg: 'i-hugeicons-svg-01',
-  txt: 'i-hugeicons-txt-01', zip: 'i-hugeicons-zip-01',
-  mp3: 'i-hugeicons-mp3-01', mp4: 'i-hugeicons-mp-4-01',
-  folder: 'i-hugeicons-folder-02', default: 'i-hugeicons-file-02',
-}
-
-const rootFolder: FileItem = {
-  id: 1,
-  name: 'Root',
-  type: 'folder',
-  path: '/',
-  lastModified: '2023-12-01T10:00:00',
-  starred: false,
-  shared: false,
-  items: [
-    { id: 2, name: 'Documents', type: 'folder', path: '/Documents', lastModified: '2023-12-01T10:00:00', starred: true, shared: true, items: [
-      { id: 6, name: 'Project Proposal.pdf', type: 'pdf', size: 2500000, path: '/Documents/Project Proposal.pdf', lastModified: '2023-12-05T14:30:00', starred: true, shared: true },
-      { id: 7, name: 'Meeting Notes.docx', type: 'docx', size: 350000, path: '/Documents/Meeting Notes.docx', lastModified: '2023-12-10T09:15:00', starred: false, shared: false },
-      { id: 8, name: 'Budget.xlsx', type: 'xlsx', size: 1200000, path: '/Documents/Budget.xlsx', lastModified: '2023-12-08T16:45:00', starred: false, shared: true },
-    ] },
-    { id: 3, name: 'Images', type: 'folder', path: '/Images', lastModified: '2023-12-02T11:30:00', starred: false, shared: false, items: [
-      { id: 9, name: 'Profile Photo.jpg', type: 'jpg', size: 1800000, path: '/Images/Profile Photo.jpg', lastModified: '2023-12-03T13:20:00', starred: true, shared: false },
-      { id: 10, name: 'Banner.png', type: 'png', size: 2700000, path: '/Images/Banner.png', lastModified: '2023-12-04T10:10:00', starred: false, shared: true },
-      { id: 11, name: 'Icon.svg', type: 'svg', size: 150000, path: '/Images/Icon.svg', lastModified: '2023-12-05T09:05:00', starred: false, shared: false },
-    ] },
-    { id: 4, name: 'Videos', type: 'folder', path: '/Videos', lastModified: '2023-12-03T14:00:00', starred: false, shared: false, items: [
-      { id: 12, name: 'Product Demo.mp4', type: 'mp4', size: 15000000, path: '/Videos/Product Demo.mp4', lastModified: '2023-12-06T15:30:00', starred: false, shared: true },
-      { id: 13, name: 'Tutorial.mp4', type: 'mp4', size: 25000000, path: '/Videos/Tutorial.mp4', lastModified: '2023-12-07T11:45:00', starred: true, shared: true },
-    ] },
-    { id: 5, name: 'Downloads', type: 'folder', path: '/Downloads', lastModified: '2023-12-04T09:00:00', starred: false, shared: false, items: [
-      { id: 14, name: 'Software Update.zip', type: 'zip', size: 45000000, path: '/Downloads/Software Update.zip', lastModified: '2023-12-08T10:20:00', starred: false, shared: false },
-      { id: 15, name: 'E-book.pdf', type: 'pdf', size: 3500000, path: '/Downloads/E-book.pdf', lastModified: '2023-12-09T14:10:00', starred: true, shared: false },
-    ] },
-  ],
-}
-
-// Prefer the server-injected real Storage tree (stacksjs/stacks#245); fall back
-// to the demo tree above when it's absent (empty disk, listing failed, or the
-// server block couldn't resolve). The payload is HTML-escaped JSON in a hidden
-// element — same server->client hand-off the dashboard sidebar uses.
-function readInjectedFileTree(): FileItem | null {
-  try {
-    const node = document.querySelector('[data-file-tree]')
-    const raw = node?.textContent?.trim()
-    if (!raw)
-      return null
-    const parsed = JSON.parse(raw)
-    return parsed && Array.isArray(parsed.items) && parsed.items.length > 0 ? parsed as FileItem : null
-  }
-  catch {
-    return null
-  }
-}
-
-const initialRoot = readInjectedFileTree() ?? rootFolder
-const root = state<FileItem>(initialRoot)
-const currentFolderId = state<number>(initialRoot.id)
-const searchQuery = state('')
-const sortBy = state<'name' | 'lastModified' | 'size'>('name')
-const sortOrder = state<'asc' | 'desc'>('asc')
-const viewMode = state<'grid' | 'list'>('grid')
-const showSidePanel = state(true)
-const showUploadModal = state(false)
-const showCreateFolderModal = state(false)
-const showDeleteConfirmation = state(false)
-const newFolderName = state('')
-const itemToDelete = state<FileItem | null>(null)
-// Selected file for the Meema-style info/preview panel. Defaults to a neutral
-// placeholder (never null) so the panel component always receives a valid item
-// even while hidden; onItemClick swaps in the real file.
-const selectedItem = state<FileItem>({ id: 0, name: '', type: 'file', path: '/', lastModified: '', starred: false } as FileItem)
-const showInfoPanel = state(false)
-
-const storageStats = { total: 100 * 1024 ** 3, used: 45 * 1024 ** 3, available: 55 * 1024 ** 3 }
-const storageByType = { documents: 15 * 1024 ** 3, images: 10 * 1024 ** 3, videos: 18 * 1024 ** 3, other: 2 * 1024 ** 3 }
-
-function findFolderById(folder: FileItem, id: number): FileItem | null {
-  if (folder.id === id)
-    return folder
-  for (const child of folder.items ?? []) {
-    if (child.type === 'folder') {
-      const found = findFolderById(child, id)
-      if (found)
-        return found
-    }
-  }
-  return null
-}
-
-function findPathToId(folder: FileItem, id: number, path: string[] = []): string[] | null {
-  const next = [...path, folder.name]
-  if (folder.id === id)
-    return next
-  for (const child of folder.items ?? []) {
-    if (child.type === 'folder') {
-      const found = findPathToId(child, id, next)
-      if (found)
-        return found
-    }
-  }
-  return null
-}
-
-const currentFolder = derived(() => findFolderById(root(), currentFolderId()) ?? root())
-const currentPath = derived(() => findPathToId(root(), currentFolderId()) ?? ['Root'])
-
-const filteredItems = derived(() => {
-  let items = [...(currentFolder().items ?? [])]
-  const q = searchQuery().toLowerCase()
-  if (q)
-    items = items.filter(item => item.name.toLowerCase().includes(q))
-  items.sort((a, b) => {
-    if (sortBy() === 'name')
-      return sortOrder() === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
-    if (sortBy() === 'lastModified')
-      return sortOrder() === 'asc' ? new Date(a.lastModified).getTime() - new Date(b.lastModified).getTime() : new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime()
-    const sa = a.size ?? 0
-    const sb = b.size ?? 0
-    return sortOrder() === 'asc' ? sa - sb : sb - sa
-  })
-  return items
-})
-
-function countByPredicate(folder: FileItem, predicate: (item: FileItem) => boolean): number {
-  let count = 0
-  for (const item of folder.items ?? []) {
-    if (predicate(item))
-      count++
-    if (item.type === 'folder')
-      count += countByPredicate(item, predicate)
-  }
-  return count
-}
-
-const starredCount = derived(() => countByPredicate(root(), i => i.starred))
-const sharedCount = derived(() => countByPredicate(root(), i => i.shared))
-const topLevelFolders = derived(() => (root().items ?? []).filter(i => i.type === 'folder'))
-
-// Each derived/function below returns a COMPLETE class string (static + dynamic)
-// because stx's `{{ ... }}` placeholder is not reactively bound inside a `class`
-// attribute — only inside text content. The `:class="fn()"` directive is the
-// supported reactive form, so any class that mixes static and dynamic tokens
-// has to be assembled in JS and applied via :class.
-// Native macOS sidebar vibrancy: a translucent material over the window
-// background rather than a flat fill, matching the desktop shell's macos-themed
-// global sidebar (titlebarHidden window). stacksjs — native File Manager.
-const sidePanelBase = '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'
-const sidePanelClass = derived(() => `${sidePanelBase} ${showSidePanel() ? 'w-64' : 'w-0 overflow-hidden'}`)
-
-const sortOrderIconClass = derived(() => `${sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02'} h-5 w-5`)
-
-// Native macOS segmented control: the active segment is an elevated white pill
-// on a recessed track (see the track container in the toolbar), not a filled
-// accent button.
-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'
-const segmentInactive = 'text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200'
-const gridViewClass = derived(() => `${segmentBase} ${viewMode() === 'grid' ? segmentActive : segmentInactive}`)
-const listViewClass = derived(() => `${segmentBase} ${viewMode() === 'list' ? segmentActive : segmentInactive}`)
-
-// Native macOS source-list row: a rounded selection pill on the active row
-// (light translucent fill), colored SF-style icons, plain trailing counts.
-const navRowBase = 'group flex items-center gap-2.5 px-2.5 py-1.5 w-full text-left font-medium text-[13px] rounded-lg transition-colors'
-function navRowClass(active: boolean): string {
-  return active
-    ? `${navRowBase} bg-black/[0.06] dark:bg-white/[0.09] text-stone-900 dark:text-white`
-    : `${navRowBase} text-stone-600 dark:text-neutral-300 hover:bg-black/[0.04] dark:hover:bg-white/[0.06]`
-}
-
-// Native selection: the open file gets a Finder-style accent ring, updated
-// reactively as the info panel opens/closes on different items.
-const gridCardBase = 'group relative overflow-hidden rounded-lg border shadow-sm hover:shadow-lg duration-200 transition-all cursor-pointer bg-white dark:bg-neutral-800'
-const gridCardClass = (item: FileItem) => `${gridCardBase} ${showInfoPanel() && selectedItem().id === item.id
-  ? 'border-indigo-400 dark:border-indigo-500 ring-2 ring-indigo-500/30'
-  : 'border-gray-200 dark:border-neutral-700 hover:border-indigo-300 dark:hover:border-indigo-500/50'}`
-
-const rowIconClass = (item: FileItem) => `${itemIconClass(item)} h-5 w-5 mr-3`
-const gridStarButtonClass = (item: FileItem) => `p-1 hover:bg-gray-100 dark:hover:bg-neutral-700 rounded-full ${starButtonClass(item)}`
-const gridShareButtonClass = (item: FileItem) => `p-1 hover:bg-gray-100 dark:hover:bg-neutral-700 rounded-full ${shareButtonClass(item)}`
-
-const usedLabel = derived(() => formatFileSize(storageStats.used))
-const availableLabel = derived(() => formatFileSize(storageStats.available))
-const totalLabel = derived(() => formatFileSize(storageStats.total))
-const docsLabel = derived(() => formatFileSize(storageByType.documents))
-const imgsLabel = derived(() => formatFileSize(storageByType.images))
-const videosLabel = derived(() => formatFileSize(storageByType.videos))
-const otherLabel = derived(() => formatFileSize(storageByType.other))
-
-const emptyHint = derived(() => searchQuery() ? 'No items match your search.' : 'This folder is empty.')
-
-function formatFileSize(bytes: number) {
-  if (bytes === 0)
-    return '0 Bytes'
-  const k = 1024
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
-}
-
-function formatDate(dateString: string) {
-  return new Date(dateString).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
-}
-
-function getFileIcon(type: string) {
-  return fileTypeIcons[type] ?? fileTypeIcons.default
-}
-
-function itemIconClass(item: FileItem) {
-  return item.type === 'folder'
-    ? 'i-hugeicons-folder-02 text-indigo-400 dark:text-indigo-300'
-    : `${getFileIcon(item.type)} text-gray-500 dark:text-neutral-400`
-}
-
-function starButtonClass(item: FileItem) {
-  return item.starred ? 'text-yellow-500' : 'text-gray-400 dark:text-neutral-500 hover:text-yellow-500'
-}
-
-function shareButtonClass(item: FileItem) {
-  return item.shared ? 'text-indigo-500' : 'text-gray-400 dark:text-neutral-500 hover:text-indigo-500'
-}
-
-function navigateToRoot() {
-  currentFolderId.set(root().id)
-}
-
-function navigateToFolder(folder: FileItem) {
-  currentFolderId.set(folder.id)
-}
-
-function navigateToPath(index: number) {
-  const path = currentPath()
-  if (index >= path.length - 1)
-    return
-  const targetName = path[index]
-  let folder = root()
-  for (let i = 1; i <= index; i++) {
-    const next = (folder.items ?? []).find(it => it.type === 'folder' && it.name === path[i])
-    if (next)
-      folder = next
-  }
-  if (folder.name === targetName || index === 0)
-    currentFolderId.set(folder.id)
-}
-
-function toggleSidePanel() {
-  showSidePanel.set(!showSidePanel())
-}
-
-function setViewMode(mode: 'grid' | 'list') {
-  viewMode.set(mode)
-}
-
-function toggleSortOrder() {
-  sortOrder.set(sortOrder() === 'asc' ? 'desc' : 'asc')
-}
-
-function onItemClick(item: FileItem) {
-  if (item.type === 'folder') {
-    navigateToFolder(item)
-    return
-  }
-  selectedItem.set(item)
-  showInfoPanel.set(true)
-}
-
-function closeInfoPanel() {
-  showInfoPanel.set(false)
-}
-
-function onStarClick(item: FileItem, event: Event) {
-  event.stopPropagation()
-  toggleFlag(item.id, 'starred')
-}
-
-function onShareClick(item: FileItem, event: Event) {
-  event.stopPropagation()
-  toggleFlag(item.id, 'shared')
-}
-
-function onDeleteClick(item: FileItem, event: Event) {
-  event.stopPropagation()
-  itemToDelete.set(item)
-  showDeleteConfirmation.set(true)
-}
-
-function toggleFlag(id: number, key: 'starred' | 'shared') {
-  function visit(folder: FileItem): FileItem {
-    return {
-      ...folder,
-      items: (folder.items ?? []).map((child) => {
-        if (child.id === id)
-          return { ...child, [key]: !child[key] }
-        if (child.type === 'folder')
-          return visit(child)
-        return child
-      }),
-    }
-  }
-  root.set(visit(root()))
-}
-
-function openCreateFolderModal() {
-  newFolderName.set('')
-  showCreateFolderModal.set(true)
-}
-
-function closeCreateFolderModal() {
-  showCreateFolderModal.set(false)
-}
-
-function openUploadModal() {
-  showUploadModal.set(true)
-}
-
-function closeUploadModal() {
-  showUploadModal.set(false)
-}
-
-function closeDeleteConfirmation() {
-  showDeleteConfirmation.set(false)
-  itemToDelete.set(null)
-}
-
-function createNewFolder() {
-  const name = newFolderName().trim()
-  if (!name)
-    return
-  const newFolder: FileItem = {
-    id: Date.now(),
-    name,
-    type: 'folder',
-    path: `${currentFolder().path}/${name}`,
-    lastModified: new Date().toISOString(),
-    starred: false,
-    shared: false,
-    items: [],
-  }
-  function visit(folder: FileItem): FileItem {
-    if (folder.id === currentFolderId())
-      return { ...folder, items: [...(folder.items ?? []), newFolder] }
-    return { ...folder, items: (folder.items ?? []).map(child => child.type === 'folder' ? visit(child) : child) }
-  }
-  root.set(visit(root()))
-  showCreateFolderModal.set(false)
-}
-
-function deleteSelectedItems() {
-  const target = itemToDelete()
-  if (!target) {
-    closeDeleteConfirmation()
-    return
-  }
-  function visit(folder: FileItem): FileItem {
-    return {
-      ...folder,
-      items: (folder.items ?? []).filter(c => c.id !== target.id).map(c => c.type === 'folder' ? visit(c) : c),
-    }
-  }
-  root.set(visit(root()))
-  closeDeleteConfirmation()
-}
-
-let chartHandles: ChartLike[] = []
-
-onMount(async () => {
-  const { Chart, registerables } = await import('@stacksjs/charts')
-  Chart.register(...registerables)
-  const Ctor = Chart as unknown as ChartCtor
-
-  const doughnutOptions = { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } }
-
-  const handles: Array<ChartLike | null> = [
-    useChart({
-      Chart: Ctor,
-      id: 'files_storage_chart',
-      type: 'doughnut',
-      data: { labels: ['Used', 'Available'], datasets: [{ backgroundColor: ['rgba(54, 162, 235, 0.6)', 'rgba(200, 200, 200, 0.6)'], borderColor: ['rgba(54, 162, 235, 1)', 'rgba(200, 200, 200, 1)'], borderWidth: 1, data: [storageStats.used, storageStats.available] }] },
-      options: doughnutOptions,
-    }) as ChartLike | null,
-    useChart({
-      Chart: Ctor,
-      id: 'files_type_chart',
-      type: 'doughnut',
-      data: { labels: ['Documents', 'Images', 'Videos', 'Other'], datasets: [{ backgroundColor: ['rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)'], borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)'], borderWidth: 1, data: [storageByType.documents, storageByType.images, storageByType.videos, storageByType.other] }] },
-      options: doughnutOptions,
-    }) as ChartLike | null,
-  ]
-  chartHandles = handles.filter((h): h is ChartLike => h !== null)
-})
-
-onDestroy(() => {
-  chartHandles.forEach(h => h.destroy())
-  chartHandles = []
-})
-</script>
+<FileManagerDashboard />
 
 @endsection