chore: new UI

web/package.json

@@ -51,7 +51,7 @@
     "lodash-es": "^4.17.21",
     "luxon": "^3.4.4",
     "maplibre-gl": "^5.6.2",
-    "orchestration-ui": "0.1.63",
+    "orchestration-ui": "0.1.68",
     "pmtiles": "^4.3.0",
     "qrcode": "^1.5.4",
     "simple-icons": "^16.0.0",

web/src/routes/(user)/backups/+page.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import { ImmichBackupsPage, orchestrationApiProvider, sdk, setProvider, YuccaContext } from 'orchestration-ui';
+  import type { PageData } from './$types';
+
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
+
+  sdk.defaults.baseUrl = globalThis.location.origin;
+  setProvider(orchestrationApiProvider);
+</script>
+
+<svelte:head>
+  <title>{data.meta.title}</title>
+</svelte:head>
+
+<YuccaContext baseUrl={globalThis.location.origin}>
+  <UserPageLayout>
+    <ImmichBackupsPage onExit={() => goto('/')} />
+  </UserPageLayout>
+</YuccaContext>

web/src/routes/(user)/backups/+page.ts

@@ -1,6 +1,9 @@
+import { authenticate } from '$lib/utils/auth';
 import type { PageLoad } from './$types';
 
-export const load = (() => {
+export const load = (async ({ url }) => {
+  await authenticate(url);
+
   return {
     meta: {
       title: 'Backups',

web/src/routes/backups/+layout.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import { page } from '$app/state';
-  import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
-  import { Route } from '$lib/route';
-  import { sidebarStore } from '$lib/stores/sidebar.svelte';
-  import { AppShell, AppShellHeader, AppShellSidebar, NavbarItem } from '@immich/ui';
-  import { mdiBackupRestore, mdiClock, mdiCog, mdiViewDashboard } from '@mdi/js';
-  import { OnboardingGate, orchestrationApiProvider, sdk, setProvider, YuccaContext } from 'orchestration-ui';
-  import type { Snippet } from 'svelte';
-
-  let { children }: { children: Snippet } = $props();
-
-  sdk.defaults.baseUrl = window.location.origin;
-  setProvider(orchestrationApiProvider);
-</script>
-
-<AppShell>
-  <AppShellHeader>
-    <NavigationBar noBorder />
-  </AppShellHeader>
-
-  <AppShellSidebar bind:open={sidebarStore.isOpen}>
-    <div class="flex flex-col pt-8 pe-4 gap-1">
-      <NavbarItem
-        title="Dashboard"
-        href={Route.backups()}
-        icon={mdiViewDashboard}
-        isActive={() => page.url.pathname === '/backups'}
-      />
-      <NavbarItem title="Repositories" href={Route.backupsRepositories()} icon={mdiBackupRestore} />
-      <NavbarItem title="Schedules" href={Route.backupsSchedules()} icon={mdiClock} />
-      <NavbarItem title="Configure" href={Route.backupsConfig()} icon={mdiCog} />
-    </div>
-  </AppShellSidebar>
-
-  <YuccaContext baseUrl={window.location.origin}>
-    <div class="p-4 flex flex-col gap-2 max-w-6xl m-auto">
-      <OnboardingGate flow="immich-setup" onExit={() => goto('/')}>
-        {@render children()}
-      </OnboardingGate>
-    </div>
-  </YuccaContext>
-</AppShell>

web/src/routes/backups/+layout.ts

@@ -1,6 +0,0 @@
-import { authenticate } from '$lib/utils/auth';
-import type { LayoutLoad } from './$types';
-
-export const load = (async ({ url }) => {
-  await authenticate(url);
-}) satisfies LayoutLoad;

web/src/routes/backups/+page.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-  import { Dashboard } from 'orchestration-ui';
-  import { goto } from '$app/navigation';
-  import { Route } from '$lib/route';
-</script>
-
-<Dashboard
-  onNavigate={(target) => {
-    if (target === 'backups') goto(Route.backupsRepositories());
-    else if (target === 'schedules') goto(Route.backupsSchedules());
-    else if (target === 'config') goto(Route.backupsConfig());
-  }}
-/>

web/src/routes/backups/config/+page.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-  import { BackendsList } from 'orchestration-ui';
-</script>
-
-<BackendsList />

web/src/routes/backups/repositories/+page.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-  import { BackupsList } from 'orchestration-ui';
-</script>
-
-<BackupsList local />

web/src/routes/backups/schedules/+page.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-  import { ScheduleList } from 'orchestration-ui';
-</script>
-
-<ScheduleList />