@miketromba/issy-app 0.1.1 → 0.1.5

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.css

@@ -1,99 +0,0 @@
-@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;
-  box-shadow: none;
-  background-color: var(--color-surface-elevated);
-}
-
-.prose pre code.hljs {
-  background: transparent;
-  padding: 0;
-  font-size: 13px;
-}
-
-.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

@@ -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>