Files
radicle-explorer/src/components/CobCacheWarning.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

63 lines
1.6 KiB
Svelte

<script lang="ts">
import type { CacheEvent } from "@bindings/cob/CacheEvent";
import Button from "@app/components/Button.svelte";
import Icon from "@app/components/Icon.svelte";
import Spinner from "@app/components/Spinner.svelte";
interface Props {
noun: string;
cacheState: CacheEvent | undefined;
onRebuild: () => Promise<void>;
}
const { noun, cacheState, onRebuild }: Props = $props();
</script>
<style>
.container {
padding: 1rem;
}
.banner {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.25rem 0.5rem;
overflow: hidden;
border: 1px solid var(--color-feedback-warning-border);
border-radius: var(--border-radius-md);
background-color: var(--color-feedback-warning-bg);
}
.action {
margin-left: auto;
}
</style>
<div class="container">
<div class="banner">
<div class="txt-overflow txt-body-m-regular global-flex">
<Icon name="warning" />
<span class="txt-overflow">
There's a problem with your COB cache, so some {noun} may not be displayed.
You can rebuild the cache to resolve this.
</span>
</div>
<div class="action">
<Button
variant="naked"
onclick={onRebuild}
disabled={cacheState !== undefined}>
{#if cacheState?.event === "started" || cacheState?.event === "progress"}
Rebuilding
<Spinner />
{:else if cacheState?.event === "finished"}
Done
<Icon name="checkmark" />
{:else}
Rebuild cache
{/if}
</Button>
</div>
</div>
</div>