@motor-cms/ui-media 1.0.1-alpha.0

package/app/components/media/Gallery.vue

@@ -0,0 +1,327 @@
+<script setup lang="ts">
+import { useIntersectionObserver } from '@vueuse/core'
+import type {
+  FilterDef,
+  BulkActionDef,
+  PaginatedResponse,
+  GridParams
+} from '@motor-cms/ui-core/app/types/grid'
+import type { FileResource } from '../../types/media'
+
+const props = withDefaults(defineProps<{
+  id: string
+  fetch: (params: GridParams) => Promise<PaginatedResponse<FileResource>>
+  filters?: FilterDef[]
+  bulkActions?: BulkActionDef[]
+  searchable?: boolean
+  perPage?: number
+}>(), {
+  searchable: true,
+  perPage: 25
+})
+
+const emit = defineEmits<{
+  'show-usage': [fileId: number]
+}>()
+
+const { t } = useI18n()
+
+// Grid state — used only for search + filters (URL-synced)
+const gridState = useGridState({
+  gridId: props.id,
+  defaultPerPage: props.perPage
+})
+
+if (props.filters) {
+  gridState.initFilters(props.filters.map(f => f.key))
+}
+
+// Accumulated items + internal pagination
+const items = ref<FileResource[]>([])
+const currentPage = ref(0)
+const lastPage = ref(1)
+const totalItems = ref(0)
+const initialLoading = ref(true)
+const loadingMore = ref(false)
+const fetchError = ref<Error | null>(null)
+
+// Selection
+const selectedIds = ref<Set<number>>(new Set())
+const hasBulkActions = computed(() => (props.bulkActions?.length ?? 0) > 0)
+
+function toggleSelection(id: number, selected: boolean) {
+  const next = new Set(selectedIds.value)
+  if (selected) next.add(id)
+  else next.delete(id)
+  selectedIds.value = next
+}
+
+function clearSelection() {
+  selectedIds.value = new Set()
+}
+
+const selectedIdsArray = computed(() => Array.from(selectedIds.value))
+
+const hasActiveFilters = computed(() => {
+  if (gridState.state.search) return true
+  return Object.values(gridState.state.filters).some(
+    v => v !== undefined && v !== null && v !== '' && !(Array.isArray(v) && v.length === 0)
+  )
+})
+
+const hasMore = computed(() => currentPage.value < lastPage.value)
+
+// Build fetch params combining filters with internal page
+function buildParams(page: number): GridParams {
+  const params: GridParams = {
+    page,
+    per_page: props.perPage
+  }
+  if (gridState.state.search) params.search = gridState.state.search
+  Object.entries(gridState.state.filters).forEach(([key, value]) => {
+    if (value !== undefined && value !== null && value !== '') {
+      params[key] = value
+    }
+  })
+  return params
+}
+
+async function loadPage(page: number, append: boolean): Promise<void> {
+  try {
+    const response = await props.fetch(buildParams(page))
+    if (append) {
+      items.value = [...items.value, ...response.data]
+    } else {
+      items.value = response.data
+    }
+    currentPage.value = response.meta.current_page
+    lastPage.value = response.meta.last_page
+    totalItems.value = response.meta.total
+    fetchError.value = null
+  } catch (e) {
+    fetchError.value = e as Error
+  }
+}
+
+async function loadMore(): Promise<void> {
+  if (loadingMore.value || !hasMore.value) return
+  loadingMore.value = true
+  try {
+    await loadPage(currentPage.value + 1, true)
+  } finally {
+    loadingMore.value = false
+  }
+}
+
+async function resetAndFetch(): Promise<void> {
+  initialLoading.value = true
+  currentPage.value = 0
+  selectedIds.value = new Set()
+  try {
+    await loadPage(1, false)
+  } finally {
+    initialLoading.value = false
+  }
+}
+
+defineExpose({ refresh: resetAndFetch })
+
+// Register contextual shortcuts for the overlay
+const { register: registerShortcut, unregister: unregisterShortcut } = useShortcutRegistry()
+registerShortcut({
+  id: 'media',
+  label: t('motor-core.shortcuts.media'),
+  icon: 'i-lucide-image',
+  shortcuts: [
+    { keys: ['meta', t('motor-core.shortcuts.click')], label: t('motor-core.shortcuts.select_multiple'), icon: 'i-lucide-mouse-pointer-click' }
+  ]
+})
+onUnmounted(() => unregisterShortcut('media'))
+
+// SSR-safe initial load (page 1)
+const { error: ssrError } = await useAsyncData(
+  `gallery-${props.id}-init`,
+  () => loadPage(1, false)
+)
+if (ssrError.value) fetchError.value = ssrError.value
+initialLoading.value = false
+
+// Watch filter/search changes — reset accumulated data
+const filterKey = computed(() => JSON.stringify({
+  search: gridState.state.search,
+  filters: gridState.state.filters
+}))
+
+watch(filterKey, () => {
+  resetAndFetch()
+})
+
+// Intersection observer for infinite scroll
+const sentinelRef = ref<HTMLElement | null>(null)
+
+useIntersectionObserver(
+  sentinelRef,
+  ([entry]) => {
+    if (entry?.isIntersecting && hasMore.value && !loadingMore.value && !initialLoading.value) {
+      loadMore()
+    }
+  },
+  { rootMargin: '200px' }
+)
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 flex-1 min-h-0">
+    <!-- Toolbar (search + filters only, no pagination) -->
+    <GridToolbar
+      :searchable="searchable"
+      :filters="filters"
+      :search-value="gridState.state.search"
+      :filter-values="gridState.state.filters"
+      :has-active-filters="hasActiveFilters"
+      @update:search-value="gridState.setSearch($event)"
+      @update:filter-value="(key: string, value: unknown) => gridState.setFilter(key, value)"
+      @reset-filters="gridState.resetFilters()"
+    >
+      <template #toolbar-extra>
+        <span
+          v-if="totalItems > 0"
+          class="text-sm text-muted whitespace-nowrap"
+        >
+          {{ items.length }} / {{ totalItems }}
+        </span>
+        <slot name="toolbar-extra" />
+      </template>
+    </GridToolbar>
+
+    <!-- Bulk Actions -->
+    <GridBulkActions
+      v-if="bulkActions && bulkActions.length > 0"
+      :actions="bulkActions"
+      :selected-ids="selectedIdsArray"
+      @action-complete="resetAndFetch"
+      @clear-selection="clearSelection"
+    />
+
+    <!-- Scrollable content area -->
+    <div class="flex-1 min-h-0 overflow-y-auto p-2">
+      <!-- Error state -->
+      <div
+        v-if="fetchError"
+        class="flex flex-col items-center justify-center py-12 gap-3"
+      >
+        <UIcon
+          name="i-lucide-alert-triangle"
+          class="text-red-500 size-8"
+        />
+        <p class="text-sm text-muted">
+          {{ fetchError.message || t('motor-core.grid.fetch_error') }}
+        </p>
+        <UButton
+          :label="t('motor-core.grid.retry')"
+          icon="i-lucide-refresh-cw"
+          variant="outline"
+          size="sm"
+          @click="resetAndFetch()"
+        />
+      </div>
+
+      <!-- Initial loading skeleton -->
+      <div
+        v-else-if="initialLoading"
+        class="columns-2 md:columns-3 lg:columns-4 xl:columns-5 gap-4"
+      >
+        <div
+          v-for="i in 12"
+          :key="i"
+          class="break-inside-avoid mb-4"
+        >
+          <USkeleton
+            class="w-full rounded-xl"
+            :style="{ height: `${140 + (i % 4) * 40}px` }"
+          />
+        </div>
+      </div>
+
+      <!-- Gallery masonry grid -->
+      <template v-else-if="items.length > 0">
+        <div class="columns-2 md:columns-3 lg:columns-4 xl:columns-5 gap-4">
+          <MediaGalleryCard
+            v-for="item in items"
+            :key="item.id"
+            :item="item"
+            :selectable="hasBulkActions"
+            :selected="selectedIds.has(item.id)"
+            @select="toggleSelection"
+            @show-usage="emit('show-usage', $event)"
+          />
+        </div>
+
+        <!-- Infinite scroll sentinel -->
+        <div
+          ref="sentinelRef"
+          class="flex items-center justify-center py-6"
+        >
+          <div
+            v-if="loadingMore"
+            class="flex items-center gap-2 text-sm text-muted"
+          >
+            <UIcon
+              name="i-lucide-loader-2"
+              class="size-4 animate-spin"
+            />
+            {{ t('motor-core.global.loading') }}
+          </div>
+          <span
+            v-else-if="!hasMore"
+            class="text-xs text-dimmed"
+          >
+            {{ t('motor-media.files.all_loaded') }}
+          </span>
+        </div>
+      </template>
+
+      <!-- Empty states -->
+      <div v-else>
+        <div
+          v-if="hasActiveFilters"
+          class="flex flex-col items-center justify-center py-16 gap-3"
+        >
+          <UIcon
+            name="i-lucide-search-x"
+            class="size-10 text-muted"
+          />
+          <p class="text-sm font-medium text-muted">
+            {{ t('motor-core.grid.no_filter_results') }}
+          </p>
+          <p class="text-xs text-dimmed">
+            {{ t('motor-core.grid.no_filter_results_hint') }}
+          </p>
+          <UButton
+            :label="t('motor-core.grid.clear_filters')"
+            icon="i-lucide-x"
+            variant="outline"
+            size="sm"
+            @click="gridState.resetFilters()"
+          />
+        </div>
+        <div
+          v-else
+          class="flex flex-col items-center justify-center py-16 gap-3"
+        >
+          <UIcon
+            name="i-lucide-image"
+            class="size-10 text-muted"
+          />
+          <p class="text-sm font-medium text-muted">
+            {{ t('motor-core.grid.no_records') }}
+          </p>
+          <p class="text-xs text-dimmed">
+            {{ t('motor-core.grid.no_records_create') }}
+          </p>
+          <slot name="empty-action" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/media/GalleryCard.vue

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import type { FileResource } from '../../types/media'
+
+const props = defineProps<{
+  item: FileResource
+  selected?: boolean
+  selectable?: boolean
+}>()
+
+const emit = defineEmits<{
+  'select': [id: number, selected: boolean]
+  'show-usage': [fileId: number]
+}>()
+
+function handleCardClick(e: MouseEvent) {
+  if (!props.selectable) return
+  if (e.metaKey || e.ctrlKey) {
+    e.preventDefault()
+    e.stopPropagation()
+    emit('select', props.item.id, !props.selected)
+  }
+}
+
+const createdAt = computed(() => {
+  const raw = props.item.file?.created_at
+  if (!raw) return ''
+  return new Date(raw).toLocaleDateString(undefined, {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric'
+  })
+})
+
+const toast = useToast()
+const { t } = useI18n()
+const lightboxOpen = ref(false)
+
+const media = computed(() => props.item.file)
+
+const thumbnailUrl = computed(() => {
+  // Prefer API url (actual storage/CDN URL) when available
+  if (media.value?.url) return media.value.url
+  if (!props.item.id) return undefined
+  return `${backendBaseUrl}/download/${props.item.id}`
+})
+
+const isImage = computed(() => media.value?.mime_type?.startsWith('image/'))
+
+const fileExtension = computed(() => {
+  if (!media.value?.file_name) return ''
+  return media.value.file_name.split('.').pop()?.toUpperCase() ?? ''
+})
+
+const mimeIcon = computed(() => {
+  const mime = media.value?.mime_type ?? ''
+  if (mime.startsWith('video/')) return 'i-lucide-film'
+  if (mime.startsWith('audio/')) return 'i-lucide-music'
+  if (mime.includes('pdf')) return 'i-lucide-file-text'
+  if (mime.includes('zip') || mime.includes('archive') || mime.includes('compressed')) return 'i-lucide-archive'
+  if (mime.includes('spreadsheet') || mime.includes('excel') || mime.includes('csv')) return 'i-lucide-table'
+  if (mime.includes('document') || mime.includes('word') || mime.includes('text')) return 'i-lucide-file-text'
+  return 'i-lucide-file'
+})
+
+const runtimeConfig = useRuntimeConfig()
+const backendBaseUrl = runtimeConfig.public.backendBaseUrl as string
+
+const downloadUrl = computed(() => {
+  if (!props.item.id) return undefined
+  return `${backendBaseUrl}/download/${props.item.id}`
+})
+
+async function copyUrl() {
+  const url = downloadUrl.value
+  if (!url) return
+  try {
+    await navigator.clipboard.writeText(url)
+  } catch {
+    const textarea = document.createElement('textarea')
+    textarea.value = url
+    textarea.style.position = 'fixed'
+    textarea.style.opacity = '0'
+    document.body.appendChild(textarea)
+    textarea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textarea)
+  }
+  toast.add({
+    title: t('motor-media.files.url_copied'),
+    icon: 'i-lucide-check',
+    color: 'success'
+  })
+}
+
+async function forceDownload() {
+  const url = downloadUrl.value
+  if (!url) return
+  try {
+    const response = await fetch(url, { credentials: 'include' })
+    const blob = await response.blob()
+    const blobUrl = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = blobUrl
+    a.download = media.value?.file_name ?? 'download'
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(blobUrl)
+  } catch {
+    const a = document.createElement('a')
+    a.href = url
+    a.download = media.value?.file_name ?? 'download'
+    a.target = '_blank'
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+  }
+}
+
+function onCheckboxChange(checked: boolean | 'indeterminate') {
+  if (typeof checked === 'boolean') {
+    emit('select', props.item.id, checked)
+  }
+}
+</script>
+
+<template>
+  <div class="group break-inside-avoid mb-4">
+    <div
+      class="relative rounded-xl overflow-hidden ring-1 ring-[var(--ui-border)] bg-[var(--ui-bg-elevated)] shadow-sm hover:shadow-xl hover:ring-[var(--ui-border-accented)] transition-all duration-300"
+      :class="{ 'ring-2 ring-[var(--ui-primary)]': selected }"
+      @click="handleCardClick"
+    >
+      <!-- Selection checkbox -->
+      <div
+        v-if="selectable"
+        class="absolute top-2.5 left-2.5 z-10 transition-opacity duration-200"
+        :class="selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'"
+        data-no-row-click
+      >
+        <UCheckbox
+          :model-value="selected"
+          @update:model-value="onCheckboxChange"
+        />
+      </div>
+
+      <!-- File type badge -->
+      <div
+        v-if="fileExtension"
+        class="absolute top-2.5 right-2.5 z-10 px-2 py-0.5 rounded-md text-[10px] font-bold tracking-wider uppercase bg-black/50 text-white backdrop-blur-sm"
+      >
+        {{ fileExtension }}
+      </div>
+
+      <!-- Image thumbnail -->
+      <NuxtLink
+        v-if="isImage && thumbnailUrl"
+        :to="`/motor-media/files/${item.id}/edit`"
+        class="block"
+      >
+        <img
+          :src="thumbnailUrl"
+          :alt="item.description || media?.file_name || ''"
+          class="w-full block transition-transform duration-300 group-hover:scale-105"
+          loading="lazy"
+        >
+      </NuxtLink>
+
+      <!-- Non-image placeholder -->
+      <NuxtLink
+        v-else
+        :to="`/motor-media/files/${item.id}/edit`"
+        class="flex aspect-[4/3] flex-col items-center justify-center gap-2 bg-[var(--ui-bg-muted)]"
+      >
+        <UIcon
+          :name="mimeIcon"
+          class="size-12 text-[var(--ui-text-dimmed)]"
+        />
+        <span class="text-xs font-medium text-[var(--ui-text-muted)]">
+          {{ media?.file_name }}
+        </span>
+      </NuxtLink>
+
+      <!-- Hover overlay with actions -->
+      <div class="absolute inset-0 flex items-center justify-center gap-2 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
+        <div class="flex items-center gap-2 pointer-events-auto">
+          <button
+            v-if="isImage"
+            class="flex items-center justify-center size-10 rounded-full bg-white/20 text-white backdrop-blur-sm hover:bg-white/40 transition-colors"
+            :title="t('motor-media.files.preview')"
+            @click.prevent.stop="lightboxOpen = true"
+          >
+            <UIcon
+              name="i-lucide-expand"
+              class="size-5"
+            />
+          </button>
+          <button
+            class="flex items-center justify-center size-10 rounded-full bg-white/20 text-white backdrop-blur-sm hover:bg-white/40 transition-colors"
+            :title="t('motor-core.global.download')"
+            @click.prevent.stop="forceDownload"
+          >
+            <UIcon
+              name="i-lucide-download"
+              class="size-5"
+            />
+          </button>
+          <button
+            class="flex items-center justify-center size-10 rounded-full bg-white/20 text-white backdrop-blur-sm hover:bg-white/40 transition-colors"
+            :title="t('motor-media.files.copy_url')"
+            @click.prevent.stop="copyUrl"
+          >
+            <UIcon
+              name="i-lucide-link"
+              class="size-5"
+            />
+          </button>
+          <button
+            class="flex items-center justify-center size-10 rounded-full bg-white/20 text-white backdrop-blur-sm hover:bg-white/40 transition-colors"
+            :title="t('motor-media.files.usage_title')"
+            @click.prevent.stop="emit('show-usage', item.id)"
+          >
+            <UIcon
+              name="i-lucide-network"
+              class="size-5"
+            />
+          </button>
+        </div>
+      </div>
+
+      <!-- Bottom info bar -->
+      <div class="px-3 py-2.5 border-t border-[var(--ui-border)]">
+        <NuxtLink
+          :to="`/motor-media/files/${item.id}/edit`"
+          class="block truncate text-sm font-medium text-[var(--ui-text)] hover:text-[var(--ui-primary)] transition-colors"
+          :title="item.description || media?.file_name"
+        >
+          {{ item.description || media?.file_name || '-' }}
+        </NuxtLink>
+        <span
+          v-if="createdAt"
+          class="text-xs text-[var(--ui-text-muted)]"
+        >
+          {{ createdAt }}
+        </span>
+      </div>
+    </div>
+
+    <MediaLightbox
+      v-if="isImage"
+      v-model:open="lightboxOpen"
+      :src="downloadUrl ?? ''"
+      :alt="item.description || media?.file_name"
+      :file-name="media?.file_name"
+      :download-url="downloadUrl"
+    />
+  </div>
+</template>

