Appearance

Collage List Page ​

File Information ​

  • Path: app/pages/[brand_name]/collage/index.vue
  • Route: /{brand_name}/collage
  • Purpose: Display list of all collages (collections) with grid/list views, sorting, and actions
  • Layout: collage-layout
  • Middleware: check-url

Overview ​

The Collage List page displays all collages (collections) in a grid or list view. Users can sort collages, view collage details, share collages, and navigate to collage contents. This is the main entry point for collage navigation.

Key Features ​

  1. Collage Display

    • Grid view with collage cards
    • List view with sortable columns
    • View mode toggle
    • View mode preference caching
    • Preview images in grid view

  2. Sorting

    • Sort by Name (client-side)
    • Visual sort indicators
    • Hover states for sortable columns

  3. Collage Actions

    • Share collage (if not empty)
    • Navigate to collage details
    • Collage menu with options

  4. Empty State

    • Message when no collages exist

  5. Infinite Scroll

    • Automatic loading on scroll
    • Skeleton loaders
    • Scroll position management

Components Used ​

  • CollageCard - Collage card component for grid view
  • ShareAssetDialog - Share dialog component
  • AsyncIcon - Async icon component
  • v-skeleton-loader - Skeleton loaders
  • v-menu - Vuetify menu component
  • v-tooltip - Tooltip component
  • v-img - Vuetify image component

Composables Used ​

  • useCollage() - Collage list management (app/composables/core/pages/useCollage.ts)
  • useSnackbar() - Snackbar notifications
  • useFileType() - File type utilities

Data Properties ​

Reactive Data (from useCollage composable) ​

typescript
{
  loading: boolean,                  // Loading state
  collagesList: Collage[],          // Collages array
  viewMode: 'list' | 'grid',        // Current view mode
  shareDialog: boolean,             // Share dialog visibility
  collage: Collage | null,          // Selected collage for sharing
  hover_name: boolean,              // Name column hover
  showArrowSort: Record<string, boolean> // Sort arrow visibility
}

Computed Properties ​

None - uses composable properties directly.

Methods ​

setCachedViewMode(mode: 'list' | 'grid') ​

Sets view mode and caches preference.

typescript
function setCachedViewMode(mode: 'list' | 'grid') {
  viewMode.value = mode
  // Caches preference in localStorage
}

sortCollage(field: string, toggle: boolean) ​

Handles column sorting (client-side).

typescript
function sortCollage(field: string, toggle: boolean) {
  // Updates sort state
  // Performs client-side sorting
  // Updates arrow visibility
}

isActiveArrow(field: string) ​

Returns CSS class for active sort column.

typescript
function isActiveArrow(field: string): string {
  // Returns active class if field is sorted
}

formatDate(date: string) ​

Formats date for display.

typescript
function formatDate(date: string): string {
  // Formats date string
}

openCollage(collage: Collage, event: Event) ​

Opens collage details page.

typescript
function openCollage(collage: Collage, event: Event) {
  // Prevents default if needed
  // Navigates to collage details
}

shareCollage(collage: Collage) ​

Opens share dialog for collage.

typescript
function shareCollage(collage: Collage) {
  collage.value = collage
  shareDialog.value = true
}

User Interactions ​

  1. View Modes

    • Toggle grid/list view
    • View mode preference cached
    • Smooth transitions

  2. Sorting

    • Sort by Name (client-side)
    • Click column header to sort
    • Visual sort indicators

  3. Collage Navigation

    • Click collage to navigate to collage details
    • Preview images in grid view

  4. Collage Actions

    • Share collage via menu (if not empty)
    • Collage options menu
    • Disabled share for empty collages

  5. Empty State

    • Message displayed when no collages

Styling ​

  • Uses custom CSS from assets/scss/custom.scss
  • Responsive breakpoints for mobile/tablet/desktop
  • Grid/list view styling
  • Skeleton loaders for loading states
  • Custom scrollbar styling
  • Preview image styling

Lifecycle Hooks ​

onMounted ​

Initializes collages data.

typescript
onMounted(async () => {
  // Fetches collages list
  // Sets up view mode from cache
})

API Endpoints ​

Get Collages List ​

  • Endpoint: GET /collections (via useCollage composable)
  • Parameters:
    typescript
    {
  workspace_id: string,
  page?: number
}
  • Response: Array of collage objects with preview images

User Flow ​

  1. User navigates to collage list page
  2. Page fetches collages list
  3. User can:
    • Toggle grid/list view
    • Sort by name
    • Click collages to navigate to details
    • Share collages (if not empty)
    • Scroll for more collages
  4. Empty state shown when no collages exist

Performance Optimizations ​

  1. View Mode Caching: User preference cached in localStorage
  2. Client-Side Sorting: Sorts loaded collages without API call
  3. Scroll Throttling: Scroll events handled efficiently
  4. Lazy Loading: Collages loaded on demand
  5. Image Optimization: Preview images optimized

Notes for Development ​

  • Page requires authentication (handled by global auth middleware)
  • View mode preference cached in localStorage
  • Client-side sorting only affects loaded collages
  • Empty state provides helpful information
  • Collage cards show preview images and asset counts
  • Share disabled for empty collages (with tooltip)
  • Share dialog supports collection sharing
  • Preview images from first asset in collage