feat(web): assets now have a permanent URL (#8532)

* Remove asest redirect pages * Rename route paths to handle optional assetId * Update old references to new routes * Load and display asset from all routes that can show assetId * Add <main> in base layout, update portals to target it * Wire up updating navigation in response to open/close/prev/next * Replace events with navigation functions * Add types to param matcher * misc cleanup * Fix reload on /search pages * Avoid loading bar between photos nav. Delay loading bar by 200ms for all navigations * Update url for maps routes. Note: on page reload, next/prev is not available * Dynamically load asset-viewer on map page * When reloading a url with assetUrl, hide background page to prevent flash during load * Mostly style, review comments * Load buckets for assets on demand * Forgot this update call * typo * fix test * Fix carelessness * Review comment * merge main * remove assets * fix submodule --------- Co-authored-by: Alex <alex.tran1502@gmail.com> Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
2024-04-24 15:24:19 -04:00
parent 1e004611e4
commit a78260296c
48 changed files with 289 additions and 190 deletions
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
+  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
+  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
+  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
+  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
+  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
+  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import { AssetAction } from '$lib/constants';
+  import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
+  import { AssetStore } from '$lib/stores/assets.store';
+  import type { PageData } from './$types';
+  import { mdiDotsVertical, mdiPlus } from '@mdi/js';
+
+  export let data: PageData;
+
+  const assetStore = new AssetStore({ isFavorite: true });
+  const assetInteractionStore = createAssetInteractionStore();
+  const { isMultiSelectState, selectedAssets } = assetInteractionStore;
+
+  $: isAllArchive = [...$selectedAssets].every((asset) => asset.isArchived);
+</script>
+
+<!-- Multiselection mode app bar -->
+{#if $isMultiSelectState}
+  <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
+    <FavoriteAction removeFavorite onFavorite={(assetIds) => assetStore.removeAssets(assetIds)} />
+    <CreateSharedLink />
+    <SelectAllAssets {assetStore} {assetInteractionStore} />
+    <AssetSelectContextMenu icon={mdiPlus} title="Add to...">
+      <AddToAlbum />
+      <AddToAlbum shared />
+    </AssetSelectContextMenu>
+    <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
+      <DownloadAction menuItem />
+      <ChangeDate menuItem />
+      <ChangeLocation menuItem />
+      <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
+      <DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
+    </AssetSelectContextMenu>
+  </AssetSelectControlBar>
+{/if}
+
+<UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
+  <AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNFAVORITE}>
+    <EmptyPlaceholder text="Add favorites to quickly find your best pictures and videos" slot="empty" />
+  </AssetGrid>
+</UserPageLayout>
@@ -0,0 +1,15 @@
+import { authenticate } from '$lib/utils/auth';
+import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params }) => {
+  await authenticate();
+  const asset = await getAssetInfoFromParam(params);
+
+  return {
+    asset,
+    meta: {
+      title: 'Favorites',
+    },
+  };
+}) satisfies PageLoad;