fix(web): user admin pages (#24185)

fix: user admin pages

Author: jrasm91

e2e/src/web/specs/user-admin.e2e-spec.ts

@@ -54,7 +54,7 @@ test.describe('User Administration', () => {
 
     await page.getByRole('button', { name: 'Edit' }).click();
     await expect(page.getByLabel('Admin User')).not.toBeChecked();
-    await page.getByText('Admin User').click();
+    await page.getByLabel('Admin User').click();
     await expect(page.getByLabel('Admin User')).toBeChecked();
     await page.getByRole('button', { name: 'Confirm' }).click();
 
@@ -83,7 +83,7 @@ test.describe('User Administration', () => {
 
     await page.getByRole('button', { name: 'Edit' }).click();
     await expect(page.getByLabel('Admin User')).toBeChecked();
-    await page.getByText('Admin User').click();
+    await page.getByLabel('Admin User').click();
     await expect(page.getByLabel('Admin User')).not.toBeChecked();
     await page.getByRole('button', { name: 'Confirm' }).click();
 

pnpm-lock.yaml

@@ -28,7 +28,7 @@
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.45.0",
+    "@immich/ui": "^0.49.1",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.14.0",

web/package.json

@@ -76,14 +76,6 @@
     --immich-dark-gray: 33 33 33;
   }
 
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: rgb(var(--immich-ui-default-border));
-  }
-
   button:not(:disabled),
   [role='button']:not(:disabled) {
     cursor: pointer;

web/src/app.css

@@ -1,16 +1,14 @@
 <script lang="ts">
-  import type { ActionItem } from '$lib/types';
-  import { IconButton, type IconButtonProps } from '@immich/ui';
+  import { IconButton, type ActionItem } from '@immich/ui';
 
   type Props = {
     action: ActionItem;
   };
 
   const { action }: Props = $props();
-  const { title, icon, color = 'secondary', props: other = {}, onSelect } = $derived(action);
-  const onclick = (event: Event) => onSelect?.({ event, item: action });
+  const { title, icon, color = 'secondary', onAction } = $derived(action);
 </script>
 
 {#if action.$if?.() ?? true}
-  <IconButton variant="ghost" {color} shape="round" {...other as IconButtonProps} {icon} aria-label={title} {onclick} />
+  <IconButton variant="ghost" shape="round" {color} {icon} aria-label={title} onclick={() => onAction(action)} />
 {/if}

web/src/lib/components/ActionButton.svelte

@@ -1,18 +1,17 @@
 <script lang="ts">
-  import type { ActionItem } from '$lib/types';
-  import { Button, type ButtonProps, Text } from '@immich/ui';
+  import { type ActionItem, Button, Text } from '@immich/ui';
 
   type Props = {
     action: ActionItem;
+    title?: string;
   };
 
-  const { action }: Props = $props();
-  const { title, icon, color = 'secondary', props: other = {}, onSelect } = $derived(action);
-  const onclick = (event: Event) => onSelect?.({ event, item: action });
+  const { action, title: titleAttr }: Props = $props();
+  const { title, icon, color = 'secondary', onAction } = $derived(action);
 </script>
 
 {#if action.$if?.() ?? true}
-  <Button variant="ghost" size="small" {color} {...other as ButtonProps} leadingIcon={icon} {onclick}>
+  <Button variant="ghost" size="small" {color} leadingIcon={icon} onclick={() => onAction(action)} title={titleAttr}>
     <Text class="hidden md:block">{title}</Text>
   </Button>
 {/if}

web/src/lib/components/HeaderButton.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">
-  import type { ActionItem } from '$lib/types';
-  import { IconButton, type IconButtonProps } from '@immich/ui';
+  import { IconButton, type ActionItem } from '@immich/ui';
 
   type Props = {
     action: ActionItem;
   };
 
   const { action }: Props = $props();
-  const { title, icon, props: other = {}, onSelect } = $derived(action);
-  const onclick = (event: Event) => onSelect?.({ event, item: action });
+  const { title, icon, onAction } = $derived(action);
 </script>
 
 {#if action.$if?.() ?? true}
-  <IconButton shape="round" color="primary" {...other as IconButtonProps} {icon} aria-label={title} {onclick} />
+  <IconButton shape="round" color="primary" {icon} aria-label={title} onclick={() => onAction(action)} />
 {/if}

web/src/lib/components/TableButton.svelte

@@ -32,7 +32,7 @@
       .filter(Boolean)
       .join(' • ');
 
-  const SharedLinkActions = $derived(getSharedLinkActions($t, sharedLink));
+  const { ViewQrCode, Copy } = $derived(getSharedLinkActions($t, sharedLink));
 </script>
 
 <div class="flex justify-between items-center">
@@ -41,7 +41,7 @@
     <Text size="tiny" color="muted">{getShareProperties()}</Text>
   </div>
   <div class="flex">
-    <ActionButton action={SharedLinkActions.ViewQrCode} />
-    <ActionButton action={SharedLinkActions.Copy} />
+    <ActionButton action={ViewQrCode} />
+    <ActionButton action={Copy} />
   </div>
 </div>

web/src/lib/components/album-page/album-shared-link.svelte

@@ -4,16 +4,16 @@
   import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
   import AdminSidebar from '$lib/sidebars/AdminSidebar.svelte';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
-  import { AppShell, AppShellHeader, AppShellSidebar, Scrollable } from '@immich/ui';
+  import { AppShell, AppShellHeader, AppShellSidebar, Scrollable, type BreadcrumbItem } from '@immich/ui';
   import type { Snippet } from 'svelte';
 
   type Props = {
-    title: string;
+    breadcrumbs: BreadcrumbItem[];
     buttons?: Snippet;
     children?: Snippet;
   };
 
-  let { title, buttons, children }: Props = $props();
+  let { breadcrumbs, buttons, children }: Props = $props();
 </script>
 
 <AppShell>
@@ -24,7 +24,7 @@
     <AdminSidebar />
   </AppShellSidebar>
 
-  <TitleLayout {title} {buttons}>
+  <TitleLayout {breadcrumbs} {buttons}>
     <Scrollable class="grow">
       <PageContent>
         {@render children?.()}

web/src/lib/components/layouts/AdminPageLayout.svelte

@@ -1,26 +1,20 @@
 <script lang="ts">
-  import { Text } from '@immich/ui';
+  import { Breadcrumbs, type BreadcrumbItem } from '@immich/ui';
+  import { mdiSlashForward } from '@mdi/js';
   import type { Snippet } from 'svelte';
 
-  interface Props {
-    id?: string;
-    title?: string;
-    description?: string;
+  type Props = {
+    breadcrumbs: BreadcrumbItem[];
     buttons?: Snippet;
     children?: Snippet;
-  }
+  };
 
-  let { id, title, description, buttons, children }: Props = $props();
+  let { breadcrumbs, buttons, children }: Props = $props();
 </script>
 
 <div class="h-full flex flex-col">
   <div class="flex h-16 w-full place-items-center justify-between border-b p-2">
-    <div class="flex gap-1">
-      <div class="font-medium outline-none" tabindex="-1" {id}>{title}</div>
-      {#if description}
-        <Text color="muted">{description}</Text>
-      {/if}
-    </div>
+    <Breadcrumbs items={breadcrumbs} separator={mdiSlashForward} />
     {@render buttons?.()}
   </div>
   {@render children?.()}