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

web/src/lib/components/shared-components/side-bar/side-bar-link.svelte

@@ -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>