@miketromba/issy-app 0.1.1 → 0.1.4

package/{src/index.css → dist/styles.css}

@@ -1,7 +1,6 @@
 @import "tailwindcss";
-@plugin "@tailwindcss/typography";
 
-@theme {
+:root {
   /* Core palette - dark theme */
   --color-background: #0a0b0f;
   --color-surface: #12141a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miketromba/issy-app",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "description": "Local web UI and API server for issy",
   "type": "module",
   "license": "MIT",
@@ -19,29 +19,34 @@
   },
   "scripts": {
     "dev": "bun --hot src/index.ts",
-    "start": "bun src/index.ts",
+    "start": "node dist/server.js",
+    "build": "bun scripts/build.js",
+    "prepublishOnly": "bun run build",
     "lint": "biome check src"
   },
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./dist/server.js"
   },
+  "main": "./dist/server.js",
   "files": [
-    "src",
-    "bunfig.toml"
+    "dist"
   ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "dependencies": {
-    "@miketromba/issy-core": "^0.1.1",
+    "@miketromba/issy-core": "^0.1.4"
+  },
+  "devDependencies": {
     "@tailwindcss/typography": "^0.5.16",
-    "bun-plugin-tailwind": "^0.1.2",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/bun": "latest",
+    "@types/node": "^22",
     "highlight.js": "^11.11.1",
     "marked": "^17.0.1",
     "react": "^19",
     "react-dom": "^19",
-    "tailwindcss": "^4.1.11"
-  },
-  "devDependencies": {
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@types/bun": "latest"
+    "tailwindcss": "^3.4.0"
   }
 }

package/bunfig.toml

@@ -1,2 +0,0 @@
-[serve.static]
-plugins = ["bun-plugin-tailwind"]

package/src/App.tsx

