@miketromba/issy-app 0.1.1 → 0.1.4

package/src/components/CreateIssueModal.tsx

@@ -1,201 +0,0 @@
-import type React from 'react'
-import { useState } from 'react'
-
-interface CreateIssueModalProps {
-  isOpen: boolean
-  onClose: () => void
-  onCreated: () => void
-}
-
-export function CreateIssueModal({
-  isOpen,
-  onClose,
-  onCreated,
-}: CreateIssueModalProps) {
-  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)
-
-  if (!isOpen) 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/create', {
-        method: 'POST',
-        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 create issue')
-      }
-
-      // Reset form and close
-      setTitle('')
-      setDescription('')
-      setType('improvement')
-      setPriority('medium')
-      setLabels('')
-      onCreated()
-      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">New Issue</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"
-              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 (defaults to title)"
-              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 ? 'Creating...' : 'Create Issue'}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}

package/src/components/EditIssueModal.tsx

@@ -1,215 +0,0 @@
-import type React from 'react'
-import { useEffect, useState } 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"
-              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

@@ -1,209 +0,0 @@
-import { parseQuery } from '@miketromba/issy-core'
-import { useEffect, useMemo, useRef, useState } from 'react'
-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>
-  )
-}