@immich/ui 0.12.1 → 0.13.0

package/dist/components/AppShell/AppShell.svelte

@@ -17,7 +17,7 @@
 	const sidebar = $derived(getChildSnippet(ChildKey.AppShellSidebar));
 </script>
 
-<div class={cleanClass('flex h-screen flex-col overflow-hidden', className)}>
+<div class={cleanClass('flex h-dvh flex-col overflow-hidden', className)}>
 	{#if header}
 		<header class="border-b">
 			{@render header?.snippet()}

package/dist/components/AppShell/AppShellSidebar.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import IconButton from '../IconButton/IconButton.svelte';
+	import Scrollable from '../Scrollable/Scrollable.svelte';
 	import { ChildKey } from '../../constants.js';
 	import Child from '../../internal/Child.svelte';
 	import { cleanClass } from '../../utils.js';
-	import Scrollable from '../Scrollable/Scrollable.svelte';
+	import { mdiClose, mdiMenu } from '@mdi/js';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
@@ -12,11 +15,34 @@
 	};
 
 	let { class: className, children, noBorder = false }: Props = $props();
+
+	afterNavigate(() => {
+		if (!hidden) {
+			hidden = true;
+		}
+	});
+
+	let hidden = $state(true);
 </script>
 
 <Child for={ChildKey.AppShell} as={ChildKey.AppShellSidebar}>
+	<IconButton
+		size="giant"
+		onclick={() => (hidden = !hidden)}
+		icon={hidden ? mdiMenu : mdiClose}
+		shape="round"
+		color={hidden ? 'primary' : 'secondary'}
+		variant="filled"
+		class="absolute bottom-2 right-4 z-[100] m-2 opacity-100 md:hidden"
+	/>
 	<Scrollable
-		class={cleanClass('hidden h-full w-min shrink-0 lg:block', className, noBorder || 'border-r')}
+		class={cleanClass(
+			'z-[90] h-dvh w-full shrink-0 bg-light pb-16 text-dark md:relative md:block md:w-min md:pb-0',
+
+			hidden ? 'hidden' : '',
+			className,
+			noBorder || 'border-r',
+		)}
 	>
 		{@render children?.()}
 	</Scrollable>

package/dist/components/Code/Code.svelte

