@immich/ui 0.35.0 → 0.36.0

package/dist/components/Alert/Alert.svelte

@@ -5,7 +5,7 @@
   import Icon from '../Icon/Icon.svelte';
   import Text from '../Text/Text.svelte';
   import type { Color, Size } from '../../types.js';
-  import { cleanClass } from '../../utilities/internal.js';
+  import { cleanClass, resolveIcon } from '../../utilities/internal.js';
   import {
     mdiAlertOutline,
     mdiCheckCircleOutline,
@@ -66,14 +66,17 @@
     setTimeout(handleClose, duration);
   }
 
-  const icons: Partial<Record<Color, string>> = {
-    success: mdiCheckCircleOutline,
-    warning: mdiAlertOutline,
-    danger: mdiCloseCircleOutline,
-  };
-
   const icon = $derived(
-    iconOverride === false ? undefined : iconOverride || (icons[color] ?? mdiInformationVariantCircleOutline),
+    resolveIcon({
+      icons: {
+        success: mdiCheckCircleOutline,
+        warning: mdiAlertOutline,
+        danger: mdiCloseCircleOutline,
+      },
+      color,
+      override: iconOverride,
+      fallback: mdiInformationVariantCircleOutline,
+    }),
   );
 </script>
 

package/dist/components/AnnouncementBanner/AnnouncementBanner.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import Icon from '../Icon/Icon.svelte';
+  import Text from '../Text/Text.svelte';
+  import { styleVariants } from '../../styles.js';
+  import type { IconLike, Size, TextColor } from '../../types.js';
+  import { cleanClass, resolveIcon } from '../../utilities/internal.js';
+  import { mdiAlertCircleOutline, mdiAlertOutline, mdiCheckAll, mdiInformationOutline, mdiPartyPopper } from '@mdi/js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  type Props = {
+    color?: TextColor;
+    size?: Size;
+    icon?: IconLike | false;
+    center?: boolean;
+    children?: Snippet;
+    content?: Snippet;
+  } & HTMLAttributes<HTMLElement>;
+
+  const styles = tv({
+    base: 'px-4 py-2',
+    variants: {
+      center: {
+        true: 'flex items-center justify-around',
+        false: '',
+      },
+      color: {
+        primary: 'bg-primary/15 text-primary dark:bg-primary/10',
+        secondary: 'bg-dark/15 text-dark dark:bg-dark/10',
+        muted: 'bg-subtle text-subtle dark:bg-subtle',
+        info: 'bg-info/15 text-info dark:bg-info/10',
+        warning: 'bg-warning/15 text-warning dark:bg-warning/10',
+        danger: 'bg-danger/15 text-danger dark:bg-danger/10',
+        success: 'bg-success/15 text-success dark:bg-success/10',
+      },
+    },
+  });
+
+  let {
+    color = 'primary',
+    size = 'medium',
+    class: className,
+    center = false,
+    icon: iconOverride,
+    content,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const icon = $derived(
+    resolveIcon({
+      icons: {
+        danger: mdiAlertCircleOutline,
+        warning: mdiAlertOutline,
+        success: mdiCheckAll,
+        info: mdiInformationOutline,
+      },
+      color,
+      override: iconOverride,
+      fallback: mdiPartyPopper,
+    }),
+  );
+
+  const iconStyles = tv({
+    base: '',
+    variants: {
+      color: styleVariants.textColor,
+      size: {
+        tiny: 'text-xs',
+        small: 'text-sm',
+        medium: 'text-base',
+        large: 'text-lg',
+        giant: 'text-xl',
+      },
+    },
+  });
+</script>
+
+<div class={cleanClass(styles({ color, center }), className)} {...restProps}>
+  {#if content}
+    {@render content()}
+  {:else}
+    <div class="flex items-center gap-2">
+      {#if icon}
+        <Icon {icon} class={iconStyles({ color, size })} />
+      {/if}
+      <Text color="secondary" {size}>
+        {@render children?.()}
+      </Text>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,14 @@
+import type { IconLike, Size, TextColor } from '../../types.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    color?: TextColor;
+    size?: Size;
+    icon?: IconLike | false;
+    center?: boolean;
+    children?: Snippet;
+    content?: Snippet;
+} & HTMLAttributes<HTMLElement>;
+declare const AnnouncementBanner: import("svelte").Component<Props, {}, "">;
+type AnnouncementBanner = ReturnType<typeof AnnouncementBanner>;
+export default AnnouncementBanner;

package/dist/components/AppShell/AppShellSidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Scrollable from '../Scrollable/Scrollable.svelte';
-  import { ChildKey } from '../../constants.js';
+  import { ChildKey, zIndex } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
   import { cleanClass } from '../../utilities/internal.js';
   import { type Snippet } from 'svelte';
@@ -18,7 +18,7 @@
   <Scrollable
     class={cleanClass(
       'bg-light text-dark absolute shrink-0 border-e shadow-lg transition-all duration-200 md:relative',
-      open ? 'w-[min(100vw,16rem)]' : 'w-[0px]',
+      open ? `${zIndex.AppShellSidebar} w-[min(100vw,16rem)]` : 'w-[0px] border-e-0',
       className,
     )}
   >

package/dist/components/Label/Label.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
-  import { styles } from '../../styles.js';
+  import { styleVariants } from '../../styles.js';
   import type { LabelProps } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
+  import { tv } from 'tailwind-variants';
 
   const { label, size, color, class: className, children, ...restProps }: LabelProps = $props();
+
+  const styles = tv({
+    base: '',
+    variants: {
+      size: styleVariants.textSize,
+      color: styleVariants.textColor,
+    },
+  });
 </script>
 
-<label class={cleanClass(styles.label({ size, color }), className)} {...restProps}>
+<label class={cleanClass(styles({ size, color }), className)} {...restProps}>
   {#if label}{label}{/if}
   {@render children?.()}
 </label>

package/dist/components/Modal/Modal.svelte

@@ -8,7 +8,7 @@
   import CloseButton from '../CloseButton/CloseButton.svelte';
   import Icon from '../Icon/Icon.svelte';
   import Logo from '../Logo/Logo.svelte';
-  import { ChildKey } from '../../constants.js';
+  import { ChildKey, zIndex } from '../../constants.js';
   import type { ModalSize } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import { Dialog } from 'bits-ui';
@@ -41,7 +41,7 @@
   }: Props = $props();
 
   const modalStyles = tv({
-    base: 'bg-light dark:bg-subtle border-subtle shadow-primary/20 flex rounded-none border shadow-sm sm:rounded-2xl dark:border-white/10',
+    base: `bg-light dark:bg-subtle border-subtle shadow-primary/20 flex rounded-none border shadow-sm sm:rounded-2xl dark:border-white/10`,
     variants: {
       size: {
         tiny: 'h-full sm:h-min md:max-w-sm',
@@ -55,7 +55,7 @@
   });
 
   const modalContentStyles = tv({
-    base: 'fixed inset-0 m-auto flex max-h-dvh grow sm:p-4',
+    base: `${zIndex.ModalContent} fixed inset-0 m-auto flex max-h-dvh grow sm:p-4`,
     variants: {
       size: {
         tiny: 'sm:h-min md:max-w-sm',
@@ -89,7 +89,7 @@
 
 <Dialog.Root open={true} onOpenChange={(isOpen: boolean) => !isOpen && handleClose()}>
   <Dialog.Portal>
-    <Dialog.Overlay class="fixed start-0 top-0 flex h-dvh max-h-dvh w-screen bg-black/30" />
+    <Dialog.Overlay class="{zIndex.ModalBackdrop} fixed start-0 top-0  flex h-dvh max-h-dvh w-screen bg-black/30" />
     <Dialog.Content
       {onEscapeKeydown}
       {escapeKeydownBehavior}

package/dist/constants.d.ts

@@ -13,3 +13,8 @@ export declare enum ChildKey {
     ModalBody = "modal-body",
     ModalFooter = "modal-footer"
 }
+export declare const zIndex: {
+    AppShellSidebar: string;
+    ModalBackdrop: string;
+    ModalContent: string;
+};

package/dist/constants.js

@@ -14,3 +14,8 @@ export var ChildKey;
     ChildKey["ModalBody"] = "modal-body";
     ChildKey["ModalFooter"] = "modal-footer";
 })(ChildKey || (ChildKey = {}));
+export const zIndex = {
+    AppShellSidebar: 'z-30',
+    ModalBackdrop: 'z-40',
+    ModalContent: 'z-50',
+};

package/dist/index.d.ts

@@ -11,6 +11,7 @@ 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 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 AppShellHeader } from './components/AppShell/AppShellHeader.svelte';
 export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';

package/dist/index.js

@@ -13,6 +13,7 @@ export { default as obtainiumBadge } from './assets/obtainium-badge.png';
 export { default as playStoreBadge } from './assets/playstore-badge.png';
 // components
 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 AppShellHeader } from './components/AppShell/AppShellHeader.svelte';
 export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';

package/dist/internal/Button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Icon from '../components/Icon/Icon.svelte';
   import LoadingSpinner from '../components/LoadingSpinner/LoadingSpinner.svelte';
+  import { styleVariants } from '../styles.js';
   import type { ButtonProps, Size } from '../types.js';
   import { isExternalLink, resolveUrl } from '../utilities/common.js';
   import { cleanClass } from '../utilities/internal.js';
@@ -56,13 +57,7 @@
         large: 'px-8 py-2.5',
         giant: 'px-10 py-3',
       },
-      textSize: {
-        tiny: 'text-xs',
-        small: 'text-sm',
-        medium: 'text-base',
-        large: 'text-lg',
-        giant: 'text-xl',
-      },
+      textSize: styleVariants.textSize,
       iconSize: {
         tiny: 'h-6 w-6',
         small: 'h-8 w-8',

package/dist/site/SiteFooter.svelte

@@ -1,70 +1,87 @@
 <script lang="ts">
   import Heading from '../components/Heading/Heading.svelte';
+  import IconButton from '../components/IconButton/IconButton.svelte';
+  import HStack from '../components/Stack/HStack.svelte';
   import Stack from '../components/Stack/Stack.svelte';
-  import VStack from '../components/Stack/VStack.svelte';
-  import Text from '../components/Text/Text.svelte';
-  import ThemeSwitcher from '../components/ThemeSwitcher/ThemeSwitcher.svelte';
   import { Constants } from './constants.js';
   import SiteFooterLink from './SiteFooterLink.svelte';
-  import {
-    mdiBookshelf,
-    mdiChartGantt,
-    mdiCubeOutline,
-    mdiHomeSearchOutline,
-    mdiKey,
-    mdiOfficeBuildingOutline,
-    mdiScriptTextOutline,
-    mdiServerOutline,
-    mdiShieldAccountOutline,
-    mdiShoppingOutline,
-  } from '@mdi/js';
-  import { siAndroid, siApple, siDiscord, siGithub, siReddit } from 'simple-icons';
+  import { siDiscord, siGithub, siReddit, siRss, siWeblate, siX, siYoutube } from 'simple-icons';
 </script>
 
-<div class="mt-16 rounded-t-3xl bg-gray-100 p-8 dark:bg-neutral-900">
-  <div class="mx-auto max-w-(--breakpoint-lg) xl:py-8">
+<div class="mt-16 rounded-t-md bg-gray-50 p-8 lg:p-4 lg:py-8 dark:bg-neutral-900">
+  <div class="mx-auto max-w-(--breakpoint-lg)">
     <Stack gap={8}>
-      <div class="place-center grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">
+      <div class="place-center grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
         <Stack>
-          <Heading size="tiny">Social</Heading>
-          <SiteFooterLink href={Constants.Socials.Github} icon={siGithub} text="GitHub" />
-          <SiteFooterLink href={Constants.Socials.Discord} icon={siDiscord} text="Discord" />
-          <SiteFooterLink href={Constants.Socials.Reddit} icon={siReddit} text="Reddit" />
+          <Heading size="small" class="mb-2">Download</Heading>
+          <SiteFooterLink href={Constants.Get.Android} text="Android" />
+          <SiteFooterLink href={Constants.Get.iOS} text="iOS" />
+          <SiteFooterLink href={Constants.Get.Download} text="Server" />
         </Stack>
 
         <Stack>
-          <Heading size="tiny">Download</Heading>
-          <SiteFooterLink href={Constants.Get.Android} icon={siAndroid} text="Android" />
-          <SiteFooterLink href={Constants.Get.iOS} icon={siApple} text="iOS" />
-          <SiteFooterLink href={Constants.Get.Download} icon={mdiServerOutline} text="Server" />
+          <Heading size="small" class="mb-2">Company</Heading>
+          <SiteFooterLink href={Constants.Socials.Futo} text="FUTO" />
+          <SiteFooterLink href={Constants.Sites.Buy} text="Purchase" />
+          <SiteFooterLink href={Constants.Sites.Store} text="Merch" />
         </Stack>
 
         <Stack>
-          <Heading size="tiny">Company</Heading>
-          <SiteFooterLink href={Constants.Socials.Futo} icon={mdiOfficeBuildingOutline} text="FUTO" />
-          <SiteFooterLink href={Constants.Sites.Buy} icon={mdiKey} text="Purchase" />
-          <SiteFooterLink href={Constants.Sites.Store} icon={mdiShoppingOutline} text="Merch" />
+          <Heading size="small" class="mb-2">Sites</Heading>
+          <SiteFooterLink href={Constants.Sites.Docs} text="Documentation" />
+          <SiteFooterLink href={Constants.Sites.My} text="My Immich" />
+          <SiteFooterLink href={Constants.Sites.Api} text="Immich API" />
         </Stack>
 
         <Stack>
-          <Heading size="tiny">Sites</Heading>
-          <SiteFooterLink href={Constants.Sites.Docs} icon={mdiScriptTextOutline} text="Documentation" />
-          <SiteFooterLink href={Constants.Sites.My} icon={mdiHomeSearchOutline} text="My Immich" />
-          <SiteFooterLink href={Constants.Sites.Api} icon={mdiCubeOutline} text="Immich API" />
-        </Stack>
-
-        <Stack>
-          <Heading size="tiny">Miscellaneous</Heading>
-          <SiteFooterLink href={Constants.Pages.Roadmap} icon={mdiChartGantt} text="Roadmap" />
-          <SiteFooterLink href={Constants.Pages.CursedKnowledge} icon={mdiBookshelf} text="Cursed Knowledge" />
-          <SiteFooterLink href={Constants.Pages.PrivacyPolicy} icon={mdiShieldAccountOutline} text="Privacy Policy" />
+          <Heading size="small" class="mb-2">Miscellaneous</Heading>
+          <SiteFooterLink href={Constants.Pages.Roadmap} text="Roadmap" />
+          <SiteFooterLink href={Constants.Pages.CursedKnowledge} text="Cursed Knowledge" />
+          <SiteFooterLink href={Constants.Pages.PrivacyPolicy} text="Privacy Policy" />
         </Stack>
       </div>
-      <VStack class="text-center">
-        <Text size="large">This project is available under GNU AGPL v3 license.</Text>
-        <Text color="muted" variant="italic">Privacy should not be a luxury</Text>
-        <ThemeSwitcher color="secondary" />
-      </VStack>
+
+      <hr />
+
+      <HStack>
+        <IconButton
+          href={Constants.Socials.Github}
+          icon={siGithub}
+          aria-label="GitHub"
+          variant="ghost"
+          color="secondary"
+        />
+        <IconButton
+          href={Constants.Socials.Discord}
+          icon={siDiscord}
+          aria-label="Discord"
+          variant="ghost"
+          color="secondary"
+        />
+        <IconButton
+          href={Constants.Socials.Reddit}
+          icon={siReddit}
+          aria-label="reddit"
+          variant="ghost"
+          color="secondary"
+        />
+        <IconButton href={Constants.Socials.X} icon={siX} aria-label="X" variant="ghost" color="secondary" />
+        <IconButton
+          href={Constants.Socials.YouTube}
+          icon={siYoutube}
+          aria-label="YouTube"
+          variant="ghost"
+          color="secondary"
+        />
+        <IconButton
+          href={Constants.Socials.Weblate}
+          icon={siWeblate}
+          aria-label="Weblate"
+          variant="ghost"
+          color="secondary"
+        />
+        <IconButton href={Constants.Socials.Rss} icon={siRss} aria-label="RSS" variant="ghost" color="secondary" />
+      </HStack>
     </Stack>
   </div>
 </div>

package/dist/site/SiteFooterLink.svelte

@@ -1,21 +1,15 @@
 <script lang="ts">
-  import HStack from '../components/Stack/HStack.svelte';
-  import Icon from '../components/Icon/Icon.svelte';
   import Link from '../components/Link/Link.svelte';
   import Text from '../components/Text/Text.svelte';
 
   type Props = {
     href: string;
-    icon: string | { path: string };
     text: string;
   };
 
-  let { href, icon, text }: Props = $props();
+  let { href, text }: Props = $props();
 </script>
 
-<Link {href}>
-  <HStack>
-    <Icon {icon} size="1.5em" />
-    <Text>{text}</Text>
-  </HStack>
+<Link {href} underline={false} class="text-dark/90 hover:text-primary transition-colors">
+  <Text>{text}</Text>
 </Link>

package/dist/site/SiteFooterLink.svelte.d.ts

@@ -1,8 +1,5 @@
 type Props = {
     href: string;
-    icon: string | {
-        path: string;
-    };
     text: string;
 };
 declare const SiteFooterLink: import("svelte").Component<Props, {}, "">;

package/dist/site/constants.d.ts

@@ -4,7 +4,10 @@ export declare const Constants: {
         Github: string;
         Discord: string;
         Reddit: string;
+        Rss: string;
         Weblate: string;
+        X: string;
+        YouTube: string;
     };
     Get: {
         iOS: string;

package/dist/site/constants.js

@@ -6,7 +6,10 @@ export const Constants = {
         Github: 'https://github.com/immich-app/immich',
         Discord: 'https://discord.immich.app/',
         Reddit: 'https://www.reddit.com/r/immich/',
+        Rss: 'https://immich.app/blog/feed.xml',
         Weblate: 'https://hosted.weblate.org/projects/immich/immich/',
+        X: 'https://x.com/immichapp',
+        YouTube: 'https://www.youtube.com/@immich-app',
     },
     Get: {
         iOS: 'https://get.immich.app/ios',

package/dist/styles.d.ts

@@ -1,54 +1,26 @@
-export declare const styles: {
-    label: import("tailwind-variants").TVReturnType<{
-        size: {
-            tiny: string;
-            small: string;
-            medium: string;
-            large: string;
-            giant: string;
-        };
-        color: {
-            muted: string;
-            primary: string;
-            secondary: string;
-            success: string;
-            danger: string;
-            warning: string;
-            info: string;
-        };
-    }, undefined, "", {
-        size: {
-            tiny: string;
-            small: string;
-            medium: string;
-            large: string;
-            giant: string;
-        };
-        color: {
-            muted: string;
-            primary: string;
-            secondary: string;
-            success: string;
-            danger: string;
-            warning: string;
-            info: string;
-        };
-    }, undefined, import("tailwind-variants").TVReturnType<{
-        size: {
-            tiny: string;
-            small: string;
-            medium: string;
-            large: string;
-            giant: string;
-        };
-        color: {
-            muted: string;
-            primary: string;
-            secondary: string;
-            success: string;
-            danger: string;
-            warning: string;
-            info: string;
-        };
-    }, undefined, "", unknown, unknown, undefined>>;
+export declare const styleVariants: {
+    color: {
+        primary: string;
+        secondary: string;
+        success: string;
+        danger: string;
+        warning: string;
+        info: string;
+    };
+    textColor: {
+        muted: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        danger: string;
+        warning: string;
+        info: string;
+    };
+    textSize: {
+        tiny: string;
+        small: string;
+        medium: string;
+        large: string;
+        giant: string;
+    };
 };

package/dist/styles.js

@@ -1,24 +1,22 @@
-import { tv } from 'tailwind-variants';
-export const styles = {
-    label: tv({
-        base: '',
-        variants: {
-            size: {
-                tiny: 'text-xs',
-                small: 'text-sm',
-                medium: 'text-base',
-                large: 'text-lg',
-                giant: 'text-xl',
-            },
-            color: {
-                muted: 'text-gray-600 dark:text-gray-400',
-                primary: 'text-primary',
-                secondary: 'text-dark',
-                success: 'text-success',
-                danger: 'text-danger',
-                warning: 'text-warning',
-                info: 'text-info',
-            },
-        },
-    }),
+const color = {
+    primary: 'text-primary',
+    secondary: 'text-dark',
+    success: 'text-success',
+    danger: 'text-danger',
+    warning: 'text-warning',
+    info: 'text-info',
+};
+export const styleVariants = {
+    color,
+    textColor: {
+        ...color,
+        muted: 'text-gray-600 dark:text-gray-400',
+    },
+    textSize: {
+        tiny: 'text-xs',
+        small: 'text-sm',
+        medium: 'text-base',
+        large: 'text-lg',
+        giant: 'text-xl',
+    },
 };

package/dist/types.d.ts

@@ -64,7 +64,7 @@ export type CloseButtonProps = {
     translations?: TranslationProps<'close'>;
 } & ButtonOrAnchor;
 export type IconButtonProps = ButtonBase & {
-    icon: string;
+    icon: IconLike;
     flipped?: boolean;
     flopped?: boolean;
     'aria-label': string;

package/dist/utilities/internal.d.ts

@@ -1,5 +1,11 @@
-import type { IconLike } from '../types.js';
+import type { Color, IconLike, TextColor } from '../types.js';
 export declare const cleanClass: (...classNames: unknown[]) => string;
 export declare const withPrefix: (key: string) => string;
 export declare const generateId: () => string;
 export declare const isIconLike: (icon: unknown) => icon is IconLike;
+export declare const resolveIcon: ({ icons, color, override, fallback, }: {
+    color: Color | TextColor;
+    fallback: IconLike;
+    override?: IconLike | false;
+    icons: Partial<Record<Color | TextColor, string>>;
+}) => IconLike | undefined;

package/dist/utilities/internal.js

@@ -15,3 +15,12 @@ export const generateId = () => `ui-id-${_count++}`;
 export const isIconLike = (icon) => {
     return typeof icon === 'string' || !!(icon && typeof icon === 'object' && 'path' in icon);
 };
+export const resolveIcon = ({ icons, color, override, fallback, }) => {
+    if (override) {
+        return override;
+    }
+    if (override === false) {
+        return;
+    }
+    return icons[color] ?? fallback;
+};

package/package.json

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