@immich/ui 0.31.1 → 0.32.0

package/dist/common/context.svelte.js

@@ -1,4 +1,4 @@
-import { withPrefix } from '../utils.js';
+import { withPrefix } from '../utilities/internal.js';
 import { getContext, hasContext, setContext } from 'svelte';
 const fieldKey = Symbol(withPrefix('field'));
 export const setFieldContext = (field) => setContext(fieldKey, field);

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

@@ -1,5 +1,5 @@
 import { ChildKey } from '../constants.js';
-import { withPrefix } from '../utils.js';
+import { withPrefix } from '../utilities/internal.js';
 import { setContext } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
 export const withChildrenSnippets = (key) => {

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 '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import {
     mdiAlertOutline,
     mdiCheckCircleOutline,

package/dist/components/AppShell/AppShell.svelte

@@ -2,7 +2,7 @@
   import { withChildrenSnippets } from '../../common/use-child.svelte.js';
   import Scrollable from '../Scrollable/Scrollable.svelte';
   import { ChildKey } from '../../constants.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
 
   type Props = {

package/dist/components/AppShell/AppShellSidebar.svelte

@@ -2,7 +2,7 @@
   import Scrollable from '../Scrollable/Scrollable.svelte';
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import { type Snippet } from 'svelte';
 
   type Props = {

package/dist/components/Card/Card.svelte

@@ -4,7 +4,7 @@
   import Scrollable from '../Scrollable/Scrollable.svelte';
   import { ChildKey } from '../../constants.js';
   import type { Color } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import { mdiChevronDown } from '@mdi/js';
   import { type Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';

package/dist/components/Card/CardDescription.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Text from '../Text/Text.svelte';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
 
   type Props = {

package/dist/components/Checkbox/Checkbox.svelte

@@ -4,7 +4,7 @@
   import Label from '../Label/Label.svelte';
   import Text from '../Text/Text.svelte';
   import type { Color, Shape, Size } from '../../types.js';
-  import { cleanClass, generateId } from '../../utils.js';
+  import { cleanClass, generateId } from '../../utilities/internal.js';
   import { mdiCheck, mdiMinus } from '@mdi/js';
   import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
   import { tv } from 'tailwind-variants';

package/dist/components/Code/Code.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Size, TextColor } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
   import { tv } from 'tailwind-variants';

package/dist/components/Container/Container.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Size } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
   import { tv } from 'tailwind-variants';
 

package/dist/components/Field/Field.svelte

@@ -3,7 +3,7 @@
   import { withChildrenSnippets } from '../../common/use-child.svelte.js';
   import { ChildKey } from '../../constants.js';
   import type { FieldContext } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import { type Snippet } from 'svelte';
 
   type Props = FieldContext & {

package/dist/components/Heading/Heading.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { FontWeight, HeadingColor, HeadingSize, HeadingTag, TextVariant } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import Text from '../../internal/Text.svelte';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';

package/dist/components/HelperText/HelperText.svelte

@@ -3,7 +3,7 @@
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
   import type { TextColor } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
 
   type Props = {

package/dist/components/Icon/Icon.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { IconProps } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import type { HTMLAttributes } from 'svelte/elements';
 
   const {

package/dist/components/Input/Input.svelte

@@ -4,7 +4,7 @@
   import Label from '../Label/Label.svelte';
   import Text from '../Text/Text.svelte';
   import type { InputProps } from '../../types.js';
-  import { cleanClass, generateId, isIconLike } from '../../utils.js';
+  import { cleanClass, generateId, isIconLike } from '../../utilities/internal.js';
   import { tv } from 'tailwind-variants';
 
   let {

package/dist/components/Kbd/Kbd.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Color, Size } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
   import { tv } from 'tailwind-variants';

package/dist/components/Label/Label.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { styles } from '../../styles.js';
   import type { LabelProps } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
 
   const { label, size, color, class: className, children, ...restProps }: LabelProps = $props();
 </script>

package/dist/components/Link/Link.svelte

@@ -1,26 +1,33 @@
 <script lang="ts">
-  import { cleanClass } from '../../utils.js';
+  import { isExternalLink, resolveUrl } from '../../utilities/common.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
   import type { HTMLAnchorAttributes } from 'svelte/elements';
 
   type Props = {
     class?: string;
-    children: Snippet;
+    children?: Snippet;
     href: string;
     underline?: boolean;
-    external?: boolean;
   } & HTMLAnchorAttributes;
 
-  const { href, class: className, underline = true, external, children, ...restProps }: Props = $props();
+  const { href, class: className, underline = true, children, ...restProps }: Props = $props();
+
+  let resolved = $derived(resolveUrl(href));
+  let external = $derived(isExternalLink(resolved));
 </script>
 
 <a
-  {href}
+  href={resolved}
   draggable="false"
   class={cleanClass(underline && 'underline', className)}
   target={external ? '_blank' : undefined}
   rel={external ? 'noopener noreferrer' : undefined}
   {...restProps}
 >
-  {@render children()}
+  {#if children}
+    {@render children()}
+  {:else}
+    {href}
+  {/if}
 </a>

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

@@ -2,10 +2,9 @@ import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes } from 'svelte/elements';
 type Props = {
     class?: string;
-    children: Snippet;
+    children?: Snippet;
     href: string;
     underline?: boolean;
-    external?: boolean;
 } & HTMLAnchorAttributes;
 declare const Link: import("svelte").Component<Props, {}, "">;
 type Link = ReturnType<typeof Link>;

package/dist/components/LoadingSpinner/LoadingSpinner.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Color, Size } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import { tv } from 'tailwind-variants';
 
   interface Props {

package/dist/components/Logo/Logo.svelte

@@ -8,7 +8,7 @@
   import icon from '../../assets/immich-logo.svg';
   import { theme } from '../../services/theme.svelte.js';
   import { Theme, type Size } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import { tv } from 'tailwind-variants';
 
   type Props = {

package/dist/components/Modal/Modal.svelte

@@ -10,7 +10,7 @@
   import Logo from '../Logo/Logo.svelte';
   import { ChildKey } from '../../constants.js';
   import type { ModalSize } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import { Dialog } from 'bits-ui';
   import { tick, type Snippet } from 'svelte';
   import { tv } from 'tailwind-variants';

package/dist/components/Navbar/NavbarItem.svelte

@@ -8,7 +8,6 @@
   type Props = {
     title: string;
     href: string;
-    external?: boolean;
     active?: boolean;
     variant?: 'compact';
     isActive?: () => boolean;
@@ -18,16 +17,7 @@
 
   const startsWithHref = () => page.url.pathname.startsWith(href);
 
-  let {
-    href,
-    external,
-    isActive: isActiveOverride,
-    title,
-    variant,
-    active: activeOverride,
-    icon,
-    activeIcon,
-  }: Props = $props();
+  let { href, isActive: isActiveOverride, title, variant, active: activeOverride, icon, activeIcon }: Props = $props();
 
   const isActive = isActiveOverride ?? startsWithHref;
   let active = $derived(activeOverride ?? isActive());
@@ -52,7 +42,6 @@
 
 <Link
   {href}
-  {external}
   aria-current={active ? 'page' : undefined}
   underline={false}
   class={styles({ active, variant: variant ?? 'default' })}

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

@@ -2,7 +2,6 @@ import type { IconProps } from '../../types.js';
 type Props = {
     title: string;
     href: string;
-    external?: boolean;
     active?: boolean;
     variant?: 'compact';
     isActive?: () => boolean;

package/dist/components/Scrollable/Scrollable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { afterNavigate } from '$app/navigation';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
 
   type Props = {

package/dist/components/Stack/Stack.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { StackProps } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import { tv } from 'tailwind-variants';
 
   const {

package/dist/components/SupporterBadge/SupporterBadge.svelte

@@ -2,7 +2,7 @@
   import Logo from '../Logo/Logo.svelte';
   import Text from '../Text/Text.svelte';
   import type { Size } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
   import { tv } from 'tailwind-variants';
 

package/dist/components/Switch/Switch.svelte

@@ -3,7 +3,7 @@
   import Label from '../Label/Label.svelte';
   import Text from '../Text/Text.svelte';
   import type { Color } from '../../types.js';
-  import { cleanClass, generateId } from '../../utils.js';
+  import { cleanClass, generateId } from '../../utilities/internal.js';
   import { Switch, type WithoutChildrenOrChild } from 'bits-ui';
   import { tv } from 'tailwind-variants';
 

package/dist/components/Text/Text.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Text from '../../internal/Text.svelte';
   import type { FontWeight, Size, TextColor, TextVariant } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
   import { tv } from 'tailwind-variants';

package/dist/components/Textarea/Textarea.svelte

@@ -3,7 +3,7 @@
   import Label from '../Label/Label.svelte';
   import Text from '../Text/Text.svelte';
   import type { TextareaProps } from '../../types.js';
-  import { cleanClass, generateId } from '../../utils.js';
+  import { cleanClass, generateId } from '../../utilities/internal.js';
   import type { FormEventHandler } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 

package/dist/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -3,7 +3,7 @@
   import { theme, toggleTheme } from '../../services/theme.svelte.js';
   import { t } from '../../services/translation.svelte.js';
   import { Theme, type Color, type Size, type TranslationProps, type Variants } from '../../types.js';
-  import { cleanClass } from '../../utils.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import { mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
 
   type Props = {

package/dist/index.d.ts

@@ -65,5 +65,6 @@ export * from './services/theme.svelte.js';
 export * from './services/translation.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
+export * from './utilities/common.js';
 export * from './site/constants.js';
 export { default as SiteFooter } from './site/SiteFooter.svelte';

package/dist/index.js

@@ -68,6 +68,7 @@ export * from './services/theme.svelte.js';
 export * from './services/translation.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
+export * from './utilities/common.js';
 // site
 export * from './site/constants.js';
 export { default as SiteFooter } from './site/SiteFooter.svelte';

package/dist/internal/Button.svelte

@@ -2,7 +2,8 @@
   import Icon from '../components/Icon/Icon.svelte';
   import LoadingSpinner from '../components/LoadingSpinner/LoadingSpinner.svelte';
   import type { ButtonProps, Size } from '../types.js';
-  import { cleanClass } from '../utils.js';
+  import { isExternalLink, resolveUrl } from '../utilities/common.js';
+  import { cleanClass } from '../utilities/internal.js';
   import { Button as ButtonPrimitive } from 'bits-ui';
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
@@ -17,7 +18,6 @@
     ref = $bindable(null),
     type = 'button',
     href,
-    external,
     variant = 'filled',
     color = 'primary',
     shape = 'semi-round',
@@ -154,9 +154,11 @@
 {/snippet}
 
 {#if href}
+  {@const resolved = resolveUrl(href)}
+  {@const external = isExternalLink(resolved)}
   <a
     bind:this={ref}
-    {href}
+    href={resolved}
     class={classList}
     aria-disabled={disabled}
     target={external ? '_blank' : undefined}

package/dist/internal/Child.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { ChildKey } from '../constants.js';
   import type { ChildData } from '../types.js';
-  import { withPrefix } from '../utils.js';
+  import { withPrefix } from '../utilities/internal.js';
   import { getContext, type Snippet } from 'svelte';
 
   type ContextType = {

package/dist/internal/Select.svelte

@@ -6,7 +6,7 @@
   import Input from '../components/Input/Input.svelte';
   import Label from '../components/Label/Label.svelte';
   import type { SelectCommonProps, SelectItem } from '../types.js';
-  import { cleanClass, generateId } from '../utils.js';
+  import { cleanClass, generateId } from '../utilities/internal.js';
   import { mdiArrowDown, mdiArrowUp, mdiCheck, mdiUnfoldMoreHorizontal } from '@mdi/js';
   import { Select } from 'bits-ui';
 

package/dist/internal/Text.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { FontWeight, HeadingColor, HeadingTag, Size, TextVariant } from '../types.js';
-  import { cleanClass } from '../utils.js';
+  import { cleanClass } from '../utilities/internal.js';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
   import { tv } from 'tailwind-variants';

package/dist/services/command-palette-manager.svelte.d.ts

@@ -7,7 +7,6 @@ export type CommandItem = {
     text: string;
 } & ({
     href: string;
-    external?: boolean;
 } | {
     action: () => void;
 });

package/dist/services/command-palette-manager.svelte.js

@@ -52,11 +52,10 @@ class CommandPaletteManager {
         this.recentItems.unshift(selected);
         this.recentItems = this.recentItems.slice(0, 5);
         if ('href' in selected) {
-            if (selected.href.startsWith('http') || selected.external) {
+            if (!selected.href.startsWith('/')) {
                 window.open(selected.href, '_blank');
             }
             else {
-                // eslint-disable-next-line svelte/no-navigation-without-resolve
                 await goto(selected.href);
             }
         }

package/dist/site/SiteFooter.svelte

@@ -15,6 +15,7 @@
     mdiOfficeBuildingOutline,
     mdiScriptTextOutline,
     mdiServerOutline,
+    mdiShieldAccountOutline,
     mdiShoppingOutline,
   } from '@mdi/js';
   import { siAndroid, siApple, siDiscord, siGithub, siReddit } from 'simple-icons';
@@ -35,7 +36,7 @@
           <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.DockerCompose} icon={mdiServerOutline} text="Server" />
+          <SiteFooterLink href={Constants.Get.Download} icon={mdiServerOutline} text="Server" />
         </Stack>
 
         <Stack>
@@ -56,6 +57,7 @@
           <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" />
         </Stack>
       </div>
       <VStack class="text-center">

package/dist/site/SiteFooterLink.svelte

@@ -13,7 +13,7 @@
   let { href, icon, text }: Props = $props();
 </script>
 
-<Link {href} external>
+<Link {href}>
   <HStack>
     <Icon {icon} size="1.5em" />
     <Text>{text}</Text>

package/dist/site/constants.d.ts

@@ -11,7 +11,7 @@ export declare const Constants: {
         Android: string;
         FDroid: string;
         GithubRelease: string;
-        DockerCompose: string;
+        Download: string;
     };
     Sites: {
         Api: string;
@@ -28,6 +28,7 @@ export declare const Constants: {
     Pages: {
         CursedKnowledge: string;
         Roadmap: string;
+        PrivacyPolicy: string;
     };
     Npm: {
         Sdk: string;
@@ -41,6 +42,5 @@ export declare const siteCommands: {
     title: string;
     description: string;
     href: string;
-    external: boolean;
     text: string;
 }[];

package/dist/site/constants.js

@@ -13,7 +13,7 @@ export const Constants = {
         Android: 'https://get.immich.app/android',
         FDroid: 'https://get.immich.app/fdroid',
         GithubRelease: 'https://github.com/immich-app/immich/releases/latest',
-        DockerCompose: 'https://get.immich.app/docker-compose',
+        Download: 'https://immich.app/download',
     },
     Sites: {
         Api: 'https://api.immich.app/',
@@ -30,6 +30,7 @@ export const Constants = {
     Pages: {
         CursedKnowledge: 'https://immich.app/cursed-knowledge',
         Roadmap: 'https://immich.app/roadmap',
+        PrivacyPolicy: 'https://immich.app/privacy-policy',
     },
     Npm: {
         Sdk: 'https://www.npmjs.com/package/@immich/sdk',
@@ -129,6 +130,5 @@ export const siteCommands = [
     title: site.title,
     description: site.description,
     href: site.href,
-    external: true,
     text: asText('Site', 'Link', site.title, site.description, site.href),
 }));

package/dist/types.d.ts

@@ -40,10 +40,8 @@ export type IconProps = {
 };
 type ButtonOrAnchor = ({
     href?: never;
-    external?: never;
 } & HTMLButtonAttributes) | ({
     href: string;
-    external?: boolean;
 } & HTMLAnchorAttributes);
 type ButtonBase = {
     size?: Size;

package/dist/utilities/common.d.ts

@@ -0,0 +1,2 @@
+export declare const resolveUrl: (url: string, currentHostname?: string) => string;
+export declare const isExternalLink: (href: string) => boolean;

package/dist/utilities/common.js

@@ -0,0 +1,21 @@
+const getImmichApp = (host) => {
+    if (!host.endsWith('immich.app')) {
+        return false;
+    }
+    if (host === 'immich.app' || host.startsWith('pr-')) {
+        return 'root';
+    }
+    return host.split('.')[0];
+};
+export const resolveUrl = (url, currentHostname) => {
+    if (!isExternalLink(url)) {
+        return url;
+    }
+    const target = new URL(url);
+    const targetApp = getImmichApp(target.hostname);
+    const currentApp = getImmichApp(currentHostname ?? globalThis.location.hostname);
+    return targetApp && targetApp === currentApp ? target.pathname : target.href;
+};
+export const isExternalLink = (href) => {
+    return !(href.startsWith('/') || href.startsWith('#'));
+};

package/dist/{utils.d.ts → utilities/internal.d.ts}

@@ -1,4 +1,4 @@
-import type { IconLike } from './types.js';
+import type { IconLike } from '../types.js';
 export declare const cleanClass: (...classNames: unknown[]) => string;
 export declare const withPrefix: (key: string) => string;
 export declare const generateId: () => string;

package/package.json

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