Improve editting

Author: eqrion

src/Bugzilla.ts

@@ -0,0 +1,126 @@
+interface BugzillaBug {
+  id: number;
+  status: string;
+  summary: string;
+  resolution?: string;
+}
+
+interface BugzillaResponse {
+  bugs: BugzillaBug[];
+}
+
+interface BugStatusResult {
+  success: boolean;
+  status?: string;
+  summary?: string;
+  resolution?: string;
+  error?: string;
+}
+
+interface CacheEntry {
+  data: BugStatusResult;
+  timestamp: number;
+}
+
+class BugStatusCache {
+  private cache = new Map<number, CacheEntry>();
+  private ttl: number;
+
+  constructor(ttlMinutes: number = 1) {
+    this.ttl = ttlMinutes * 60 * 1000; // Convert to milliseconds
+  }
+
+  get(bugNumber: number): BugStatusResult | null {
+    const entry = this.cache.get(bugNumber);
+    if (!entry) return null;
+
+    if (Date.now() - entry.timestamp > this.ttl) {
+      this.cache.delete(bugNumber);
+      return null;
+    }
+
+    return entry.data;
+  }
+
+  set(bugNumber: number, data: BugStatusResult): void {
+    this.cache.set(bugNumber, {
+      data,
+      timestamp: Date.now(),
+    });
+  }
+
+  clear(): void {
+    this.cache.clear();
+  }
+}
+
+const bugCache = new BugStatusCache();
+
+export async function getBugStatus(
+  bugNumber: number,
+): Promise<BugStatusResult> {
+  try {
+    const response = await fetch(
+      `https://bugzilla.mozilla.org/rest/bug/${bugNumber}?include_fields=id,status,summary,resolution`,
+    );
+
+    if (!response.ok) {
+      if (response.status === 404) {
+        return {
+          success: false,
+          error: `Bug ${bugNumber} not found`,
+        };
+      }
+      return {
+        success: false,
+        error: `HTTP error: ${response.status}`,
+      };
+    }
+
+    const data: BugzillaResponse = await response.json();
+
+    if (data.bugs.length === 0) {
+      return {
+        success: false,
+        error: `Bug ${bugNumber} not found`,
+      };
+    }
+
+    const bug = data.bugs[0];
+    return {
+      success: true,
+      status: bug.status,
+      summary: bug.summary,
+      resolution: bug.resolution,
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: `Network error: ${error instanceof Error ? error.message : "Unknown error"}`,
+    };
+  }
+}
+
+export async function getCachedBugStatus(
+  bugNumber: number,
+): Promise<BugStatusResult> {
+  // Check cache first
+  const cached = bugCache.get(bugNumber);
+  if (cached) {
+    return cached;
+  }
+
+  // Fetch from API
+  const result = await getBugStatus(bugNumber);
+
+  // Only cache successful results
+  if (result.success) {
+    bugCache.set(bugNumber, result);
+  }
+
+  return result;
+}
+
+export function clearBugStatusCache(): void {
+  bugCache.clear();
+}

src/NodeViewer.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useState } from "react";
 import {
   type TechTree,
   type TechNode,
@@ -10,68 +10,6 @@ import { Modal } from "./Modal.js";
 import { Markdown } from "./Markdown.js";
 import { NodePickerModal } from "./NodePicker.js";
 
-interface AddNodeModalProps {
-  onClose: () => void;
-  onAdd: (title: string, description: string) => void;
-}
-
-function AddNodeModal({ onClose, onAdd }: AddNodeModalProps) {
-  const [title, setTitle] = useState("");
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (title.trim()) {
-      onAdd(title.trim(), "");
-      onClose();
-    }
-  };
-
-  return (
-    <Modal onClose={onClose} className="w-[80vh]">
-      <form onSubmit={handleSubmit} className="p-6">
-        <h2 className="text-xl font-semibold mb-4">Add Node</h2>
-
-        <div className="mb-4">
-          <label
-            htmlFor="node-title"
-            className="block text-sm font-medium text-gray-700 mb-2"
-          >
-            Title
-          </label>
-          <input
-            id="node-title"
-            type="text"
-            value={title}
-            autoFocus={true}
-            autoComplete="off"
-            onChange={(e) => setTitle(e.target.value)}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-            placeholder="Enter title..."
-            required
-          />
-        </div>
-
-        <div className="flex justify-end gap-3">
-          <button
-            type="button"
-            onClick={onClose}
-            className="px-4 py-2 text-gray-700 bg-gray-100 rounded hover:bg-gray-200 transition-colors"
-          >
-            Cancel
-          </button>
-          <button
-            type="submit"
-            disabled={!title.trim()}
-            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
-          >
-            Add
-          </button>
-        </div>
-      </form>
-    </Modal>
-  );
-}
-
 interface NodeViewerProps {
   nodeId: TechNodeId;
   editing: boolean;
@@ -106,7 +44,7 @@ export function NodeViewer({
   const handleSetTitle = (title: string) => {
     const updatedNode = {
       ...node,
-      id: generateId(title),
+      id: generateId(fullTree, title),
       title: title,
     };
     onUpdateNode(node.id, updatedNode, "set-title", true);
@@ -269,11 +207,12 @@ export function NodeViewer({
           <h4 className="font-semibold text-gray-900 mb-2">Bugzilla:</h4>
           {editing ? (
             <input
-              type="text"
-              value={node.bugzillaNumber || ''}
+              value={node.bugzillaNumber || ""}
               onChange={(e) => {
                 const value = e.target.value;
-                handleSetBugzillaNumber(value ? parseInt(value, 10) : undefined);
+                handleSetBugzillaNumber(
+                  value ? parseInt(value, 10) : undefined,
+                );
               }}
               className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
               placeholder="Bugzilla bug number..."

src/TechTree.ts

@@ -288,11 +288,14 @@ export function subgraph(tree: TechTree, root: TechNodeId): TechTree {
   };
 }
 
-export function generateId(title: string): TechNodeId {
+export function generateId(tree: TechTree, title: string): TechNodeId {
   const id = title
     .toLowerCase()
     .replace(/[^a-z0-9]+/g, "-")
     .replace(/^-|-$/g, "");
+  if (!id) {
+    return generateId(tree, generateTitle(tree, ""));
+  }
   return id;
 }
 

src/TechTreeViewer.tsx

@@ -205,7 +205,7 @@ export function TechTreeViewer(props: TechTreeViewerProps) {
       blocking = rootNodeId;
     }
     let title = generateTitle(tree, blocking);
-    let id = generateId(title);
+    let id = generateId(tree, title);
 
     // Check if node with this ID already exists
     if (tree.nodes.find((node) => node.id === id)) {