WIP

web/src/lib/components/shared-components/side-bar/admin-side-bar.svelte

@@ -3,7 +3,7 @@
   import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
   import StatusBox from '$lib/components/shared-components/status-box.svelte';
   import { AppRoute } from '$lib/constants';
-  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync, mdiTools } from '@mdi/js';
+  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiPuzzle, mdiServer, mdiSync, mdiTools } from '@mdi/js';
 </script>
 
 <SideBarSection>
@@ -14,6 +14,7 @@
     <SideBarLink title="External Libraries" routeId={AppRoute.ADMIN_LIBRARY_MANAGEMENT} icon={mdiBookshelf} />
     <SideBarLink title="Server Stats" routeId={AppRoute.ADMIN_STATS} icon={mdiServer} />
     <SideBarLink title="Repair" routeId={AppRoute.ADMIN_REPAIR} icon={mdiTools} preloadData={false} />
+    <SideBarLink title="Plugins" routeId={AppRoute.ADMIN_PLUGINS} icon={mdiPuzzle} preloadData={false} />
   </nav>
 
   <div class="mb-6 mt-auto">

web/src/lib/constants.ts

@@ -16,6 +16,7 @@ export enum AppRoute {
   ADMIN_STATS = '/admin/server-status',
   ADMIN_JOBS = '/admin/jobs-status',
   ADMIN_REPAIR = '/admin/repair',
+  ADMIN_PLUGINS = '/admin/plugins',
 
   ALBUMS = '/albums',
   LIBRARIES = '/libraries',

web/src/routes/admin/plugins/+page.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import { mdiCheckDecagram, mdiWrench } from '@mdi/js';
+  import type { PageData } from './$types';
+  import { range } from 'lodash-es';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+
+  export let data: PageData;
+  const plugins = range(0, 8).map((index) => ({
+    name: `Plugin-${index}`,
+    description: `Plugin ${index} is awesome because it can do x and even y!`,
+    isEnabled: Math.random() < 0.5,
+    isInstalled: Math.random() < 0.5,
+    isOfficial: Math.random() < 0.5,
+    version: 1,
+  }));
+</script>
+
+<UserPageLayout title={data.meta.title} admin>
+  <svelte:fragment slot="sidebar" />
+  <div class="flex justify-end gap-2" slot="buttons">
+    <LinkButton on:click={() => console.log('clicked')}>
+      <div class="flex place-items-center gap-2 text-sm">
+        <Icon path={mdiWrench} size="18" />
+        Test
+      </div>
+    </LinkButton>
+  </div>
+  <section id="setting-content" class="flex place-content-center sm:mx-4">
+    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
+      {#each plugins as plugin}
+        <section
+          class="flex flex-col gap-4 justify-between dark:bg-immich-dark-gray bg-immich-gray dark:border-0 border-gray-200 border border-solid rounded-2xl p-4"
+        >
+          <div class="flex flex-col gap-2">
+            <h1 class="m-0 items-start flex gap-2">
+              {plugin.name}
+              {#if plugin.isOfficial}
+                <Icon path={mdiCheckDecagram} size="18" color="green" />
+              {/if}
+              <div class="place-self-end justify-self-end justify-end self-end">Version {plugin.version}</div>
+            </h1>
+
+            <p class="m-0 text-sm text-gray-600 dark:text-gray-300">{plugin.description}</p>
+          </div>
+          <div class="flex">Is {plugin.isInstalled ? '' : 'not '}installed</div>
+          <SettingSwitch checked={plugin.isEnabled} id={plugin.name} title="Enabled" />
+        </section>
+      {/each}
+    </div>
+  </section>
+</UserPageLayout>

web/src/routes/admin/plugins/+page.ts

@@ -0,0 +1,16 @@
+import { authenticate } from '$lib/utils/auth';
+import { getAuditFiles } from '@immich/sdk';
+import type { PageLoad } from './$types';
+
+export const load = (async () => {
+  await authenticate({ admin: true });
+  const { orphans, extras } = await getAuditFiles();
+
+  return {
+    orphans,
+    extras,
+    meta: {
+      title: 'Plugins',
+    },
+  };
+}) satisfies PageLoad;