@immich/ui 0.19.1 → 0.20.0

package/dist/components/AppShell/AppShellSidebar.svelte

@@ -1,48 +1,25 @@
 <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 { mdiClose, mdiMenu } from '@mdi/js';
-	import type { Snippet } from 'svelte';
+	import { type Snippet } from 'svelte';
 
 	type Props = {
 		class?: string;
 		children: Snippet;
-		noBorder?: boolean;
+		open?: boolean;
 	};
 
-	let { class: className, children, noBorder = false }: Props = $props();
-
-	afterNavigate(() => {
-		if (!hidden) {
-			hidden = true;
-		}
-	});
-
-	let hidden = $state(true);
+	let { class: className, children, open = $bindable(true) }: Props = $props();
 </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 end-4 m-2 opacity-100 md:hidden"
-		aria-label="Menu"
-	/>
 	<Scrollable
 		class={cleanClass(
-			'h-dvh w-full shrink-0 bg-light pb-16 text-dark md:relative md:block md:w-min md:pb-0',
-
-			hidden ? 'hidden' : '',
+			'relative shrink-0 bg-light text-dark transition-all duration-200',
+			open ? 'w-[min(100vw,16rem)]' : 'w-[0px]',
 			className,
-			noBorder || 'border-e',
 		)}
 	>
 		{@render children?.()}

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

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

package/dist/components/Form/PasswordInput.svelte

@@ -23,7 +23,7 @@
 				shape="round"
 				color="secondary"
 				{size}
-				class="mr-1"
+				class="me-1"
 				icon={isVisible ? mdiEyeOffOutline : mdiEyeOutline}
 				onclick={() => (isVisible = !isVisible)}
 				title={isVisible ? t('hidePassword', translations) : t('showPassword', translations)}

package/dist/components/Navbar/NavbarItem.svelte

@@ -12,7 +12,7 @@
 		isActive?: () => boolean;
 	} & { icon?: string & Omit<IconProps, 'icon'> };
 
-	const matchesPath = () => page.url.pathname === href;
+	const startsWithHref = () => page.url.pathname.startsWith(href);
 
 	let {
 		href,
@@ -23,11 +23,11 @@
 		...iconProps
 	}: Props = $props();
 
-	const isActive = isActiveOverride ?? matchesPath;
+	const isActive = isActiveOverride ?? startsWithHref;
 	let active = $derived(activeOverride ?? isActive());
 
 	const styles = tv({
-		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-e-full md:px-5',
+		base: 'flex w-full place-items-center gap-4 rounded-e-full px-5 transition-[padding] delay-100 duration-100 hover:bg-subtle hover:text-primary group-hover:sm:px-5',
 		variants: {
 			active: {
 				true: 'bg-primary/10 text-primary',

package/dist/utils.js

@@ -1,12 +1,13 @@
+import { twMerge } from 'tailwind-merge';
 export const cleanClass = (...classNames) => {
-    return classNames
+    return twMerge(classNames
         .filter((className) => {
         if (!className || typeof className === 'boolean') {
             return false;
         }
         return typeof className === 'string';
     })
-        .join(' ');
+        .join(' '));
 };
 export const withPrefix = (key) => `immich-ui-${key}`;
 let _count = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.19.1",
+	"version": "0.20.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",
@@ -68,5 +68,8 @@
 		"bits-ui": "^1.0.0-next.46",
 		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.3.0"
+	},
+	"volta": {
+		"node": "22.15.0"
 	}
 }