From 9c2c85cbe1bc0053edd8872cd2cf676f3dda9d10 Mon Sep 17 00:00:00 2001
From: Jonathan Jogenfors <jonathan@jogenfors.se>
Date: Sat, 22 Feb 2025 00:00:16 +0100
Subject: [PATCH] feat(web): remove library type column (#16254)

---
 .../admin/library-management/+page.svelte     | 40 +++++++++----------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/web/src/routes/admin/library-management/+page.svelte b/web/src/routes/admin/library-management/+page.svelte
index 4c916bd49d..04325f9fc2 100644
--- a/web/src/routes/admin/library-management/+page.svelte
+++ b/web/src/routes/admin/library-management/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
   import LibraryImportPathsForm from '$lib/components/forms/library-import-paths-form.svelte';
   import LibraryRenameForm from '$lib/components/forms/library-rename-form.svelte';
   import LibraryScanSettingsForm from '$lib/components/forms/library-scan-settings-form.svelte';
@@ -30,7 +29,7 @@
     type UserResponseDto,
   } from '@immich/sdk';
   import { Button, Text } from '@immich/ui';
-  import { mdiDatabase, mdiDotsVertical, mdiPlusBoxOutline, mdiSync } from '@mdi/js';
+  import { mdiDotsVertical, mdiPlusBoxOutline, mdiSync } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fade, slide } from 'svelte/transition';
@@ -47,8 +46,8 @@
 
   let stats: LibraryStatsResponseDto[] = [];
   let owner: UserResponseDto[] = $state([]);
-  let photos: number[] = [];
-  let videos: number[] = [];
+  let photos: number[] = $state([]);
+  let videos: number[] = $state([]);
   let totalCount: number[] = $state([]);
   let diskUsage: number[] = $state([]);
   let diskUsageUnit: ByteUnit[] = $state([]);
@@ -286,10 +285,10 @@
             class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
           >
             <tr class="grid grid-cols-6 w-full place-items-center">
-              <th class="text-center text-sm font-medium">{$t('type')}</th>
               <th class="text-center text-sm font-medium">{$t('name')}</th>
               <th class="text-center text-sm font-medium">{$t('owner')}</th>
-              <th class="text-center text-sm font-medium">{$t('assets')}</th>
+              <th class="text-center text-sm font-medium">{$t('photos')}</th>
+              <th class="text-center text-sm font-medium">{$t('videos')}</th>
               <th class="text-center text-sm font-medium">{$t('size')}</th>
               <th class="text-center text-sm font-medium"></th>
             </tr>
@@ -303,28 +302,27 @@
                     : 'bg-immich-bg dark:bg-immich-dark-gray/50'
                 }`}
               >
-                <td class=" px-10 text-sm">
-                  <Icon
-                    path={mdiDatabase}
-                    size="40"
-                    title={$t('admin.external_library_created_at', { values: { date: library.createdAt } })}
-                  />
-                </td>
-
-                <td class=" text-ellipsis px-4 text-sm">{library.name}</td>
-                <td class=" text-ellipsis px-4 text-sm">
+                <td class="text-ellipsis px-4 text-sm">{library.name}</td>
+                <td class="text-ellipsis px-4 text-sm">
                   {#if owner[index] == undefined}
                     <LoadingSpinner size="40" />
                   {:else}{owner[index].name}{/if}
                 </td>
-                <td class=" text-ellipsis px-4 text-sm">
-                  {#if totalCount[index] == undefined}
+                <td class="text-ellipsis px-4 text-sm">
+                  {#if photos[index] == undefined}
                     <LoadingSpinner size="40" />
                   {:else}
-                    {totalCount[index].toLocaleString($locale)}
+                    {photos[index].toLocaleString($locale)}
                   {/if}
                 </td>
-                <td class=" text-ellipsis px-4 text-sm">
+                <td class="text-ellipsis px-4 text-sm">
+                  {#if videos[index] == undefined}
+                    <LoadingSpinner size="40" />
+                  {:else}
+                    {videos[index].toLocaleString($locale)}
+                  {/if}
+                </td>
+                <td class="text-ellipsis px-4 text-sm">
                   {#if diskUsage[index] == undefined}
                     <LoadingSpinner size="40" />
                   {:else}
@@ -333,7 +331,7 @@
                   {/if}
                 </td>
 
-                <td class=" text-ellipsis px-4 text-sm">
+                <td class="text-ellipsis px-4 text-sm">
                   <ButtonContextMenu
                     align="top-right"
                     direction="left"