@stacksjs/defaults 0.70.228 → 0.70.230

package/resources/components/Dashboard/Environment/EnvironmentDashboard.stx

@@ -0,0 +1,301 @@
+<script client>
+import { DashboardApiError, dashboardApi } from '~/storage/framework/defaults/functions/dashboard-api'
+
+interface EnvironmentFileIssue {
+  line: number
+  message: string
+}
+
+interface EnvironmentFileState {
+  path: '.env'
+  content: string
+  revision: string
+  exists: boolean
+  updatedAt: string | null
+  backup: {
+    content: string
+    exists: boolean
+    updatedAt: string | null
+  }
+}
+
+interface EnvironmentResponse {
+  environment: EnvironmentFileState
+}
+
+const envValues = state('')
+const revision = state('')
+const backupContent = state('')
+const backupUpdatedAt = state<string | null>(null)
+const showAddModal = state(false)
+const showBackupModal = state(false)
+const isLoading = state(true)
+const isSaving = state(false)
+const loadError = state('')
+const saveError = state('')
+const successMessage = state('')
+const validationIssues = state<EnvironmentFileIssue[]>([])
+const loadedContent = state('')
+
+const newVarKey = state('')
+const newVarValue = state('')
+const newVarDescription = state('')
+const addError = state('')
+
+const hasBackup = derived(() => backupContent().length > 0)
+const isBusy = derived(() => isLoading() || isSaving())
+const variableCount = derived(() => envValues().split('\n').filter((line) => {
+  const trimmed = line.trim()
+  return trimmed && !trimmed.startsWith('#') && trimmed.includes('=')
+}).length)
+const dirty = derived(() => Boolean(revision()) && envValues() !== loadedContent())
+
+function applyEnvironment(environment: EnvironmentFileState): void {
+  envValues.set(environment.content)
+  loadedContent.set(environment.content)
+  revision.set(environment.revision)
+  backupContent.set(environment.backup.content)
+  backupUpdatedAt.set(environment.backup.updatedAt)
+}
+
+function describeError(error: unknown, fallback: string): string {
+  return error instanceof DashboardApiError ? error.message : fallback
+}
+
+async function loadEnvironment(): Promise<void> {
+  isLoading.set(true)
+  loadError.set('')
+  try {
+    const result = await dashboardApi<EnvironmentResponse>('/api/dashboard/environment')
+    applyEnvironment(result.environment)
+  }
+  catch (error) {
+    loadError.set(describeError(error, 'The environment file could not be loaded.'))
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+function openAddModal(): void {
+  newVarKey.set('')
+  newVarValue.set('')
+  newVarDescription.set('')
+  addError.set('')
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+  addError.set('')
+}
+
+function formatContent(): void {
+  const formatted = envValues().split('\n').map((sourceLine) => {
+    const line = sourceLine.trim()
+    if (!line || line.startsWith('#'))
+      return sourceLine.trimEnd()
+
+    const separator = sourceLine.indexOf('=')
+    if (separator < 1)
+      return sourceLine.trimEnd()
+
+    const key = sourceLine.slice(0, separator).trim()
+    const value = sourceLine.slice(separator + 1).trim()
+    return `${key}=${value}`
+  }).join('\n').replace(/\n{3,}/g, '\n\n')
+
+  envValues.set(formatted.endsWith('\n') ? formatted : `${formatted}\n`)
+}
+
+function addVariable(): void {
+  const key = newVarKey().trim().toUpperCase()
+  if (!/^[A-Z_][A-Z0-9_]*$/.test(key)) {
+    addError.set('Use uppercase letters, numbers, and underscores. The first character must be a letter or underscore.')
+    return
+  }
+
+  const duplicate = envValues().split('\n').some(line => line.trim().startsWith(`${key}=`))
+  if (duplicate) {
+    addError.set(`${key} is already defined.`)
+    return
+  }
+
+  const description = newVarDescription().trim()
+  const addition = `${description ? `# ${description}\n` : ''}${key}=${newVarValue()}`
+  const current = envValues().trimEnd()
+  envValues.set(`${current}${current ? '\n\n' : ''}${addition}\n`)
+  closeAddModal()
+}
+
+function loadBackup(): void {
+  envValues.set(backupContent())
+  showBackupModal.set(false)
+  successMessage.set('Backup loaded into the editor. Review it, then save to apply it.')
+}
+
+async function handleSave(): Promise<void> {
+  if (isBusy() || !revision())
+    return
+
+  isSaving.set(true)
+  saveError.set('')
+  successMessage.set('')
+  validationIssues.set([])
+
+  try {
+    const result = await dashboardApi<EnvironmentResponse & { success: true }>('/api/dashboard/environment', {
+      method: 'PUT',
+      body: {
+        content: envValues(),
+        revision: revision(),
+      },
+    })
+    applyEnvironment(result.environment)
+    successMessage.set('Environment file saved. Restart long-running processes to load changed values.')
+  }
+  catch (error) {
+    if (error instanceof DashboardApiError && error.status === 422) {
+      const fields = error.fields ?? {}
+      validationIssues.set(Object.entries(fields).map(([line, message]) => ({
+        line: Number(line) || 0,
+        message,
+      })))
+    }
+    saveError.set(describeError(error, 'The environment file could not be saved.'))
+  }
+  finally {
+    isSaving.set(false)
+  }
+}
+
+function handlePageKeydown(event: KeyboardEvent): void {
+  if (event.key === 'Escape') {
+    showAddModal.set(false)
+    showBackupModal.set(false)
+    return
+  }
+
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'n') {
+    event.preventDefault()
+    openAddModal()
+  }
+}
+
+useEventListener('keydown', handlePageKeydown)
+onMount(() => void loadEnvironment())
+</script>
+
+<template>
+<div class="mx-auto pb-12 pt-6 px-4 space-y-6 sm:px-6 lg:px-8 max-w-7xl">
+  <PageHeader
+    title="Environment Variables"
+    description="Edit the project .env file with validation, conflict protection, and an automatic backup."
+  >
+    <template #actions>
+      <div class="flex gap-2 items-center">
+        <Button :if="hasBackup()" variant="secondary" @click="showBackupModal.set(true)">
+          <span class="h-4 w-4 i-hugeicons-clock-03"></span>
+          Backup
+        </Button>
+        <Button @click="openAddModal">
+          <span class="h-4 w-4 i-hugeicons-add-01"></span>
+          Add variable
+        </Button>
+      </div>
+    </template>
+  </PageHeader>
+
+  <div class="grid gap-3 sm:grid-cols-3">
+    <div class="p-4 bg-white dark:bg-neutral-900 border border-stone-200 rounded-xl dark:border-neutral-700">
+      <p class="font-medium text-stone-500 text-xs tracking-wide uppercase dark:text-neutral-400">File</p>
+      <p class="mt-1 font-mono text-sm text-stone-900 dark:text-white">.env</p>
+    </div>
+    <div class="p-4 bg-white dark:bg-neutral-900 border border-stone-200 rounded-xl dark:border-neutral-700">
+      <p class="font-medium text-stone-500 text-xs tracking-wide uppercase dark:text-neutral-400">Variables</p>
+      <p class="mt-1 font-semibold text-lg text-stone-900 dark:text-white" :text="variableCount()"></p>
+    </div>
+    <div class="p-4 bg-white dark:bg-neutral-900 border border-stone-200 rounded-xl dark:border-neutral-700">
+      <p class="font-medium text-stone-500 text-xs tracking-wide uppercase dark:text-neutral-400">Status</p>
+      <p class="mt-1 font-medium text-sm" :class="dirty() ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'" :text="dirty() ? 'Unsaved changes' : 'Saved on disk'"></p>
+    </div>
+  </div>
+
+  <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-xl dark:border-red-900" role="alert">
+    <p :text="loadError()"></p>
+    <Button class="mt-3" size="sm" variant="secondary" @click="loadEnvironment">Try again</Button>
+  </div>
+
+  <div :if="successMessage()" class="p-4 text-emerald-700 text-sm dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/30 border border-emerald-200 rounded-xl dark:border-emerald-900" role="status" :text="successMessage()"></div>
+
+  <div :if="saveError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-xl dark:border-red-900" role="alert">
+    <p :text="saveError()"></p>
+    <ul :if="validationIssues().length" class="mt-2 pl-5 space-y-1 list-disc">
+      <li :for="issue in validationIssues()" :text="issue.line ? `Line ${issue.line}: ${issue.message}` : issue.message"></li>
+    </ul>
+  </div>
+
+  <div :if="!loadError()">
+    <CodeEditor
+      v-model:value="envValues"
+      label=".env"
+      language="env"
+      :loading="isLoading()"
+      @save="handleSave"
+      @format="formatContent"
+    />
+
+    <div class="flex flex-col gap-3 items-start justify-between sm:flex-row sm:items-center mt-4">
+      <div class="flex flex-wrap gap-x-4 gap-y-2 text-stone-500 text-xs dark:text-neutral-400">
+        <span><kbd class="px-1.5 py-0.5 font-semibold text-stone-700 dark:text-neutral-200 bg-stone-100 dark:bg-neutral-800 border border-stone-200 rounded dark:border-neutral-700">Cmd/Ctrl + S</kbd> save</span>
+        <span><kbd class="px-1.5 py-0.5 font-semibold text-stone-700 dark:text-neutral-200 bg-stone-100 dark:bg-neutral-800 border border-stone-200 rounded dark:border-neutral-700">Cmd/Ctrl + N</kbd> add variable</span>
+        <span><kbd class="px-1.5 py-0.5 font-semibold text-stone-700 dark:text-neutral-200 bg-stone-100 dark:bg-neutral-800 border border-stone-200 rounded dark:border-neutral-700">Cmd/Ctrl + Shift + F</kbd> format</span>
+      </div>
+      <div class="flex gap-2">
+        <Button variant="secondary" :disabled="isBusy()" @click="formatContent">Format</Button>
+        <Button :loading="isSaving()" :disabled="isBusy() || !dirty()" @click="handleSave">Save changes</Button>
+      </div>
+    </div>
+  </div>
+
+  <Modal
+    :isOpen="showAddModal()"
+    title="Add environment variable"
+    description="The variable is added to the editor first. Save the file when you are ready."
+    size="sm"
+    @close="closeAddModal"
+  >
+    <form class="space-y-4" @submit.prevent="addVariable">
+      <Input v-model:value="newVarKey" label="Key" placeholder="APP_NAME" required />
+      <Input v-model:value="newVarValue" label="Value" placeholder="My App" />
+      <Input v-model:value="newVarDescription" label="Description" placeholder="Used in emails and the interface" hint="Optional comment placed above the variable." />
+      <p :if="addError()" class="text-red-600 text-sm dark:text-red-400" role="alert" :text="addError()"></p>
+    </form>
+    <template #footer>
+      <div class="flex gap-2">
+        <Button variant="ghost" @click="closeAddModal">Cancel</Button>
+        <Button @click="addVariable">Add to editor</Button>
+      </div>
+    </template>
+  </Modal>
+
+  <Modal
+    :isOpen="showBackupModal()"
+    title="Environment backup"
+    description="This is the file content from immediately before the latest successful save."
+    size="lg"
+    @close="showBackupModal.set(false)"
+  >
+    <div class="space-y-3">
+      <p :if="backupUpdatedAt()" class="text-stone-500 text-xs dark:text-neutral-400" :text="`Saved ${new Date(backupUpdatedAt()).toLocaleString()}`"></p>
+      <textarea readonly rows="18" class="block p-4 w-full font-mono leading-6 text-[#c9d1d9] text-xs bg-[#0d1117] border border-[#30363d] rounded-lg resize-y" :value="backupContent()"></textarea>
+    </div>
+    <template #footer>
+      <div class="flex gap-2">
+        <Button variant="ghost" @click="showBackupModal.set(false)">Close</Button>
+        <Button @click="loadBackup">Load into editor</Button>
+      </div>
+    </template>
+  </Modal>
+</div>
+</template>

package/resources/components/Dashboard/FileViewer/MediaCard.stx

@@ -1,23 +1,6 @@
-<!--
-  MediaCard — Meema-style visual file preview
-
-  Ported from the meemalabs/file-manager media card components.
-  to stx + Crosswind. Presentational: it renders the preview + label for one
-  file item and derives the media "kind" from `mime_type` (preferred) or the
-  file extension in `type`. Real thumbnails render when the item carries a
-  `thumbnail`/`url`; otherwise a kind-appropriate placeholder is shown, so it
-  works with both live storage listings and demo data.
-
-  The parent supplies the card frame (border, rounded, hover, click, overflow)
-  and any hover action buttons; this component only fills the interior.
-
-  Usage:
-    <MediaCard :item="item" />
--->
-
-<script>
+<script client>
 interface FileItem {
-  id: number
+  id: string | number
   name: string
   type: string
   size?: number
@@ -26,11 +9,13 @@ interface FileItem {
   thumbnail?: string
 }
 
-interface Props {
-  item: FileItem
+const EMPTY_ITEM: FileItem = {
+  id: '',
+  name: '',
+  type: 'other',
 }
-
-const { item } = defineProps<Props>()
+const item = useReactiveProp<FileItem | null>('item', null)
+const currentItem = derived(() => item() ?? EMPTY_ITEM)
 
 const IMAGE_EXT = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'svg', 'bmp', 'heic']
 const VIDEO_EXT = ['mp4', 'mov', 'webm', 'mkv', 'avi', 'm4v']
@@ -38,38 +23,35 @@ const AUDIO_EXT = ['mp3', 'wav', 'ogg', 'flac', 'm4a', 'aac']
 const ARCHIVE_EXT = ['zip', 'rar', 'gz', 'tar', '7z']
 const DOC_EXT = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'md', 'csv', 'key', 'pages']
 
-function kindOf(it: FileItem): string {
-  if (it.type === 'folder')
+function kindOf(value: FileItem): string {
+  if (value.type === 'folder')
     return 'folder'
-  const mime = (it.mime_type || '').toLowerCase()
+  const mime = (value.mime_type || '').toLowerCase()
   if (mime.startsWith('image/'))
     return 'image'
   if (mime.startsWith('video/'))
     return 'video'
   if (mime.startsWith('audio/'))
     return 'audio'
-  const ext = (it.type || '').toLowerCase()
-  if (IMAGE_EXT.includes(ext))
+  const extension = (value.type || '').toLowerCase()
+  if (IMAGE_EXT.includes(extension))
     return 'image'
-  if (VIDEO_EXT.includes(ext))
+  if (VIDEO_EXT.includes(extension))
     return 'video'
-  if (AUDIO_EXT.includes(ext))
+  if (AUDIO_EXT.includes(extension))
     return 'audio'
-  if (ARCHIVE_EXT.includes(ext))
+  if (ARCHIVE_EXT.includes(extension))
     return 'archive'
-  if (DOC_EXT.includes(ext))
+  if (DOC_EXT.includes(extension))
     return 'document'
   return 'other'
 }
 
-const kind = kindOf(item)
-const ext = (item.type || '').toUpperCase()
-const previewUrl = item.thumbnail || item.url || ''
-const hasImage = kind === 'image' && !!previewUrl
+const kind = derived(() => kindOf(currentItem()))
+const extension = derived(() => (currentItem().type || '').toUpperCase())
+const previewUrl = derived(() => currentItem().thumbnail || currentItem().url || '')
+const hasImage = derived(() => kind() === 'image' && Boolean(previewUrl()))
 
-// A soft, kind-specific backdrop for the preview area (Meema uses colored
-// treatments per media type). Assembled as full class strings because stx
-// binds dynamic classes via :class, not via {{ }} inside class attributes.
 const backdropByKind: Record<string, string> = {
   image: 'bg-gradient-to-br from-sky-50 to-indigo-100 dark:from-neutral-800 dark:to-neutral-900',
   video: 'bg-gradient-to-br from-neutral-800 to-neutral-950',
@@ -88,32 +70,22 @@ const glyphByKind: Record<string, string> = {
   other: 'i-hugeicons-file-02 text-stone-400 dark:text-neutral-400',
 }
 
-const previewClass = `relative flex items-center justify-center h-32 w-full overflow-hidden ${backdropByKind[kind] || backdropByKind.other}`
-const glyphClass = `h-10 w-10 ${glyphByKind[kind] || glyphByKind.other}`
-const badgeClass = kind === 'video'
-  ? 'bg-black/55 text-white'
-  : 'bg-white/85 text-stone-600 dark:bg-black/40 dark:text-neutral-200'
+const previewClass = derived(() => `relative flex items-center justify-center h-32 w-full overflow-hidden ${backdropByKind[kind()] || backdropByKind.other}`)
+const glyphClass = derived(() => `h-10 w-10 ${glyphByKind[kind()] || glyphByKind.other}`)
+const badgeClass = derived(() => kind() === 'video'
+  ? 'absolute left-2 top-2 px-1.5 py-0.5 font-semibold text-[10px] tracking-wide text-white bg-black/55 rounded'
+  : 'absolute left-2 top-2 px-1.5 py-0.5 font-semibold text-[10px] text-stone-600 dark:text-neutral-200 tracking-wide bg-white/85 dark:bg-black/40 rounded')
 </script>
 
 <div class="flex flex-col">
-  <div :class="previewClass">
-    @if (hasImage)
-      <img src="{{ previewUrl }}" alt="{{ item.name }}" loading="lazy" class="object-cover h-full w-full" />
-    @elseif (kind === 'video')
-      <div class="flex items-center justify-center h-12 w-12 bg-white/90 rounded-full shadow-md">
-        <div class="ml-0.5 h-5 w-5 text-neutral-900 i-hugeicons-play"></div>
-      </div>
-    @else
-      <div :class="glyphClass"></div>
-    @endif
-
-    @if (item.type !== 'folder' && ext)
-      <span class="{{ badgeClass }} absolute left-2 top-2 px-1.5 py-0.5 font-semibold text-[10px] tracking-wide rounded">{{ ext }}</span>
-    @endif
+  <div :class="previewClass()">
+    <img :if="hasImage()" :src="previewUrl()" :alt="currentItem().name" loading="lazy" class="object-cover h-full w-full" />
+    <div :else-if="kind() === 'video'" class="flex items-center justify-center h-12 w-12 bg-white/90 rounded-full shadow-md"><span class="ml-0.5 h-5 w-5 text-neutral-900 i-hugeicons-play"></span></div>
+    <span :else :class="glyphClass()"></span>
+    <span :if="currentItem().type !== 'folder' && extension()" :class="badgeClass()">{{ extension() }}</span>
   </div>
-
   <div class="px-3 py-2.5">
-    <p class="font-medium text-[13px] text-stone-800 truncate dark:text-white" title="{{ item.name }}">{{ item.name }}</p>
-    <p class="mt-0.5 capitalize text-[11px] text-stone-400 dark:text-neutral-500">{{ item.type === 'folder' ? 'Folder' : kind }}</p>
+    <p :title="currentItem().name" class="font-medium text-[13px] text-stone-800 truncate dark:text-white">{{ currentItem().name }}</p>
+    <p class="mt-0.5 capitalize text-[11px] text-stone-400 dark:text-neutral-500">{{ currentItem().type === 'folder' ? 'Folder' : kind() }}</p>
   </div>
 </div>

package/resources/components/Dashboard/FileViewer/MediaInfoPanel.stx

@@ -1,19 +1,6 @@
-<!--
-  MediaInfoPanel — file preview + metadata
-
-  Ported from the meemalabs/file-manager file preview, metadata, and sharing
-  sections to STX and Crosswind. Presentational: it
-  renders a large preview and a metadata list for one selected file. The parent
-  owns the slide-over shell (visibility, positioning, close button) and passes
-  the current item in.
-
-  Usage:
-    <MediaInfoPanel :item="selectedItem()" />
--->
-
-<script>
+<script client>
 interface FileItem {
-  id: number
+  id: string | number
   name: string
   type: string
   size?: number
@@ -21,44 +8,45 @@ interface FileItem {
   mime_type?: string
   url?: string
   thumbnail?: string
-  lastModified?: string
-  starred?: boolean
+  lastModified?: string | null
   shared?: boolean
 }
 
-interface Props {
-  item: FileItem
+const EMPTY_ITEM: FileItem = {
+  id: '',
+  name: '',
+  type: 'other',
 }
-
-const { item } = defineProps<Props>()
+const item = useReactiveProp<FileItem | null>('item', null)
+const currentItem = derived(() => item() ?? EMPTY_ITEM)
 
 const IMAGE_EXT = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'svg', 'bmp', 'heic']
 const VIDEO_EXT = ['mp4', 'mov', 'webm', 'mkv', 'avi', 'm4v']
 const AUDIO_EXT = ['mp3', 'wav', 'ogg', 'flac', 'm4a', 'aac']
 
-function kindOf(it: FileItem): string {
-  if (it.type === 'folder')
+function kindOf(value: FileItem): string {
+  if (value.type === 'folder')
     return 'folder'
-  const mime = (it.mime_type || '').toLowerCase()
+  const mime = (value.mime_type || '').toLowerCase()
   if (mime.startsWith('image/'))
     return 'image'
   if (mime.startsWith('video/'))
     return 'video'
   if (mime.startsWith('audio/'))
     return 'audio'
-  const ext = (it.type || '').toLowerCase()
-  if (IMAGE_EXT.includes(ext))
+  const extension = (value.type || '').toLowerCase()
+  if (IMAGE_EXT.includes(extension))
     return 'image'
-  if (VIDEO_EXT.includes(ext))
+  if (VIDEO_EXT.includes(extension))
     return 'video'
-  if (AUDIO_EXT.includes(ext))
+  if (AUDIO_EXT.includes(extension))
     return 'audio'
   return 'document'
 }
 
-const kind = kindOf(item)
-const previewUrl = item.thumbnail || item.url || ''
-const hasImage = kind === 'image' && !!previewUrl
+const kind = derived(() => kindOf(currentItem()))
+const previewUrl = derived(() => currentItem().thumbnail || currentItem().url || '')
+const hasImage = derived(() => kind() === 'image' && Boolean(previewUrl()))
 
 const glyphByKind: Record<string, string> = {
   image: 'i-hugeicons-image-01 text-indigo-300',
@@ -67,77 +55,45 @@ const glyphByKind: Record<string, string> = {
   folder: 'i-hugeicons-folder-02 text-indigo-300',
   document: 'i-hugeicons-file-01 text-stone-300',
 }
-const glyphClass = `h-14 w-14 ${glyphByKind[kind] || glyphByKind.document}`
-const previewBg = kind === 'video'
+const glyphClass = derived(() => `h-14 w-14 ${glyphByKind[kind()] || glyphByKind.document}`)
+const previewClass = derived(() => `flex overflow-hidden items-center justify-center h-48 rounded-xl ${kind() === 'video'
   ? 'bg-gradient-to-br from-neutral-800 to-neutral-950'
-  : 'bg-gradient-to-br from-stone-100 to-stone-200 dark:from-neutral-800 dark:to-neutral-900'
+  : 'bg-gradient-to-br from-stone-100 to-stone-200 dark:from-neutral-800 dark:to-neutral-900'}`)
 
 function formatBytes(bytes: number): string {
   if (!bytes)
     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]}`
+  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 formatWhen(value?: string): string {
+function formatWhen(value?: string | null): string {
   if (!value)
-    return '-'
-  const d = new Date(value)
-  return Number.isNaN(d.getTime())
-    ? '-'
-    : d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+    return 'No date'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime())
+    ? 'No date'
+    : new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: 'numeric' }).format(date)
 }
 
-const sizeLabel = item.type === 'folder' ? '-' : formatBytes(item.size ?? 0)
-const modifiedLabel = formatWhen(item.lastModified)
-const locationLabel = item.path || '/'
-const kindLabel = item.type === 'folder' ? 'Folder' : `${kind}${item.type ? ` (.${item.type})` : ''}`
+const sizeLabel = derived(() => currentItem().type === 'folder' ? '-' : formatBytes(currentItem().size || 0))
+const locationLabel = derived(() => currentItem().path || '/')
+const kindLabel = derived(() => currentItem().type === 'folder' ? 'Folder' : `${kind()}${currentItem().type ? ` (.${currentItem().type})` : ''}`)
 </script>
 
 <div class="flex flex-col">
-  <div :class="previewBg" class="flex overflow-hidden items-center justify-center h-48 rounded-xl">
-    @if (hasImage)
-      <img src="{{ previewUrl }}" alt="{{ item.name }}" class="object-contain h-full w-full" />
-    @elseif (kind === 'video')
-      <div class="flex items-center justify-center h-14 w-14 bg-white/90 rounded-full shadow-md">
-        <div class="ml-0.5 h-6 w-6 text-neutral-900 i-hugeicons-play"></div>
-      </div>
-    @else
-      <div :class="glyphClass"></div>
-    @endif
+  <div :class="previewClass()">
+    <img :if="hasImage()" :src="previewUrl()" :alt="currentItem().name" class="object-contain h-full w-full" />
+    <div :else-if="kind() === 'video'" class="flex items-center justify-center h-14 w-14 bg-white/90 rounded-full shadow-md"><span class="ml-0.5 h-6 w-6 text-neutral-900 i-hugeicons-play"></span></div>
+    <span :else :class="glyphClass()"></span>
   </div>
-
-  <h4 class="mt-4 break-words font-semibold text-[15px] text-stone-800 dark:text-white">{{ item.name }}</h4>
-
+  <h4 class="mt-4 break-words font-semibold text-[15px] text-stone-800 dark:text-white">{{ currentItem().name }}</h4>
   <dl class="mt-4 space-y-3 text-[13px]">
-    <div class="flex gap-4 items-start justify-between">
-      <dt class="text-stone-400 dark:text-neutral-500">Type</dt>
-      <dd class="capitalize font-medium text-right text-stone-700 dark:text-neutral-200">{{ kindLabel }}</dd>
-    </div>
-    <div class="flex gap-4 items-start justify-between">
-      <dt class="text-stone-400 dark:text-neutral-500">Size</dt>
-      <dd class="font-medium text-right text-stone-700 dark:text-neutral-200">{{ sizeLabel }}</dd>
-    </div>
-    <div class="flex gap-4 items-start justify-between">
-      <dt class="text-stone-400 dark:text-neutral-500">Location</dt>
-      <dd class="break-all font-medium text-right text-stone-700 dark:text-neutral-200">{{ locationLabel }}</dd>
-    </div>
-    <div class="flex gap-4 items-start justify-between">
-      <dt class="text-stone-400 dark:text-neutral-500">Modified</dt>
-      <dd class="font-medium text-right text-stone-700 dark:text-neutral-200">{{ modifiedLabel }}</dd>
-    </div>
+    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-400 dark:text-neutral-500">Type</dt><dd class="capitalize font-medium text-right text-stone-700 dark:text-neutral-200">{{ kindLabel() }}</dd></div>
+    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-400 dark:text-neutral-500">Size</dt><dd class="font-medium text-right text-stone-700 dark:text-neutral-200">{{ sizeLabel() }}</dd></div>
+    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-400 dark:text-neutral-500">Location</dt><dd class="break-all font-medium text-right text-stone-700 dark:text-neutral-200">{{ locationLabel() }}</dd></div>
+    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-400 dark:text-neutral-500">Modified</dt><dd class="font-medium text-right text-stone-700 dark:text-neutral-200">{{ formatWhen(currentItem().lastModified) }}</dd></div>
   </dl>
-
-  <div class="flex gap-2 mt-5">
-    <span :show="item.starred" class="inline-flex gap-1 items-center px-2 py-1 font-medium text-[11px] text-yellow-700 dark:text-yellow-300 bg-yellow-100 dark:bg-yellow-500/15 rounded-full">
-      <div class="h-3 w-3 i-hugeicons-star"></div>
-      Starred
-    </span>
-    <span :show="item.shared" class="inline-flex gap-1 items-center px-2 py-1 font-medium text-[11px] text-indigo-700 dark:text-indigo-300 bg-indigo-100 dark:bg-indigo-500/15 rounded-full">
-      <div class="h-3 w-3 i-hugeicons-share-01"></div>
-      Shared
-    </span>
-  </div>
+  <span :if="currentItem().shared" class="inline-flex gap-1 items-center self-start mt-5 px-2 py-1 font-medium text-[11px] text-indigo-700 dark:text-indigo-300 bg-indigo-100 dark:bg-indigo-500/15 rounded-full"><span class="h-3 w-3 i-hugeicons-share-01"></span>Public disk</span>
 </div>