mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(web): dedicated view for user's usage stats (#14348)
* feat(web): dedicated view for user's usage stats * cell heights * Translation * pr feedback * clean up * clean up * pr feedback
This commit is contained in:
Alex
GitHub
parent
d277096d58
commit
361d83c729
7 changed files with 148 additions and 116 deletions
|
|
@ -1,27 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { type AlbumStatisticsResponseDto, getAlbumStatistics } from '@immich/sdk';
|
||||
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
albumType: keyof AlbumStatisticsResponseDto;
|
||||
}
|
||||
|
||||
let { albumType }: Props = $props();
|
||||
|
||||
const handleAlbumCount = async () => {
|
||||
try {
|
||||
return await getAlbumStatistics();
|
||||
} catch {
|
||||
return { owned: 0, shared: 0, notShared: 0 };
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
{#await handleAlbumCount()}
|
||||
<LoadingSpinner />
|
||||
{:then data}
|
||||
<div>
|
||||
<p>{$t('albums_count', { values: { count: data[albumType] } })}</p>
|
||||
</div>
|
||||
{/await}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { getAssetStatistics } from '@immich/sdk';
|
||||
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
assetStats: NonNullable<Parameters<typeof getAssetStatistics>[0]>;
|
||||
}
|
||||
|
||||
let { assetStats }: Props = $props();
|
||||
</script>
|
||||
|
||||
{#await getAssetStatistics(assetStats)}
|
||||
<LoadingSpinner />
|
||||
{:then data}
|
||||
<div>
|
||||
<p>{$t('videos_count', { values: { count: data.videos } })}</p>
|
||||
<p>{$t('photos_count', { values: { count: data.images } })}</p>
|
||||
</div>
|
||||
{/await}
|
||||
|
|
@ -1,10 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { mdiInformationOutline } from '@mdi/js';
|
||||
import { resolveRoute } from '$app/paths';
|
||||
import { page } from '$app/stores';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
|
|
@ -13,7 +10,6 @@
|
|||
flippedLogo?: boolean;
|
||||
isSelected?: boolean;
|
||||
preloadData?: boolean;
|
||||
moreInformation?: Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
|
|
@ -23,10 +19,8 @@
|
|||
flippedLogo = false,
|
||||
isSelected = $bindable(false),
|
||||
preloadData = true,
|
||||
moreInformation,
|
||||
}: Props = $props();
|
||||
|
||||
let showMoreInformation = $state(false);
|
||||
let routePath = $derived(resolveRoute(routeId, {}));
|
||||
|
||||
$effect(() => {
|
||||
|
|
@ -39,7 +33,7 @@
|
|||
data-sveltekit-preload-data={preloadData ? 'hover' : 'off'}
|
||||
draggable="false"
|
||||
aria-current={isSelected ? 'page' : undefined}
|
||||
class="flex w-full place-items-center justify-between gap-4 rounded-r-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-immich-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary
|
||||
class="flex w-full place-items-center gap-4 rounded-r-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-immich-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary
|
||||
{isSelected
|
||||
? 'bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/10 dark:bg-immich-dark-primary/10 dark:text-immich-dark-primary'
|
||||
: ''}
|
||||
|
|
@ -50,33 +44,5 @@
|
|||
<Icon path={icon} size="1.5em" class="shrink-0" flipped={flippedLogo} ariaHidden />
|
||||
<span class="text-sm font-medium">{title}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="h-0 overflow-hidden transition-[height] delay-1000 duration-100 sm:group-hover:h-auto group-hover:sm:overflow-visible md:h-auto md:overflow-visible"
|
||||
>
|
||||
{#if moreInformation}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="relative flex cursor-default select-none justify-center"
|
||||
onmouseenter={() => (showMoreInformation = true)}
|
||||
onmouseleave={() => (showMoreInformation = false)}
|
||||
>
|
||||
<div class="p-1 text-gray-600 hover:cursor-help dark:text-gray-400">
|
||||
<Icon path={mdiInformationOutline} />
|
||||
</div>
|
||||
|
||||
{#if showMoreInformation}
|
||||
<div class="absolute right-6 top-0">
|
||||
<div
|
||||
class="flex place-content-center place-items-center whitespace-nowrap rounded-3xl border bg-immich-bg px-6 py-3 text-xs text-immich-fg shadow-lg dark:border-immich-dark-gray dark:bg-gray-600 dark:text-immich-dark-fg"
|
||||
class:hidden={!showMoreInformation}
|
||||
transition:fade={{ duration: 200 }}
|
||||
>
|
||||
{@render moreInformation?.()}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div></div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -24,8 +24,6 @@
|
|||
} from '@mdi/js';
|
||||
import SideBarSection from './side-bar-section.svelte';
|
||||
import SideBarLink from './side-bar-link.svelte';
|
||||
import MoreInformationAssets from '$lib/components/shared-components/side-bar/more-information-assets.svelte';
|
||||
import MoreInformationAlbums from '$lib/components/shared-components/side-bar/more-information-albums.svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
|
||||
import { preferences } from '$lib/stores/user.store';
|
||||
|
|
@ -47,11 +45,7 @@
|
|||
routeId="/(user)/photos"
|
||||
bind:isSelected={isPhotosSelected}
|
||||
icon={isPhotosSelected ? mdiImageMultiple : mdiImageMultipleOutline}
|
||||
>
|
||||
{#snippet moreInformation()}
|
||||
<MoreInformationAssets assetStats={{ isArchived: false }} />
|
||||
{/snippet}
|
||||
</SideBarLink>
|
||||
></SideBarLink>
|
||||
|
||||
{#if $featureFlags.search}
|
||||
<SideBarLink title={$t('explore')} routeId="/(user)/explore" icon={mdiMagnify} />
|
||||
|
|
@ -80,11 +74,7 @@
|
|||
routeId="/(user)/sharing"
|
||||
icon={isSharingSelected ? mdiAccountMultiple : mdiAccountMultipleOutline}
|
||||
bind:isSelected={isSharingSelected}
|
||||
>
|
||||
{#snippet moreInformation()}
|
||||
<MoreInformationAlbums albumType="shared" />
|
||||
{/snippet}
|
||||
</SideBarLink>
|
||||
></SideBarLink>
|
||||
|
||||
<div class="text-xs transition-all duration-200 dark:text-immich-dark-fg">
|
||||
<p class="hidden p-6 group-hover:sm:block md:block">{$t('library').toUpperCase()}</p>
|
||||
|
|
@ -96,17 +86,9 @@
|
|||
routeId="/(user)/favorites"
|
||||
icon={isFavoritesSelected ? mdiHeart : mdiHeartOutline}
|
||||
bind:isSelected={isFavoritesSelected}
|
||||
>
|
||||
{#snippet moreInformation()}
|
||||
<MoreInformationAssets assetStats={{ isFavorite: true }} />
|
||||
{/snippet}
|
||||
</SideBarLink>
|
||||
></SideBarLink>
|
||||
|
||||
<SideBarLink title={$t('albums')} routeId="/(user)/albums" icon={mdiImageAlbum} flippedLogo>
|
||||
{#snippet moreInformation()}
|
||||
<MoreInformationAlbums albumType="owned" />
|
||||
{/snippet}
|
||||
</SideBarLink>
|
||||
<SideBarLink title={$t('albums')} routeId="/(user)/albums" icon={mdiImageAlbum} flippedLogo></SideBarLink>
|
||||
|
||||
{#if $preferences.tags.enabled && $preferences.tags.sidebarWeb}
|
||||
<SideBarLink title={$t('tags')} routeId="/(user)/tags" icon={mdiTagMultipleOutline} flippedLogo />
|
||||
|
|
@ -128,11 +110,7 @@
|
|||
routeId="/(user)/archive"
|
||||
bind:isSelected={isArchiveSelected}
|
||||
icon={isArchiveSelected ? mdiArchiveArrowDown : mdiArchiveArrowDownOutline}
|
||||
>
|
||||
{#snippet moreInformation()}
|
||||
<MoreInformationAssets assetStats={{ isArchived: true }} />
|
||||
{/snippet}
|
||||
</SideBarLink>
|
||||
></SideBarLink>
|
||||
|
||||
{#if $featureFlags.trash}
|
||||
<SideBarLink
|
||||
|
|
@ -140,11 +118,7 @@
|
|||
routeId="/(user)/trash"
|
||||
bind:isSelected={isTrashSelected}
|
||||
icon={isTrashSelected ? mdiTrashCan : mdiTrashCanOutline}
|
||||
>
|
||||
{#snippet moreInformation()}
|
||||
<MoreInformationAssets assetStats={{ isTrashed: true }} />
|
||||
{/snippet}
|
||||
</SideBarLink>
|
||||
></SideBarLink>
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue