@immich/ui 0.58.4 → 0.60.0

package/dist/common/use-child.svelte.d.ts

@@ -1,5 +1,5 @@
 import { ChildKey } from '../constants.js';
-import type { ChildData } from '../types.js';
+import { type ChildData } from '../types.js';
 export declare const withChildrenSnippets: (key: ChildKey) => {
     getChildren: <T>(key: ChildKey) => ChildData<T> | undefined;
 };

package/dist/common/use-child.svelte.js

@@ -1,4 +1,5 @@
 import { ChildKey } from '../constants.js';
+import {} from '../types.js';
 import { withPrefix } from '../utilities/internal.js';
 import { setContext } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
@@ -6,6 +7,7 @@ export const withChildrenSnippets = (key) => {
     const map = new SvelteMap();
     setContext(withPrefix(key), {
         register: (child, data) => map.set(child, data),
+        unregister: (child) => map.delete(child),
     });
     return {
         getChildren: (key) => map.get(key)?.(),

package/dist/components/ActionBar/ActionBar.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import ActionButton from '../ActionButton/ActionButton.svelte';
+  import ContextMenuButton from '../ContextMenu/ContextMenuButton.svelte';
+  import ControlBar from '../ControlBar/ControlBar.svelte';
+  import ControlBarOverflow from '../ControlBar/ControlBarOverflow.svelte';
+  import type { ActionBarProps } from '../../types.js';
+  import { isEnabled } from '../../utilities/common.js';
+
+  const { actions, overflowActions = [], children, ...restProps }: ActionBarProps = $props();
+
+  const items = $derived(overflowActions.filter((action) => isEnabled(action)));
+</script>
+
+<ControlBar {...restProps}>
+  {@render children?.()}
+  <ControlBarOverflow>
+    {#each actions as action, i (i)}
+      <ActionButton {action} />
+    {/each}
+    <ContextMenuButton {items} />
+  </ControlBarOverflow>
+</ControlBar>

package/dist/components/ActionBar/ActionBar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ActionBarProps } from '../../types.js';
+declare const ActionBar: import("svelte").Component<ActionBarProps, {}, "">;
+type ActionBar = ReturnType<typeof ActionBar>;
+export default ActionBar;

package/dist/components/ActionButton/ActionButton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import Button from '../Button/Button.svelte';
+  import IconButton from '../IconButton/IconButton.svelte';
+  import type { ActionItem, Color, Size, Variants } from '../../types.js';
+  import { isEnabled } from '../../utilities/common.js';
+  import { mdiPlus } from '@mdi/js';
+
+  type Props = {
+    action: ActionItem & { data?: { title?: string } };
+    color?: Color;
+    size?: Size;
+    variant?: Variants;
+    type?: 'icon' | 'button';
+  };
+
+  const { action, type = 'icon', size, color: colorOverride, variant: variantOverride }: Props = $props();
+  const { title, icon, onAction } = $derived(action);
+  const common = $derived({
+    variant: variantOverride ?? 'ghost',
+    color: colorOverride ?? action.color ?? 'secondary',
+    onclick: () => onAction(action),
+  });
+</script>
+
+{#if isEnabled(action)}
+  {#if type === 'icon'}
+    <IconButton {...common} {size} shape="round" icon={icon ?? mdiPlus} aria-label={title} />
+  {:else if type === 'button'}
+    <Button {...common} size={size ?? 'small'} leadingIcon={icon} title={action.data?.title}>
+      {title}
+    </Button>
+  {/if}
+{/if}

package/dist/components/ActionButton/ActionButton.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ActionItem, Color, Size, Variants } from '../../types.js';
+type Props = {
+    action: ActionItem & {
+        data?: {
+            title?: string;
+        };
+    };
+    color?: Color;
+    size?: Size;
+    variant?: Variants;
+    type?: 'icon' | 'button';
+};
+declare const ActionButton: import("svelte").Component<Props, {}, "">;
+type ActionButton = ReturnType<typeof ActionButton>;
+export default ActionButton;

package/dist/components/AppShell/AppShell.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { withChildrenSnippets } from '../../common/use-child.svelte.js';
   import Scrollable from '../Scrollable/Scrollable.svelte';
-  import { ChildKey } from '../../constants.js';
+  import { ChildKey, zIndex } from '../../constants.js';
   import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
 
@@ -13,19 +13,24 @@
   const { class: className, children }: Props = $props();
 
   const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.AppShell);
+  const bar = $derived(getChildSnippet(ChildKey.AppShellBar));
   const header = $derived(getChildSnippet(ChildKey.AppShellHeader));
   const sidebar = $derived(getChildSnippet(ChildKey.AppShellSidebar));
 </script>
 
 <div class={cleanClass('flex h-dvh flex-col overflow-hidden', className)}>
-  {#if header}
-    <header class="border-b">
-      {@render header?.snippet()}
+  {#if bar}
+    <div class={cleanClass('h-control-bar-container px-2 pt-2', zIndex.AppShellBar, bar.class)}>
+      {@render bar.snippet()}
+    </div>
+  {:else if header}
+    <header class={cleanClass('h-control-bar-container flex items-center gap-2 border-b', header.class)}>
+      {@render header.snippet()}
     </header>
   {/if}
   <div class="relative flex w-full grow overflow-y-auto">
     {#if sidebar}
-      {@render sidebar?.snippet()}
+      {@render sidebar.snippet()}
     {/if}
     <Scrollable class="grow" resetOnNavigate>
       {@render children?.()}

package/dist/components/AppShell/AppShellBar.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { ChildKey } from '../../constants.js';
+  import Child from '../../internal/Child.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    children: Snippet;
+    class?: string;
+  };
+
+  let { children, class: className }: Props = $props();
+</script>
+
+<Child for={ChildKey.AppShell} as={ChildKey.AppShellBar} class={className}>
+  {@render children?.()}
+</Child>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+    class?: string;
+};
+declare const AppShellBar: import("svelte").Component<Props, {}, "">;
+type AppShellBar = ReturnType<typeof AppShellBar>;
+export default AppShellBar;

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/ContextMenu/ContextMenuButton.svelte

@@ -23,12 +23,14 @@
   };
 </script>
 
-<IconButton
-  {icon}
-  {color}
-  {shape}
-  {variant}
-  aria-label={ariaLabel ?? t('open_menu', translations)}
-  {...rest}
-  {onclick}
-/>
+{#if items.length > 0}
+  <IconButton
+    {icon}
+    {color}
+    {shape}
+    {variant}
+    aria-label={ariaLabel ?? t('open_menu', translations)}
+    {...rest}
+    {onclick}
+  />
+{/if}

package/dist/components/ControlBar/ControlBar.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { shortcuts } from '../../actions/shortcut.js';
+  import { withChildrenSnippets } from '../../common/use-child.svelte.js';
+  import IconButton from '../IconButton/IconButton.svelte';
+  import { ChildKey } from '../../constants.js';
+  import { t } from '../../services/translation.svelte.js';
+  import type { ControlBarProps } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { mdiClose } from '@mdi/js';
+  import { fly } from 'svelte/transition';
+  import { tv } from 'tailwind-variants';
+
+  let {
+    ref = $bindable(null),
+    closeIcon,
+    class: className,
+    shape = 'semi-round',
+    variant = 'ghost',
+    closeOnEsc = true,
+    static: isStatic = false,
+    translations,
+    onClose,
+    children,
+    ...restProps
+  }: ControlBarProps = $props();
+
+  const styles = tv({
+    base: `h-control-bar flex w-full items-center gap-2 px-2`,
+    variants: {
+      variant: {
+        filled: 'dark:bg-subtle bg-white shadow-lg',
+        outline: 'dark:border-light-200 border-light-200 border shadow-md',
+        ghost: '',
+      },
+      shape: {
+        'semi-round': 'rounded-lg',
+        rectangle: 'rounded-none',
+      },
+    },
+  });
+
+  const onEscape = () => {
+    if (closeOnEsc) {
+      onClose?.();
+    }
+  };
+
+  const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.ControlBar);
+  const headerChild = $derived(getChildSnippet(ChildKey.ControlBarHeader));
+  const contentChild = $derived(getChildSnippet(ChildKey.ControlBarContent));
+  const overflowChild = $derived(getChildSnippet(ChildKey.ControlBarOverflow));
+</script>
+
+<svelte:window use:shortcuts={[{ shortcut: { key: 'Escape' }, onShortcut: onEscape }]} />
+
+<nav
+  bind:this={ref}
+  in:fly={{ y: 10, duration: isStatic ? 0 : 200 }}
+  class={cleanClass(styles({ shape, variant }), className)}
+  {...restProps}
+>
+  <div class={cleanClass('flex shrink-0 items-center gap-2')}>
+    {#if typeof closeIcon === 'function'}
+      {@render closeIcon?.()}
+    {:else if onClose}
+      <IconButton
+        icon={closeIcon ?? mdiClose}
+        shape="round"
+        variant="ghost"
+        color="secondary"
+        aria-label={t('close', translations)}
+        onclick={() => onClose()}
+      />
+    {/if}
+
+    <div class={cleanClass('flex shrink-0 flex-col')}>
+      {@render headerChild?.snippet()}
+    </div>
+  </div>
+
+  <div class={cleanClass('flex grow items-center gap-2', contentChild?.class)}>
+    {@render contentChild?.snippet()}
+  </div>
+
+  {#if overflowChild}
+    <div class={cleanClass('flex shrink-0 items-center gap-2', overflowChild.class)}>
+      {@render overflowChild.snippet()}
+    </div>
+  {/if}
+
+  {@render children?.()}
+</nav>

package/dist/components/ControlBar/ControlBar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ControlBarProps } from '../../types.js';
+declare const ControlBar: import("svelte").Component<ControlBarProps, {}, "ref">;
+type ControlBar = ReturnType<typeof ControlBar>;
+export default ControlBar;

package/dist/components/ControlBar/ControlBarContent.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { ChildKey } from '../../constants.js';
+  import Child from '../../internal/Child.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    class?: string;
+    children: Snippet;
+  };
+
+  let { class: className, children }: Props = $props();
+</script>
+
+<Child for={ChildKey.ControlBar} as={ChildKey.ControlBarContent} class={className}>
+  {@render children?.()}
+</Child>

package/dist/components/ControlBar/ControlBarContent.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    children: Snippet;
+};
+declare const ControlBarContent: import("svelte").Component<Props, {}, "">;
+type ControlBarContent = ReturnType<typeof ControlBarContent>;
+export default ControlBarContent;

package/dist/components/ControlBar/ControlBarDescription.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Text from '../Text/Text.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    class?: string;
+    children: Snippet;
+  };
+
+  let { children, class: className }: Props = $props();
+</script>
+
+<Text size="small" color="muted" class={className}>
+  {@render children?.()}
+</Text>

