sjs/immich
1
0
Fork 0
mirror of https://github.com/samsonjs/immich.git synced 2026-04-27 15:07:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: refactor ErrorLayout (#25094)

Browse source 
* chore: refactor ErrorLayout

* Align links to top
This commit is contained in:
Mees Frensel 2026-01-07 22:49:04 +01:00 committed by GitHub
parent 5bb3492616
commit ef4aec7398
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 61 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
web/src/lib/components/layouts/ErrorLayout.svelte
View file

@ -1,7 +1,19 @@
<script lang="ts"> <script lang="ts">
import { copyToClipboard } from '$lib/utils'; 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'; import { t } from 'svelte-i18n';
interface Props { interface Props {
@ -19,90 +31,61 @@
}; };
</script> </script>
<div class="h-dvh w-dvw"> <div class="flex flex-col h-dvh w-dvw">
<section> <section>
<div class="flex place-items-center border-b px-6 py-4 dark:border-b-immich-dark-gray"> <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" /> <Logo variant="inline" />
</a> </Link>
</div> </div>
</section> </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')} <IconButton
</h1> shape="round"
<div class="flex justify-end"> color="primary"
<IconButton icon={mdiContentCopy}
shape="round" aria-label={$t('copy_error')}
color="primary" onclick={handleCopy}
icon={mdiContentCopy} />
aria-label={$t('copy_error')} </CardHeader>
onclick={() => handleCopy()}
/>
</div>
</div>
<hr /> <CardBody class="flex flex-col gap-2">
<Text color="danger">{error?.message} (HTTP {error?.code})</Text>
{#if error?.stack}
<label for="stacktrace">{$t('stacktrace')}</label>
<pre id="stacktrace" class="text-xs">{error.stack}</pre>
{/if}
</CardBody>
<div class="immich-scrollbar max-h-[75vh] min-h-75 gap-4 overflow-y-auto p-4 pb-4"> <CardFooter class="items-start">
<div class="flex w-full flex-col gap-2"> <Link href="https://discord.immich.app" class="flex grow basis-0 justify-center">
<p class="text-red-500">{error?.message} ({error?.code})</p> <VStack>
{#if error?.stack} <Icon icon={mdiMessage} size="24" />
<label for="stacktrace">{$t('stacktrace')}</label> <Text size="small" class="text-center">{$t('get_help')}</Text>
<pre id="stacktrace" class="text-xs">{error?.stack || 'No stack'}</pre> </VStack>
{/if} </Link>
</div> <Link href="https://github.com/immich-app/immich/releases" class="flex grow basis-0 justify-center">
</div> <VStack>
<Icon icon={mdiPartyPopper} size="24" />
<hr /> <Text size="small" class="text-center">{$t('read_changelog')}</Text>
</VStack>
<div class="flex place-content-center place-items-center justify-around"> </Link>
<!-- href="https://github.com/immich-app/immich/issues/new" --> <Link href="https://docs.immich.app/guides/docker-help" class="flex grow basis-0 justify-center">
<a <VStack>
href="https://discord.immich.app" <Icon icon={mdiCodeTags} size="24" />
target="_blank" <Text size="small" class="text-center">{$t('check_logs')}</Text>
rel="noopener noreferrer" </VStack>
class="flex grow basis-0 justify-center p-4" </Link>
> </CardFooter>
<div class="flex flex-col place-content-center place-items-center gap-2"> </Card>
<Icon icon={mdiMessage} size="24" />
<p class="text-sm">{$t('get_help')}</p>
</div>
</a>
<a
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>
</div>
</a>
<a
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>
</div>
</a>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>