immich/web/src/lib/components/shared-components/navigation-bar/NavigationBar.svelte

<script lang="ts" module>
  export const menuButtonId = 'top-menu-button';
</script>

<script lang="ts">
  import { page } from '$app/state';
  import { clickOutside } from '$lib/actions/click-outside';
  import NotificationPanel from '$lib/components/shared-components/navigation-bar/NotificationPanel.svelte';
  import SearchBar from '$lib/components/shared-components/search-bar/SearchBar.svelte';
  import SkipLink from '$lib/elements/SkipLink.svelte';
  import { authManager } from '$lib/managers/auth-manager.svelte';
  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
  import { Route } from '$lib/route';
  import { getGlobalActions } from '$lib/services/app.service';
  import { handleSetMaintenanceMode } from '$lib/services/maintenance.service';
  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
  import { notificationManager } from '$lib/stores/notification-manager.svelte';
  import { sidebarStore } from '$lib/stores/sidebar.svelte';
  import { MaintenanceAction } from '@immich/sdk';
  import { ActionButton, Button, IconButton, Logo } from '@immich/ui';
  import {
    mdiBellBadge,
    mdiBellOutline,
    mdiDeleteSweep,
    mdiMagnify,
    mdiMenu,
    mdiProgressWrench,
    mdiTrayArrowUp,
  } from '@mdi/js';
  import { sdk } from '@futo-org/backups-orchestrator-ui';
  import { onMount } from 'svelte';
  import { t } from 'svelte-i18n';
  import ThemeButton from '../ThemeButton.svelte';
  import UserAvatar from '../UserAvatar.svelte';
  import AccountInfoPanel from './AccountInfoPanel.svelte';

  type Props = {
    onUploadClick?: () => void;
    // TODO: remove once this is only used in <AppShellHeader>
    noBorder?: boolean;
  };

  let { onUploadClick, noBorder = false }: Props = $props();

  let shouldShowAccountInfoPanel = $state(false);
  let shouldShowNotificationPanel = $state(false);
  let innerWidth: number = $state(0);
  const hasUnreadNotifications = $derived(notificationManager.notifications.length > 0);

  onMount(async () => {
    try {
      await notificationManager.refresh();
    } catch (error) {
      console.error('Failed to load notifications on mount', error);
    }
  });

  const { Cast } = $derived(getGlobalActions($t));
</script>

<svelte:window bind:innerWidth />

