@miketromba/issy-app 0.1.0

package/src/components/QueryHelpModal.tsx

@@ -0,0 +1,160 @@
+interface QueryHelpModalProps {
+	isOpen: boolean
+	onClose: () => void
+}
+
+export function QueryHelpModal({ isOpen, onClose }: QueryHelpModalProps) {
+	if (!isOpen) return null
+
+	return (
+		<div
+			className="fixed inset-0 bg-black/70 flex items-center justify-center z-[1000] p-5"
+			onClick={onClose}
+		>
+			<div
+				className="bg-surface border border-border rounded-xl max-w-[600px] w-full max-h-[65vh] overflow-y-auto shadow-2xl custom-scrollbar"
+				onClick={e => e.stopPropagation()}
+			>
+				<div className="flex items-center justify-between px-6 py-5 border-b border-border">
+					<h2 className="text-lg font-semibold text-text-primary">
+						Query Syntax Help
+					</h2>
+					<button
+						onClick={onClose}
+						aria-label="Close"
+						className="w-8 h-8 flex items-center justify-center bg-transparent border-0 rounded-md text-text-muted text-2xl cursor-pointer transition-all hover:bg-surface-elevated hover:text-text-primary"
+					>
+						×
+					</button>
+				</div>
+
+				<div className="p-6">
+					<p className="text-text-secondary mb-6 leading-relaxed">
+						Use qualifiers to filter issues, or type freely to
+						search by text.
+					</p>
+
+					<section className="mb-6">
+						<h3 className="text-[13px] font-semibold text-text-muted uppercase tracking-wide mb-3">
+							Qualifiers
+						</h3>
+						<div className="flex flex-col gap-2">
+							<QualifierRow
+								qualifier="is:"
+								description="Filter by status"
+								values="open, closed"
+							/>
+							<QualifierRow
+								qualifier="priority:"
+								description="Filter by priority"
+								values="high, medium, low"
+							/>
+							<QualifierRow
+								qualifier="type:"
+								description="Filter by issue type"
+								values="bug, feature, task, etc."
+							/>
+							<QualifierRow
+								qualifier="label:"
+								description="Filter by label"
+								values="any label name"
+							/>
+							<QualifierRow
+								qualifier="sort:"
+								description="Sort results"
+								values="created, priority, title"
+							/>
+						</div>
+					</section>
+
+					<section className="mb-6">
+						<h3 className="text-[13px] font-semibold text-text-muted uppercase tracking-wide mb-3">
+							Examples
+						</h3>
+						<div className="flex flex-col gap-2">
+							<ExampleRow
+								code="is:open priority:high"
+								description="High priority open issues"
+							/>
+							<ExampleRow
+								code="type:bug dashboard"
+								description='Bugs mentioning "dashboard"'
+							/>
+							<ExampleRow
+								code="is:open sort:priority"
+								description="Open issues sorted by priority"
+							/>
+							<ExampleRow
+								code="kubernetes cluster"
+								description='Issues matching "kubernetes cluster"'
+							/>
+						</div>
+					</section>
+
+					<section>
+						<h3 className="text-[13px] font-semibold text-text-muted uppercase tracking-wide mb-3">
+							Tips
+						</h3>
+						<ul className="list-none p-0 m-0 flex flex-col gap-2">
+							<li className="text-text-secondary text-[13px] pl-4 relative before:content-['•'] before:absolute before:left-0 before:text-text-muted">
+								Combine multiple qualifiers to narrow results
+							</li>
+							<li className="text-text-secondary text-[13px] pl-4 relative before:content-['•'] before:absolute before:left-0 before:text-text-muted">
+								Free text searches titles, descriptions, and
+								content
+							</li>
+							<li className="text-text-secondary text-[13px] pl-4 relative before:content-['•'] before:absolute before:left-0 before:text-text-muted">
+								Use quotes for multi-word searches:{' '}
+								<code className="bg-surface-elevated px-1.5 py-0.5 rounded text-xs font-mono">
+									"api error"
+								</code>
+							</li>
+							<li className="text-text-secondary text-[13px] pl-4 relative before:content-['•'] before:absolute before:left-0 before:text-text-muted">
+								Qualifiers are case-insensitive
+							</li>
+						</ul>
+					</section>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+function QualifierRow({
+	qualifier,
+	description,
+	values
+}: {
+	qualifier: string
+	description: string
+	values: string
+}) {
+	return (
+		<div className="flex gap-3 px-3 py-2.5 bg-surface-elevated rounded-md">
+			<code className="font-mono text-[13px] text-accent shrink-0 min-w-[80px]">
+				{qualifier}
+			</code>
+			<span className="text-text-secondary text-[13px] flex flex-col gap-0.5">
+				{description}
+				<span className="text-text-muted text-xs">{values}</span>
+			</span>
+		</div>
+	)
+}
+
+function ExampleRow({
+	code,
+	description
+}: {
+	code: string
+	description: string
+}) {
+	return (
+		<div className="flex flex-col gap-1 px-3 py-2.5 bg-surface-elevated rounded-md">
+			<code className="font-mono text-[13px] text-text-primary">
+				{code}
+			</code>
+			<span className="text-text-muted text-xs">{description}</span>
+		</div>
+	)
+}

package/src/frontend.tsx

@@ -0,0 +1,18 @@
+/**
+ * issy Frontend Entry Point
+ */
+
+import { createRoot } from 'react-dom/client'
+import { App } from './App'
+import './index.css'
+
+function start() {
+	const root = createRoot(document.getElementById('root')!)
+	root.render(<App />)
+}
+
+if (document.readyState === 'loading') {
+	document.addEventListener('DOMContentLoaded', start)
+} else {
+	start()
+}

package/src/index.css

@@ -0,0 +1,99 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@theme {
+  /* Core palette - dark theme */
+  --color-background: #0a0b0f;
+  --color-surface: #12141a;
+  --color-surface-elevated: #1a1c24;
+  --color-border: #2a2d38;
+  --color-border-subtle: #1e2028;
+  
+  /* Text hierarchy */
+  --color-text-primary: #f4f4f5;
+  --color-text-secondary: #a1a1aa;
+  --color-text-muted: #71717a;
+  
+  /* Accent - warm coral */
+  --color-accent: #ff6b5b;
+  --color-accent-hover: #ff8577;
+  
+  /* Status colors */
+  --color-status-open: #22c55e;
+  --color-status-closed: #6b7280;
+  
+  /* Priority colors */
+  --color-priority-high: #ef4444;
+  --color-priority-medium: #f59e0b;
+  --color-priority-low: #22c55e;
+  
+  /* Type colors */
+  --color-type-default: #a78bfa;
+  --color-type-bug: #f87171;
+  --color-type-feature: #60a5fa;
+}
+
+/* Custom scrollbar */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: var(--color-background);
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 3px;
+}
+
+/* Code block styling - remove borders, unify background, add dark scrollbar */
+.prose pre {
+  border: none !important;
+  box-shadow: none !important;
+  background-color: var(--color-surface-elevated) !important;
+}
+
+.prose pre code.hljs {
+  background: transparent !important;
+  padding: 0 !important;
+  font-size: 13px !important;
+}
+
+.prose pre::-webkit-scrollbar {
+  height: 6px;
+}
+
+.prose pre::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.prose pre::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 3px;
+}
+
+.prose pre::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted);
+}
+
+/* Firefox scrollbar */
+.prose pre {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+}
+
+/* Line clamp utility for title */
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

