Appearance

Folder Management ​

File Information ​

  • Listing page: app/pages/[brand_name]/folders/index.vue — /{brand_name}/folders
  • Detail page: app/pages/[brand_name]/folders/[id]/index.vue — /{brand_name}/folders/{id}
  • Composables: useFolders.ts (listing), useFolderDetails.ts (detail)

Overview ​

The Folder Management system covers two pages: a top-level folder listing and a folder detail page. The detail page also embeds an inner search allowing users to find assets within the folder using Typesense filters.

Architecture ​

System Components ​

  1. Folder Listing Page: Browse all top-level folders; grid or list view
  2. Folder Details Page: Display folder contents (assets and subfolders)
  3. Folder Navigation: Breadcrumb navigation through folder hierarchy
  4. Folder Cards: Folder display in grid/list views
  5. Inner Search: Search assets within a folder via embedded search bar + SearchFilter
  6. Folder Operations: Navigate, download, share folders
  7. Bulk Operations: Operations on multiple selected items

Key Features ​

0. Folder Listing Page (folders/index.vue) ​

  • All top-level folders displayed in grid or list view
  • Grid view: FolderCard components in responsive columns
  • List view: sortable table — Name, Description, Date Modified, Date Added, # (subfolder + asset count)
  • Sort columns: folder_name, modified_at, created_at, sub_category_count
  • Per-row options menu: Share, Download
  • Empty state: emptyCollageIcon + explanatory copy
  • Composable: useFolders()

1. Hierarchical Navigation ​

  • Navigate through folder hierarchy
  • Breadcrumb navigation showing full path
  • Back navigation support
  • Unlimited nesting depth
  • Parent folder navigation

2. Folder Contents Display ​

  • Assets (files) and subfolders in same view
  • Grid and list view modes
  • View mode preference caching
  • Smooth transitions between views
  • Empty state handling

3. Sorting ​

  • Sort by Name, Date Modified, Date Added, File Size, File Type
  • Ascending/descending toggle
  • Visual sort indicators
  • Server-side sorting support
  • Sort state persistence

4. Selection & Bulk Actions ​

  • Single and multi-select (Shift+Click support)
  • Select all functionality
  • Bulk download
  • Bulk share
  • Selection count display
  • Selection state persists across pagination

5. Folder Operations ​

  • Share folder (all contents)
  • Download folder (as ZIP)
  • Navigate to subfolders
  • View folder metadata
  • Folder options menu

6. Inner Search (Folder Detail) ​

The folder detail page embeds a contextual search scoped to the current folder:

  • Search bar: v-text-field bound to searchTerm; placeholder Search in {folder_name}
  • Filter panel: SearchFilter component (file type, tags, custom fields, dates, users)
  • Events: handleSearchInput (debounced), performSearch (Enter key), clearSearch (× button), applySearchFilters (filter apply)
  • State: searchLoading — shows progress bar while Typesense query runs
  • Empty state: shown when isSearchActive && displayFiles.length === 0
  • Results replace the normal asset listing; clearing search restores folder contents

7. Infinite Scroll Pagination ​

  • Automatic loading on scroll
  • Skeleton loaders
  • Scroll position management
  • Loads 36 items per page
  • Scroll triggers at 85% of container height

File Structure ​

Core Files ​

Vue Page Files (.vue) ​

  • app/pages/[brand_name]/folders/index.vue — Folder listing page

    • All top-level folders, grid/list view
    • Sortable list view (Name, Date Modified, Date Added, count)
    • Per-folder share/download actions
    • Route: /{brand_name}/folders

  • app/pages/[brand_name]/folders/[id]/index.vue — Folder details page

    • Folder contents display (assets + subfolders)
    • Navigation and breadcrumbs
    • View mode toggle, sorting, selection, bulk operations
    • Embedded inner search with SearchFilter
    • Route: /{brand_name}/folders/{id}

Composables ​

  • app/composables/core/pages/useFolderDetails.ts - Folder details composable

    • Folder data fetching
    • Asset listing
    • Subfolder navigation
    • Breadcrumb management
    • Selection handling

  • app/composables/core/pages/useFolders.ts - Folder list composable

    • Folder fetching
    • Folder operations
    • Folder navigation

Components ​

  • app/components/card/FolderCard.vue - Folder card component

    • Folder icon/thumbnail
    • Folder metadata
    • Navigation support
    • Quick actions

  • app/components/miscellaneous/BreadCrumbs.vue - Breadcrumb navigation

    • Hierarchical path display
    • Navigation links
    • Parent folder links

API ​

  • app/composables/api/useFolderApi.ts - Folder API operations
    • Get folder details
    • Get folder contents
    • Create folder
    • Update folder
    • Delete folder

Data Flow ​

Folder Navigation ​

  1. User clicks folder card or navigates to folder URL
  2. Folder details fetched from API
  3. Folder contents (assets + subfolders) loaded
  4. Breadcrumbs generated from folder parent chain
  5. Contents displayed in selected view mode

Folder Operations ​

  1. User selects folder or items
  2. Action triggered (download, share, etc.)
  3. Operation executed
  4. Results displayed
  5. State updated

User Interactions ​

  1. Folder Navigation

    • Click folders to navigate to subfolders
    • Use breadcrumbs to navigate up hierarchy
    • Back navigation support

  2. View Modes

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

  3. Sorting

    • Sort by Name, Date Modified, Date Added, File Size, File Type
    • Click column headers to sort
    • Visual sort indicators

  4. Selection

    • Single click to select
    • Shift+Click for range selection
    • Select all functionality
    • Selection count display

  5. Bulk Actions

    • Download selected items
    • Share selected items
    • Remove selection

  6. Item Actions

    • Download files/folders
    • Share files/folders
    • Navigate to asset details
    • Navigate to subfolders

Performance Optimizations ​

  1. Asset Caching: Folder asset counts cached to avoid repeated API calls
  2. Pagination: Loads items in pages (default 36 per page)
  3. Scroll Throttling: Scroll events handled efficiently
  4. Lazy Loading: Images loaded on demand
  5. View Mode Caching: User preference cached in localStorage

API Endpoints ​

Get Folder Details ​

  • Endpoint: GET /folders/{id} (via fetchFolderDetails())
  • Parameters: category_id, workspace_id, page, sort_value, sort_by
  • Response: Folder data with assets and subfolders, breadcrumb, total counts