@miketromba/issy-app 0.1.1 → 0.1.4

package/src/components/IssueDetail.tsx

@@ -1,184 +0,0 @@
-import hljs from 'highlight.js'
-import { marked, Renderer } from 'marked'
-import 'highlight.js/styles/github-dark.css'
-import { formatDisplayDate, formatFullDate } from '@miketromba/issy-core'
-import type { Issue } from '../App'
-import { Badge } from './Badge'
-
-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 = ({ 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

@@ -1,73 +0,0 @@
-import { formatDisplayDate, formatFullDate } from '@miketromba/issy-core'
-import type { Issue } from '../App'
-import { Badge } from './Badge'
-
-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>
-        )
-      })}
-    </>
-  )
-}

package/src/components/QueryHelpModal.tsx

@@ -1,156 +0,0 @@
-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

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

package/src/index.html

@@ -1,12 +0,0 @@
-<!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

@@ -1,163 +0,0 @@
-/**
- * issy API Server
- *
- * Provides REST API endpoints for the issue tracking system.
- * Uses the shared library for all issue operations.
- */
-
-import { resolve } from 'node:path'
-// Import shared library
-import {
-  type CreateIssueInput,
-  closeIssue,
-  createIssue,
-  deleteIssue,
-  filterAndSearchIssues,
-  filterByQuery,
-  getAllIssues,
-  getIssue,
-  reopenIssue,
-  setIssuesDir,
-  type UpdateIssueInput,
-  updateIssue,
-} from '@miketromba/issy-core'
-import { serve } from 'bun'
-import index from './index.html'
-
-// 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}`)