Files
radicle-desktop/src/components/FullWindowError.svelte
T
Rūdolfs Ošiņš 010cac0377 Redesign app with new UI kit
Redesign the entire app with a new UI kit. Typography, colors, icons,
avatars, and border radii have all been updated for a more polished,
consistent appearance that matches our other products like
radicle-explorer.

- Replace blockies-based avatars with a new DID-based avatar system
- Move Settings and Create Issue into fullscreen modals
- Change the default theme to follow the system theme
- Remove window decorations on macOS for a cleaner, more native feel
- Update the app icon
- Fix popovers and tooltips

Navigation:

- Rewrite app navigation and layouts
- Add a sidebar that gives you access to all your repos
- Change the startup screen to open directly to the notification inbox
- Add a getting started guide shown to new users on first launch

Settings:

- Add a setting to disable the notification badge
- Add a code font setting

Bug fixes:

- Fix reactions and edits incorrectly targeting the root comment
  instead of the intended reply
- Restrict issue/patch state, labels and assignees to delegates only
2026-03-20 17:48:38 -06:00

78 lines
1.9 KiB
Svelte

<script lang="ts">
import type { ErrorWrapper } from "@bindings/error/ErrorWrapper";
import type { Snippet } from "svelte";
import Command from "@app/components/Command.svelte";
import ExternalLink from "@app/components/ExternalLink.svelte";
import Icon from "@app/components/Icon.svelte";
const {
title = "An error occurred",
children,
error,
}: { title?: string; children?: Snippet; error?: ErrorWrapper } = $props();
</script>
<style>
.error-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.error-icon {
color: var(--color-text-secondary);
margin-bottom: 1rem;
}
.error-title {
font: var(--txt-heading-l);
margin: 0 0 0.75rem 0;
}
.error-support {
padding: 0 2rem;
margin-bottom: 0;
}
</style>
<div class="error-container txt-body-m-regular">
<div
style:border="1px solid var(--color-border-subtle)"
style:border-radius="var(--border-radius-sm)"
style:display="flex"
style:gap="0.5rem"
style:align-items="center"
style:background-color="var(--color-surface-canvas)"
style:max-width="45rem"
style:justify-content="center"
style:flex-direction="column"
style:padding="1.5rem">
<div class="error-icon">
<Icon size="32" name="warning" />
</div>
<h2 class="error-title">{title}</h2>
{#if children}
<p class="error-support" style:text-align="center">
{@render children()}
</p>
{/if}
<p class="error-support">
If this problem persists, please contact
<ExternalLink
href="https://radicle.zulipchat.com/#narrow/channel/444463-desktop/topic/support">
support{error ? " with the error details below." : "."}
</ExternalLink>
</p>
{#if error?.message}
<Command styleWidth="30rem" showPrompt={false} command={error.message} />
{/if}
</div>
</div>