mirror of
https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git
synced 2026-11-01 09:40:28 +08:00
Rūdolfs Ošiņš
010cac0377
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
82 lines
1.6 KiB
Svelte
82 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from "svelte";
|
|
|
|
interface Props {
|
|
children: Snippet;
|
|
selected: boolean;
|
|
onclick?: () => void;
|
|
disabled?: boolean;
|
|
title?: string;
|
|
styleGap?: string;
|
|
styleMinHeight?: string;
|
|
styleWidth?: string;
|
|
}
|
|
|
|
const {
|
|
onclick,
|
|
children,
|
|
selected,
|
|
disabled = false,
|
|
title,
|
|
styleGap,
|
|
styleMinHeight,
|
|
styleWidth,
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<style>
|
|
.item {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
min-height: 2rem;
|
|
padding: 0 0.75rem;
|
|
white-space: nowrap;
|
|
font: var(--txt-body-m-regular);
|
|
color: var(--color-text-primary);
|
|
border-radius: var(--border-radius-sm);
|
|
}
|
|
.item.disabled {
|
|
color: var(--color-text-disabled);
|
|
}
|
|
.item:hover,
|
|
.selected {
|
|
background-color: var(--color-surface-subtle);
|
|
}
|
|
.selected {
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-surface-subtle);
|
|
}
|
|
.item:hover.selected {
|
|
background-color: var(--color-surface-mid);
|
|
}
|
|
.item:hover.selected.disabled {
|
|
background-color: var(--color-surface-subtle);
|
|
}
|
|
.item:hover.disabled {
|
|
cursor: not-allowed;
|
|
background-color: var(--color-surface-canvas);
|
|
}
|
|
</style>
|
|
|
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
<div
|
|
role="button"
|
|
tabindex="0"
|
|
class="item"
|
|
class:selected
|
|
class:disabled
|
|
style:width={styleWidth}
|
|
style:gap={styleGap}
|
|
style:min-height={styleMinHeight}
|
|
{title}
|
|
onclick={() => {
|
|
if (disabled || !onclick) {
|
|
return;
|
|
}
|
|
onclick();
|
|
}}>
|
|
{@render children()}
|
|
</div>
|