From 2abb7f16cda526ea6cc6d03df610f62ff5173bea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Fri, 6 Dec 2024 11:09:35 +0100
Subject: [PATCH] Add label and assignee inputs to the create issue view

---
 src/components/AssigneeInput.svelte |  5 +-
 src/components/LabelInput.svelte    |  5 +-
 src/views/repo/CreateIssue.svelte   | 71 +++++++++++++++++++++++++----
 3 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/src/components/AssigneeInput.svelte b/src/components/AssigneeInput.svelte
index da9dbe616..3b35b70d4 100644
--- a/src/components/AssigneeInput.svelte
+++ b/src/components/AssigneeInput.svelte
@@ -152,9 +152,10 @@
             <Icon name="cross" onclick={() => removeAssignee(assignee)} />
           {/if}
         </button>
-      {:else}
-        <div class="txt-missing">Not assigned to anyone.</div>
       {/each}
+      {#if updatedAssignees.length === 0 && !showInput}
+        <div class="txt-missing">Not assigned to anyone.</div>
+      {/if}
     {:else}
       {#each updatedAssignees as assignee}
         <NodeId {...authorForNodeId(assignee)} />
diff --git a/src/components/LabelInput.svelte b/src/components/LabelInput.svelte
index abcee1959..1570e1384 100644
--- a/src/components/LabelInput.svelte
+++ b/src/components/LabelInput.svelte
@@ -139,9 +139,10 @@
             <Icon name="cross" onclick={() => removeLabel(label)} />
           {/if}
         </button>
-      {:else}
-        <div class="txt-missing">No labels.</div>
       {/each}
+      {#if updatedLabels.length === 0 && !showInput}
+        <div class="txt-missing">No labels.</div>
+      {/if}
     {:else}
       {#each updatedLabels as label}
         <Label {label} />
diff --git a/src/views/repo/CreateIssue.svelte b/src/views/repo/CreateIssue.svelte
index 44845c579..24760c915 100644
--- a/src/views/repo/CreateIssue.svelte
+++ b/src/views/repo/CreateIssue.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { Author } from "@bindings/cob/Author";
   import type { Config } from "@bindings/config/Config";
   import type { Issue } from "@bindings/cob/issue/Issue";
   import type { RepoInfo } from "@bindings/repo/RepoInfo";
@@ -7,11 +6,17 @@
   import { invoke } from "@app/lib/invoke";
 
   import * as router from "@app/lib/router";
+  import { nodeRunning } from "@app/lib/events";
 
+  import { announce } from "@app/components/AnnounceSwitch.svelte";
+
+  import AssigneeInput from "@app/components/AssigneeInput.svelte";
+  import Border from "@app/components/Border.svelte";
   import Button from "@app/components/Button.svelte";
   import Icon from "@app/components/Icon.svelte";
   import InlineTitle from "@app/components/InlineTitle.svelte";
   import IssueSecondColumn from "@app/components/IssueSecondColumn.svelte";
+  import LabelInput from "@app/components/LabelInput.svelte";
   import Link from "@app/components/Link.svelte";
   import Markdown from "@app/components/Markdown.svelte";
   import NodeId from "@app/components/NodeId.svelte";
@@ -30,20 +35,26 @@
 
   const { repo, issues, config }: Props = $props();
 
-  let title: string = $state("");
   let description: string = $state("");
   let preview: boolean = $state(false);
-  const announce = false;
+  let title: string = $state("");
 
-  const labels: string[] = [];
-  const assignees: Author[] = [];
   const embeds: { name: string; content: string }[] = [];
 
+  let assignees: string[] = $state([]);
+  let labels: string[] = $state([]);
+
   async function createIssue() {
     const response: Issue = await invoke("create_issue", {
       rid: repo.rid,
-      new: { title, description, labels, assignees, embeds },
-      opts: { announce },
+      new: {
+        title,
+        description,
+        labels: $state.snapshot(labels),
+        assignees: $state.snapshot(assignees),
+        embeds,
+      },
+      opts: { announce: $nodeRunning && $announce },
     });
     void router.push({
       resource: "repo.issue",
@@ -66,7 +77,7 @@
   }
   .content {
     padding: 0 1rem 1rem 1rem;
-    height: calc(100% - 8rem);
+    height: calc(100% - 14rem);
   }
   .body {
     background-color: var(--color-background-float);
@@ -74,6 +85,21 @@
     min-height: calc(100% + 2px);
     clip-path: var(--2px-corner-fill);
   }
+  .metadata-divider {
+    width: 2px;
+    background-color: var(--color-fill-ghost);
+    height: calc(100% + 4px);
+    top: 0;
+    position: relative;
+  }
+  .metadata-section {
+    padding: 0.5rem;
+    font-size: var(--font-size-small);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    height: 100%;
+  }
 </style>
 
 <Layout>
@@ -117,6 +143,35 @@
         <TextInput placeholder="Title" autofocus bind:value={title} />
       </div>
     {/if}
+
+    <div style:margin-bottom="0.35rem">
+      <Border variant="ghost" styleGap="0">
+        <div class="metadata-section" style:flex="1">
+          <LabelInput
+            allowedToEdit={true}
+            {labels}
+            submitInProgress={false}
+            save={newLabels => {
+              labels = newLabels;
+            }} />
+        </div>
+
+        <div class="metadata-divider"></div>
+
+        <div class="metadata-section" style:flex="1">
+          <AssigneeInput
+            allowedToEdit={true}
+            assignees={assignees.map(assignee => {
+              return { did: assignee };
+            })}
+            submitInProgress={false}
+            save={newAssignees => {
+              assignees = newAssignees;
+            }} />
+        </div>
+      </Border>
+    </div>
+
     {#if preview}
       <div class="txt-small body">
         {#if description.trim() === ""}