@@ -1,346 +0,0 @@
-import type { Issue, IssueFrontmatter } from '@miketromba/issy-core'
-import { filterByQuery } from '@miketromba/issy-core'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { ConfirmModal } from './components/ConfirmModal'
-import { CreateIssueModal } from './components/CreateIssueModal'
-import { EditIssueModal } from './components/EditIssueModal'
-import { FilterBar } from './components/FilterBar'
-import { IssueDetail } from './components/IssueDetail'
-import { IssueList } from './components/IssueList'
-import { QueryHelpModal } from './components/QueryHelpModal'
-
-// Re-export types for components
-export type { Issue, IssueFrontmatter }
-
-interface FilterState {
-  query: string
-}
-
-const STORAGE_KEY = 'issy-state'
-
-function loadState(): { filters: FilterState; selectedIssueId: string | null } {
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY)
-    if (stored) {
-      const parsed = JSON.parse(stored)
-      // Migrate old filter format to new query format
-      if (parsed.filters && !parsed.filters.query) {
-        const oldFilters = parsed.filters
-        const queryParts: string[] = []
-        if (oldFilters.status) queryParts.push(`is:${oldFilters.status}`)
-        if (oldFilters.priority)
-          queryParts.push(`priority:${oldFilters.priority}`)
-        if (oldFilters.type) queryParts.push(`type:${oldFilters.type}`)
-        if (oldFilters.search) queryParts.push(oldFilters.search)
-        return {
-          filters: { query: queryParts.join(' ') || 'is:open' },
-          selectedIssueId: parsed.selectedIssueId || null,
-        }
-      }
-      return parsed
-    }
-  } catch (e) {
-    console.error('Failed to load state from localStorage:', e)
-  }
-  return {
-    filters: { query: 'is:open' }, // Default to showing open issues
-    selectedIssueId: null,
-  }
-}
-
-function saveState(filters: FilterState, selectedIssueId: string | null) {
-  try {
-    localStorage.setItem(
-      STORAGE_KEY,
-      JSON.stringify({ filters, selectedIssueId }),
-    )
-  } catch (e) {
-    console.error('Failed to save state to localStorage:', e)
-  }
-}
-
-export function App() {
-  const [issues, setIssues] = useState<Issue[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  const initialState = loadState()
-  const [filters, setFilters] = useState<FilterState>(initialState.filters)
-  const [selectedIssueId, setSelectedIssueId] = useState<string | null>(
-    initialState.selectedIssueId,
-  )
-  const [showHelp, setShowHelp] = useState(false)
-  const [showCreate, setShowCreate] = useState(false)
-  const [showEdit, setShowEdit] = useState(false)
-  const [showCloseConfirm, setShowCloseConfirm] = useState(false)
-  const [showReopenConfirm, setShowReopenConfirm] = useState(false)
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [actionLoading, setActionLoading] = useState(false)
-
-  // Fetch issues function - reusable for refresh
-  const fetchIssues = useCallback(async (showLoading = false) => {
-    try {
-      if (showLoading) setLoading(true)
-      const response = await fetch('/api/issues')
-      if (!response.ok) throw new Error('Failed to fetch issues')
-      const data = await response.json()
-      setIssues(data)
-      setError(null)
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Unknown error')
-    } finally {
-      setLoading(false)
-    }
-  }, [])
-
-  // Initial fetch
-  useEffect(() => {
-    fetchIssues(true)
-  }, [fetchIssues])
-
-  // Auto-refresh when window regains focus or tab becomes visible
-  useEffect(() => {
-    const handleVisibilityChange = () => {
-      if (document.visibilityState === 'visible') {
-        fetchIssues()
-      }
-    }
-
-    const handleFocus = () => {
-      fetchIssues()
-    }
-
-    document.addEventListener('visibilitychange', handleVisibilityChange)
-    window.addEventListener('focus', handleFocus)
-
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange)
-      window.removeEventListener('focus', handleFocus)
-    }
-  }, [fetchIssues])
-
-  useEffect(() => {
-    saveState(filters, selectedIssueId)
-  }, [filters, selectedIssueId])
-
-  const handleSelectIssue = useCallback((id: string | null) => {
-    setSelectedIssueId(id)
-  }, [])
-
-  const handleCloseIssue = useCallback(async () => {
-    if (!selectedIssueId || actionLoading) return
-    setActionLoading(true)
-    try {
-      const response = await fetch(`/api/issues/${selectedIssueId}/close`, {
-        method: 'POST',
-      })
-      if (!response.ok) throw new Error('Failed to close issue')
-      setShowCloseConfirm(false)
-      await fetchIssues()
-    } catch (e) {
-      console.error('Failed to close issue:', e)
-    } finally {
-      setActionLoading(false)
-    }
-  }, [selectedIssueId, actionLoading, fetchIssues])
-
-  const handleReopenIssue = useCallback(async () => {
-    if (!selectedIssueId || actionLoading) return
-    setActionLoading(true)
-    try {
-      const response = await fetch(`/api/issues/${selectedIssueId}/reopen`, {
-        method: 'POST',
-      })
-      if (!response.ok) throw new Error('Failed to reopen issue')
-      setShowReopenConfirm(false)
-      await fetchIssues()
-    } catch (e) {
-      console.error('Failed to reopen issue:', e)
-    } finally {
-      setActionLoading(false)
-    }
-  }, [selectedIssueId, actionLoading, fetchIssues])
-
-  const handleDeleteIssue = useCallback(async () => {
-    if (!selectedIssueId || isDeleting) return
-    setIsDeleting(true)
-    try {
-      const response = await fetch(`/api/issues/${selectedIssueId}/delete`, {
-        method: 'DELETE',
-      })
-      if (!response.ok) throw new Error('Failed to delete issue')
-      setShowDeleteConfirm(false)
-      setSelectedIssueId(null)
-      await fetchIssues()
-    } catch (e) {
-      console.error('Failed to delete issue:', e)
-    } finally {
-      setIsDeleting(false)
-    }
-  }, [selectedIssueId, isDeleting, fetchIssues])
-
-  const filteredIssues = useMemo(() => {
-    return filterByQuery(issues, filters.query)
-  }, [issues, filters.query])
-
-  const selectedIssue = selectedIssueId
-    ? issues.find((i) => i.id === selectedIssueId) || null
-    : null
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center h-screen bg-background text-text-muted">
-        Loading issues...
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center justify-center h-screen bg-background text-red-400">
-        Error: {error}
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex h-screen bg-background text-text-primary font-sans text-sm leading-relaxed">
-      {/* Sidebar - hidden on mobile when issue is selected */}
-      <aside
-        className={`w-full md:w-[380px] md:min-w-[380px] border-r border-border flex flex-col h-screen bg-background ${
-          selectedIssue ? 'hidden md:flex' : 'flex'
-        }`}
-      >
-        <div className="p-4 md:p-5 border-b border-border">
-          <div className="flex items-center justify-between mb-4">
-            <h1 className="text-lg font-semibold text-text-primary">issy</h1>
-            <button
-              onClick={() => setShowCreate(true)}
-              className="inline-flex items-center gap-1.5 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"
-            >
-              <svg
-                width="14"
-                height="14"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-              >
-                <path d="M12 5v14M5 12h14" />
-              </svg>
-              New
-            </button>
-          </div>
-
-          <div className="flex items-center bg-surface border border-border rounded-lg focus-within:border-accent transition-colors">
-            <input
-              type="text"
-              placeholder="Filter: is:open priority:high..."
-              value={filters.query}
-              onChange={(e) => setFilters({ query: e.target.value })}
-              className="flex-1 px-3.5 py-2.5 bg-transparent text-text-primary text-sm placeholder:text-text-muted focus:outline-none"
-            />
-            <button
-              onClick={() => setShowHelp(true)}
-              aria-label="Query syntax help"
-              title="Query syntax help"
-              className="w-10 h-[38px] shrink-0 flex items-center justify-center border-l border-border rounded-r-lg text-text-muted text-sm font-medium cursor-pointer transition-colors hover:bg-surface-elevated hover:text-text-primary"
-            >
-              ?
-            </button>
-          </div>
-
-          <div className="mt-3">
-            <FilterBar
-              query={filters.query}
-              onQueryChange={(query) => setFilters({ query })}
-              issues={issues}
-            />
-          </div>
-        </div>
-
-        <div className="flex-1 overflow-y-auto custom-scrollbar">
-          <IssueList
-            issues={filteredIssues}
-            selectedId={selectedIssueId}
-            onSelect={handleSelectIssue}
-          />
-        </div>
-
-        <div className="px-4 md:px-5 py-3 border-t border-border text-xs text-text-muted">
-          {filteredIssues.length} of {issues.length} issues
-        </div>
-      </aside>
-
-      {/* Main content - full width on mobile when issue selected, hidden when no issue on mobile */}
-      <main
-        className={`flex-1 h-screen overflow-y-auto bg-background custom-scrollbar ${
-          selectedIssue ? 'block' : 'hidden md:block'
-        }`}
-      >
-        {selectedIssue ? (
-          <IssueDetail
-            issue={selectedIssue}
-            onBack={() => handleSelectIssue(null)}
-            onEdit={() => setShowEdit(true)}
-            onClose={() => setShowCloseConfirm(true)}
-            onReopen={() => setShowReopenConfirm(true)}
-            onDelete={() => setShowDeleteConfirm(true)}
-          />
-        ) : (
-          <div className="flex items-center justify-center h-full text-text-muted text-[15px]">
-            Select an issue to view details
-          </div>
-        )}
-      </main>
-
-      {/* Modals */}
-      <QueryHelpModal isOpen={showHelp} onClose={() => setShowHelp(false)} />
-
-      <CreateIssueModal
-        isOpen={showCreate}
-        onClose={() => setShowCreate(false)}
-        onCreated={fetchIssues}
-      />
-
-      <EditIssueModal
-        issue={selectedIssue}
-        isOpen={showEdit}
-        onClose={() => setShowEdit(false)}
-        onUpdated={fetchIssues}
-      />
-
-      <ConfirmModal
-        isOpen={showCloseConfirm}
-        title="Close Issue"
-        message={`Are you sure you want to close issue #${selectedIssue?.id}?`}
-        confirmText="Close Issue"
-        onConfirm={handleCloseIssue}
-        onCancel={() => setShowCloseConfirm(false)}
-        isLoading={actionLoading}
-      />
-
-      <ConfirmModal
-        isOpen={showReopenConfirm}
-        title="Reopen Issue"
-        message={`Are you sure you want to reopen issue #${selectedIssue?.id}?`}
-        confirmText="Reopen Issue"
-        onConfirm={handleReopenIssue}
-        onCancel={() => setShowReopenConfirm(false)}
-        isLoading={actionLoading}
-      />
-
-      <ConfirmModal
-        isOpen={showDeleteConfirm}
-        title="Delete Issue"
-        message={`Are you sure you want to permanently delete issue #${selectedIssue?.id}? This action cannot be undone.`}
-        confirmText="Delete"
-        confirmVariant="danger"
-        onConfirm={handleDeleteIssue}
-        onCancel={() => setShowDeleteConfirm(false)}
-        isLoading={isDeleting}
-      />
-    </div>
-  )
-}

