@immich/ui 0.58.4 → 0.59.0

package/dist/components/AppShell/AppShellSidebar.svelte

@@ -4,24 +4,34 @@
   import Child from '../../internal/Child.svelte';
   import { cleanClass } from '../../utilities/internal.js';
   import { type Snippet } from 'svelte';
+  import { tv } from 'tailwind-variants';
 
   type Props = {
     class?: string;
     children: Snippet;
     open?: boolean;
+    border?: boolean;
   };
 
-  let { class: className, children, open = $bindable(true) }: Props = $props();
+  let { class: className, border = true, children, open = $bindable(true) }: Props = $props();
+
+  const styles = tv({
+    base: 'bg-light text-dark absolute shrink-0 transition-all duration-200 md:relative',
+    variants: {
+      border: {
+        true: 'border-e shadow-lg',
+        false: '',
+      },
+      open: {
+        true: `${zIndex.AppShellSidebar} w-[min(100vw,16rem)]`,
+        false: 'w-0 border-e-0',
+      },
+    },
+  });
 </script>
 
 <Child for={ChildKey.AppShell} as={ChildKey.AppShellSidebar}>
-  <Scrollable
-    class={cleanClass(
-      'bg-light text-dark absolute shrink-0 border-e shadow-lg transition-all duration-200 md:relative',
-      open ? `${zIndex.AppShellSidebar} w-[min(100vw,16rem)]` : 'w-0 border-e-0',
-      className,
-    )}
-  >
+  <Scrollable class={cleanClass(styles({ border, open }), className)}>
     {@render children?.()}
   </Scrollable>
 </Child>

package/dist/components/AppShell/AppShellSidebar.svelte.d.ts

@@ -3,6 +3,7 @@ type Props = {
     class?: string;
     children: Snippet;
     open?: boolean;
+    border?: boolean;
 };
 declare const AppShellSidebar: import("svelte").Component<Props, {}, "open">;
 type AppShellSidebar = ReturnType<typeof AppShellSidebar>;

package/dist/components/Navbar/NavbarGroup.svelte

@@ -1,11 +1,32 @@
 <script lang="ts">
+  import Text from '../Text/Text.svelte';
+  import type { FontWeight, NavbarVariant, Size, TextColor } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { tv } from 'tailwind-variants';
+
   type Props = {
     title: string;
+    size?: Size;
+    color?: TextColor;
+    fontWeight?: FontWeight;
+    variant?: NavbarVariant;
+    inline?: boolean;
+    class?: string;
   };
 
-  let { title }: Props = $props();
+  let { title, size = 'small', variant, fontWeight, color, class: className }: Props = $props();
+
+  const styles = tv({
+    base: 'ps-6 transition-all duration-200',
+    variants: {
+      variant: {
+        compact: 'py-4',
+        default: 'py-6',
+      },
+    },
+  });
 </script>
 
-<div class="text-sm transition-all duration-200 md:text-sm">
-  <p class="py-2 ps-4">{title}</p>
+<div class={cleanClass(styles({ variant: variant ?? 'default' }), className)}>
+  <Text {color} {size} {fontWeight}>{title}</Text>
 </div>

package/dist/components/Navbar/NavbarGroup.svelte.d.ts

@@ -1,5 +1,12 @@
+import type { FontWeight, NavbarVariant, Size, TextColor } from '../../types.js';
 type Props = {
     title: string;
+    size?: Size;
+    color?: TextColor;
+    fontWeight?: FontWeight;
+    variant?: NavbarVariant;
+    inline?: boolean;
+    class?: string;
 };
 declare const NavbarGroup: import("svelte").Component<Props, {}, "">;
 type NavbarGroup = ReturnType<typeof NavbarGroup>;

package/dist/components/Navbar/NavbarItem.svelte

@@ -2,59 +2,94 @@
   import { page } from '$app/state';
   import Icon from '../Icon/Icon.svelte';
   import Link from '../Link/Link.svelte';
-  import type { IconProps } from '../../types.js';
+  import NavbarItem from './NavbarItem.svelte';
+  import { t } from '../../services/translation.svelte.js';
+  import type { NavbarProps } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { mdiChevronDown, mdiChevronRight } from '@mdi/js';
   import { tv } from 'tailwind-variants';
 
-  type Props = {
-    title: string;
-    href: string;
-    active?: boolean;
-    variant?: 'compact';
-    isActive?: () => boolean;
-    icon?: string | IconProps;
-    activeIcon?: string | IconProps;
-  };
-
   const startsWithHref = () => page.url.pathname.startsWith(href);
 
-  let { href, isActive: isActiveOverride, title, variant, active: activeOverride, icon, activeIcon }: Props = $props();
+  let {
+    href,
+    isActive: isActiveOverride,
+    title,
+    variant,
+    active: activeOverride,
+    icon,
+    activeIcon,
+    expanded = $bindable(false),
+    items,
+    class: className,
+  }: NavbarProps = $props();
 
-  const isActive = isActiveOverride ?? startsWithHref;
+  const isActive = $derived(isActiveOverride ?? startsWithHref);
   let active = $derived(activeOverride ?? isActive());
