Replace `<slot>` directives with snippets — radicle-desktop

modified src/components/Border.svelte

@@ -1,4 +1,7 @@

 <script lang="ts">
   import type { Snippet } from "svelte";
   export let children: Snippet;
   export let variant: "primary" | "secondary" | "ghost" | "float" | "danger";
   export let hoverable: boolean = false;
   export let onclick: (() => void) | undefined = undefined;

@@ -198,7 +201,7 @@

     style:padding={stylePadding}
     style:gap={styleGap}
     style:overflow={styleOverflow}>
     <slot />
     {@render children()}
   </div>
   <div class="p3-4"></div>
   <div class="p3-5"></div>

modified src/components/Button.svelte

@@ -1,4 +1,7 @@

 <script lang="ts">
   import type { Snippet } from "svelte";
   export let children: Snippet;
   export let variant: "primary" | "secondary" | "ghost";
   export let onclick: (() => void) | undefined = undefined;

@@ -370,7 +373,9 @@

   <div class="p3-1"></div>
   <div class="p3-2"></div>
   <div class="p3-3 txt-semibold txt-small"><slot /></div>
   <div class="p3-3 txt-semibold txt-small">
     {@render children()}
   </div>
   <div class="p3-4"></div>
   <div class="p3-5"></div>

modified src/components/Comment.svelte

@@ -1,4 +1,5 @@

 <script lang="ts">
   import type { Snippet } from "svelte";
   import type { Author } from "@bindings/cob/Author";
   import type { Edit } from "@bindings/cob/patch/Edit";
   import type { Reaction } from "@bindings/cob/Reaction";

@@ -17,6 +18,7 @@

   import ReactionSelector from "@app/components/ReactionSelector.svelte";
   import Reactions from "@app/components/Reactions.svelte";
   export let actions: Snippet | undefined = undefined;
   export let id: string | undefined = undefined;
   export let rid: string;
   export let author: Author;

@@ -105,9 +107,8 @@

 <div class="card" {id}>
   <div style:position="relative">
     <div class="card-header">
       <slot class="icon" name="icon" />
       <NodeId {...utils.authorForNodeId(author)} />
       <slot name="caption">{caption}</slot>
       {caption}
       {#if id}
         <Id {id} variant="oid" />
       {/if}

@@ -143,7 +144,7 @@

               }
             }} />
         {/if}
         <slot name="actions" />
         {@render actions?.()}
       </div>
     </div>
   </div>

modified src/components/DropdownList.svelte

@@ -1,4 +1,8 @@

 <script lang="ts" generics="T">
   import type { Snippet } from "svelte";
   export let item: Snippet<[T]>;
   export let empty: Snippet | undefined = undefined;
   export let items: T[];
   export let styleDropdownMinWidth: string | undefined = undefined;
 </script>

