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

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

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

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
  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 searchAssetsApi())
  • Request: Typesense search payload with filters and sorting
  • Response: Search results with pagination

Get Search Data ​

  • Endpoint: GET /search/data (via getSearchData())
  • Response: Tags and file types metadata