chore: reorder columns

.github/workflows/test.yml

@@ -502,12 +502,7 @@ jobs:
       - name: Run e2e tests (web)
         env:
           CI: true
-        run: npx playwright test --project=chromium
-        if: ${{ !cancelled() }}
-      - name: Run ui tests (web)
-        env:
-          CI: true
-        run: npx playwright test --project=ui
+        run: npx playwright test
         if: ${{ !cancelled() }}
       - name: Archive test results
         uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0

e2e/playwright.config.ts

@@ -39,13 +39,13 @@ const config: PlaywrightTestConfig = {
       testMatch: /.*\.e2e-spec\.ts/,
       workers: 1,
     },
-    {
-      name: 'ui',
-      use: { ...devices['Desktop Chrome'] },
-      testMatch: /.*\.ui-spec\.ts/,
-      fullyParallel: true,
-      workers: process.env.CI ? 3 : Math.max(1, Math.round(cpus().length * 0.75) - 1),
-    },
+    // {
+    //   name: 'parallel tests',
+    //   use: { ...devices['Desktop Chrome'] },
+    //   testMatch: /.*\.parallel-e2e-spec\.ts/,
+    //   fullyParallel: true,
+    //   workers: process.env.CI ? 3 : Math.max(1, Math.round(cpus().length * 0.75) - 1),
+    // },
 
     // {
     //   name: 'firefox',

web/src/lib/services/library.service.ts