-
   const iconProps = $derived(typeof icon === 'string' ? { icon } : icon);
   const activeIconProps = $derived(typeof activeIcon === 'string' ? { icon: activeIcon } : activeIcon);
 
   const styles = tv({
-    base: 'hover:bg-subtle hover:text-primary flex w-full place-items-center gap-4 rounded-e-full px-5 transition-[padding] delay-100 duration-100 group-hover:sm:px-5',
+    base: 'hover:bg-subtle hover:text-primary flex w-full place-items-center gap-4 rounded-e-full ps-5 transition-[padding] delay-100 duration-100',
     variants: {
       active: {
         true: 'bg-primary/10 text-primary',
         false: '',
       },
       variant: {
-        default: 'py-3 ps-5',
-        compact: 'py-2 ps-3',
+        default: 'py-3',
+        compact: 'py-2',
       },
     },
   });
 </script>
 
-<Link
-  {href}
-  aria-current={active ? 'page' : undefined}
-  underline={false}
-  class={styles({ active, variant: variant ?? 'default' })}
->
-  <div class="flex w-full place-items-center gap-4 truncate overflow-hidden">
-    {#if iconProps}
-      <Icon
-        size="1.375em"
-        class="shrink-0"
-        aria-hidden={true}
-        {...active && activeIconProps ? activeIconProps : iconProps}
-      />
+<div>
+  <div class="relative flex items-center">
+    {#if items}
+      <button
+        type="button"
+        aria-label={expanded ? t('collapse') : t('expand')}
+        class="hover:bg-subtle hover:text-primary absolute me-2 hidden h-full rounded-lg px-0.5 md:block"
+        onclick={() => (expanded = !expanded)}
+      >
+        <Icon
+          icon={expanded ? mdiChevronDown : mdiChevronRight}
+          size="1em"
+          class="shrink-0 delay-100 duration-100 "
+          aria-hidden
+        />
+      </button>
     {/if}
-    <span class="text-sm font-medium">{title}</span>
+    <Link
+      {href}
+      aria-current={active ? 'page' : undefined}
+      underline={false}
+      class={cleanClass(styles({ active, variant: variant ?? 'default' }), className)}
+    >
+      <div class="relative flex w-full place-items-center {variant === 'compact' ? 'gap-2' : 'gap-4'}">
+        {#if iconProps}
+          <Icon
+            size="1.375em"
+            class="shrink-0"
+            aria-hidden={true}
+            {...active && activeIconProps ? activeIconProps : iconProps}
+          />
+        {/if}
+        <span class="truncate text-sm font-medium">{title}</span>
+      </div>
+    </Link>
   </div>
-</Link>
+
+  {#if expanded}
+    <div>
+      {#if Array.isArray(items)}
+        {#each items as { class: className, ...item }, i (i)}
+          <NavbarItem {variant} {...item} class={cleanClass('ps-8', className)} />
+        {/each}
+      {:else if items}
+        {@render items()}
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/components/Navbar/NavbarItem.svelte.d.ts

@@ -1,13 +1,5 @@
-import type { IconProps } from '../../types.js';
-type Props = {
-    title: string;
-    href: string;
-    active?: boolean;
-    variant?: 'compact';
-    isActive?: () => boolean;
-    icon?: string | IconProps;
-    activeIcon?: string | IconProps;
-};
-declare const NavbarItem: import("svelte").Component<Props, {}, "">;
+import NavbarItem from './NavbarItem.svelte';
+import type { NavbarProps } from '../../types.js';
+declare const NavbarItem: import("svelte").Component<NavbarProps, {}, "expanded">;
 type NavbarItem = ReturnType<typeof NavbarItem>;
 export default NavbarItem;

package/dist/services/translation.svelte.d.ts

@@ -3,6 +3,8 @@ declare const defaultTranslations: {
     cancel: string;
     close: string;
     confirm: string;
+    expand: string;
+    collapse: string;
     code_copy: string;
     code_copied: string;
     search_placeholder: string;

package/dist/services/translation.svelte.js

@@ -3,6 +3,8 @@ const defaultTranslations = {
     cancel: 'Cancel',
     close: 'Close',
     confirm: 'Confirm',
+    expand: 'Expand',
+    collapse: 'Collapse',
     // code
     code_copy: 'Copy',
     code_copied: 'Copied',

package/dist/types.d.ts

@@ -29,6 +29,19 @@ export type IconLike = string | {
 };
 export type MaybeArray<T> = T | T[];
 export type MaybePromise<T> = T | Promise<T>;
+export type NavbarVariant = 'compact';
+export type NavbarProps = {
+    title: string;
+    href: string;
+    active?: boolean;
+    variant?: NavbarVariant;
+    isActive?: () => boolean;
+    icon?: string | IconProps;
+    activeIcon?: string | IconProps;
+    expanded?: boolean;
+    items?: NavbarProps[] | Snippet;
+    class?: string;
+};
 export type IconProps = {
     icon: IconLike;
     title?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.58.4",
+  "version": "0.59.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",