AdSelect and delete repos

gdn-app/src/components/Navbar.vue

@@ -1,13 +1,31 @@
 <script setup lang="ts">
-import { RiSettings3Fill } from "@remixicon/vue";
+import { RiDeleteBinFill, RiSettings3Fill } from "@remixicon/vue";
 import NavbarDropdown from "./NavbarDropdown.vue";
+import { useReposStore } from "@/stores/repos";
+
+const repos = useReposStore();
 </script>
 
 <template>
-  <div class="flex justify-between gap-1 bg-black p-2 text-white">
+  <div class="flex gap-1 bg-black p-2 text-white">
-    <NavbarDropdown />
+    <!-- The div is necessary because of the delete button, otherwise I could
+    just use justify-between -->
+    <div class="mr-auto overflow-hidden">
+      <NavbarDropdown />
+    </div>
+
+    <!-- Temporary delete button until I add proper repo settings -->
     <div
-      class="flex items-center rounded-md bg-neutral-800 px-2 hover:bg-neutral-700 active:bg-neutral-500"
+      v-show="repos.selectedRepo !== undefined"
+      class="flex select-none items-center rounded-md bg-neutral-800 px-2 hover:bg-neutral-700 active:bg-neutral-500"
+      @click="repos.removeRepo(repos.selectedRepoId)"
+    >
+      <RiDeleteBinFill size="16px" class="inline" />
+    </div>
+
+    <!-- Nothing hooked up yet -->
+    <div
+      class="flex select-none items-center rounded-md bg-neutral-800 px-2 hover:bg-neutral-700 active:bg-neutral-500"
     >
       <RiSettings3Fill size="16px" class="inline" />
     </div>

gdn-app/src/components/NavbarDropdown.vue

@@ -22,25 +22,33 @@ const { floatingStyles } = useFloating(reference, floating, {
 });
 
 function onAddNewRepo() {
-  repos.addRepo({ id: "test", name: "test" });
+  const id = crypto.randomUUID();
+  repos.addRepo({ id, name: id });
   console.log(repos.selectedRepo);
   open.value = false;
 }
+
+function onSelectRepo(id: string) {
+  repos.selectRepo(id);
+  open.value = false;
+}
 </script>
 
 <template>
   <!-- Navbar entry -->
   <div
     ref="reference"
-    class="relative flex flex-shrink cursor-default overflow-hidden whitespace-nowrap rounded-md bg-neutral-800 pl-2 text-lg font-light hover:bg-neutral-700 active:bg-neutral-500"
+    class="relative flex cursor-default whitespace-nowrap rounded-md bg-neutral-800 pl-2 text-lg font-light hover:bg-neutral-700"
     @click="open = !open"
   >
-    <span v-if="repos.selectedRepo">{{ repos.selectedRepo.name }}</span>
+    <span v-if="repos.selectedRepo" class="overflow-hidden overflow-ellipsis">{{
+      repos.selectedRepo.name
+    }}</span>
     <span v-else class="overflow-hidden overflow-ellipsis italic">
       no repo selected
     </span>
 
-    <div>
+    <div class="text-neutral-400">
       <RiArrowDropUpLine v-if="open" class="inline" />
       <RiArrowDropDownLine v-else class="inline" />
     </div>
@@ -63,6 +71,7 @@ function onAddNewRepo() {
     <NavbarDropdownEntry
       v-for="repo of repos.reposByName"
       :class="{ 'font-medium': repo.id === repos.selectedRepoId }"
+      @click="onSelectRepo(repo.id)"
       >{{ repo.name }}</NavbarDropdownEntry
     >
     <hr v-if="repos.reposByName.length > 0" class="m-1 text-neutral-700" />

gdn-app/src/stores/repos.ts

@@ -30,7 +30,8 @@ export const useReposStore = defineStore("repos", () => {
     selectedRepoId.value = repo.id;
   }
 
-  function removeRepo(id: string) {
+  function removeRepo(id: string | undefined) {
+    if (id === undefined) return;
     const i = repoIdsByName.value.indexOf(id);
     repos.value.delete(id);
     if (i >= 0) {
@@ -51,5 +52,6 @@ export const useReposStore = defineStore("repos", () => {
     selectedRepoId,
     addRepo,
     removeRepo,
+    selectRepo,
   };
 });