@@ -20,7 +20,7 @@ import {
   type UpdateLibraryDto,
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
-import { mdiInformationOutline, mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js';
+import { mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 
 export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResponseDto[]) => {
@@ -45,13 +45,6 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp
 };
 
 export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponseDto) => {
-  const Detail: ActionItem = {
-    icon: mdiInformationOutline,
-    type: $t('command'),
-    title: $t('details'),
-    onAction: () => goto(Route.viewLibrary(library)),
-  };
-
   const Edit: ActionItem = {
     icon: mdiPencilOutline,
     type: $t('command'),
@@ -91,7 +84,7 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
     shortcuts: { shift: true, key: 'r' },
   };
 
-  return { Detail, Edit, Delete, AddFolder, AddExclusionPattern, Scan };
+  return { Edit, Delete, AddFolder, AddExclusionPattern, Scan };
 };
 
 export const getLibraryFolderActions = ($t: MessageFormatter, library: LibraryResponseDto, folder: string) => {

web/src/lib/services/user-admin.service.ts

@@ -23,6 +23,7 @@ import {
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import {
   mdiDeleteRestore,
+  mdiInformationOutline,
   mdiLockReset,
   mdiLockSmart,
   mdiPencilOutline,
@@ -46,6 +47,12 @@ export const getUserAdminsActions = ($t: MessageFormatter) => {
 };
 
 export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminResponseDto) => {
+  const Detail: ActionItem = {
+    icon: mdiInformationOutline,
+    title: $t('details'),
+    onAction: () => goto(Route.viewUser(user)),
+  };
+
   const Update: ActionItem = {
     icon: mdiPencilOutline,
     title: $t('edit'),
@@ -92,7 +99,7 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
     onAction: () => handleResetPinCodeUserAdmin(user),
   };
 
-  return { Update, Delete, Restore, ResetPassword, ResetPinCode };
+  return { Detail, Update, Delete, Restore, ResetPassword, ResetPinCode };
 };
 
 export const handleCreateUserAdmin = async (dto: UserAdminCreateDto) => {

web/src/routes/admin/library-management/(list)/+layout.svelte

@@ -4,16 +4,14 @@
   import OnEvents from '$lib/components/OnEvents.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import { Route } from '$lib/route';
-  import { getLibrariesActions, getLibraryActions } from '$lib/services/library.service';
+  import { getLibrariesActions } from '$lib/services/library.service';
   import { locale } from '$lib/stores/preferences.store';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
   import { getLibrary, getLibraryStatistics, type LibraryResponseDto } from '@immich/sdk';
   import {
+    Button,
     CommandPaletteDefaultProvider,
     Container,
-    ContextMenuButton,
-    Link,
-    MenuItemType,
     Table,
     TableBody,
     TableCell,
@@ -60,18 +58,13 @@
 
   const { Create, ScanAll } = $derived(getLibrariesActions($t, libraries));
 
-  const getActionsForLibrary = (library: LibraryResponseDto) => {
-    const { Detail, Scan, Edit, Delete } = getLibraryActions($t, library);
-    return [Detail, Scan, Edit, MenuItemType.Divider, Delete];
-  };
-
   const classes = {
     column1: 'w-4/12',
     column2: 'w-4/12',
-    column3: 'w-1/12',
-    column4: 'w-1/12',
-    column5: 'w-1/12',
-    column6: 'w-1/12 flex justify-end',
+    column3: 'w-2/12',
+    column4: 'w-2/12',
+    column5: 'w-2/12',
+    column6: 'w-2/12',
   };
 </script>
 
@@ -96,19 +89,14 @@
             {#each libraries as library (library.id + library.name)}
               {@const { photos, usage, videos } = statistics[library.id]}
               {@const [diskUsage, diskUsageUnit] = getBytesWithUnit(usage, 0)}
-              {@const owner = owners[library.id]}
               <TableRow>
-                <TableCell class={classes.column1}>
-                  <Link href={Route.viewLibrary(library)}>{library.name}</Link>
-                </TableCell>
-                <TableCell class={classes.column2}>
-                  <Link href={Route.viewUser(owner)}>{owner.name}</Link>
-                </TableCell>
+                <TableCell class={classes.column1}>{library.name}</TableCell>
+                <TableCell class={classes.column2}>{owners[library.id].name}</TableCell>
                 <TableCell class={classes.column3}>{photos.toLocaleString($locale)}</TableCell>
                 <TableCell class={classes.column4}>{videos.toLocaleString($locale)}</TableCell>
                 <TableCell class={classes.column5}>{diskUsage} {diskUsageUnit}</TableCell>
                 <TableCell class={classes.column6}>
-                  <ContextMenuButton color="primary" aria-label={$t('open')} items={getActionsForLibrary(library)} />
+                  <Button size="small" href={Route.viewLibrary(library)}>{$t('view')}</Button>
                 </TableCell>
               </TableRow>
             {/each}

web/src/routes/admin/users/(list)/+layout.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import { getUserAdminsActions, handleNavigateUserAdmin } from '$lib/services/user-admin.service';
+  import { Route } from '$lib/route';
+  import { getUserAdminActions, getUserAdminsActions } from '$lib/services/user-admin.service';
   import { locale } from '$lib/stores/preferences.store';
   import { getByteUnitString } from '$lib/utils/byte-units';
   import { searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
   import {
-    Button,
     CommandPaletteDefaultProvider,
     Container,
+    ContextMenuButton,
     Icon,
+    Link,
+    MenuItemType,
     Table,
     TableBody,
     TableCell,
@@ -46,11 +49,16 @@
 
   const { Create } = $derived(getUserAdminsActions($t));
 
+  const getActionsForUser = (user: UserAdminResponseDto) => {
+    const { Detail, Update, Delete, ResetPassword, ResetPinCode } = getUserAdminActions($t, user);
+    return [Detail, Update, ResetPassword, ResetPinCode, MenuItemType.Divider, Delete];
+  };
+
   const classes = {
-    column1: 'w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12',
-    column2: 'hidden sm:block w-3/12',
-    column3: 'hidden xl:block w-3/12 2xl:w-2/12',
-    column4: 'w-4/12 lg:w-3/12 xl:w-2/12',
+    column1: 'w-8/12 md:w-5/12 lg:w-4/12',
+    column2: 'hidden md:block md:w-5/12 lg:w-4/12',
+    column3: 'hidden lg:block lg:w-2/12',
+    column4: 'w-4/12 md:w-2/12 flex justify-end',
   };
 </script>
 
@@ -68,16 +76,18 @@
   <Container center size="large">
     <Table class="mt-4" striped spacing="small" size="small">
       <TableHeader>
-        <TableHeading class={classes.column1}>{$t('email')}</TableHeading>
-        <TableHeading class={classes.column2}>{$t('name')}</TableHeading>
+        <TableHeading class={classes.column1}>{$t('name')}</TableHeading>
+        <TableHeading class={classes.column2}>{$t('email')}</TableHeading>
         <TableHeading class={classes.column3}>{$t('has_quota')}</TableHeading>
       </TableHeader>
 
       <TableBody>
         {#each users as user (user.id)}
           <TableRow color={user.deletedAt ? 'danger' : undefined}>
-            <TableCell class={classes.column1}>{user.email}</TableCell>
-            <TableCell class={classes.column2}>{user.name}</TableCell>
+            <TableCell class={classes.column1}>
+              <Link href={Route.viewUser(user)}>{user.name}</Link>
+            </TableCell>
+            <TableCell class={classes.column2}>{user.email}</TableCell>
             <TableCell class={classes.column3}>
               <div class="container mx-auto flex flex-wrap justify-center">
                 {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
@@ -88,7 +98,7 @@
               </div>
             </TableCell>
             <TableCell class={classes.column4}>
-              <Button onclick={() => handleNavigateUserAdmin(user)}>{$t('view')}</Button>
+              <ContextMenuButton color="primary" aria-label={$t('open')} items={getActionsForUser(user)} />
             </TableCell>
           </TableRow>
         {/each}

web/src/routes/admin/users/[id]/+layout.svelte

@@ -198,8 +198,8 @@
               })}
             >
               <p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
-              <div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
-                <div class="h-[7px] rounded-full {getUsageClass()}" style="width: {usedPercentage}%"></div>
+              <div class="mt-4 h-1.75 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+                <div class="h-1.75 rounded-full {getUsageClass()}" style="width: {usedPercentage}%"></div>
               </div>
             </div>
           {/if}