package/src/components/Badge.tsx

@@ -1,51 +0,0 @@
-interface BadgeProps {
-  variant: 'status' | 'priority' | 'type' | 'label'
-  value: string
-  className?: string
-}
-
-const statusStyles: Record<string, string> = {
-  open: 'bg-green-500/15 text-green-500',
-  closed: 'bg-gray-500/15 text-gray-400',
-}
-
-const priorityStyles: Record<string, string> = {
-  high: 'bg-priority-high/15 text-red-400',
-  medium: 'bg-priority-medium/15 text-amber-400',
-  low: 'bg-priority-low/15 text-green-400',
-}
-
-const typeStyles: Record<string, string> = {
-  bug: 'bg-red-500/15 text-red-400',
-  feature: 'bg-blue-500/15 text-blue-400',
-  enhancement: 'bg-purple-500/15 text-purple-400',
-}
-
-export function Badge({ variant, value, className = '' }: BadgeProps) {
-  const normalizedValue = value.toLowerCase()
-
-  let style = ''
-
-  switch (variant) {
-    case 'status':
-      style = statusStyles[normalizedValue] || statusStyles.open
-      break
-    case 'priority':
-      style = priorityStyles[normalizedValue] || ''
-      break
-    case 'type':
-      style = typeStyles[normalizedValue] || 'bg-purple-500/15 text-purple-400'
-      break
-    case 'label':
-      style = 'bg-surface-elevated text-text-secondary'
-      break
-  }
-
-  return (
-    <span
-      className={`inline-block px-2 py-0.5 rounded text-[11px] font-medium ${style} ${className}`}
-    >
-      {normalizedValue}
-    </span>
-  )
-}