@@ -17,13 +21,13 @@

 </style>
 <div class="dropdown" style:min-width={styleDropdownMinWidth}>
   {#each items as item}
   {#each items as i}
     <div class="dropdown-item">
       <slot name="item" {item} />
       {@render item(i)}
     </div>
   {:else}
     <div class="dropdown-item">
       <slot name="empty" />
       {@render empty?.()}
     </div>
   {/each}
 </div>

modified src/components/DropdownListItem.svelte

@@ -1,4 +1,7 @@

 <script lang="ts">
   import type { Snippet } from "svelte";
   export let children: Snippet;
   export let selected: boolean;
   export let disabled: boolean = false;
   export let title: string | undefined = undefined;

@@ -53,5 +56,5 @@

   {style}
   {title}
   on:click>
   <slot />
   {@render children()}
 </div>

modified src/components/Header.svelte

@@ -1,4 +1,6 @@

 <script lang="ts">
   import type { Snippet } from "svelte";
   import { nodeRunning } from "@app/lib/events";
   import AnnounceSwitch from "./AnnounceSwitch.svelte";

@@ -8,6 +10,10 @@

   import OutlineButton from "./OutlineButton.svelte";
   import Popover from "./Popover.svelte";
   import ThemeSwitch from "./ThemeSwitch.svelte";
   export let breadcrumbs: Snippet;
   export let iconLeft: Snippet | undefined = undefined;
   export let center: Snippet | undefined = undefined;
 </script>
 <style>

@@ -67,10 +73,10 @@

             <Icon name="arrow-right" />
           </NakedButton>
         </div>
         <slot name="icon-left" />
         {@render iconLeft?.()}
       </div>
       <slot name="center" />
       {@render center?.()}
       <div class="global-flex" style:gap="0.5rem">
         <OutlineButton variant="ghost">

@@ -83,43 +89,42 @@

           {/if}
         </OutlineButton>
         <Popover popoverPositionRight="0" popoverPositionTop="3rem">
           <NakedButton
             variant="ghost"
             slot="toggle"
             let:toggle
             onclick={toggle}>
             <Icon name="settings" />
           </NakedButton>
           <Border
             variant="ghost"
             slot="popover"
             stylePadding="0.5rem 1rem"
             styleWidth="27rem">
             <div
               class="global-flex"
               style:flex-direction="column"
               style:align-items="flex-start"
               style:gap="1rem"
               style:width="100%">
               <div
                 class="global-flex"
                 style:justify-content="space-between"
                 style:width="100%">
                 Theme <ThemeSwitch />
               </div>
           {#snippet toggle(onclick)}
             <NakedButton variant="ghost" {onclick}>
               <Icon name="settings" />
             </NakedButton>
           {/snippet}
           {#snippet popover()}
             <Border
               variant="ghost"
               stylePadding="0.5rem 1rem"
               styleWidth="27rem">
               <div
                 class="global-flex"
                 style:justify-content="space-between"
                 style:flex-direction="column"
                 style:align-items="flex-start"
                 style:gap="1rem"
                 style:width="100%">
                 Announce changes <AnnounceSwitch />
                 <div
                   class="global-flex"
                   style:justify-content="space-between"
                   style:width="100%">
                   Theme <ThemeSwitch />
                 </div>
                 <div
                   class="global-flex"
                   style:justify-content="space-between"
                   style:width="100%">
                   Announce changes <AnnounceSwitch />
                 </div>
               </div>
             </div>
           </Border>
             </Border>
           {/snippet}
         </Popover>
       </div>
     </div>
     <div class="global-flex txt-tiny txt-semibold breadcrumbs">
       <slot name="breadcrumbs" />
       {@render breadcrumbs()}
     </div>
   </div>
   <div class="bottom-pixel-corners"></div>

modified src/components/Id.svelte

@@ -1,5 +1,5 @@

 <script lang="ts">
   import type { ComponentProps } from "svelte";
   import type { ComponentProps, Snippet } from "svelte";
   import { debounce } from "lodash";
   import { writeText } from "@tauri-apps/plugin-clipboard-manager";

@@ -8,6 +8,7 @@

   import Icon from "./Icon.svelte";
   export let children: Snippet | undefined = undefined;
   export let id: string;
   export let clipboard: string = id;
   export let shorten: boolean = true;

@@ -90,13 +91,13 @@

     }}
     role="button"
     tabindex="0">
     <slot>
       {#if shorten}
         {formatOid(id)}
       {:else}
         {id}
       {/if}
     </slot>
     {#if children}
       {@render children()}
     {:else if shorten}
       {formatOid(id)}
     {:else}
       {id}
     {/if}
   </div>
   {#if visible}

modified src/components/IssueStateButton.svelte

@@ -48,29 +48,28 @@

     popoverPadding="0"
     popoverPositionTop="3rem"
     popoverPositionRight="0">
     <Button
       flatLeft
       slot="toggle"
       let:toggle
       onclick={toggle}
       variant="secondary">
       <div style:height="22px" class="global-flex">
         <Icon name="chevron-down" />
       </div>
     </Button>
     <Border variant="ghost" slot="popover">
       <DropdownList items={actions.filter(a => !isEqual(a.state, state))}>
         <svelte:fragment slot="item" let:item={action}>
           <DropdownListItem
             selected={isEqual(selectedAction, action)}
             on:click={() => {
               selectedAction = action;
               closeFocused();
             }}>
             {action.caption}
           </DropdownListItem>
         </svelte:fragment>
       </DropdownList>
     </Border>
     {#snippet toggle(onclick)}
       <Button flatLeft {onclick} variant="secondary">
         <div style:height="22px" class="global-flex">
           <Icon name="chevron-down" />
         </div>
       </Button>
     {/snippet}
     {#snippet popover()}
       <Border variant="ghost">
         <DropdownList items={actions.filter(a => !isEqual(a.state, state))}>
           {#snippet item(action)}
             <DropdownListItem
               selected={isEqual(selectedAction, action)}
               on:click={() => {
                 selectedAction = action;
                 closeFocused();
               }}>
               {action.caption}
             </DropdownListItem>
           {/snippet}
         </DropdownList>
       </Border>
     {/snippet}
   </Popover>
 </div>

modified src/components/Link.svelte

@@ -1,8 +1,10 @@

 <script lang="ts">
   import type { Snippet } from "svelte";
   import type { Route } from "@app/lib/router/definitions";
   import { push, routeToPath } from "@app/lib/router";
   export let children: Snippet;
   export let route: Route;
   export let disabled: boolean = false;
   export let variant: "active" | "regular" | "tab" = "regular";

@@ -58,5 +60,5 @@

   class:regular={variant === "regular"}
   class:active={variant === "active"}
   class:tab={variant === "tab"}>
   <slot />
   {@render children()}
 </a>

modified src/components/NakedButton.svelte

@@ -1,4 +1,7 @@

 <script lang="ts">
   import type { Snippet } from "svelte";
   export let children: Snippet;
   export let variant: "primary" | "secondary" | "ghost";
   export let onclick: (() => void) | undefined = undefined;

@@ -210,7 +213,9 @@

   <div class="pixel p3-1"></div>
   <div class="pixel p3-2"></div>
   <div class="pixel p3-3 txt-semibold txt-small"><slot /></div>
   <div class="pixel p3-3 txt-semibold txt-small">
     {@render children()}
   </div>
   <div class="pixel p3-4"></div>
   <div class="pixel p3-5"></div>

modified src/components/OutlineButton.svelte

@@ -1,4 +1,7 @@

 <script lang="ts">
   import type { Snippet } from "svelte";
   export let children: Snippet;
   export let variant: "primary" | "secondary" | "ghost";
   export let onclick: (() => void) | undefined = undefined;
   export let disabled: boolean = false;

@@ -261,7 +264,9 @@

   <div class="pixel p3-1"></div>
   <div class="pixel p3-2"></div>
   <div class="pixel p3-3 txt-semibold txt-small"><slot /></div>
   <div class="pixel p3-3 txt-semibold txt-small">
     {@render children()}
   </div>
   <div class="pixel p3-4"></div>
   <div class="pixel p3-5"></div>

modified src/components/Popover.svelte

@@ -8,6 +8,10 @@

 </script>
 <script lang="ts">
   import type { Snippet } from "svelte";
   export let toggle: Snippet<[() => void]>;
   export let popover: Snippet;
   export let popoverContainerMinWidth: string | undefined = undefined;
   export let popoverPadding: string | undefined = undefined;
   export let popoverPositionBottom: string | undefined = undefined;

@@ -24,7 +28,7 @@

     }
   }
   function toggle() {
   function toggleFn() {
     expanded = !expanded;
     if ($focused === thisComponent) {
       closeFocused();

@@ -53,7 +57,7 @@

   bind:this={thisComponent}
   class="container"
   style:min-width={popoverContainerMinWidth}>
   <slot name="toggle" {expanded} {toggle} />
   {@render toggle(toggleFn)}
   {#if expanded}
     <div

@@ -63,7 +67,7 @@

       style:right={popoverPositionRight}
       style:top={popoverPositionTop}
       style:padding={popoverPadding}>
       <slot name="popover" {toggle} />
       {@render popover()}
     </div>
   {/if}
 </div>

modified src/components/ReactionSelector.svelte

@@ -46,29 +46,28 @@

   {popoverPositionRight}
   {popoverPositionLeft}
   popoverPadding="0">
   <Icon
     name="face"
     slot="toggle"
     let:toggle
     onclick={toggle}
     styleCursor="pointer" />
   <Border variant="ghost" slot="popover">
     <div class="selector">
       {#each availableReactions as reaction}
         {@const lookedUpReaction = reactions?.find(
           ({ emoji }) => emoji === reaction,
         )}
         <button
           class:active={Boolean(lookedUpReaction)}
           onclick={() => {
             dispatch(
               "select",
               lookedUpReaction || { emoji: reaction, authors: [] },
             );
           }}>
           {reaction}
         </button>
       {/each}
     </div>
   </Border>
   {#snippet toggle(onclick)}
     <Icon name="face" {onclick} styleCursor="pointer" />
   {/snippet}
   {#snippet popover()}
     <Border variant="ghost">
       <div class="selector">
         {#each availableReactions as reaction}
           {@const lookedUpReaction = reactions?.find(
             ({ emoji }) => emoji === reaction,
           )}
           <button
             class:active={Boolean(lookedUpReaction)}
             onclick={() => {
               dispatch(
                 "select",
                 lookedUpReaction || { emoji: reaction, authors: [] },
               );
             }}>
             {reaction}
           </button>
         {/each}
       </div>
     </Border>
   {/snippet}
 </Popover>

modified src/components/Thread.svelte

@@ -97,9 +97,9 @@

         canEditComment(root.author.did) &&
         partial(editComment, root.id)}
       reactOnComment={reactOnComment && partial(reactOnComment, root.id)}>
       <svelte:fragment slot="actions">
       {#snippet actions()}
         <Icon name="reply" onclick={toggleReply} styleCursor="pointer" />
       </svelte:fragment>
       {/snippet}
     </CommentComponent>
   </div>
   {#if replies.length > 0 || (createReply && showReplyForm)}

modified src/views/Home.svelte

@@ -37,16 +37,16 @@

 <div style:height="fit-content">
   <div class="header">
     <Header>
       <svelte:fragment slot="center">
       {#snippet center()}
         <CopyableId id={`did:key:${config.publicKey}`} />
       </svelte:fragment>
       <svelte:fragment slot="breadcrumbs">
       {/snippet}
       {#snippet breadcrumbs()}
         <NodeId
           publicKey={config.publicKey}
           alias={config.alias}
           styleFontFamily="var(--font-family-sans-serif)"
           styleFontSize="var(--font-size-tiny)" />
       </svelte:fragment>
       {/snippet}
     </Header>
   </div>
   <div style:padding="1rem">

modified src/views/repo/CreateIssue.svelte

@@ -83,7 +83,7 @@

 </style>
 <Layout>
   <svelte:fragment slot="breadcrumbs">
   {#snippet breadcrumbs()}
     <Link route={{ resource: "home" }}>
       <NodeId
         publicKey={config.publicKey}

@@ -103,9 +103,9 @@

     </Link>
     <Icon name="chevron-right" />
     New Issue
   </svelte:fragment>
   {/snippet}
   <svelte:fragment slot="sidebar">
   {#snippet sidebar()}
     <Border
       hoverable={false}
       variant="ghost"

@@ -148,7 +148,7 @@

         </Link>
       {/each}
     </div>
   </svelte:fragment>
   {/snippet}
   <div class="content">
     {#if preview}

modified src/views/repo/Issue.svelte

@@ -297,7 +297,7 @@

 </style>
 <Layout>
   <svelte:fragment slot="breadcrumbs">
   {#snippet breadcrumbs()}
     <Link route={{ resource: "home" }}>
       <NodeId
         publicKey={config.publicKey}

@@ -313,13 +313,13 @@

     </Link>
     <Icon name="chevron-right" />
     Issues
   </svelte:fragment>
   {/snippet}
   <svelte:fragment slot="header-center">
   {#snippet headerCenter()}
     <CopyableId id={issue.id} />
   </svelte:fragment>
   {/snippet}
   <svelte:fragment slot="sidebar">
   {#snippet sidebar()}
     <Border
       hoverable={false}
       variant="ghost"

@@ -362,7 +362,7 @@

         </Link>
       {/each}
     </div>
   </svelte:fragment>
   {/snippet}
   <div class="content">
     <div style:margin-bottom="1rem" style:margin-top="-4px">

@@ -439,10 +439,9 @@

           config.publicKey,
           issueBody.id,
         )}>
         <svelte:fragment slot="actions">
         {#snippet actions()}
           <Icon styleCursor="pointer" name="reply" onclick={toggleReply} />
         </svelte:fragment>
         <svelte:fragment slot="caption">opened</svelte:fragment>
         {/snippet}
       </CommentComponent>
     </div>
     <div class="connector"></div>

modified src/views/repo/Issues.svelte

@@ -43,7 +43,7 @@

 </style>
 <Layout>
   <svelte:fragment slot="breadcrumbs">
   {#snippet breadcrumbs()}
     <Link route={{ resource: "home" }}>
       <NodeId
         publicKey={config.publicKey}

@@ -59,13 +59,13 @@

     </Link>
     <Icon name="chevron-right" />
     Issues
   </svelte:fragment>
   {/snippet}
   <svelte:fragment slot="header-center">
   {#snippet headerCenter()}
     <CopyableId id={repo.rid} />
   </svelte:fragment>
   {/snippet}
   <svelte:fragment slot="sidebar">
   {#snippet sidebar()}
     <Border
       hoverable={false}
       variant="ghost"

@@ -122,7 +122,8 @@

         </div>
       </Link>
     </div>
   </svelte:fragment>
   {/snippet}
   <div class="header">
     <div>Issues</div>
     <div class="txt-regular txt-semibold">

modified src/views/repo/Layout.svelte

@@ -1,10 +1,16 @@

 <script lang="ts">
   import type { Snippet } from "svelte";
   import { onMount } from "svelte";
   import Header from "@app/components/Header.svelte";
   import Icon from "@app/components/Icon.svelte";
   import NakedButton from "@app/components/NakedButton.svelte";
   export let children: Snippet;
   export let breadcrumbs: Snippet;
   export let headerCenter: Snippet | undefined = undefined;
   export let sidebar: Snippet;
   export let loadMore: (() => Promise<void>) | undefined = undefined;
   let hidden = false;

@@ -60,8 +66,8 @@

 <div class="layout">
   <div class="header">
     <Header>
       <svelte:fragment slot="icon-left">
     <Header {breadcrumbs} center={headerCenter}>
       {#snippet iconLeft()}
         <NakedButton
           variant="ghost"
           onclick={() => {

@@ -69,25 +75,17 @@

           }}>
           <Icon name="sidebar" />
         </NakedButton>
       </svelte:fragment>
       <svelte:fragment slot="center">
         <slot name="header-center" />
       </svelte:fragment>
       <svelte:fragment slot="breadcrumbs">
         <slot name="breadcrumbs" />
       </svelte:fragment>
       {/snippet}
     </Header>
   </div>
   <div class="sidebar" class:hidden>
     <slot name="sidebar" />
     {@render sidebar()}
   </div>
   <div
     class="content global-reset-scroll-after-navigate"
     bind:this={listElement}>
     <slot />
     {@render children()}
   </div>
 </div>

modified src/views/repo/Patch.svelte

@@ -70,7 +70,7 @@

 </style>
 <Layout>
   <svelte:fragment slot="breadcrumbs">
   {#snippet breadcrumbs()}
     <Link route={{ resource: "home" }}>
       <NodeId
         publicKey={config.publicKey}

@@ -86,13 +86,13 @@

     </Link>
     <Icon name="chevron-right" />
     Patches
   </svelte:fragment>
   {/snippet}
   <svelte:fragment slot="header-center">
   {#snippet headerCenter()}
     <CopyableId id={patch.id} />
   </svelte:fragment>
   {/snippet}
   <svelte:fragment slot="sidebar">
   {#snippet sidebar()}
     <Border
       hoverable={false}
       variant="ghost"

@@ -138,7 +138,7 @@

         </Link>
       {/each}
     </div>
   </svelte:fragment>
   {/snippet}
   <div class="content">
     <div class="title">

modified src/views/repo/Patches.svelte

@@ -53,7 +53,7 @@

 </style>
 <Layout {loadMore}>
   <svelte:fragment slot="breadcrumbs">
   {#snippet breadcrumbs()}
     <Link route={{ resource: "home" }}>
       <NodeId
         publicKey={config.publicKey}

@@ -69,12 +69,13 @@

     </Link>
     <Icon name="chevron-right" />
     Patches
   </svelte:fragment>
   <svelte:fragment slot="header-center">
   {/snippet}
   {#snippet headerCenter()}
     <CopyableId id={repo.rid} />
   </svelte:fragment>
   {/snippet}
   <svelte:fragment slot="sidebar">
   {#snippet sidebar()}
     <Border
       hoverable={false}
       variant="ghost"

@@ -152,7 +153,7 @@

         </div>
       </Link>
     </div>
   </svelte:fragment>
   {/snippet}
   <div class="list">
     {#each items as patch}