package/dist/components/ControlBar/ControlBarDescription.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    children: Snippet;
+};
+declare const ControlBarDescription: import("svelte").Component<Props, {}, "">;
+type ControlBarDescription = ReturnType<typeof ControlBarDescription>;
+export default ControlBarDescription;

package/dist/components/ControlBar/ControlBarHeader.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { ChildKey } from '../../constants.js';
+  import Child from '../../internal/Child.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    class?: string;
+    children: Snippet;
+  };
+
+  let { class: className, children }: Props = $props();
+</script>
+
+<Child for={ChildKey.ControlBar} as={ChildKey.ControlBarHeader} class={className}>
+  {@render children?.()}
+</Child>

package/dist/components/ControlBar/ControlBarHeader.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    children: Snippet;
+};
+declare const ControlBarHeader: import("svelte").Component<Props, {}, "">;
+type ControlBarHeader = ReturnType<typeof ControlBarHeader>;
+export default ControlBarHeader;

package/dist/components/ControlBar/ControlBarOverflow.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { ChildKey } from '../../constants.js';
+  import Child from '../../internal/Child.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    class?: string;
+    children: Snippet;
+  };
+
+  let { class: className, children }: Props = $props();
+</script>
+
+<Child for={ChildKey.ControlBar} as={ChildKey.ControlBarOverflow} class={className}>
+  {@render children?.()}
+</Child>

