Appearance
Composables ​
All composables live in app/composables/ and are auto-imported — no import statement needed in components or pages. Files follow the useFeatureName.ts naming convention.
Directory Structure ​
composables/
├── api/ # Raw HTTP wrappers ($api calls), one file per resource
├── auth/ # Authentication state and login flow
├── branding/ # White-label branding resolution and application
├── core/
│ ├── common/ # General-purpose, reusable logic
│ ├── components/ # Logic extracted from specific components
│ ├── dialogs/ # Dialog business logic and action dispatchers
│ ├── layouts/ # Layout-level composables
│ └── pages/ # Page-level business logic
├── queries/ # TanStack Vue Query wrappers (cache + mutations)
└── useOrigin.ts # SSR-safe request origin helperTwo-Layer Pattern ​
API composables own the request shape and expose isLoading / error. Query composables own caching via TanStack Vue Query and are the layer that components should call.
ts
// api/useFolderApi.ts — owns the $api call
export const useFolderApi = () => {
const { isLoading, error, track } = useApiRequestState()
const fetchFolders = async (params) => { ... }
return { fetchFolders: track(fetchFolders), isLoading, error }
}
// queries/useFoldersQuery.ts — owns the TanStack cache
export const useFoldersQuery = (options) => {
const { fetchFolders } = useFolderApi()
const query = useQuery({ queryKey: [...], queryFn: () => fetchFolders(params) })
return { query }
}
// FolderList.vue — calls the queries layer, never api/ directly
const { query } = useFoldersQuery({ sortValue, sortBy })Some composables follow a cache-aside variant of this pattern: the query composable wraps queryClient.fetchQuery / fetchInfiniteQuery and stores results into a plain writable ref. This is intentional for cases where the UI needs to mutate the local list (drag-reorder, inline edits) without round-tripping the cache.
api/ — HTTP composables ​
Every api/ composable uses useApiRequestState() internally, which provides a shared isLoading computed and error ref, and a track wrapper that manages the pending counter. All returned methods are wrapped with track unless noted.
useApiRequestState.ts ​
Foundation composable consumed by every useXxxApi. Not called directly from components.
| Provides | Description |
|---|---|
isLoading | ComputedRef<boolean> — true while any tracked call is in flight |
error | Ref<unknown> — last caught error, reset on each new call |
track(fn) | Wraps an async function with loading/error state; rethrows so callers keep their try/catch |
Resource API composables ​
| File | What it provides | Key methods |
|---|---|---|
useAnnouncementsApi.ts | Workspace announcements CRUD | listAnnouncements, getAnnouncementUsers, addAnnouncement, updateAnnouncement, deleteAnnouncement |
useAssetDetailApi.ts | Full detail, metadata, versions, and conversion for a single asset | getAssetDetail, getCustomFields, updateAssetField, updateCustomFields, convertResolution, convertFormat, makeCurrentVersion, deleteVersion |
useAssetsApi.ts | Asset library operations across the workspace | getRecentUploaded, updateWithField, deleteFile, viewAssetsCountApi, archiveAsset, convertAsset, recordDownloadHistory, makeCurrentVersion, deleteVersion |
useBrowserOsApi.ts | Wraps the /api/browser-os Nitro route for geo + user-agent info (used by the login page) | getBrowserOs |
useBulkPortalVisibilityApi.ts | Per-portal publish coverage for a bulk selection (POST digital-assets/permission/bulk-instance-visibility), used by the bulk portal visibility dialog | fetchBulkInstanceVisibility |
useCollageDetailsApi.ts | Inner search and popular filter data for a collage detail page | fetchInnerSearchData, performSearch |
useCollectionApi.ts | Collage (collection) CRUD — create, rename, delete, paginate, asset management | getRecentsCollages, updateCollectionName, deleteCollection, getCollectionsByPage, getCollageDetails, loadCollageAssets, addAssetsToCollection, removeAssetsFromCollection, getCollections |
useCommonApis.ts | Shared endpoints used across pages | getOverviewData, getS3Resource, fetchSubscription, setBranding, checkBranding, getInnerSearchData, getUserProfile, updateUserProfile, getNotificationList |
useCustomFieldsApi.ts | Custom field definition management | listCustomFields, createCustomField, updateCustomField, deleteCustomField, reorderCustomFields, toggleCustomFieldStatus |
useDamApi.ts | Low-level DAM endpoints: storage analytics, recent uploads, ZIP generation, notifications | getStorageAnalytics, getRecentUploads, generateZip, generateSharedZip, getNotifications |
useDamInstanceApi.ts | Fetches and normalizes the current DAM instance (company name, portal list, storage usage) | fetchDamInstance (standalone export, not a composable) |
useDamInstanceSettingsApi.ts | DAM instance creation and settings — branding, password flows, invitation details | updateDamBranding, getWorkspaceDetail, getInstanceDetail, createDamInstance, forgotPassword, generatePassword, generateCommonPassword, getInvitationDetails, getPasswordDetails, resetPassword |
useExternalUsersApi.ts | External user management | listExternalUsers, addExternalUser, editExternalUser, toggleExternalUserStatus |
useFiltersApi.ts | Fetches and normalizes the full search filter universe into FilterCategory[] and PopularSearchData | getSearchData, getInnerSearchData |
useFolderApi.ts | Folder/category CRUD and navigation | getRecentsFolders, deleteFolder, fetchFolders, fetchFolderContent, fetchAssetsWithThrottle, renameFolder, moveFiles, copyFile, moveMultiple |
useMembersApi.ts | Workspace member management — list, roles, invite, delete | listMembers, getRoleModules, getUserDetails, checkEmail, deleteUser, revokeUser, resendInvitation, activateUser, resetUserPassword |
useNotificationApi.ts | User and org notification preferences | getUserNotifications, updateUserNotification, getOrgNotifications, updateOrgNotification, pauseWorkspaceNotification |
usePasskeyApi.ts | WebAuthn passkey management for profile settings | getPasskeys, getRegisterOptions, registerPasskey, deletePasskey |
usePermissionApi.ts | Content permission management | fetchPortals, changePermission |
usePortalApi.ts | Portal (brand portal) CRUD — list, detail, create, settings, branding, visibility | listPortals, getPortalDetail, createPortal, getInstanceList, updatePortalSettings, updatePortalBranding, updateInstance, updateInstanceSettings, updateWorkspaceBranding, changePortalVisibility, getSubscription, getPortalUsers, getBranding, getWorkspaceDetail |
usePortalBannerApi.ts | Portal banner management | listBanners, upsertBanner, deleteBanner, updateBannerOrdering |
usePortalTileApi.ts | Portal tile management | listTiles, createTile, upsertTile, deleteTile, updateTileOrder, updateSliderConfig |
usePortalUsersApi.ts | Portal user lifecycle on the portal detail page | resendInvitation, revokeInvitation, deleteUser, deleteRestoreUser, dealerActivate, updateUser, createUser |
usePortalUsersSettingsApi.ts | Paginated portal user list and write ops for the settings page | getPortalUsers, resendInvitation, revokeInvitation, deleteUser, deleteRestoreUser, dealerActivate, updateUser |
useRecentSearchApi.ts | Server-backed recent search history per user | getRecentSearches, saveRecentSearch |
useSearchApi.ts | Typesense search via in-app proxy routes | searchAssets, searchFolders, searchCollages, searchTags, multiSearch, getPopularSearchData, getSearchResults |
useSharedAssetsApi.ts | Public shared asset viewing — authenticate, list, browse | showShareAssets, viewShareFilesWithCategory, getFolderCount, trackShareLinkView, authenticationCheck, searchShareData |
useSharingApi.ts | Share URL and embed code management | fetchShareUrlsApi, fetchEmbeddedUrlsApi, deleteShareUrlsApi, removeEmbedCodeApi, generateShareAssetsUrl, generateEmbedCode, generateCollectionShareUrl, updateShareUrl |
useSsoApi.ts | SAML SSO connection, sync, test, activity and sign-in resolve; see Single Sign-On | resolveSso (POST auth/sso/resolve), getConnection, saveConnection, syncConnection (metadata URL), syncConnectionFile (multipart metadata_file), testConnection, getActivity (default page 1, per_page 20), buildRedirectUrl (<apiBaseUrl>/auth/sso/<slug>/redirect?return_host&return_path), withReturnParams |
useTagsApi.ts | Tag operations on single or multiple assets | addTagsToFilesApi, deleteTagFromFilesApi, getSuggestedTagsApi, getCommonTagListApi |
useTrashApi.ts | Trash management | fetchTrashItems, permanentDeleteItems, restoreTrashItems |
useTypesenseApi.ts | Low-level Typesense proxy calls (prefer useSearchApi for typed searches) | multiSearch, searchCollection, searchIds |
useWorkspaceSettingsApi.ts | Workspace settings CRUD | getWorkspaceDetail, getWorkspaceUsers, updateWorkspaceSettings, updateWorkspaceFavicon, updateWorkspaceLogo, updateDomain, verifyDomain, getSubscription, updateWorkspaceOwner |
useZipDownloadApi.ts | Streams a zip archive from the external zip-worker service via native fetch (returns raw Response) | fetchZipStream |
queries/ — TanStack Vue Query composables ​
Query composables sit between the API layer and the UI. They manage caching, invalidation, and pagination. Components call these, not api/ directly.
| File | What it provides |
|---|---|
useAnnouncementsQuery.ts | Infinite query for the announcements list |
useAssetDetailQuery.ts | Cache-aside fetch for asset detail and custom fields |
useAssetMutations.ts | Asset write ops (update field, delete) with cache invalidation for the uncategorized/uploads page |
useCollageContentsQuery.ts | Cache-aside fetch for collage/collection contents |
useCollageListMutations.ts | Collage list write ops (rename, delete) with cache invalidation |
useCollageListQuery.ts | Infinite query for the collages library list |
useCustomFieldsMutations.ts | Custom field write ops (delete, reorder, toggle status) with cache invalidation |
useCustomFieldsQuery.ts | Reactive query for custom field definitions |
useDashboardQuery.ts | Batched queries for the dashboard — recent collages, recent folders, overview stats, weekly insights |
useExternalUsersQuery.ts | Reactive query for the external users list per workspace and type |
useFolderContentsQuery.ts | Cache-aside fetch for paginated folder contents |
useFolderMutations.ts | Folder write ops (delete, rename) with cache invalidation |
useFoldersQuery.ts | Reactive query for the folders library list and overview data |
useMembersMutations.ts | Member write ops (delete, revoke, resend invitation, activate) |
useMembersQuery.ts | Infinite query for members list; reactive query for role modules and instances |
useNotificationsMutations.ts | Notification preference write ops (user, org, pause workspace) |
useNotificationsQuery.ts | Cache-aside fetch for user and org notification settings |
usePermissionPortalsQuery.ts | Cache-aside fetch for the portal list used by the permission dialog |
usePortalBannersQuery.ts | Cache-aside fetch for portal banners (writable ref for drag-reorder) |
usePortalDetailUsersQuery.ts | Infinite query for portal users on the portal detail page |
usePortalMutations.ts | Portal write ops (updateInstance, updateInstanceSettings, updateWorkspaceBranding, changePortalVisibility); each invalidates queryKeys.portals.list and queryKeys.portals.instanceList for the workspace |
usePortalTilesQuery.ts | Cache-aside fetch for portal tiles (writable ref for drag-reorder) |
usePortalUsersSettingsMutations.ts | Portal users write ops (resend, revoke, delete, restore, activate, update) |
usePortalUsersSettingsQuery.ts | Infinite query for the portal users settings list |
usePortalsListQuery.ts | Reactive query for the portals list |
useProfileQuery.ts | Cache-aside fetch for the user profile; reactive query for timezones |
useSearchFiltersQuery.ts | Cache-aside fetch for global, folder-scoped, and collage-scoped filter data |
useSharingMutations.ts | Sharing write ops (delete share URLs, remove embed codes, update share URL) |
useSharingQuery.ts | Infinite queries for share URLs and embed codes (separate queries, each with sort/filter in the key) |
useSubscriptionQuery.ts | Reactive query for workspace subscription data; shared cache key across all pages that need it |
useTrashMutations.ts | Trash write ops (permanent delete, restore) |
useTrashQuery.ts | Infinite query for trash contents (assets + folders per page) |
useWorkspaceSettingsQuery.ts | Cache-aside fetch for workspace detail (page spreads result into mutable form refs) |
auth/ — Authentication ​
| File | What it provides |
|---|---|
useAuth.ts | Core auth state — user, authToken, isAuthenticated, status (idle / loading / authenticated / unauthenticated / unreachable), isBackendUnreachable, login, logout, fetchUser, retryAuth. SSR-safe; uses useState keyed by NuxtApp instance to prevent race conditions between concurrent middleware. A failed /user call with no status, status 0 or 500+ sets unreachable (token kept, retry backoff 1 s doubling to 30 s with ±20% jitter, snackbar only on the first failure); 401 clears the session. retryAuth() resets the backoff and refetches. logout() posts /logout (or /external-logout for external sessions) with keepalive: true, skipCancel: true and on the client waits at most LOGOUT_WAIT_MS (300 ms) before clearing the session locally. |
useAuthCookies.ts | Centralised cookie read/write layer for the auth session. Exports AUTH_TOKEN_COOKIE, AUTH_STRATEGY_COOKIE, CURRENT_WORKSPACE_COOKIE constants and a composable with: readToken, readStoredToken (cookie → localStorage fallback), readStrategy, readWorkspace, writeSession (writes token + strategy with correct max-age per strategy), writeWorkspace (merges into stored value to preserve module data), clearSessionCookies (nulls workspace and all stale-session cookies on logout/401). |
useAuthGuard.ts | Thin wrapper for pages that need the auth state: returns user, status, isBackendUnreachable from useAuth() and unresolvedUserResult() (navigateTo('/', { replace: true })). |
branding/ — White-label branding ​
| File | What it provides |
|---|---|
useBrand.ts | Resolves the white-label brand for the current host — logo, favicon, brand name, tagline, colors, support email. Returns a brand computed ref. Handles SSR origin detection via X-Forwarded-Proto/Host. |
useBrandingHead.ts | Drives document <head> (title, Open Graph meta, favicon) reactively from the resolved brand. Suppresses host-brand assets on /shared-assets routes to avoid leaking the host workspace's logo onto shared links. |
useBrandingTheme.ts | Applies white-label primary_color / secondary_color to the active Vuetify light theme at runtime. Call once from the main layout setup. Only writes valid hex values. |
core/common/ — General-purpose utilities ​
| File | What it provides |
|---|---|
useAmplitude.ts | Amplitude analytics — trackActivity, trackViewModeChange, selectionMethodFor, cascadeSize. Manages shared selection-method and last-sent-view-mode state. |
useAmplitudeAssetTracking.ts | Asset-specific Amplitude events — trackImageEditor, trackCustomFieldChange. |
useAmplitudeSearchTracking.ts | Search-specific Amplitude events — trackSearchPerformed, trackSearchResultClicked, trackFilterApplied. Debounces duplicate search events. |
useAssetFile.ts | Reactive computeds from a file ref — fileExt, fileUrl, fileThumb, isImage, isVideo, isPdf, isAudio, isDoc, fileTypeIconUrl. |
useChipTruncation.ts | useChipTruncation(items) — per-chip truncated flags (scrollWidth > clientWidth + 1 on the chip's .v-chip__content), re-measured after mount, when items change and when the Vuetify display width changes. Bind each chip with setChipEl(el, index). |
useCommonFunction.ts | Deprecated. Shim that delegates to useTransactionActivity. Use useTransactionActivity in new code. |
useCsrf.ts | CSRF token management — fetches the XSRF-TOKEN cookie from /api/csrf-token and exposes csrfToken. The login page (pages/index.vue) starts fetchCsrfToken() in parallel with verifyDomain() (Promise.all) instead of one after the other. |
useDamNavigation.ts | Centralized DAM route navigation with analytics dispatch and new-tab support. Accepts NavigationOptions including analytics context, query params, and hash. |
useDayjs.ts | Returns the dayjs instance. |
useDragReorder.ts | Generic drag-to-reorder for any list or grid. Exposes draggingIndex, dragOverIndex, startDrag, bindRow. |
useDraggableBar.ts | Drag-to-reposition for the floating bulk-action bar. Clamps to viewport; ignores drags starting on .v-btn / .v-chip. |
useErrorHandler.ts | Centralized error handler — handleError(e, options). Sanitizes messages, logs, optionally shows snackbar, optionally rethrows. |
useFilterOptionPaging.ts | Client-side paging for long filter option lists: shows FILTER_OPTION_PAGE_SIZE (50) more items each time the list is scrolled past 85%; reset() (also run when the item count changes) returns to the first page and scrolls to top. Returns visible, hasMore, total, loadMore, reset, onScroll. |
useHelpers.ts | Large utility bag consumed across the app. Includes workspace access checks, role/permission helpers (including canManageSsoSettings(workspace) = is_owner === true and isSsoAllowed(workspace) = sso_allowed === true), file-type predicates (isImage, isVideo, etc.), formatting helpers, and getWorkspaceId. |
useImageStyle.ts | Asset display helpers — getFileTypeIconUrl, getThumbnailStyle, getObjectFit, dimension computeds. Exports DEFAULT_ICON_TYPES set. |
useInsightsChart.ts | Shared Chart.js config and bar_data builder for the "Last 7 Days" weekly-insights bar chart. Used by the dashboard and asset detail pages so both charts stay identical. |
useMarqueeSelection.ts | Mouse marquee (rubber-band) selection for asset grids. Supports grid, list, and mosaic selectors. |
useMittBus.ts | Returns the global mitt EventBus instance from the Nuxt plugin. |
usePwaSettings.ts | Returns the PWA settings from runtimeConfig.public.pwa as a typed PwaSettings object. Not reactive — returns the static config value at call time. Used by PWA-aware components and layouts to read manifest and service-worker config. |
useSearchEventBus.ts | Typed search EventBus (mitt) with auto-cleanup on component unmount. Exposes typed on, off, emit for SearchEvents. |
useSearchExecution.ts | Generic pagination/loading state machine for in-page Typesense searches. Accepts buildPayload, runSearch, mapHits, getTotal. |
useSearchFilterEnrich.ts | Resolves and validates URL-restored filters against loaded filter pools. Strips invalid entries; resolves name stubs and custom-field label slugs to IDs. |
useSearchFilterPool.ts | Reorders a filter pool to pin selected items to the top without mutating the input array. |
useSearchFilterUrl.ts | Serializes and deserializes applied filters to/from URL query params. Returns ParsedFilterQuery. |
useSearchMethods.ts | Stateless filter-builder helpers for constructing Typesense filter_by strings. |
useSnackbar.ts | Snackbar facade over the client-only $snackbar plugin. Methods are no-ops on the server. Exposes success(message, timeout?), error(message, timeout?), info, warning. |
useSortPreference.ts | Persists sort field and direction per context identifier to cookies (sortValue_<id> / sortDirection_<id>). SSR-safe via useCookie. Exposes: getCachedSort() → CachedSortPreference | null, setCachedSort(field, direction) to write, and getCachedSortWithDefault(defaultField, defaultDirection) which falls back to provided defaults when no cached value exists. |
useTagSearchLink.ts | tagSearchLink(tagName) builds /<workspace>/dam/search?tags=<name>&tags_op=all&tab=assets through serializeFiltersToQuery (filter tags / include-all-of, the same operator brand-portal uses). Returns '' for an empty tag or missing workspace. |
useThumbnailSize.ts | Persists grid thumbnail size (xsmall–xlarge) per context identifier in a cookie. SSR-safe. |
useToggleSelection.ts | Shift-click range selection and select-all for asset lists. Operates on the caller's reactive list ref. |
useTransactionActivity.ts | Centralized analytics/transaction dispatch. Provides trackAsset, trackFolder, trackCollage, and generic dispatchTransaction. Fetches browser OS and location once per session. Retries and queue flushes dispatch with skipDeduplication: true, so a retried or queued event is not dropped as a duplicate of itself; the asset preview also sends views with skipDeduplication: true. |
useTypesenseClient.ts | Typesense collection names (COLLECTION_NAMES), default search params (DEFAULT_COMMON_PARAMS), and sort-field mapping (SORT_FIELD_MAP). |
useUploadCommon.ts | Shared upload logic — file chunking, S3 multipart via Nitro routes, auto-tag trigger, transaction dispatch on completion. |
useUploadQueue.ts | Concurrency-limited upload task queue. Module-scoped singleton (default 5 concurrent). Exposes scheduleUploadTask, processQueue, resetQueue. |
useViewMode.ts | Persists grid / list / mosaic view mode per context identifier in a cookie. SSR-safe via useState. |
useViewportFill.ts | Infinite scroll helper — calls loadMore repeatedly until the scroll container is taller than the viewport or a max-attempts limit is hit. |
useWorkspaceId.ts | Resolves the current workspace ID from route params, the currentWorkspace cookie, or the auth user. Exposes workspaceId, getWorkspaceId, isValidWorkspaceId, hasWorkspaceAccess. |
useWorkspaceUniqueId.ts | Resolves the workspace_unique_id (Typesense tenant key) for the current workspace from the user's accessible workspaces list. |
useZipShot.ts | Generates a PNG preview thumbnail of a ZIP archive's contents via the /api/zip-viewer/extract Nitro route. |
core/components/ — Component-level logic ​
These composables are extracted from components that had enough logic to warrant separation. Each is tied to a specific component.
| File | What it provides |
|---|---|
useAccountSettingsLeftMenu.ts | Account settings sidebar — menu items, active route detection, navigation helpers. Includes a Single Sign-On entry (ROUTE_WORKSPACE_SETTINGS_SSO, also active on the SSO setup route), shown via canManageSsoSettings / isSsoAllowed. |
useAssetCard.ts | Asset grid/list card — context menu, selection, download, analytics dispatch. With externalPreview, handleExpandAsset emits expand (the page opens the Asset Preview Lightbox) instead of opening the quick-view dialog. |
useAssetContainer.ts | Asset preview container — resolves display file, handles image editor integration, manages preview state. isTransparentImage is true for png, svg, gif. |
useAssetImageOverlay.ts | Image card overlay — selection checkbox state, screen-size breakpoints (isLargeScreen, isSmallScreen). |
useAssetMenu.ts | Asset context-menu builder for the search results "Assets" tab. Returns a DamMenuItem[] array. |
useAssetVersionItem.ts | Asset version list item — download, make-current, delete version actions. |
useAssetVideoOverlay.ts | Video card overlay — selection checkbox state, screen-size breakpoints. |
useBreadCrumbs.ts | Breadcrumb trail navigation for folders and collages. Handles share-link context and loading state. |
useCollageCard.ts | Collage grid card — inline rename, context menu, permission check, download. |
useCollageMenu.ts | Collage context-menu builder shared by the Collages page and search "Collages" tab. |
useDamListRow.ts | DAM list-view row — exports DAM_LIST_DEFAULT_COLUMNS, thumbnail size constant, and row display helpers. |
useDamNotification.ts | In-app notification panel — badge count, notification list, Laravel Echo event handling. |
useEmbedTableListItem.ts | Embed code table row — thumbnail resolution, copy-to-clipboard action. |
useFolderCard.ts | Folder grid card — context menu, permission check, selection. |
useFolderMenu.ts | Folder context-menu builder shared by the Folders page and search "Folders" tab. |
useHeaderSearch.ts | Top-bar header search dropdown — multi-collection preview (assets/folders/collages/tags), debounced query, navigate to search page on submit. |
useImageEditActions.ts | Asset detail image editor sidebar — crop preset groups, export format selection, apply/cancel crop. |
usePdfPreview.ts | pdf.js viewer state for PDF previews: lazy-loads pdfjs-dist and its worker once, zoom 0.5–3 in 0.25 steps, rotation in 90° steps, fit to width (default) or page (pages at least 2.4× taller than wide open fit-to-page), page thumbnails 150 px wide, canvas size capped by the device WebGL MAX_TEXTURE_SIZE (2048–4096 px, at most 16,777,216 pixels). Returns render/cancel helpers, page navigation, sidebar toggle and zoom/rotate/fit actions. |
usePortalBanners.ts | Portal banner list management in the portal detail page — fetch, upsert, delete, drag-reorder. |
usePortalBrandingTab.ts | Portal branding form — brand name, colors, domain URL, public portal toggle, CNAME management. |
usePortalTiles.ts | Portal tile list management in the portal detail page — fetch, upsert, delete, drag-reorder, slider config. |
useRecentSearches.ts | Server-backed recent search history. Module-scoped singleton so the header bar and search page share one list. |
useSearchAssets.ts | Assets tab — Typesense search with infinite scroll, per-page windowing, scope support (global / folder / collage / shared). |
useSearchBar.ts | Search bar input — debounced query ref, debouncedQuery, isFocused, browse history helpers. |
useSearchCollages.ts | Collages tab — Typesense search with independent pagination from the assets tab. |
useSearchFilter.ts | Filter state machine — loads categories and popular data, manages appliedFilters, syncs with URL query params. |
useSearchFolders.ts | Folders tab — Typesense search with independent pagination from the assets tab. |
useShareTableListItem.ts | Share URL table row — custom domain resolution, thumbnail, copy-to-clipboard. |
useTagsBox.ts | Asset tags input — tag suggestions via API, common tags list, add/remove tag operations. |
core/dialogs/ — Dialog business logic ​
These composables power dialog components and action dispatchers that open dialogs via the dialog store.
| File | What it provides |
|---|---|
useAddEditBannerDialog.ts | Add/edit portal banner dialog — form state, image crop via getCropBlob, submit to usePortalBannerApi. |
useAddEditTileDialog.ts | Add/edit portal tile dialog — form state, image crop, submit to usePortalTileApi. |
useAddMultipleTags.ts | Bulk tag dialog — tag suggestions, add tags to multiple selected assets. |
useAdvanceShareDialog.ts | Advanced share settings dialog — expiry date, password protection, link management. |
useAssetActions.ts | Asset action dispatcher — opens rename/delete dialogs via dialog store, emits mitt bus events for list updates. |
useAssetPreview.ts | Opens the Asset Preview Lightbox: openFromAsset(asset, allAssets, paging?), openFromSelection(selected, startAsset?, paging?) (snapshot; no-op when empty), close, selectedAssetsFrom, bulk-bar item builder createBulkActionItem(disabled) (key: 'preview', tooltip Only applicable for assets) and trackView(asset) (transaction + Amplitude + view count). |
useAssetPreviewGestures.ts | Lightbox stage swipe, thumbnail-strip drag / wheel and neighbour preload (videos: thumbnail or preview image; others: compress, display, thumbnail, preview image). Returns isDragging. |
useAssetPreviewNavigation.ts | Lightbox index, previous/next rules with pending page loads, position counter, prefetch at 60% (DEFAULT_PREFETCH_RATIO), arrow keys (ignored in inputs and media elements). |
useAssetPreviewPager.ts | Lightbox page loader: head pages forward from the page already loaded, tail pages backward from the last page, de-duplicated by id; pauses auto-loading after an error. |
useAssetQuickViewDialog.ts | Asset quick-view dialog — inline preview, download, add-to-collage, tag editing. |
useBulkPortalVisibilityDialog.ts | Publish / unpublish assets, folders or collages to portals. Loads portals and, for assets and folders, per-portal coverage (none / partial / all, shown as <n> of <total>); each portal row stages publish or unpublish. Save sends one changePermission call per permission group (visibility 0 with instance_ids, else 1; folders add nested_apply), patches the asset/folder/collage caches, emits visibility-updated, then tracks permission-updated transactions and Amplitude visibility changes. Requires the matching subscription features (public_and_private_asset_customisation, folder_permission_customisation, collection_permission_customisation). On a failed group it reports what was applied, shows the error and reloads. |
useCollageActions.ts | Collage action dispatcher — opens rename/delete dialogs via dialog store, emits collage events. |
useCreateOrRenameDialog.ts | Create/rename folder or collage dialog — form state, validation, API call. |
useCreatePortalDialog.ts | Create new portal dialog — form state, domain/subdomain toggle, validation, submit. |
useFileConversionDialog.ts | Download / format conversion dialog — resolution options, format selector. Pure UI; API calls emitted to parent. |
useFolderActions.ts | Folder action dispatcher — opens create/rename/delete dialogs, emits mitt bus events. |
useFolderDialog.ts | Folder tree picker dialog — Typesense-backed folder search, select destination for move/copy. |
useSaveToCollage.ts | "Save to Collage" dialog — debounced collage search, queued add operations, emits update event. |
useShareAssetDialog.ts | Share asset/folder/collage dialog — generates share URLs and embed codes, copy helpers. |
useUserDialog.ts | Workspace member dialog — create/edit member with workspace and role assignment. |
core/layouts/ — Layout composables ​
| File | What it provides |
|---|---|
useCollageErrorLayout.ts | Error layout side-effects: removes stale Vuetify overlays on mount; for unauthenticated users starts a 5-second countdown (redirectSecondsLeft) and then window.location.replace('/'), except for domain/branding errors (404 on / or with domain / not found / access denied messages, 402, 403) and a session-expired 401 on /, which would loop. |
useCollageLayout.ts | Main layout computeds — currentWorkspace, canUpload, storageFull. Also exposes upload and drag-drop helpers. |
useCollageSidebar.ts | Sidebar nav — workspace switcher, primary menu items, create-new items, portal links, logout. profileMenuOpen is closed before logout; the sidebar treats window.innerWidth <= 1199 or max-width: 600px as mobile. |
useSidebarMiniState.ts | Shared mini boolean that collapses the sidebar on detail routes (asset, folder, settings pages). |
core/useSearchOverlay.ts ​
Module-scoped singleton isSearchOpen ref that controls the fullscreen search overlay. Both the header trigger button and the overlay itself call this composable.
core/pages/ — Page-level business logic ​
These composables are the single source of truth for each page's state, data fetching, and user action handling.
| File | What it provides |
|---|---|
useAddDamInstance.ts | Add DAM instance page — form state, domain/subdomain toggle, validation, submit. |
useAnnouncementsPage.ts | Announcements settings page — TanStack-backed list, delete, type filter, sort. |
useAssetDetail.ts | Asset detail page — full state management: asset data, versions, tags, custom fields, download, conversion, analytics. |
useAssetDetailTags.ts | Tag management sub-composable for the asset detail page — add/remove tags for a single asset. |
useCollage.ts | Collages library page — list state, sort, delete/rename/share/permission dialogs. useCollage({ withList: false }) reuses the actions without running the list query (useCollageListQuery({ enabled })). |
useCollageDetails.ts | Collage detail page — inner search, file list, selection, bulk operations, pagination. fetchSearchPage(page) runs one inner-search page and maps the hits; the Asset Preview Lightbox uses it to page search results. |
useCustomFieldCounts.ts | Asset counts per custom field on the custom fields settings page, cached per workspace in localStorage. Fetches 1 field first (probe), then 5 at a time; revalidates every field once per page load; stops when the route changes or the throttle epoch changes; disables itself if the count endpoint answers 404, 405 or 501. Returns fieldCounts, countsPendingIds, isCountEndpointAvailable, fetchCountsForFields, invalidateCounts. |
useCustomFieldsPage.ts | Custom fields settings page — TanStack-backed list, delete, reorder, toggle status. |
useDashboard.ts | Dashboard page — recent collages/folders, overview stats, weekly insights chart, quick-action routes. |
useExternalUsersPage.ts | External users settings page — TanStack-backed list, add, edit, toggle status. |
useFolderDetail.ts | Folder detail page — inner search, file list, selection, bulk operations, upload integration. |
useFolders.ts | Folders library page — folder list, sort, delete/move/rename with analytics. useFolders({ withList: false }) skips the list query (useFoldersQuery({ enabled })). |
useMembersPage.ts | Members settings page — TanStack-backed list, roles, invite, delete, revoke. ssoAllowed (isSsoAllowed for the current workspace) drives the sign-in method column. |
useNotificationSettings.ts | Notification settings page — user and org preference management, subscription feature checks. |
usePortalDetail.ts | Portal detail page — settings tabs (branding, users, banners, tiles), subscription limits. |
usePortalUsersPageSettings.ts | Portal users settings page — TanStack-backed list, invite dialog, filter by user type. |
usePortalsList.ts | Portals list page — TanStack-backed list, create, subscription limit check. |
useProfilePage.ts | Profile settings page — personal info form, default workspace, passkey (WebAuthn) registration/deletion, timezone. |
useSearchResultsPage.ts | Search results page — coordinates useSearchAssets, useSearchFolders, useSearchCollages, useSearchFilter; handles URL sync and Amplitude tracking. |
useSharedAssetsPage.ts | Public shared assets page — password authentication, asset browsing, download, breadcrumb navigation. |
useSharing.ts | Sharing page — TanStack-backed share URLs and embed codes lists, sort, filter, bulk delete. |
useSsoProviderChoice.ts | Remembers the identity provider picked in the SSO setup wizard in localStorage (sso-provider-choice:<workspace_id>:<user_id>). Returns selectedProvider, selectProvider, focusProviderAt. |
useSsoProviderDetails.ts | Provider-specific setup values for the SSO wizard and summary: SP values, provider values, synced summary, copy-to-clipboard (copiedField resets after 1.4 s). App name is Collage, or the white-label brand name (the app when unnamed). |
useSsoSettingsPage.ts | SSO settings page: setup steps, edit mode, metadata sync by URL or file (then polls every 3 s for up to 60 s), test, allowed domains (validated with /^(?!-)[a-z0-9-]+(\.[a-z0-9-]+)+$/i), enable toggle, save, and sign-in activity (20 per page). Defaults: recheck_days 7, stale_days 30. See Single Sign-On. |
useTrashPage.ts | Trash page — TanStack-backed list, bulk select, permanent delete, restore. |
useUploadedPage.ts | Recent uploads ("Uncategorized") page — paginated list, inline edit, custom fields. |
useWorkspaceSettings.ts | Workspace settings page — detail form, domain management, favicon/logo upload, subscription display. |
Root level ​
| File | What it provides |
|---|---|
useOrigin.ts | Returns the current request origin as a string. SSR-safe — honors X-Forwarded-Proto and X-Forwarded-Host headers so the origin reflects the public-facing URL, not the reverse proxy's internal scheme. Fallback: runtimeConfig.public.baseUrl. |