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

87 lines
2.6 KiB
Svelte

<script lang="ts">
import Button from "@app/components/Button.svelte";
import Command from "@app/components/Command.svelte";
import Icon from "@app/components/Icon.svelte";
import Popover from "@app/components/Popover.svelte";
interface Props {
outline?: boolean;
ghost?: boolean;
rid: string;
}
const { outline = false, ghost = false, rid }: Props = $props();
let popoverExpanded: boolean = $state(false);
</script>
<Popover placement="bottom-end" bind:expanded={popoverExpanded}>
{#snippet toggle(onclick)}
{#if outline}
<Button
variant="outline"
styleHeight="2rem"
{onclick}
active={popoverExpanded}>
<Icon name="plus" />
<span class="global-hide-on-small-desktop-down">New patch</span>
</Button>
{:else}
<Button
styleHeight="2rem"
variant={ghost ? "ghost" : "secondary"}
{onclick}
active={popoverExpanded}>
<Icon name="plus" />
<span class="global-hide-on-small-desktop-down">New patch</span>
</Button>
{/if}
{/snippet}
{#snippet popover()}
<div class="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="2rem"
style:align-items="flex-start"
style:background-color="var(--color-surface-canvas)"
style:flex-direction="column"
style:padding="1rem"
style:width="30rem">
<div>
<div class="txt-body-l-semibold" style:margin-bottom="0.5rem">
Create a new patch
</div>
<div
class="global-flex"
style:flex-direction="column"
style:align-items="flex-start"
style:gap="0.5rem">
Create a new branch in your working copy, commit your changes, and
run:
<Command
command="git push rad HEAD:refs/patches"
styleWidth="fit-content" />
</div>
</div>
<div style:margin-bottom="1rem">
<div class="txt-body-l-semibold" style:margin-bottom="0.5rem">
Don't have a working copy yet?
</div>
<div
class="global-flex"
style:flex-direction="column"
style:align-items="flex-start"
style:gap="0.5rem">
To checkout a working copy of this repo, run:
<Command command={`rad checkout ${rid}`} styleWidth="fit-content" />
</div>
</div>
</div>
</div>
{/snippet}
</Popover>