feat: init

src/ui/priority-bars.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
+  import ChevronsDown from "@lucide/svelte/icons/chevrons-down";
+  import Flame from "@lucide/svelte/icons/flame";
+  import { isHot, PRIORITY_LABEL } from "../lib/vocab";
+  import type { Priority } from "../model/types";
+  import { cn } from "../lib/utils";
+
+  interface Props {
+    class?: string;
+    priority: Priority;
+  }
+
+  let { priority, class: className }: Props = $props();
+
+  const bars = $derived(Math.max(0, priority - 2));
+</script>
+
+<span
+  class={cn(
+    "inline-flex items-end gap-px",
+    className,
+    isHot(priority) && "text-destructive",
+  )}
+  title={PRIORITY_LABEL[priority]}
+>
+  {#if isHot(priority)}
+    <Flame aria-hidden="true" class="size-3.5" />
+  {:else if priority === 1}
+    <ChevronDown aria-hidden="true" class="size-3.5" />
+  {:else if priority === 0}
+    <ChevronsDown aria-hidden="true" class="size-3.5" />
+  {:else}
+    {#each [3, 5, 7] as height, index (height)}
+      <span
+        aria-hidden="true"
+        class={cn(
+          "w-[3px] rounded-[1px] bg-current transition-opacity",
+          index < bars ? "opacity-100" : "opacity-25",
+        )}
+        style="height: {height}px"
+      ></span>
+    {/each}
+  {/if}
+  <span class="sr-only">{PRIORITY_LABEL[priority]}</span>
+</span>