<nav id="dashboard-navbar" class="h-(--navbar-height) w-dvw text-sm max-md:h-(--navbar-height-md)">
  <SkipLink text={$t('skip_to_content')} />
  <div
    class="grid h-full grid-cols-[--spacing(32)_auto] items-center py-2 sidebar:grid-cols-[--spacing(64)_auto] {noBorder
      ? ''
      : 'border-b'}"
  >
    <div class="mx-4 flex flex-row items-center gap-1">
      <IconButton
        id={menuButtonId}
        shape="round"
        color="secondary"
        variant="ghost"
        size="medium"
        aria-label={$t('main_menu')}
        icon={mdiMenu}
        onclick={() => {
          sidebarStore.toggle();
        }}
        onmousedown={(event: MouseEvent) => {
          if (sidebarStore.isOpen) {
            // stops event from reaching the default handler when clicking outside of the sidebar
            event.stopPropagation();
          }
        }}
        class="sidebar:hidden"
      />
      <a data-sveltekit-preload-data="hover" href={Route.photos()}>
        <Logo variant={mediaQueryManager.isFullSidebar ? 'inline' : 'icon'} class="max-md:h-12" />
      </a>
    </div>
    <div class="flex justify-between gap-4 pe-6 lg:gap-8">
      <div class="hidden w-full max-w-5xl flex-1 sm:block tall:ps-0">
        {#if featureFlagsManager.value.search}
          <SearchBar grayTheme={true} />
        {/if}
      </div>

      <section class="flex w-full place-items-center justify-end gap-1 sm:w-auto md:gap-2">
        {#if featureFlagsManager.value.search}
          <IconButton
            color="secondary"
            shape="round"
            variant="ghost"
            size="medium"
            icon={mdiMagnify}
            href={Route.search()}
            id="search-button"
            class="sm:hidden"
            aria-label={$t('go_to_search')}
          />
        {/if}

        <!-- TODO[YUCCA]: remove this -->
        {#if authManager.user.isAdmin}
          <Button
            leadingIcon={mdiProgressWrench}
            onclick={() => handleSetMaintenanceMode({ action: MaintenanceAction.Start })}
            class="hidden lg:flex"
            variant="ghost"
            size="medium"
            color="danger"
            >{$t('admin.maintenance_start')}
          </Button>
          <IconButton
            color="danger"
            shape="round"
            variant="ghost"
            size="medium"
            onclick={() => handleSetMaintenanceMode({ action: MaintenanceAction.Start })}
            title={$t('admin.maintenance_start')}
            aria-label={$t('admin.maintenance_start')}
            icon={mdiProgressWrench}
            class="lg:hidden"
          />
          <Button
            leadingIcon={mdiDeleteSweep}
            onclick={async () => {
              await sdk.resetOrchestrator();
              globalThis.location.reload();
            }}
            class="hidden lg:flex"
            variant="ghost"
            size="medium"
            color="danger">Reset Backups</Button
          >
          <IconButton
            color="danger"
            shape="round"
            variant="ghost"
            size="medium"
            onclick={async () => {
              await sdk.resetOrchestrator();
              globalThis.location.reload();
            }}
            title="Reset Backups"
            aria-label="Reset Backups"
            icon={mdiDeleteSweep}
            class="lg:hidden"
          />
        {/if}

        {#if !page.url.pathname.includes('/admin') && onUploadClick}
          <Button
            leadingIcon={mdiTrayArrowUp}
            onclick={onUploadClick}
            class="hidden lg:flex"
            variant="ghost"
            size="medium"
            color="secondary"
            >{$t('upload')}
          </Button>
          <IconButton
            color="secondary"
            shape="round"
            variant="ghost"
            size="medium"
            onclick={onUploadClick}
            title={$t('upload')}
            aria-label={$t('upload')}
            icon={mdiTrayArrowUp}
            class="lg:hidden"
          />
        {/if}

        <ThemeButton />

        <div
          use:clickOutside={{
            onOutclick: () => (shouldShowNotificationPanel = false),
            onEscape: () => (shouldShowNotificationPanel = false),
          }}
        >
          <div class="relative">
            <IconButton
              shape="round"
              color={hasUnreadNotifications ? 'primary' : 'secondary'}
              variant="ghost"
              size="medium"
              icon={hasUnreadNotifications ? mdiBellBadge : mdiBellOutline}
              onclick={() => (shouldShowNotificationPanel = !shouldShowNotificationPanel)}
              aria-label={$t('notifications')}
            />

            {#if hasUnreadNotifications}
              <div
                class="pointer-events-none absolute top-0 right-1 flex size-5 items-center justify-center rounded-full border bg-primary text-[10px] font-bold text-light"
              >
                {notificationManager.notifications.length}
              </div>
            {/if}
          </div>

          {#if shouldShowNotificationPanel}
            <NotificationPanel />
          {/if}
        </div>

        <ActionButton action={Cast} />

        <div
          use:clickOutside={{
            onOutclick: () => (shouldShowAccountInfoPanel = false),
            onEscape: () => (shouldShowAccountInfoPanel = false),
          }}
        >
          <button
            type="button"
            class="flex ps-2"
            onclick={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
            title="{authManager.user.name} ({authManager.user.email})"
          >
            {#key authManager.user}
              <UserAvatar user={authManager.user} size="md" noTitle interactive />
            {/key}
          </button>

          {#if shouldShowAccountInfoPanel}
            <AccountInfoPanel onClose={() => (shouldShowAccountInfoPanel = false)} />
          {/if}
        </div>
      </section>
    </div>
  </div>
</nav>