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

52 lines
1.3 KiB
Svelte

<script lang="ts">
import Clipboard from "@app/components/Clipboard.svelte";
interface Props {
command: string;
styleWidth: string;
showPrompt?: boolean;
}
const { command, styleWidth, showPrompt = true }: Props = $props();
let clipboard: Clipboard;
</script>
<style>
.cmd {
color: var(--color-text-secondary);
}
.cmd:hover {
color: var(--color-text-primary);
}
.hoverable:hover {
background-color: var(--color-surface-canvas);
}
</style>
<div class="cmd txt-code-regular" style:width={styleWidth}>
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div
class="hoverable"
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:overflow="hidden"
style:cursor="pointer"
style:justify-content="space-between"
style:height="2rem"
style:padding="0 0.5rem"
style:width={styleWidth}
role="button"
tabindex="0"
onclick={() => clipboard.copy()}>
<span class="txt-overflow">
{showPrompt ? "$ " : ""}{command}
</span>
<Clipboard bind:this={clipboard} text={command} noPopover />
</div>
</div>