@@ -36,14 +36,14 @@
 			},
 
 			filled: {
-				true: 'rounded px-2 py-1',
+				true: 'rounded-lg p-3',
 				false: '',
 			},
 
 			filledColor: {
 				false: '',
 				muted: 'bg-gray-600 text-light dark:bg-gray-800',
-				primary: 'bg-gray-200 text-primary dark:bg-gray-700',
+				primary: 'bg-gray-200 text-primary dark:bg-primary/20 dark:text-gray-200',
 				secondary: 'bg-gray-700 text-light dark:bg-gray-200',
 				success: 'bg-success text-light',
 				danger: 'bg-danger text-light',

package/dist/components/Modal/Modal.svelte

@@ -56,7 +56,7 @@
 
 <Dialog.Root bind:open {...restProps}>
 	<Dialog.Portal>
-		<Dialog.Overlay class="absolute left-0 top-0 flex h-screen w-screen backdrop-blur" />
+		<Dialog.Overlay class="absolute left-0 top-0 flex h-dvh w-screen backdrop-blur" />
 		<Dialog.Content
 			class={cleanClass(
 				'absolute left-0 top-0 flex h-dvh w-screen items-center justify-center overflow-hidden sm:p-4',

package/dist/components/Navbar/NavbarGroup.svelte

@@ -6,7 +6,6 @@
 	let { title }: Props = $props();
 </script>
 
-<div class="text-xs transition-all duration-200">
-	<p class="hidden px-6 py-4 uppercase group-hover:sm:block md:block">{title}</p>
-	<hr class="mx-4 mb-[31px] mt-8 block group-hover:sm:hidden md:hidden" />
+<div class="text-sm transition-all duration-200 md:text-sm">
+	<p class="py-2 pl-4 uppercase">{title}</p>
 </div>

package/dist/components/Navbar/NavbarItem.svelte

@@ -7,24 +7,42 @@
 		title: string;
 		active?: boolean;
 		href: string;
-	} & IconProps;
+		variant?: 'compact';
+	} & { icon?: string & Omit<IconProps, 'icon'> };
 
-	let { href, title, active = false, ...iconProps }: Props = $props();
+	let { href, title, variant, active = false, ...iconProps }: Props = $props();
 
 	const styles = tv({
-		base: 'flex w-full place-items-center gap-4 rounded-r-full py-3 pl-5 transition-[padding] delay-100 duration-100 hover:bg-subtle hover:text-primary group-hover:sm:px-5 md:px-5',
+		base: 'flex w-full place-items-center gap-4 transition-[padding] delay-100 duration-100 hover:bg-subtle hover:text-primary group-hover:sm:px-5 md:rounded-r-full md:px-5',
 		variants: {
 			active: {
 				true: 'bg-primary/10 text-primary',
 				false: '',
 			},
+			variant: {
+				default: 'py-3 pl-5',
+				compact: 'py-2 pl-3',
+			},
 		},
 	});
 </script>
 
-<a {href} draggable="false" aria-current={active ? 'page' : undefined} class={styles({ active })}>
+<a
+	{href}
+	draggable="false"
+	aria-current={active ? 'page' : undefined}
+	class={styles({ active, variant: variant ?? 'default' })}
+>
 	<div class="flex w-full place-items-center gap-4 overflow-hidden truncate">
-		<Icon size="1.5em" class="shrink-0" aria-hidden={true} {...iconProps} />
+		{#if iconProps.icon}
+			<Icon
+				size="1.375em"
+				class="shrink-0"
+				aria-hidden={true}
+				{...iconProps}
+				icon={iconProps.icon}
+			/>
+		{/if}
 		<span class="text-sm font-medium">{title}</span>
 	</div>
 </a>

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

@@ -3,5 +3,8 @@ declare const NavbarItem: import("svelte").Component<{
     title: string;
     active?: boolean;
     href: string;
-} & IconProps, {}, "">;
+    variant?: "compact";
+} & {
+    icon?: string & Omit<IconProps, "icon">;
+}, {}, "">;
 export default NavbarItem;

package/dist/components/Scrollable/Scrollable.svelte

@@ -5,6 +5,7 @@
 	type Props = {
 		class?: string;
 		children?: Snippet;
+		transition?: TransitionEvent;
 	};
 
 	const { class: className, children }: Props = $props();

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

@@ -2,5 +2,6 @@ import type { Snippet } from 'svelte';
 declare const Scrollable: import("svelte").Component<{
     class?: string;
     children?: Snippet;
+    transition?: TransitionEvent;
 }, {}, "">;
 export default Scrollable;

package/dist/components/Switch/Switch.svelte

@@ -46,8 +46,8 @@
 		base: 'my-2 h-3 w-12 rounded-full border border-transparent',
 		variants: {
 			fillColor: {
-				default: 'bg-gray-400',
-				primary: 'bg-primary/50',
+				default: 'bg-gray-300 dark:bg-gray-400',
+				primary: 'bg-primary/60',
 				secondary: 'bg-dark/50',
 				success: 'bg-success/50',
 				danger: 'bg-danger/50',
@@ -61,11 +61,11 @@
 		base: 'absolute h-6 w-6 rounded-full transition-transform duration-[400ms]',
 		variants: {
 			checked: {
-				true: 'translate-x-6',
+				true: 'translate-x-6 border border-gray-500/10 shadow-sm dark:border-gray-800/50',
 				false: '',
 			},
 			fillColor: {
-				default: 'bg-gray-600',
+				default: 'bg-gray-400 dark:bg-gray-500',
 				primary: 'bg-primary',
 				secondary: 'bg-dark',
 				success: 'bg-success',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.12.1",
+	"version": "0.13.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",