package/dist/components/ControlBar/ControlBarOverflow.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    children: Snippet;
+};
+declare const ControlBarOverflow: import("svelte").Component<Props, {}, "">;
+type ControlBarOverflow = ReturnType<typeof ControlBarOverflow>;
+export default ControlBarOverflow;

package/dist/components/ControlBar/ControlBarTitle.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import Heading from '../Heading/Heading.svelte';
+  import type { Color, FontWeight, HeadingSize, HeadingTag } from '../../types.js';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    /**
+     * The HTML element type.
+     */
+    tag?: HeadingTag;
+    class?: string;
+    size?: HeadingSize;
+    color?: Color;
+    fontWeight?: FontWeight;
+    children: Snippet;
+  };
+
+  const { size = 'small', fontWeight = 'medium', color = 'primary', tag, class: className, children }: Props = $props();
+</script>
+
+<Heading {tag} {size} {color} {fontWeight} class={className}>
+  {@render children?.()}
+</Heading>

package/dist/components/ControlBar/ControlBarTitle.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Color, FontWeight, HeadingSize, HeadingTag } from '../../types.js';
+import type { Snippet } from 'svelte';
+type Props = {
+    /**
+     * The HTML element type.
+     */
+    tag?: HeadingTag;
+    class?: string;
+    size?: HeadingSize;
+    color?: Color;
+    fontWeight?: FontWeight;
+    children: Snippet;
+};
+declare const ControlBarTitle: import("svelte").Component<Props, {}, "">;
+type ControlBarTitle = ReturnType<typeof ControlBarTitle>;
+export default ControlBarTitle;

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/components/ProgressBar/ProgressBar.svelte

