<script lang="ts">

  import { formatOid } from "@app/lib/utils";

  import Border from "@app/components/Border.svelte";

  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 {

    patchId: string;

    selectedRevisionId: string;

    tab: "patch" | "revisions" | "timeline";

  }

  const { patchId, selectedRevisionId, tab }: Props = $props();

  const checkoutCommand = $derived.by(() => {

    if (tab === "revisions" && selectedRevisionId !== patchId) {

      return `rad patch checkout ${formatOid(patchId)} --revision ${formatOid(selectedRevisionId)}`;

    } else {

      return `rad patch checkout ${formatOid(patchId)}`;

    }

  });

</script>

<Popover popoverPositionRight="0" popoverPositionTop="3rem">

  {#snippet toggle(onclick)}

    <Button styleHeight="2.5rem" variant="secondary" {onclick}>

      <Icon name="checkout" />Checkout patch<Icon name="chevron-down" />

    </Button>

  {/snippet}

  {#snippet popover()}

    <Border

      styleAlignItems="flex-start"

      styleBackgroundColor="var(--color-background-float)"

      styleFlexDirection="column"

      styleGap="0.5rem"

      stylePadding="1rem"

      styleWidth="max-content"

      variant="ghost">

      <span class="txt-small">

        To checkout this patch in your working copy, run:

      </span>

      <Command command={checkoutCommand} styleWidth="100%" />

    </Border>

  {/snippet}

</Popover>

<script lang="ts">

  import Border from "@app/components/Border.svelte";

  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 {

    rid: string;

  }

  const { rid }: Props = $props();

</script>

<Popover popoverPositionRight="0" popoverPositionTop="3rem">

  {#snippet toggle(onclick)}

    <Button styleHeight="2.5rem" variant="secondary" {onclick}>

      <Icon name="checkout" />Checkout repo<Icon name="chevron-down" />

    </Button>

  {/snippet}

  {#snippet popover()}

    <Border

      styleAlignItems="flex-start"

      styleBackgroundColor="var(--color-background-float)"

      styleFlexDirection="column"

      styleGap="0.5rem"

      stylePadding="1rem"

      styleWidth="max-content"

      variant="ghost">

      <span class="txt-small">

        To checkout a working copy of this repo, run:

      </span>

      <Command command={`rad checkout ${rid}`} styleWidth="100%" />

    </Border>

  {/snippet}

</Popover>

<div class="cmd txt-monospace txt-small" style:width={styleWidth}>

  import type { Snippet } from "svelte";

  import { checkRadicleCLI } from "@app/lib/checkRadicleCLI.svelte";

  import { setFocused } from "@app/components/Popover.svelte";

  import InfoButton from "@app/components/InfoButton.svelte";

  import NodeStatusButton from "@app/components/NodeStatusButton.svelte";

  const { center, config }: Props = $props();

        <InfoButton {config} />

        <NodeStatusButton />

<script lang="ts">

  import type { Config } from "@bindings/config/Config";

  import { didFromPublicKey, truncateDid } from "@app/lib/utils";

  import { radicleInstalled } from "@app/lib/checkRadicleCLI.svelte";

  import Border from "@app/components/Border.svelte";

  import Command from "@app/components/Command.svelte";

  import CopyableId from "@app/components/CopyableId.svelte";

  import Icon from "@app/components/Icon.svelte";

  import NakedButton from "@app/components/NakedButton.svelte";

  import NodeId from "@app/components/NodeId.svelte";

  import Popover from "@app/components/Popover.svelte";

  import RepoGuide from "@app/components/RepoGuide.svelte";

  interface Props {

    config: Config;

  }

  const { config }: Props = $props();

</script>

<style>

  .guide-header {

    padding-bottom: 1rem;

  }

  .spacer {

    width: 100%;

    border-bottom: 1px solid var(--color-border-default);

    height: 1px;

    margin: 1rem 0;

  }

</style>

<Popover

  popoverId="popover-guide"

  popoverPadding="0"

  popoverPositionTop="2.5rem"

  popoverPositionRight="-9.3rem">

  {#snippet toggle(onclick)}

    <NakedButton variant="ghost" {onclick} stylePadding="0 4px">

      <Icon name="info" />

    </NakedButton>

  {/snippet}

  {#snippet popover()}

    <Border

      variant="ghost"

      styleGap="0"

      stylePadding="1rem"

      styleMinWidth="36rem"

      styleOverflow="auto"

      styleMaxHeight="calc(100vh - 5rem)"

      styleAlignItems="flex-start"

      styleFlexDirection="column">

      <div

        style:position="relative"

        style:display="flex"

        style:gap="0.5rem"

        style:flex-direction="column"

        style:padding="1rem"

        style:margin-bottom="1rem"

        style:width="100%"

        style:background-color="var(--color-background-float)">

        <div class="txt-semibold txt-medium" style:margin-bottom="1rem">

          Getting started

        </div>

        <div class="txt-small" style:display="inline">

          Hello <span style:padding-left="0.25rem">

            <NodeId inline publicKey={config.publicKey} alias={config.alias} />,

          </span>

          your identity has been created and stored on your machine.

        </div>

        <div class="txt-small">

          Your public key is <CopyableId

            inline

            id={didFromPublicKey(config.publicKey)}>

            {truncateDid(config.publicKey)}

          </CopyableId>

          you can share this with anyone to find you on the network.

        </div>

        <div class="spacer"></div>

        {#if radicleInstalled()}

          <div class="global-flex txt-small">

            <Icon name="checkbox-checked" />Radicle CLI is setup

          </div>

        {:else}

          <div class="txt-small">

            <div class="global-flex" style:padding-bottom="0.5rem">

              <Icon name="checkbox-unchecked" />Make sure to install Radicle CLI

            </div>

            <div style:padding-bottom="0.5rem">

              To be able to interact with repos on the Radicle network you'll

              need to install a node on your computer. This node will identify

              itself on the network with your keys to push and pull changes.

            </div>

            <div style:padding-bottom="0.5rem">

              To install the node and other Radicle CLI tooling, simply run the

              command below from your shell:

            </div>

            <Command

              styleWidth="fit-content"

              command="curl -sSf https://radicle.xyz/install | sh" />

          </div>

        {/if}

      </div>

      <div class="guide-header txt-medium txt-semibold">Guide</div>

      <RepoGuide />

    </Border>

  {/snippet}

</Popover>

  import type { RepoInfo } from "@bindings/repo/RepoInfo";

  import { modifierKey } from "@app/lib/utils";

  import IssueStateFilterButton from "./IssueStateFilterButton.svelte";

    changeFilter: (status: IssueStatus) => void;

    issues: Issue[];

  const { changeFilter, issues, repo, selectedIssueId, status, title }: Props =

    <IssueStateFilterButton

      {status}

      counters={project.meta.issues}

      {changeFilter} />

<script lang="ts">

  import type { IssueStatus } from "@app/views/repo/router";

  import type { ProjectPayloadMeta } from "@bindings/repo/ProjectPayloadMeta";

  import { closeFocused } from "./Popover.svelte";

  import capitalize from "lodash/capitalize";

  import { issueStatusColor } from "@app/lib/utils";

  import Border from "./Border.svelte";

  import DropdownList from "./DropdownList.svelte";

  import DropdownListItem from "./DropdownListItem.svelte";

  import Icon from "./Icon.svelte";

  import OutlineButton from "./OutlineButton.svelte";

  import Popover from "./Popover.svelte";

  interface Props {

    changeFilter: (status: IssueStatus) => void;

    status: IssueStatus;

    counters: ProjectPayloadMeta["issues"];

  }

  const { changeFilter, counters, status }: Props = $props();

</script>

{#snippet iconSnippet(status: IssueStatus)}

  <div

    class="icon"

    style:color={status === "all" ? undefined : issueStatusColor[status]}>

    <Icon name={status === "closed" ? "issue-closed" : "issue"} />

  </div>

{/snippet}

{#snippet counterSnippet(status: IssueStatus)}

  <div style:margin-left="auto" style:padding-left="0.25rem">

    {#if status === "all"}

      {counters.open + counters.closed}

    {:else}

      {counters[status]}

    {/if}

  </div>

{/snippet}

<Popover popoverPositionLeft="0" popoverPositionTop="3rem">

  {#snippet toggle(onclick)}

    <OutlineButton variant="ghost" {onclick} styleHeight="2.5rem">

      {@render iconSnippet(status)}

      {capitalize(status)}

      {@render counterSnippet(status)}

      <Icon name="chevron-down" />

    </OutlineButton>

  {/snippet}

  {#snippet popover()}

    <Border variant="ghost">

      <DropdownList items={["all", "open", "closed"] as IssueStatus[]}>

        {#snippet item(state)}

          <DropdownListItem

            styleGap="0.5rem"

            styleMinHeight="2.5rem"

            selected={status === state}

            onclick={() => {

              changeFilter(state);

              closeFocused();

            }}>

            {@render iconSnippet(state)}

            {capitalize(state)}

            {@render counterSnippet(state)}

          </DropdownListItem>

        {/snippet}

      </DropdownList>

    </Border>

  {/snippet}

</Popover>

<script lang="ts">

  import { nodeRunning } from "@app/lib/events";

  import Border from "@app/components/Border.svelte";

  import Icon from "@app/components/Icon.svelte";

  import NakedButton from "@app/components/NakedButton.svelte";

  import Popover from "@app/components/Popover.svelte";

</script>

<Popover

  popoverPadding="0"

  popoverPositionTop="2.5rem"

  popoverPositionRight="0">

  {#snippet toggle(onclick)}

    <NakedButton variant="ghost" {onclick}>

      {#if $nodeRunning}

        <Icon name="online" />

        Online

      {:else}

        <Icon name="offline" />

        Offline

      {/if}

    </NakedButton>

  {/snippet}

  {#snippet popover()}

    <Border

      variant="ghost"

      stylePadding="1rem"

      styleMinWidth="20rem"

      styleAlignItems="flex-start"

      styleFlexDirection="column">

      <div class="txt-small txt-missing">

        {#if $nodeRunning}

          Your node is up and running, your changes will be synced

          automatically.

        {:else}

          Your node is not running, changes you make are safe but won't be

          announced.

        {/if}

      </div>

    </Border>

  {/snippet}

</Popover>

<script lang="ts">

  import type { PatchStatus } from "@app/views/repo/router";

  import type { ProjectPayloadMeta } from "@bindings/repo/ProjectPayloadMeta";

  import capitalize from "lodash/capitalize";

  import { patchStatusColor } from "@app/lib/utils";

  import { closeFocused } from "@app/components/Popover.svelte";

  import Border from "@app/components/Border.svelte";

  import DropdownList from "@app/components/DropdownList.svelte";

  import DropdownListItem from "@app/components/DropdownListItem.svelte";

  import Icon from "@app/components/Icon.svelte";

  import OutlineButton from "@app/components/OutlineButton.svelte";

  import Popover from "@app/components/Popover.svelte";

  interface Props {

    counters: ProjectPayloadMeta["patches"];

    select: (filter: PatchStatus | undefined) => Promise<void>;

    status: PatchStatus | undefined;

  }

  const { status, select, counters }: Props = $props();

</script>

{#snippet iconSnippet(status: PatchStatus | undefined)}

  <div class="icon" style:color={status ? patchStatusColor[status] : undefined}>

    <Icon

      name={status === undefined || status === "open"

        ? "patch"

        : `patch-${status}`} />

  </div>

{/snippet}

{#snippet counterSnippet(status: PatchStatus | undefined)}

  <div style:margin-left="auto" style:padding-left="0.25rem">

    {#if status}

      {counters[status]}

    {:else}

      {counters.draft + counters.open + counters.archived + counters.merged}

    {/if}

  </div>

{/snippet}

<Popover popoverPositionLeft="0" popoverPositionTop="3rem">

  {#snippet toggle(onclick)}

    <OutlineButton variant="ghost" {onclick} styleHeight="2.5rem">

      {@render iconSnippet(status)}

      {status ? capitalize(status) : "All"}

      {@render counterSnippet(status)}

      <Icon name="chevron-down" />

    </OutlineButton>

  {/snippet}

  {#snippet popover()}

    <Border variant="ghost">

      <DropdownList

        items={[undefined, "draft", "open", "archived", "merged"] as const}>

        {#snippet item(state)}

          <DropdownListItem

            styleGap="0.5rem"

            styleMinHeight="2.5rem"

            selected={status === state}

            onclick={async () => {

              await select(state);

              closeFocused();

            }}>

            {@render iconSnippet(state)}

            {state ? capitalize(state) : "All"}

            {@render counterSnippet(state)}

          </DropdownListItem>

        {/snippet}

      </DropdownList>

    </Border>

  {/snippet}

</Popover>

<script lang="ts">

  import { z } from "zod";

  import useLocalStorage from "@app/lib/useLocalStorage.svelte";

  import clone from "@app/components/RepoGuide/clone.md?raw";

  import publish from "@app/components/RepoGuide/publish.md?raw";

  import Border from "@app/components/Border.svelte";

  import Markdown from "@app/components/Markdown.svelte";

  import Tab from "@app/components/Tab.svelte";

  const tab = useLocalStorage(

    "repoGuideTab",

    z.union([z.literal("clone"), z.literal("publish")]),

    "publish",

    !window.localStorage,

  );

</script>

<style>

  .container {

    overflow: scroll;

  }

  .tab {

    height: 1.5rem;

    color: var(--color-foreground-contrast);

  }

</style>

{#snippet tabSnippet(name: typeof tab.value, content: string)}

  <Tab

    active={tab.value === name}

    onclick={() => {

      tab.value = name;

    }}>

    <span class="tab">{content}</span>

  </Tab>

{/snippet}

<Border

  stylePosition="relative"

  variant="ghost"

  flatBottom

  styleDisplay="flex"

  styleWidth="100%"

  styleGap="1rem"

  stylePadding="0 1rem">

  {@render tabSnippet("clone", "Clone a repo from the network")}

  {@render tabSnippet("publish", "Publish existing repo")}

</Border>

<Border

  variant="ghost"

  flatTop

  stylePadding="1rem"

  styleDisplay="block"

  styleFlexDirection="column"

  styleAlignItems="flex-start">

  <div class="container txt-small">

    {#if tab.value === "clone"}

      <Markdown content={clone} />

    {:else if tab.value === "publish"}

      <Markdown content={publish} />

    {/if}

  </div>

</Border>

#### 1. Find a repo on the Radicle network

You can search for Radicle repos by name or description at [search.radicle.xyz](https://search.radicle.xyz).

To clone a repo, you’ll need its Repository Identifier (RID) — a unique string that begins with `rad:`.

#### 2. Start your node

If you node is Offline, you should start it by running:

```sh

rad node start

```

#### 3. Clone the repo

To clone a repo, use the `rad clone` command followed by the RID of the repo you want to clone.

```sh

rad clone <RID>

```

#### Publish existing repo on Radicle

Navigate to your existing Git repo and publish it to Radicle by following the setup prompts:

- **Repository Name:** Enter a name for your repo.

- **Description:** Provide a brief summary of what your repo does.

- **Default Branch:** Typically **main** or **master**.

- **Visibility:** Choose **public** to share with others or **private** to not publish it to the network yet.

```sh

cd path/to/your/repo

rad init

```

That's it! Your repo is now on the Radicle network. 🚀

<script lang="ts">

  import type { Config } from "@bindings/config/Config";

  import type { PatchStatus } from "@app/views/repo/router";

  import type { Review } from "@bindings/cob/patch/Review";

  import type { Revision } from "@bindings/cob/patch/Revision";

  import type { Verdict } from "@bindings/cob/patch/Verdict";

  import { closeFocused } from "./Popover.svelte";

  import { didFromPublicKey } from "@app/lib/utils";

  import { push } from "@app/lib/router";

  import Border from "@app/components/Border.svelte";

  import Icon from "@app/components/Icon.svelte";

  import NakedButton from "@app/components/NakedButton.svelte";

  import OutlineButton from "@app/components/OutlineButton.svelte";

  import Popover from "@app/components/Popover.svelte";

  interface Props {

    rid: string;

    patchId: string;

    revision: Revision;

    config: Config;

    status: PatchStatus | undefined;

    loadPatch: () => Promise<void>;

    createReview: (verdict?: Verdict) => Promise<Review | undefined>;

  }

  const {

    rid,

    patchId,

    revision,

    config,

    status,

    loadPatch,

    createReview,

  }: Props = $props();

  const hasOwnReview = $derived(

    Boolean(

      revision.reviews &&

        revision.reviews.some(

          value => value.author.did === didFromPublicKey(config.publicKey),

        ),

    ),

  );

</script>

<Popover popoverPositionRight="0" popoverPositionTop="2.5rem">

  {#snippet toggle(onclick)}

    <NakedButton

      variant="ghost"

      disabled={hasOwnReview}

      {onclick}

      title={hasOwnReview ? "You already published a review" : undefined}>

      <Icon name="add" />

      <span class="txt-small">Review</span>

    </NakedButton>

  {/snippet}

  {#snippet popover()}

    <Border

      variant="ghost"

      stylePadding="1rem"

      styleDisplay="flex"

      styleFlexDirection="column">

      <div class="global-flex">

        <OutlineButton

          variant="ghost"

          disabled={hasOwnReview}

          title={hasOwnReview ? "You already published a review" : undefined}

          onclick={async () => {

            const newReview = await createReview();

            if (newReview) {

              await push({

                resource: "repo.patch",

                rid,

                patch: patchId,

                status,

                reviewId: newReview.id,

              });

            }

            closeFocused();

          }}>

          <span class="global-flex" style:color="var(--color-foreground-dim)">

            <Icon name="comment" />

            <span class="txt-small">Write Review</span>

          </span>

        </OutlineButton>

        <OutlineButton

          variant="ghost"

          disabled={hasOwnReview}

          title={hasOwnReview ? "You already published a review" : undefined}

          onclick={async () => {

            await createReview("reject");

            await loadPatch();

            closeFocused();

          }}>

          <span class="global-flex" style:color="var(--color-foreground-red)">

            <Icon name="comment-cross" />

            <span class="txt-small">Reject</span>

          </span>

        </OutlineButton>

        <OutlineButton

          variant="ghost"

          disabled={hasOwnReview}

          title={hasOwnReview ? "You already published a review" : undefined}

          onclick={async () => {

            await createReview("accept");

            await loadPatch();

            closeFocused();

          }}>

          <span

            class="global-flex"

            style:color="var(--color-foreground-success)">

            <Icon name="comment-checkmark" />

            <span class="txt-small">Accept</span>

            <span></span>

          </span>

        </OutlineButton>

      </div>

      <div

        class="txt-small txt-missing global-flex"

        style:margin-top="0.5rem"

        style:align-items="flex-start">

        <div style:padding-top="3px"><Icon name="info" /></div>

        <div>

          Clicking the buttons will create a blank review, add comments, a

          summary, and your verdict after. Depending on your sync settings your

          review might be published to the network right away. We are actively

          working on draft reviews, stay tuned.

        </div>

      </div>

    </Border>

  {/snippet}

</Popover>

  import ReviewButton from "@app/components/ReviewButton.svelte";

    config: Config;

    loadPatch: () => Promise<void>;

    rid: string;

  const { config, loadPatch, patchId, revision, rid, status }: Props = $props();

      <ReviewButton

        {rid}

        {patchId}

        {revision}

        {config}

        {status}

        {loadPatch}

        {createReview} />

  import CheckoutPatchButton from "@app/components/CheckoutPatchButton.svelte";

  import PatchStateFilterButton from "@app/components/PatchStateFilterButton.svelte";

        <PatchStateFilterButton

          counters={project.meta.patches}

          {status}

          select={async selectedState => {

            await loadPatches(selectedState);

          }} />

        <div style:margin-left="auto" style:z-index="40">

          <CheckoutPatchButton

            {tab}

            selectedRevisionId={selectedRevision.id}

            patchId={patch.id} />

  import type { RepoInfo } from "@bindings/repo/RepoInfo";

  import CheckoutRepoButton from "@app/components/CheckoutRepoButton.svelte";

      <div class="global-flex" style:margin-left="auto">

        <CheckoutRepoButton rid={repo.rid} />