ViewModeSwitcher Component

File Information

• Path: app/components/shared/ViewModeSwitcher.vue
• Purpose: A group of icon buttons that lets the user switch between grid, list, and mosaic view modes. Used on every DAM page that supports more than one view.

Overview

ViewModeSwitcher is the canonical, single-source-of-truth toggle for view mode across all DAM pages. It replaces an older, duplicated pattern where each page rendered its own icon buttons.

The component:

• Renders one v-btn per mode entry in modes, in the order they appear in the array
• Highlights the active mode with an .active class
• Shows skeleton chips while loading is true
• Adapts tooltip behaviour for small screens (isSmallScreen triggers focus-based tooltips)

Each mode maps to a fixed icon, tooltip, and button class via an internal VIEW_MODE_META object:

Mode	Icon	Tooltip
grid	gridViewIcon	Grid View
list	listViewIcon	List View
mosaic	mosaicViewIcon	Mosaic View

Props

Prop	Type	Default	Description
modelValue	ViewMode	required	Currently active mode ('grid', 'list', 'mosaic')
modes	ViewMode[]	['grid', 'list']	Which buttons to show and in which order
loading	Boolean	false	Renders skeleton chips instead of buttons
isSmallScreen	Boolean	false	Activates focus-based tooltip trigger for touch devices

Events

Event	Payload	When
update:modelValue	ViewMode	User clicks a mode button

Usage

<ViewModeSwitcher
  v-model="viewMode"
  :modes="['grid', 'list', 'mosaic']"
  :loading="contentLoading"
/>

Trash uses ['list', 'grid'] (list first) to match the page's default-list layout.

Related Documentation

• DisplayPanel Component — wraps ViewModeSwitcher alongside thumbnail size and sort controls
• thumbnail-size-cache Mixin — persists thumbnail size alongside the view mode
• view-mode-cache Mixin — persists the selected mode per page