feat: use slugs in ui (#45)

Author: jonathanlab

pnpm-workspace.yaml

@@ -1,7 +1,6 @@
 packages:
-  - '.'
+  - .
 
 onlyBuiltDependencies:
   - electron
   - esbuild
-

src/renderer/components/TaskDetail.tsx

@@ -215,31 +215,42 @@ export function TaskDetail({ task: initialTask }: TaskDetailProps) {
         <Box width="50%" className="border-gray-6 border-r" overflowY="auto">
           <Box p="4">
             <Flex direction="column" gap="4">
-              <Controller
-                name="title"
-                control={control}
-                render={({ field }) => (
-                  <Heading
-                    size="5"
-                    contentEditable
-                    suppressContentEditableWarning
-                    ref={(el) => {
-                      if (el && el.textContent !== field.value) {
-                        el.textContent = field.value;
-                      }
-                    }}
-                    onBlur={(e) => {
-                      field.onChange(e.currentTarget.textContent || "");
-                      onSubmit();
-                    }}
-                    style={{
-                      cursor: "text",
-                      outline: "none",
-                      width: "100%",
-                    }}
-                  />
-                )}
-              />
+              <Flex direction="row" gap="2" align="baseline">
+                <Code
+                  size="3"
+                  color="gray"
+                  variant="ghost"
+                  style={{ flexShrink: 0 }}
+                >
+                  {task.slug}
+                </Code>
+                <Controller
+                  name="title"
+                  control={control}
+                  render={({ field }) => (
+                    <Heading
+                      size="5"
+                      contentEditable
+                      suppressContentEditableWarning
+                      ref={(el) => {
+                        if (el && el.textContent !== field.value) {
+                          el.textContent = field.value;
+                        }
+                      }}
+                      onBlur={(e) => {
+                        field.onChange(e.currentTarget.textContent || "");
+                        onSubmit();
+                      }}
+                      style={{
+                        cursor: "text",
+                        outline: "none",
+                        flex: 1,
+                        minWidth: 0,
+                      }}
+                    />
+                  )}
+                />
+              </Flex>
 
               <Flex direction="column">
                 <Controller

src/renderer/components/TaskItem.tsx

@@ -1,5 +1,5 @@
 import { CopyIcon, TrashIcon } from "@radix-ui/react-icons";
-import { Badge, Box, ContextMenu, Flex, Text } from "@radix-ui/themes";
+import { Badge, Box, Code, ContextMenu, Flex, Text } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
 import { formatDistanceToNow } from "date-fns";
 import type React from "react";
@@ -182,30 +182,54 @@ function TaskItemComponent({
             {showBottomIndicator && (
               <Box className="absolute right-0 bottom-0 left-0 z-10 h-0.5 bg-accent-8" />
             )}
-            <Flex align="center" gap="2">
-              <Text color="gray" size="1">
+            <Flex align="baseline" gap="2" style={{ minWidth: 0 }}>
+              <Text color="gray" size="1" style={{ flexShrink: 0 }}>
                 {isHighlighted ? "[•]" : "[ ]"}
               </Text>
 
-              <Badge color={status === "Backlog" ? "gray" : undefined} size="1">
+              <Code
+                size="1"
+                color="gray"
+                variant="ghost"
+                style={{ flexShrink: 0 }}
+              >
+                {task.slug}
+              </Code>
+
+              <Badge
+                color={status === "Backlog" ? "gray" : undefined}
+                size="1"
+                style={{ flexShrink: 0 }}
+              >
                 {status}
               </Badge>
 
               <Text
                 size="2"
                 className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
+                style={{ minWidth: 0 }}
               >
                 {task.title}
               </Text>
 
               {task.repository_config && (
-                <Text size="1" color="gray">
+                <Text
+                  size="1"
+                  color="gray"
+                  className="whitespace-nowrap"
+                  style={{ flexShrink: 0 }}
+                >
                   {task.repository_config.organization}/
                   {task.repository_config.repository}
                 </Text>
               )}
 
-              <Text size="1" color="gray" className="whitespace-nowrap">
+              <Text
+                size="1"
+                color="gray"
+                className="whitespace-nowrap"
+                style={{ flexShrink: 0 }}
+              >
                 {timeAgo}
               </Text>
             </Flex>

src/shared/types.ts

@@ -5,6 +5,8 @@ export interface RepositoryConfig {
 
 export interface Task {
   id: string;
+  task_number: number | null;
+  slug: string;
   title: string;
   description: string;
   created_at: string;