@@ -10,22 +10,31 @@
     size?: Size;
     shape?: Shape;
     color?: Color;
+    border?: boolean;
     class?: string;
     children?: Snippet;
   };
 
-  let { progress, shape = 'round', size = 'medium', color = 'primary', class: className, children }: Props = $props();
+  let {
+    progress,
+    shape = 'round',
+    size = 'medium',
+    color = 'primary',
+    border = false,
+    class: className,
+    children,
+  }: Props = $props();
 
   const containerStyles = tv({
-    base: 'bg-light-100 dark:bg-light-200 dark:border-light-300 relative w-full overflow-hidden border',
+    base: 'bg-light-100 dark:bg-light-200 relative w-full overflow-hidden',
     variants: {
       shape: styleVariants.shape,
       size: {
-        tiny: 'h-3',
-        small: 'h-4',
-        medium: 'h-5',
-        large: 'h-6',
-        giant: 'h-12',
+        tiny: 'h-2',
+        small: 'h-3',
+        medium: 'h-4',
+        large: 'h-5',
+        giant: 'h-7',
       },
       roundedSize: {
         tiny: 'rounded-sm',
@@ -34,6 +43,9 @@
         large: 'rounded-lg',
         giant: 'rounded-xl',
       },
+      border: {
+        true: 'dark:border-light-300 border',
+      },
     },
   });
 
@@ -42,18 +54,28 @@
     variants: {
       color: styleVariants.filledColor,
       shape: styleVariants.shape,
+      size: {
+        tiny: 'min-w-2',
+        small: 'min-w-3',
+        medium: 'min-w-4',
+        large: 'min-w-5',
+        giant: 'min-w-7',
+      },
     },
   });
 </script>
 
 <div
   class={cleanClass(
-    containerStyles({ size, shape, roundedSize: shape === 'semi-round' ? size : undefined }),
+    containerStyles({ size, shape, roundedSize: shape === 'semi-round' ? size : undefined, border }),
     className,
   )}
 >
   <div class="absolute flex h-full w-full items-center justify-center">
     {@render children?.()}
   </div>
-  <div class={cleanClass(barStyles({ color, shape }))} style="width: {progress * 100}%"></div>
+  <div
+    class={cleanClass(barStyles({ size: progress > 0 ? size : undefined, color, shape }))}
+    style="width: {progress * 100}%"
+  ></div>
 </div>

package/dist/components/ProgressBar/ProgressBar.svelte.d.ts

@@ -5,6 +5,7 @@ type Props = {
     size?: Size;
     shape?: Shape;
     color?: Color;
+    border?: boolean;
     class?: string;
     children?: Snippet;
 };

package/dist/constants.d.ts

