Appearance

Search & Discovery ​

File Information ​

  • Path: app/pages/[brand_name]/search.vue, app/composables/core/pages/useSearch.ts
  • Purpose: Comprehensive search system with Typesense integration

Overview ​

The Search System provides comprehensive search functionality with Typesense integration. It supports full-text search, advanced filtering (tags, file types, dates), pagination, sorting, bulk actions, and URL-based search state management with encryption.

Architecture ​

System Components ​

  1. Search Bar: Header search bar with suggestions and results dropdown
  2. Search Filter: Advanced filter panel with multiple filter types
  3. Search Results: Display results with grid/list view modes
  4. Search API: Typesense integration for high-performance search
  5. URL State Management: Encrypted query parameters for deep linking
  6. Result Tabs: Assets, Collages and Folders, one Typesense collection each (digital_assets, dam_collections, digital_assets_categories)

Key Features ​

1. Full-Text Search ​

  • Search query input with Typesense integration
  • Search suggestions
  • Encrypted URL state management
  • Real-time search results
  • Wildcard search support

2. Advanced Filters ​

  • Tag Filters: Infinite scroll pagination for tags
  • File Type Filters: Paginated file type selection
  • Date Range Filters: Date-added and last-modified-date filters
  • Custom Field Filters: Workspace-specific custom fields
  • Filter Persistence: Filters stored in encrypted URL
  • Filter Removal: Easy filter removal with chips

3. Search Results ​

  • Grid and list view modes
  • Sortable columns (Name, Date Modified, Date Added, File Size, File Type)
  • Infinite scroll pagination
  • Bulk selection and actions
  • Results count display

3a. Tabs, Matched In and empty states ​

  • SearchTabs switches between Assets, Collages and Folders; the tab is kept in ?tab= (absent for Assets). Only the active tab's collection is queried.
  • Collages and Folders are searched only when no asset-type filter and no asset-only filter (tags, file type, orientation, uploaded by, collage, custom fields) is applied; otherwise those tabs show 0 results and the tabs are hidden while an asset-type filter is set.
  • A "Matched In" column (SearchMatchChip, SearchMatchDetails) is inserted after Name when at least one result has search_matches.
  • Folder rows show an item count ("#") loaded after the results; collage rows show "#Assets". Neither column is sortable.
  • SearchEmptyState ("Sorry! We couldn't find what you're looking for." / "Try adjusting your filters or keywords.") renders when the active tab is empty (noTabResults), when the whole search is empty (noDataFound) and in the header search dropdown.
  • PopularFilterPills shows quick custom-field filters next to the search type toggle.

4. Bulk Actions ​

  • Download selected assets
  • Share selected assets
  • Remove selection
  • Selection count display

5. URL State Management ​

  • Encrypted query parameters
  • Filter state in URL
  • Deep linking support
  • Browser back/forward support
  • Shareable search URLs

File Structure ​

Core Files ​

Vue Page Files (.vue) ​

  • app/pages/[brand_name]/search.vue - Main search page
    • Search interface
    • Filter management
    • Results display
    • Bulk actions

Route: /{brand_name}/search

Composables ​

  • app/composables/core/pages/useSearch.ts - Search page composable

    • Search execution
    • Filter management
    • Result pagination
    • URL state management
    • Sorting and view modes

  • app/composables/core/components/search/useSearchBar.ts - Search bar composable

    • Search bar state
    • Search suggestions
    • Search execution

  • app/composables/core/components/search/useSearchFilter.ts - Search filter composable

    • Filter state management
    • Filter operations
    • Filter persistence

Components ​

  • app/components/search/SearchBar.vue - Header search bar

    • Search input
    • Search suggestions
    • Quick filters
    • Search results dropdown

  • app/components/search/SearchFilter.vue - Advanced filter panel

    • Tag filters with infinite scroll
    • File type filters
    • Date range filters
    • Custom field filters

  • app/components/search/SearchAssets.vue - Search results display

    • Grid/list view toggle
    • Asset cards
    • Pagination
    • Infinite scroll

  • app/components/search/SearchBulkActions.vue - Bulk actions toolbar

    • Download selected
    • Share selected
    • Clear selection

  • app/components/search/AddedFilterOption.vue - Active filter display

    • Filter chip display
    • Remove filter action

  • app/components/search/SearchTableHeader.vue - Table header with sorting

  • app/components/search/SearchTabs.vue - Assets / Collages / Folders tabs

  • app/components/search/SearchLibraryItems.vue - Collage and folder results (grid and list)

  • app/components/search/SearchMatchChip.vue, SearchMatchDetails.vue - Matched In chips and details menu

  • app/components/search/SearchEmptyState.vue - No-results state

  • app/components/search/PopularFilterPills.vue - Popular custom-field filter pills

Stores ​

  • app/stores/search.ts - Search state management
    • Search query
    • Active filters
    • Search results
    • Pagination state
    • Popular search data

API ​

  • server/api/typesense/search.post.ts - Server-side Typesense search proxy
  • app/composables/api/useSearchApi.ts - Search API composable

Data Flow ​

Search Execution ​

  1. User enters search query or applies filters
  2. Search state encrypted and stored in URL
  3. Typesense API called with query and filters
  4. Results processed and displayed
  5. Pagination handled via infinite scroll

Filter Management ​

  1. User opens filter panel
  2. Filters selected (tags, file types, dates)
  3. Filter list updated
  4. URL encrypted with new filter state
  5. Search executed with new filters
  6. Results updated

User Interactions ​

  1. Search Input

    • Enter search query
    • Search triggers on filter changes
    • Encrypted URL state management

  2. Filter Management

    • Add filters (tags, file types, dates)
    • Remove filters
    • Reset all filters
    • Filter pagination with infinite scroll

  3. Results Display

    • Toggle grid/list view
    • Sort by columns
    • Scroll for more results
    • Select assets for bulk actions

  4. Bulk Actions

    • Download selected assets
    • Share selected assets
    • Remove selection

  5. URL Sharing

    • Share URL with search state
    • Deep linking support
    • Browser back/forward support

Performance Optimizations ​

  1. Scroll Throttling: Uses requestAnimationFrame for scroll events
  2. Debouncing: Debounces load more calls (300ms)
  3. Pagination: Loads 48 items per page (perPage in useSearch)
  4. Lazy Loading: Tags and file types loaded with pagination
  5. URL State: Encrypted state prevents URL length issues
  6. Request Batching: Batches state updates using nextTick

API Endpoints ​

Search Assets ​

  • Endpoint: POST /api/typesense/search (via useSearchApi().searchAssets())
  • Request: Typesense search payload with filters and sorting
  • Response: Search results with pagination

Get Search Data ​

  • Endpoint: GET /digital/get-search-data?workspace_id={workspaceId}&instance_id={instanceId} (via getSearchData())
  • Response: Tags, file types and custom fields metadata