package/src/components/ConfirmModal.tsx

@@ -1,72 +0,0 @@
-import type React from 'react'
-
-interface ConfirmModalProps {
-  isOpen: boolean
-  title: string
-  message: string
-  confirmText?: string
-  confirmVariant?: 'danger' | 'default'
-  onConfirm: () => void
-  onCancel: () => void
-  isLoading?: boolean
-}
-
-export function ConfirmModal({
-  isOpen,
-  title,
-  message,
-  confirmText = 'Confirm',
-  confirmVariant = 'default',
-  onConfirm,
-  onCancel,
-  isLoading = false,
-}: ConfirmModalProps) {
-  if (!isOpen) return null
-
-  const handleBackdropClick = (e: React.MouseEvent) => {
-    if (e.target === e.currentTarget && !isLoading) {
-      onCancel()
-    }
-  }
-
-  const confirmStyles =
-    confirmVariant === 'danger'
-      ? 'bg-red-500 hover:bg-red-600 text-white'
-      : 'bg-accent hover:bg-accent-hover text-white'
-
-  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-sm shadow-2xl">
-        <div className="px-5 py-4 border-b border-border">
-          <h2 className="text-lg font-semibold text-text-primary">{title}</h2>
-        </div>
-
-        <div className="p-5">
-          <p className="text-sm text-text-secondary mb-6">{message}</p>
-
-          <div className="flex justify-end gap-3">
-            <button
-              type="button"
-              onClick={onCancel}
-              disabled={isLoading}
-              className="px-4 py-2 text-sm text-text-secondary hover:text-text-primary transition-colors disabled:opacity-50"
-            >
-              Cancel
-            </button>
-            <button
-              type="button"
-              onClick={onConfirm}
-              disabled={isLoading}
-              className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 ${confirmStyles}`}
-            >
-              {isLoading ? 'Processing...' : confirmText}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}