1  <script lang="ts">
 2    import Icon from "$components/Icon.svelte";
 3    import { Button, buttonVariants } from "$lib/components/ui/button/index.js";
 4    import * as Dialog from "$lib/components/ui/dialog";
 5  
 6    import type { RepoInfo } from "../routes/(dashboard)/dashboard/+page.server";
 7  
 8    import RepositoryCard from "./RepositoryCard.svelte";
 9  
10    let {
11      open = $bindable(false),
12      title,
13      description,
14      repo,
15      nodeHttpdHostPort,
16      nodeId,
17      onRemove,
18      httpdScheme,
19    }: {
20      open?: boolean;
21      title: string;
22      description: string;
23      repo: RepoInfo;
24      nodeHttpdHostPort: string;
25      nodeId?: string;
26      onRemove: () => void;
27      httpdScheme: string;
28    } = $props();
29  
30    let hover = $state(false);
31  
32    function handleConfirm() {
33      onRemove();
34      open = false;
35    }
36  </script>
37  
38  <Dialog.Root bind:open>
39    <Dialog.Trigger
40      class="flex w-26 cursor-pointer"
41      onmouseenter={() => {
42        hover = true;
43      }}
44      onmouseleave={() => {
45        hover = false;
46      }}>
47      <Button
48        tabindex={-1}
49        variant={hover ? "destructive" : repo.syncing ? "warning" : "default"}
50        onclick={e => {
51          e.stopPropagation();
52          e.preventDefault();
53          open = true;
54        }}
55        class="w-full max-w-26">
56        {#if hover}
57          Unseed
58        {:else if repo.syncing}
59          <Icon name="hourglass" />
60          Fetching
61        {:else}
62          <Icon name="seed-filled" />
63          Seeding
64        {/if}
65      </Button>
66    </Dialog.Trigger>
67    <Dialog.Content class="min-w-fit">
68      <Dialog.Header>
69        <Dialog.Title>{title}</Dialog.Title>
70        <Dialog.Description>
71          {description}
72        </Dialog.Description>
73        <div class="border border-border-subtle">
74          <RepositoryCard
75            {repo}
76            {nodeHttpdHostPort}
77            {nodeId}
78            showRemoveButton={false}
79            asLink={false}
80            {httpdScheme} />
81        </div>
82      </Dialog.Header>
83      <Dialog.Footer class="grid grid-cols-2 gap-2">
84        <Button
85          type="button"
86          onclick={() => {
87            open = false;
88          }}>
89          Cancel
90        </Button>
91        <Button
92          class={[buttonVariants({ variant: "destructive" })]}
93          onclick={handleConfirm}>
94          Remove repository
95        </Button>
96      </Dialog.Footer>
97    </Dialog.Content>
98  </Dialog.Root>