Appearance

Global Search Functionality ​

Overview ​

The Global Search functionality provides a unified search interface that allows users to search across all content types (assets, folders, collages) within a workspace. It integrates with Typesense for high-performance full-text search and supports advanced filtering, faceting, and sorting.

Architecture ​

Search Components ​

  1. Search Bar: Main search input component
  2. Search Results Page: Dedicated search results display
  3. Search API Integration: Typesense backend integration
  4. Search Filters: Advanced filtering interface
  5. Search History: Recent searches and suggestions

Frontend Implementation ​

Search Bar Component ​

File: components/SearchBar.vue

Key features:

  • Real-time search suggestions
  • Advanced filter panel
  • Recent search history
  • Keyboard navigation
  • Date range picker

Search Results Page ​

File: pages/_workspace_id/dam/search.vue

Features:

  • Multi-tab results (Assets/Folders/Collages)
  • Advanced filtering
  • View mode toggles (Grid/List/Mosaic)
  • Bulk operations
  • Pagination

API Integration ​

Search Request ​

javascript
POST /api/workspaces/:workspace_id/typesense/search

{
  "request": {
    "q": "summer campaign",
    "collections": ["digital_assets", "digital_assets_categories", "dam_collections"],
    "sort_by": "modified_at:desc"
  },
  "filterQuery": {
    "digital_assets": "(file_type:=jpg || file_type:=png) && (tags:=[marketing])",
    "digital_assets_categories": "(visibility:=0)",
    "dam_collections": "(visibility:=0)"
  },
  "commonSearchParams": {
    "query_by": "search_name,description",
    "per_page": 20,
    "page": 1
  },
  "workspace_id": "123456"
}

Search Response ​

json
{
  "results": [
    {
      "collection": "digital_assets",
      "found": 45,
      "hits": [
        {
          "document": {
            "id": "123",
            "display_file_name": "summer-campaign-banner.jpg",
            "file_type": "jpg",
            "tags": ["marketing", "summer"]
          },
          "text_match": 95
        }
      ]
    }
  ]
}

Workflow ​

Search Execution Flow ​

1. User enters search query in search bar
   ↓
2. System debounces input (300ms)
   ↓
3. If query length >= 2:
   - Fetch search suggestions
   - Display suggestions dropdown
   ↓
4. User selects suggestion OR presses Enter
   ↓
5. Navigate to search results page
   ↓
6. Build search parameters:
   - Query string
   - Active filters
   - Pagination
   ↓
7. Call Typesense search API
   ↓
8. Search across all collections:
   - digital_assets
   - digital_assets_categories
   - dam_collections
   ↓
9. Transform and merge results
   ↓
10. Sort by relevance (text_match score)
    ↓
11. Display results in tabs (All/Assets/Folders/Collages)
    ↓
12. User can:
    - Apply additional filters
    - Load more results
    - Click result to view details