@@ -3,11 +3,16 @@ export declare enum ChildKey {
     HelperText = "helped-text",
     AppShell = "app-shell",
     AppShellHeader = "app-shell-header",
+    AppShellBar = "app-shell-bar",
     AppShellSidebar = "app-shell-sidebar",
     Card = "card",
     CardHeader = "card-header",
     CardBody = "card-body",
     CardFooter = "card-footer",
+    ControlBar = "control-bar",
+    ControlBarHeader = "control-bar-header",
+    ControlBarContent = "control-bar-content",
+    ControlBarOverflow = "control-bar-overflow",
     Modal = "modal",
     ModalHeader = "modal-header",
     ModalBody = "modal-body",
@@ -20,6 +25,7 @@ export declare enum ChildKey {
 export declare const zIndex: {
     CarouselImage: string;
     AppShellSidebar: string;
+    AppShellBar: string;
     ModalBackdrop: string;
     ModalContent: string;
     SelectDropdown: string;

package/dist/constants.js

@@ -4,11 +4,16 @@ export var ChildKey;
     ChildKey["HelperText"] = "helped-text";
     ChildKey["AppShell"] = "app-shell";
     ChildKey["AppShellHeader"] = "app-shell-header";
+    ChildKey["AppShellBar"] = "app-shell-bar";
     ChildKey["AppShellSidebar"] = "app-shell-sidebar";
     ChildKey["Card"] = "card";
     ChildKey["CardHeader"] = "card-header";
     ChildKey["CardBody"] = "card-body";
     ChildKey["CardFooter"] = "card-footer";
+    ChildKey["ControlBar"] = "control-bar";
+    ChildKey["ControlBarHeader"] = "control-bar-header";
+    ChildKey["ControlBarContent"] = "control-bar-content";
+    ChildKey["ControlBarOverflow"] = "control-bar-overflow";
     ChildKey["Modal"] = "modal";
     ChildKey["ModalHeader"] = "modal-header";
     ChildKey["ModalBody"] = "modal-body";
@@ -21,6 +26,7 @@ export var ChildKey;
 export const zIndex = {
     CarouselImage: 'z-1',
     AppShellSidebar: 'z-30',
+    AppShellBar: 'z-35',
     ModalBackdrop: 'z-40',
     ModalContent: 'z-50',
     SelectDropdown: 'z-55',

package/dist/index.d.ts

@@ -10,9 +10,12 @@ export { default as immichLogoJson } from './assets/immich-logo.json';
 export { default as immichLogo } from './assets/immich-logo.svg';
 export { default as obtainiumBadge } from './assets/obtainium-badge.png';
 export { default as playStoreBadge } from './assets/playstore-badge.png';
+export { default as ActionBar } from './components/ActionBar/ActionBar.svelte';
+export { default as ActionButton } from './components/ActionButton/ActionButton.svelte';
 export { default as Alert } from './components/Alert/Alert.svelte';
 export { default as AnnouncementBanner } from './components/AnnouncementBanner/AnnouncementBanner.svelte';
 export { default as AppShell } from './components/AppShell/AppShell.svelte';
+export { default as AppShellBar } from './components/AppShell/AppShellBar.svelte';
 export { default as AppShellHeader } from './components/AppShell/AppShellHeader.svelte';
 export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
@@ -35,6 +38,12 @@ export { default as CommandPaletteProvider } from './components/CommandPalette/C
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
 export { default as ContextMenuButton } from './components/ContextMenu/ContextMenuButton.svelte';
+export { default as ControlBar } from './components/ControlBar/ControlBar.svelte';
+export { default as ControlBarContent } from './components/ControlBar/ControlBarContent.svelte';
+export { default as ControlBarDescription } from './components/ControlBar/ControlBarDescription.svelte';
+export { default as ControlBarHeader } from './components/ControlBar/ControlBarHeader.svelte';
+export { default as ControlBarOverflow } from './components/ControlBar/ControlBarOverflow.svelte';
+export { default as ControlBarTitle } from './components/ControlBar/ControlBarTitle.svelte';
 export { default as DatePicker } from './components/DatePicker/DatePicker.svelte';
 export { default as Field } from './components/Field/Field.svelte';
 export { default as FormatBytes } from './components/FormatBytes/FormatBytes.svelte';

package/dist/index.js

@@ -12,9 +12,12 @@ export { default as immichLogo } from './assets/immich-logo.svg';
 export { default as obtainiumBadge } from './assets/obtainium-badge.png';
 export { default as playStoreBadge } from './assets/playstore-badge.png';
 // components
+export { default as ActionBar } from './components/ActionBar/ActionBar.svelte';
+export { default as ActionButton } from './components/ActionButton/ActionButton.svelte';
 export { default as Alert } from './components/Alert/Alert.svelte';
 export { default as AnnouncementBanner } from './components/AnnouncementBanner/AnnouncementBanner.svelte';
 export { default as AppShell } from './components/AppShell/AppShell.svelte';
+export { default as AppShellBar } from './components/AppShell/AppShellBar.svelte';
 export { default as AppShellHeader } from './components/AppShell/AppShellHeader.svelte';
 export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
@@ -37,6 +40,12 @@ export { default as CommandPaletteProvider } from './components/CommandPalette/C
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
 export { default as ContextMenuButton } from './components/ContextMenu/ContextMenuButton.svelte';
+export { default as ControlBar } from './components/ControlBar/ControlBar.svelte';
+export { default as ControlBarContent } from './components/ControlBar/ControlBarContent.svelte';
+export { default as ControlBarDescription } from './components/ControlBar/ControlBarDescription.svelte';
+export { default as ControlBarHeader } from './components/ControlBar/ControlBarHeader.svelte';
+export { default as ControlBarOverflow } from './components/ControlBar/ControlBarOverflow.svelte';
+export { default as ControlBarTitle } from './components/ControlBar/ControlBarTitle.svelte';
 export { default as DatePicker } from './components/DatePicker/DatePicker.svelte';
 export { default as Field } from './components/Field/Field.svelte';
 export { default as FormatBytes } from './components/FormatBytes/FormatBytes.svelte';

package/dist/internal/Child.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
   import { ChildKey } from '../constants.js';
-  import type { ChildData } from '../types.js';
+  import type { ContextType } from '../types.js';
   import { withPrefix } from '../utilities/internal.js';
-  import { getContext, type Snippet } from 'svelte';
+  import { getContext, onDestroy, type Snippet } from 'svelte';
 
-  type ContextType = {
-    register: (key: ChildKey, data: () => ChildData) => void;
-  };
   type Props = {
     for: ChildKey;
     as: ChildKey;
@@ -26,4 +23,8 @@
   } else {
     console.log('Unable to find context for key:', key);
   }
+
+  onDestroy(() => {
+    context?.unregister(as);
+  });
 </script>

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/theme/default.css

@@ -5,6 +5,11 @@
 
 @import 'tailwindcss';
 
+@theme {
+  --spacing-control-bar-container: --spacing(18);
+  --spacing-control-bar: --spacing(16);
+}
+
 @theme inline {
   --color-primary-50: var(--immich-ui-primary-50);
   --color-primary-100: var(--immich-ui-primary-100);

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 import type { Shortcut } from './actions/shortcut.js';
+import type { ChildKey } from './constants.js';
 import type { Translations } from './services/translation.svelte.js';
 import type { DateTime } from 'luxon';
 import type { Component, Snippet } from 'svelte';
@@ -29,6 +30,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;
@@ -291,4 +305,23 @@ export type CarouselImageItem = {
     alt?: string;
     id?: string;
 };
+export type ControlBarProps = {
+    ref?: HTMLElement | null;
+    closeIcon?: IconLike | Snippet;
+    variant?: Variants;
+    shape?: 'semi-round' | 'rectangle';
+    translations?: TranslationProps<'close'>;
+    onClose?: () => void;
+    children?: Snippet;
+    closeOnEsc?: boolean;
+    static?: boolean;
+} & HTMLAttributes<HTMLElement>;
+export type ActionBarProps = ControlBarProps & {
+    actions: ActionItem[];
+    overflowActions?: ActionItem[];
+};
+export type ContextType = {
+    register: (key: ChildKey, data: () => ChildData) => void;
+    unregister: (key: ChildKey) => void;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.58.4",
+  "version": "0.60.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",
@@ -58,7 +58,7 @@
     "@immich/svelte-markdown-preprocess": "^0.1.0"
   },
   "volta": {
-    "node": "24.12.0"
+    "node": "24.13.0"
   },
   "scripts": {
     "create": "node scripts/create.js",