package/app/lang/de/motor-media/files.json

@@ -0,0 +1,45 @@
+{
+  "files": "Dateien",
+  "file": "Datei",
+  "title": "Dateien",
+  "subtitle": "Dateien verwalten",
+  "add": "Datei hinzufuegen",
+  "create_title": "Dateien hochladen",
+  "edit_title": "Datei bearbeiten",
+  "created_success": "Dateien wurden erfolgreich hochgeladen",
+  "updated_success": "Datei wurde erfolgreich aktualisiert",
+  "description": "Beschreibung",
+  "author": "Autor",
+  "source": "Quelle",
+  "alt_text": "Alt-Text",
+  "tags": "Tags",
+  "file_name": "Dateiname",
+  "mime_type": "MIME-Typ",
+  "categories": "Kategorien",
+  "client_id": "Mandant",
+  "is_global": "Global",
+  "is_excluded_from_search_index": "Vom Suchindex ausschliessen",
+  "group_basic": "Allgemein",
+  "group_categories": "Kategorien",
+  "group_settings": "Einstellungen",
+  "drop_files": "Dateien hierher ziehen oder klicken zum Auswaehlen",
+  "browse": "Durchsuchen",
+  "pending_files": "Ausgewaehlte Dateien",
+  "no_files_selected": "Keine Dateien ausgewaehlt",
+  "current_file": "Aktuelle Datei",
+  "replace_file": "Datei ersetzen",
+  "url_copied": "URL in die Zwischenablage kopiert",
+  "copy_url": "URL kopieren",
+  "preview": "Vorschau",
+  "upload_progress": "Lade Datei {current} von {total} hoch...",
+  "categories_required": "Bitte mindestens eine Kategorie auswaehlen",
+  "files_required": "Bitte mindestens eine Datei auswaehlen",
+  "view_gallery": "Galerie-Ansicht",
+  "view_table": "Tabellen-Ansicht",
+  "all_loaded": "Alle Dateien geladen",
+  "change": "Ändern",
+  "upload": "Hochladen",
+  "remove": "Entfernen",
+  "avatar_alt": "Profilbild",
+  "usage_title": "Datei-Verwendung"
+}

