@miketromba/issy-app 0.1.0

package/src/components/EditIssueModal.tsx

@@ -0,0 +1,183 @@
+import React, { useState, useEffect } from 'react'
+import type { Issue } from '../App'
+
+interface EditIssueModalProps {
+  issue: Issue | null
+  isOpen: boolean
+  onClose: () => void
+  onUpdated: () => void
+}
+
+export function EditIssueModal({ issue, isOpen, onClose, onUpdated }: EditIssueModalProps) {
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [type, setType] = useState<'bug' | 'improvement'>('improvement')
+  const [priority, setPriority] = useState<'high' | 'medium' | 'low'>('medium')
+  const [labels, setLabels] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  // Populate form when issue changes
+  useEffect(() => {
+    if (issue) {
+      setTitle(issue.frontmatter.title || '')
+      setDescription(issue.frontmatter.description || '')
+      setType((issue.frontmatter.type as 'bug' | 'improvement') || 'improvement')
+      setPriority((issue.frontmatter.priority as 'high' | 'medium' | 'low') || 'medium')
+      setLabels(issue.frontmatter.labels || '')
+    }
+  }, [issue])
+
+  if (!isOpen || !issue) return null
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    if (!title.trim()) {
+      setError('Title is required')
+      return
+    }
+
+    setIsSubmitting(true)
+    setError(null)
+
+    try {
+      const response = await fetch(`/api/issues/${issue.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: title.trim(),
+          description: description.trim() || title.trim(),
+          type,
+          priority,
+          labels: labels.trim() || undefined,
+        }),
+      })
+
+      if (!response.ok) {
+        const data = await response.json()
+        throw new Error(data.error || 'Failed to update issue')
+      }
+
+      onUpdated()
+      onClose()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unknown error')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose()
+    }
+  }
+
+  return (
+    <div 
+      className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4"
+      onClick={handleBackdropClick}
+    >
+      <div className="bg-surface-elevated border border-border rounded-xl w-full max-w-lg shadow-2xl">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-border">
+          <h2 className="text-lg font-semibold text-text-primary">Edit Issue #{issue.id}</h2>
+          <button
+            onClick={onClose}
+            className="text-text-muted hover:text-text-primary transition-colors"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-5 space-y-4">
+          {error && (
+            <div className="px-3 py-2 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label className="block text-sm text-text-secondary mb-1.5">Title *</label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Brief description of the issue"
+              autoFocus
+              className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-text-primary text-sm placeholder:text-text-muted focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm text-text-secondary mb-1.5">Description</label>
+            <input
+              type="text"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="One-line summary"
+              className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-text-primary text-sm placeholder:text-text-muted focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm text-text-secondary mb-1.5">Type</label>
+              <select
+                value={type}
+                onChange={(e) => setType(e.target.value as 'bug' | 'improvement')}
+                className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-text-primary text-sm focus:outline-none focus:border-accent"
+              >
+                <option value="improvement">Improvement</option>
+                <option value="bug">Bug</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm text-text-secondary mb-1.5">Priority</label>
+              <select
+                value={priority}
+                onChange={(e) => setPriority(e.target.value as 'high' | 'medium' | 'low')}
+                className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-text-primary text-sm focus:outline-none focus:border-accent"
+              >
+                <option value="high">High</option>
+                <option value="medium">Medium</option>
+                <option value="low">Low</option>
+              </select>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm text-text-secondary mb-1.5">Labels</label>
+            <input
+              type="text"
+              value={labels}
+              onChange={(e) => setLabels(e.target.value)}
+              placeholder="Comma-separated: ui, backend, api"
+              className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-text-primary text-sm placeholder:text-text-muted focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          <div className="flex justify-end gap-3 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-sm text-text-secondary hover:text-text-primary transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="px-4 py-2 bg-accent hover:bg-accent-hover text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50"
+            >
+              {isSubmitting ? 'Saving...' : 'Save Changes'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

package/src/components/FilterBar.tsx

@@ -0,0 +1,182 @@
+import React, { useState, useRef, useEffect, useMemo } from 'react'
+import { parseQuery } from '@miketromba/issy-core'
+import type { Issue } from '../App'
+
+interface FilterBarProps {
+  query: string
+  onQueryChange: (query: string) => void
+  issues: Issue[]
+}
+
+interface DropdownProps {
+  label: string
+  value: string | null
+  options: { value: string; label: string }[]
+  onSelect: (value: string | null) => void
+}
+
+function Dropdown({ label, value, options, onSelect }: DropdownProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const selectedOption = options.find(o => o.value === value)
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`inline-flex items-center gap-1 px-2 py-1 text-xs rounded border transition-colors ${
+          value
+            ? 'bg-accent/10 border-accent/30 text-accent'
+            : 'bg-transparent border-border text-text-muted hover:text-text-secondary hover:border-border'
+        }`}
+      >
+        <span>{selectedOption ? selectedOption.label : label}</span>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M6 9l6 6 6-6" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-1 min-w-[120px] bg-surface-elevated border border-border rounded-lg shadow-lg z-50 py-1">
+          {value && (
+            <>
+              <button
+                onClick={() => { onSelect(null); setIsOpen(false) }}
+                className="w-full px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface hover:text-text-primary"
+              >
+                Clear
+              </button>
+              <div className="border-t border-border my-1" />
+            </>
+          )}
+          {options.map(option => (
+            <button
+              key={option.value}
+              onClick={() => { onSelect(option.value); setIsOpen(false) }}
+              className={`w-full px-3 py-1.5 text-left text-xs hover:bg-surface ${
+                value === option.value ? 'text-accent' : 'text-text-secondary hover:text-text-primary'
+              }`}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Sort options are fixed since they're not data-dependent
+const SORT_OPTIONS = [
+  { value: 'created', label: 'Newest' },
+  { value: 'created-asc', label: 'Oldest' },
+  { value: 'priority', label: 'Priority' },
+]
+
+// Priority sort order for consistent display
+const PRIORITY_ORDER: Record<string, number> = { high: 0, medium: 1, low: 2 }
+
+function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+function extractUniqueValues(issues: Issue[], key: keyof Issue['frontmatter']): { value: string; label: string }[] {
+  const values = new Set<string>()
+  
+  for (const issue of issues) {
+    const val = issue.frontmatter[key]
+    if (val && typeof val === 'string') {
+      values.add(val.toLowerCase())
+    }
+  }
+  
+  return Array.from(values)
+    .sort((a, b) => {
+      // Special sort for priority
+      if (key === 'priority') {
+        return (PRIORITY_ORDER[a] ?? 99) - (PRIORITY_ORDER[b] ?? 99)
+      }
+      return a.localeCompare(b)
+    })
+    .map(v => ({ value: v, label: capitalize(v) }))
+}
+
+export function FilterBar({ query, onQueryChange, issues }: FilterBarProps) {
+  const parsed = parseQuery(query)
+  
+  // Dynamically extract options from actual issue data
+  const statusOptions = useMemo(() => extractUniqueValues(issues, 'status'), [issues])
+  const priorityOptions = useMemo(() => extractUniqueValues(issues, 'priority'), [issues])
+  const typeOptions = useMemo(() => extractUniqueValues(issues, 'type'), [issues])
+  
+  const updateQualifier = (key: string, value: string | null) => {
+    const newQualifiers = { ...parsed.qualifiers }
+    
+    if (value === null) {
+      delete newQualifiers[key]
+    } else {
+      newQualifiers[key] = value
+    }
+    
+    // Rebuild query string
+    const parts: string[] = []
+    
+    // Add qualifiers in consistent order
+    if (newQualifiers.is) parts.push(`is:${newQualifiers.is}`)
+    if (newQualifiers.priority) parts.push(`priority:${newQualifiers.priority}`)
+    if (newQualifiers.type) parts.push(`type:${newQualifiers.type}`)
+    if (newQualifiers.label) parts.push(`label:${newQualifiers.label}`)
+    if (newQualifiers.sort) parts.push(`sort:${newQualifiers.sort}`)
+    
+    // Add search text at the end
+    if (parsed.searchText) parts.push(parsed.searchText)
+    
+    onQueryChange(parts.join(' '))
+  }
+
+  return (
+    <div className="flex items-center gap-2 flex-wrap">
+      {statusOptions.length > 0 && (
+        <Dropdown
+          label="Status"
+          value={parsed.qualifiers.is || null}
+          options={statusOptions}
+          onSelect={(v) => updateQualifier('is', v)}
+        />
+      )}
+      {priorityOptions.length > 0 && (
+        <Dropdown
+          label="Priority"
+          value={parsed.qualifiers.priority || null}
+          options={priorityOptions}
+          onSelect={(v) => updateQualifier('priority', v)}
+        />
+      )}
+      {typeOptions.length > 0 && (
+        <Dropdown
+          label="Type"
+          value={parsed.qualifiers.type || null}
+          options={typeOptions}
+          onSelect={(v) => updateQualifier('type', v)}
+        />
+      )}
+      <Dropdown
+        label="Sort"
+        value={parsed.qualifiers.sort || null}
+        options={SORT_OPTIONS}
+        onSelect={(v) => updateQualifier('sort', v)}
+      />
+    </div>
+  )
+}

package/src/components/IssueDetail.tsx

@@ -0,0 +1,148 @@
+import { marked, Renderer } from "marked";
+import hljs from "highlight.js";
+import "highlight.js/styles/github-dark.css";
+import type { Issue } from "../App";
+import { Badge } from "./Badge";
+import { formatDisplayDate, formatFullDate } from "@miketromba/issy-core";
+
+interface IssueDetailProps {
+  issue: Issue;
+  onBack?: () => void;
+  onEdit?: () => void;
+  onClose?: () => void;
+  onReopen?: () => void;
+  onDelete?: () => void;
+}
+
+// Custom renderer with syntax highlighting
+const renderer = new Renderer();
+renderer.code = function({ text, lang }) {
+  const language = lang && hljs.getLanguage(lang) ? lang : "plaintext";
+  const highlighted = hljs.highlight(text, { language }).value;
+  return `<pre><code class="hljs language-${language}">${highlighted}</code></pre>`;
+};
+
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+  renderer,
+});
+
+export function IssueDetail({ issue, onBack, onEdit, onClose, onReopen, onDelete }: IssueDetailProps) {
+  const labels = issue.frontmatter.labels?.split(',').map(l => l.trim()).filter(Boolean) || [];
+  const isOpen = issue.frontmatter.status === 'open';
+
+  return (
+    <div className="max-w-[800px] mx-auto px-4 md:px-10 py-6 md:py-8">
+      {/* Mobile back button */}
+      {onBack && (
+        <button 
+          onClick={onBack}
+          className="md:hidden inline-flex items-center gap-1.5 mb-4 text-text-secondary text-sm"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M15 19l-7-7 7-7" />
+          </svg>
+          Back to issues
+        </button>
+      )}
+      
+      <div className="mb-6">
+        <div className="flex items-start justify-between gap-3 mb-3">
+          <h1 className="text-xl md:text-2xl font-semibold text-text-primary leading-tight">
+            {issue.frontmatter.title || "Untitled Issue"}
+            <span className="font-normal text-text-muted ml-2">#{issue.id}</span>
+          </h1>
+          
+          {/* Action buttons */}
+          <div className="flex items-center gap-1 shrink-0">
+            {onEdit && (
+              <button
+                onClick={onEdit}
+                title="Edit issue"
+                className="p-2 text-text-muted hover:text-text-primary hover:bg-surface rounded-lg transition-colors"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                </svg>
+              </button>
+            )}
+            
+            {onDelete && (
+              <button
+                onClick={onDelete}
+                title="Delete issue"
+                className="p-2 text-text-muted hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-colors"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                </svg>
+              </button>
+            )}
+            
+            {isOpen && onClose && (
+              <button
+                onClick={onClose}
+                title="Close issue"
+                className="ml-1 px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary bg-surface hover:bg-surface-elevated border border-border rounded-lg transition-colors"
+              >
+                Close
+              </button>
+            )}
+            
+            {!isOpen && onReopen && (
+              <button
+                onClick={onReopen}
+                title="Reopen issue"
+                className="ml-1 px-3 py-1.5 text-xs font-medium text-green-400 hover:text-green-300 bg-green-500/10 hover:bg-green-500/20 border border-green-500/30 rounded-lg transition-colors"
+              >
+                Reopen
+              </button>
+            )}
+          </div>
+        </div>
+        
+        {issue.frontmatter.description && (
+          <p className="text-[15px] text-text-secondary leading-relaxed mb-4">
+            {issue.frontmatter.description}
+          </p>
+        )}
+        
+        <div className="flex flex-wrap items-center gap-2 text-sm">
+          {issue.frontmatter.priority && (
+            <Badge variant="priority" value={issue.frontmatter.priority} />
+          )}
+          
+          {issue.frontmatter.status && (
+            <Badge variant="status" value={issue.frontmatter.status} />
+          )}
+          
+          {issue.frontmatter.type && (
+            <Badge variant="type" value={issue.frontmatter.type} />
+          )}
+          
+          {labels.map((label) => (
+            <Badge key={label} variant="label" value={label} />
+          ))}
+          
+          {issue.frontmatter.created && (
+            <span 
+              className="text-xs text-text-muted"
+              title={formatFullDate(issue.frontmatter.created)}
+            >
+              {formatDisplayDate(issue.frontmatter.created)}
+            </span>
+          )}
+        </div>
+      </div>
+      
+      <hr className="border-0 border-t border-border my-6" />
+      
+      <div 
+        className="prose prose-invert prose-sm max-w-none prose-a:text-accent prose-pre:border-0 prose-pre:shadow-none prose-code:bg-surface-elevated prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none"
+        dangerouslySetInnerHTML={{ __html: marked.parse(issue.content) as string }}
+      />
+    </div>
+  );
+}

package/src/components/IssueList.tsx

@@ -0,0 +1,75 @@
+import type { Issue } from "../App";
+import { Badge } from "./Badge";
+import { formatDisplayDate, formatFullDate } from "@miketromba/issy-core";
+
+interface IssueListProps {
+  issues: Issue[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+}
+
+export function IssueList({ issues, selectedId, onSelect }: IssueListProps) {
+  if (issues.length === 0) {
+    return (
+      <div className="px-5 py-6 text-text-muted text-sm">
+        No issues found
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {issues.map((issue) => {
+        const isSelected = issue.id === selectedId;
+        
+        return (
+          <button
+            key={issue.id}
+            onClick={() => onSelect(issue.id)}
+            className={`block w-full px-5 py-4 border-0 border-b border-border-subtle bg-transparent text-left cursor-pointer transition-colors hover:bg-surface ${
+              isSelected ? "bg-surface-elevated" : ""
+            }`}
+          >
+            <div className="flex items-baseline gap-2 mb-1.5">
+              <span className="text-sm font-medium text-text-primary leading-snug flex-1 min-w-0 line-clamp-2">
+                {issue.frontmatter.title || "Untitled"}
+              </span>
+              <span className="font-mono text-xs text-text-muted shrink-0 ml-1">
+                #{issue.id}
+              </span>
+            </div>
+            
+            {issue.frontmatter.description && (
+              <div className="text-[13px] text-text-muted mb-2.5 line-clamp-1">
+                {issue.frontmatter.description}
+              </div>
+            )}
+            
+            <div className="flex items-center gap-2 flex-wrap">
+              {issue.frontmatter.priority && (
+                <Badge variant="priority" value={issue.frontmatter.priority} />
+              )}
+              
+              {issue.frontmatter.status && (
+                <Badge variant="status" value={issue.frontmatter.status} />
+              )}
+              
+              {issue.frontmatter.type && (
+                <Badge variant="type" value={issue.frontmatter.type} />
+              )}
+              
+              {issue.frontmatter.created && (
+                <span 
+                  className="text-xs text-text-muted"
+                  title={formatFullDate(issue.frontmatter.created)}
+                >
+                  {formatDisplayDate(issue.frontmatter.created)}
+                </span>
+              )}
+            </div>
+          </button>
+        );
+      })}
+    </>
+  );
+}