package/src/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>issy</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./frontend.tsx"></script>
+  </body>
+</html>

package/src/index.ts

@@ -0,0 +1,164 @@
+/**
+ * issy API Server
+ * 
+ * Provides REST API endpoints for the issue tracking system.
+ * Uses the shared library for all issue operations.
+ */
+
+import { serve } from "bun";
+import { resolve } from "node:path";
+import index from "./index.html";
+
+// Import shared library
+import {
+  setIssuesDir,
+  getAllIssues,
+  getIssue,
+  createIssue,
+  updateIssue,
+  closeIssue,
+  reopenIssue,
+  deleteIssue,
+  filterAndSearchIssues,
+  filterByQuery,
+  type CreateIssueInput,
+  type UpdateIssueInput,
+} from "@miketromba/issy-core";
+
+// Initialize issues directory from env or current working directory
+const DEFAULT_ROOT = process.env.ISSUES_ROOT || process.cwd();
+const ISSUES_DIR = process.env.ISSUES_DIR || resolve(DEFAULT_ROOT, ".issues");
+setIssuesDir(ISSUES_DIR);
+
+const PORT = Number(process.env.ISSUES_PORT || process.env.PORT || 1554);
+
+const server = serve({
+  port: PORT,
+  routes: {
+    // API: List all issues with optional filtering and search
+    // Supports both legacy filters (status, priority, type, search) and 
+    // new query language via 'q' parameter (e.g., q=is:open priority:high)
+    "/api/issues": {
+      GET: async (req) => {
+        const url = new URL(req.url);
+        const allIssues = await getAllIssues();
+        
+        // New query language support via 'q' parameter
+        const query = url.searchParams.get("q");
+        if (query) {
+          return Response.json(filterByQuery(allIssues, query));
+        }
+        
+        // Legacy filter parameters
+        const status = url.searchParams.get("status") || undefined;
+        const priority = url.searchParams.get("priority") || undefined;
+        const type = url.searchParams.get("type") || undefined;
+        const search = url.searchParams.get("search") || undefined;
+        
+        // If any legacy filters are provided, apply them
+        if (status || priority || type || search) {
+          const filtered = filterAndSearchIssues(allIssues, {
+            status,
+            priority,
+            type,
+            search,
+          });
+          return Response.json(filtered);
+        }
+
+        return Response.json(allIssues);
+      },
+    },
+
+    // API: Get single issue by ID
+    "/api/issues/:id": {
+      GET: async (req) => {
+        const issue = await getIssue(req.params.id);
+        if (!issue) {
+          return Response.json({ error: "Issue not found" }, { status: 404 });
+        }
+        return Response.json(issue);
+      },
+
+      // Update an issue
+      PATCH: async (req) => {
+        try {
+          const input: UpdateIssueInput = await req.json();
+          const issue = await updateIssue(req.params.id, input);
+          return Response.json(issue);
+        } catch (e) {
+          const message = e instanceof Error ? e.message : "Unknown error";
+          return Response.json({ error: message }, { status: 400 });
+        }
+      },
+    },
+
+    // API: Create a new issue
+    "/api/issues/create": {
+      POST: async (req) => {
+        try {
+          const input: CreateIssueInput = await req.json();
+          const issue = await createIssue(input);
+          return Response.json(issue, { status: 201 });
+        } catch (e) {
+          const message = e instanceof Error ? e.message : "Unknown error";
+          return Response.json({ error: message }, { status: 400 });
+        }
+      },
+    },
+
+    // API: Close an issue
+    "/api/issues/:id/close": {
+      POST: async (req) => {
+        try {
+          const issue = await closeIssue(req.params.id);
+          return Response.json(issue);
+        } catch (e) {
+          const message = e instanceof Error ? e.message : "Unknown error";
+          return Response.json({ error: message }, { status: 400 });
+        }
+      },
+    },
+
+    // API: Reopen an issue
+    "/api/issues/:id/reopen": {
+      POST: async (req) => {
+        try {
+          const issue = await reopenIssue(req.params.id);
+          return Response.json(issue);
+        } catch (e) {
+          const message = e instanceof Error ? e.message : "Unknown error";
+          return Response.json({ error: message }, { status: 400 });
+        }
+      },
+    },
+
+    // API: Delete an issue
+    "/api/issues/:id/delete": {
+      DELETE: async (req) => {
+        try {
+          await deleteIssue(req.params.id);
+          return Response.json({ success: true });
+        } catch (e) {
+          const message = e instanceof Error ? e.message : "Unknown error";
+          return Response.json({ error: message }, { status: 400 });
+        }
+      },
+    },
+
+    // API: Health check
+    "/api/health": {
+      GET: () => Response.json({ status: "ok", service: "issy" }),
+    },
+
+    // Serve frontend for everything else
+    "/*": index,
+  },
+
+  development: process.env.NODE_ENV !== "production" && {
+    hmr: true,
+    console: true,
+  },
+});
+
+console.log(`📋 issy running at ${server.url}`);