package/app/lang/de/motor-media/global.json

@@ -0,0 +1,4 @@
+{
+  "media": "Medien",
+  "section_subtitle": "Dateien und Medieninhalte verwalten"
+}

package/app/lang/en/motor-media/files.json

@@ -0,0 +1,45 @@
+{
+  "files": "Files",
+  "file": "File",
+  "title": "Files",
+  "subtitle": "Manage files",
+  "add": "Upload Files",
+  "create_title": "Upload Files",
+  "edit_title": "Edit File",
+  "created_success": "Files were uploaded successfully",
+  "updated_success": "File was updated successfully",
+  "description": "Description",
+  "author": "Author",
+  "source": "Source",
+  "alt_text": "Alt Text",
+  "tags": "Tags",
+  "file_name": "Filename",
+  "mime_type": "MIME Type",
+  "categories": "Categories",
+  "client_id": "Client",
+  "is_global": "Global",
+  "is_excluded_from_search_index": "Exclude from search index",
+  "group_basic": "General",
+  "group_categories": "Categories",
+  "group_settings": "Settings",
+  "drop_files": "Drop files here or click to browse",
+  "browse": "Browse",
+  "pending_files": "Selected files",
+  "no_files_selected": "No files selected",
+  "current_file": "Current file",
+  "replace_file": "Replace file",
+  "url_copied": "URL copied to clipboard",
+  "copy_url": "Copy URL",
+  "preview": "Preview",
+  "upload_progress": "Uploading file {current} of {total}...",
+  "categories_required": "Please select at least one category",
+  "files_required": "Please select at least one file",
+  "view_gallery": "Gallery view",
+  "view_table": "Table view",
+  "all_loaded": "All files loaded",
+  "change": "Change",
+  "upload": "Upload",
+  "remove": "Remove",
+  "avatar_alt": "Profile avatar",
+  "usage_title": "File Usage"
+}

package/app/lang/en/motor-media/global.json

@@ -0,0 +1,3 @@
+{
+  "media": "Media"
+}

package/app/pages/motor-media/CLAUDE.md

@@ -0,0 +1,7 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+*No recent activity*
+</claude-mem-context>