chore: refactor ErrorLayout (#25094)

* chore: refactor ErrorLayout

* Align links to top

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

@@ -1,7 +1,19 @@
 <script lang="ts">
   import { copyToClipboard } from '$lib/utils';
-  import { Icon, IconButton, Logo } from '@immich/ui';
+  import {
-  import { mdiCodeTags, mdiContentCopy, mdiMessage, mdiPartyPopper } from '@mdi/js';
+    Card,
+    CardBody,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+    Icon,
+    IconButton,
+    Link,
+    Logo,
+    Text,
+    VStack,
+  } from '@immich/ui';
+  import { mdiAlarmLight, mdiCodeTags, mdiContentCopy, mdiMessage, mdiPartyPopper } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -19,90 +31,61 @@
   };
 </script>
 
-<div class="h-dvh w-dvw">
+<div class="flex flex-col h-dvh w-dvw">
   <section>
     <div class="flex place-items-center border-b px-6 py-4 dark:border-b-immich-dark-gray">
-      <a class="flex place-items-center gap-2 hover:cursor-pointer" href="/photos">
+      <Link href="/photos">
         <Logo variant="inline" />
-      </a>
+      </Link>
     </div>
   </section>
 
-  <div class="fixed top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50">
+  <div class="flex flex-1 w-full place-content-center place-items-center overflow-hidden bg-black/30">
-    <div>
+    <div class="max-w-[95vw]">
-      <div
+      <Card color="secondary">
-        class="w-125 max-w-[95vw] rounded-3xl border shadow-sm dark:border-immich-dark-gray dark:text-immich-dark-fg bg-subtle/80"
+        <CardHeader class="flex-row justify-between gap-12">
-      >
+          <CardTitle tag="h1" size="medium" class="text-primary flex place-items-center gap-4">
-        <div>
+            <Icon icon={mdiAlarmLight} color="red" size="32" />
-          <div class="flex items-center justify-between gap-4 px-4 py-4">
+            {$t('error_title')}
-            <h1 class="font-medium text-primary">
+          </CardTitle>
-              🚨 {$t('error_title')}
-            </h1>
-            <div class="flex justify-end">
           <IconButton
             shape="round"
             color="primary"
             icon={mdiContentCopy}
             aria-label={$t('copy_error')}
-                onclick={() => handleCopy()}
+            onclick={handleCopy}
           />
-            </div>
+        </CardHeader>
-          </div>
 
-          <hr />
+        <CardBody class="flex flex-col gap-2">
-
+          <Text color="danger">{error?.message} (HTTP {error?.code})</Text>
-          <div class="immich-scrollbar max-h-[75vh] min-h-75 gap-4 overflow-y-auto p-4 pb-4">
-            <div class="flex w-full flex-col gap-2">
-              <p class="text-red-500">{error?.message} ({error?.code})</p>
           {#if error?.stack}
             <label for="stacktrace">{$t('stacktrace')}</label>
-                <pre id="stacktrace" class="text-xs">{error?.stack || 'No stack'}</pre>
+            <pre id="stacktrace" class="text-xs">{error.stack}</pre>
           {/if}
-            </div>
+        </CardBody>
-          </div>
 
-          <hr />
+        <CardFooter class="items-start">
-
+          <Link href="https://discord.immich.app" class="flex grow basis-0 justify-center">
-          <div class="flex place-content-center place-items-center justify-around">
+            <VStack>
-            <!-- href="https://github.com/immich-app/immich/issues/new" -->
-            <a
-              href="https://discord.immich.app"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="flex grow basis-0 justify-center p-4"
-            >
-              <div class="flex flex-col place-content-center place-items-center gap-2">
               <Icon icon={mdiMessage} size="24" />
-                <p class="text-sm">{$t('get_help')}</p>
+              <Text size="small" class="text-center">{$t('get_help')}</Text>
-              </div>
+            </VStack>
-            </a>
+          </Link>
-
+          <Link href="https://github.com/immich-app/immich/releases" class="flex grow basis-0 justify-center">
-            <a
+            <VStack>
-              href="https://github.com/immich-app/immich/releases"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="flex grow basis-0 justify-center p-4"
-            >
-              <div class="flex flex-col place-content-center place-items-center gap-2">
               <Icon icon={mdiPartyPopper} size="24" />
-                <p class="text-sm">{$t('read_changelog')}</p>
+              <Text size="small" class="text-center">{$t('read_changelog')}</Text>
-              </div>
+            </VStack>
-            </a>
+          </Link>
-
+          <Link href="https://docs.immich.app/guides/docker-help" class="flex grow basis-0 justify-center">
-            <a
+            <VStack>
-              href="https://docs.immich.app/guides/docker-help"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="flex grow basis-0 justify-center p-4"
-            >
-              <div class="flex flex-col place-content-center place-items-center gap-2">
               <Icon icon={mdiCodeTags} size="24" />
-                <p class="text-sm">{$t('check_logs')}</p>
+              <Text size="small" class="text-center">{$t('check_logs')}</Text>
-              </div>
+            </VStack>
-            </a>
+          </Link>
-          </div>
+        </CardFooter>
-        </div>
+      </Card>
-      </div>
     </div>
   </div>
 </div>