feat: complete workspace, triage, outliner and sharing overhaul (tasks 1-26)

frontend/src/lib/markdown.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+
+/**
+ * Parses inline markdown:
+ * - **bold** or __bold__
+ * - *italic* or _italic_
+ * - ~~strikethrough~~
+ * - `code`
+ * - [label](url)
+ */
+export function renderInlineMarkdown(text: string): React.ReactNode[] {
+  if (!text) return [];
+
+  const regex = /(`[^`]+`|\*\*[^*]+\*\*|__[^_]+__|~~[^~]+~~|\*[^*]+\*|_[^_]+_|\[([^\]]+)\]\(([^)]+)\))/g;
+
+  const elements: React.ReactNode[] = [];
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      elements.push(text.slice(lastIndex, match.index));
+    }
+    const token = match[0];
+    const key = `${match.index}-${token}`;
+
+    if (token.startsWith('`') && token.endsWith('`')) {
+      elements.push(
+        <code key={key} className="px-1.5 py-0.5 rounded bg-panel-elevated text-accent font-mono text-[0.9em] border border-border/50">
+          {token.slice(1, -1)}
+        </code>
+      );
+    } else if (
+      (token.startsWith('**') && token.endsWith('**')) ||
+      (token.startsWith('__') && token.endsWith('__'))
+    ) {
+      elements.push(
+        <strong key={key} className="font-semibold text-main">
+          {token.slice(2, -2)}
+        </strong>
+      );
+    } else if (
+      (token.startsWith('*') && token.endsWith('*')) ||
+      (token.startsWith('_') && token.endsWith('_'))
+    ) {
+      elements.push(
+        <em key={key} className="italic text-main/90">
+          {token.slice(1, -1)}
+        </em>
+      );
+    } else if (token.startsWith('~~') && token.endsWith('~~')) {
+      elements.push(
+        <del key={key} className="line-through text-muted/80">
+          {token.slice(2, -2)}
+        </del>
+      );
+    } else if (token.startsWith('[') && match[2] && match[3]) {
+      const label = match[2];
+      const url = match[3];
+      elements.push(
+        <a
+          key={key}
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-accent underline hover:opacity-80 transition-opacity"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {label}
+        </a>
+      );
+    } else {
+      elements.push(token);
+    }
+
+    lastIndex = regex.lastIndex;
+  }
+
+  if (lastIndex < text.length) {
+    elements.push(text.slice(lastIndex));
+  }
+
+  return elements;
+}
+
+export function MarkdownViewer({ content, className = '' }: { content: string; className?: string }) {
+  if (!content) return null;
+
+  const lines = content.split('\n');
+  const renderedNodes: React.ReactNode[] = [];
+  let inCodeBlock = false;
+  let codeBlockLines: string[] = [];
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    if (line.trim().startsWith('```')) {
+      if (inCodeBlock) {
+        renderedNodes.push(
+          <pre key={`code-${i}`} className="p-2.5 my-2 rounded bg-panel-elevated text-accent font-mono text-xs overflow-x-auto border border-border/60">
+            <code>{codeBlockLines.join('\n')}</code>
+          </pre>
+        );
+        codeBlockLines = [];
+        inCodeBlock = false;
+      } else {
+        inCodeBlock = true;
+        codeBlockLines = [];
+      }
+      continue;
+    }
+
+    if (inCodeBlock) {
+      codeBlockLines.push(line);
+      continue;
+    }
+
+    const trimmed = line.trim();
+
+    if (trimmed.startsWith('### ')) {
+      renderedNodes.push(
+        <h3 key={i} className="text-sm font-bold text-main mt-2 mb-1">
+          {renderInlineMarkdown(trimmed.slice(4))}
+        </h3>
+      );
+    } else if (trimmed.startsWith('## ')) {
+      renderedNodes.push(
+        <h2 key={i} className="text-base font-bold text-main mt-3 mb-1">
+          {renderInlineMarkdown(trimmed.slice(3))}
+        </h2>
+      );
+    } else if (trimmed.startsWith('# ')) {
+      renderedNodes.push(
+        <h1 key={i} className="text-lg font-bold text-main mt-3 mb-1.5">
+          {renderInlineMarkdown(trimmed.slice(2))}
+        </h1>
+      );
+    } else if (trimmed.startsWith('> ')) {
+      renderedNodes.push(
+        <blockquote key={i} className="border-l-2 border-accent pl-2.5 my-1 text-muted italic">
+          {renderInlineMarkdown(trimmed.slice(2))}
+        </blockquote>
+      );
+    } else if (trimmed.startsWith('- ') || trimmed.startsWith('* ')) {
+      renderedNodes.push(
+        <div key={i} className="flex items-start gap-1.5 my-0.5">
+          <span className="text-accent mt-0.5">•</span>
+          <span className="flex-1 text-main">{renderInlineMarkdown(trimmed.slice(2))}</span>
+        </div>
+      );
+    } else if (/^\d+\.\s/.test(trimmed)) {
+      const matchNum = trimmed.match(/^(\d+)\.\s(.*)$/);
+      renderedNodes.push(
+        <div key={i} className="flex items-start gap-1.5 my-0.5">
+          <span className="text-muted text-[11px] font-mono mt-0.5">{matchNum ? matchNum[1] + '.' : '•'}</span>
+          <span className="flex-1 text-main">{renderInlineMarkdown(matchNum ? matchNum[2] : trimmed)}</span>
+        </div>
+      );
+    } else if (trimmed === '') {
+      renderedNodes.push(<div key={i} className="h-2" />);
+    } else {
+      renderedNodes.push(
+        <div key={i} className="my-0.5 text-main leading-relaxed">
+          {renderInlineMarkdown(line)}
+        </div>
+      );
+    }
+  }
+
+  if (inCodeBlock && codeBlockLines.length > 0) {
+    renderedNodes.push(
+      <pre key="code-end" className="p-2.5 my-2 rounded bg-panel-elevated text-accent font-mono text-xs overflow-x-auto border border-border/60">
+        <code>{codeBlockLines.join('\n')}</code>
+      </pre>
+    );
+  }
+
+  return <div className={`markdown-body text-xs ${className}`}>{renderedNodes}</div>;
+}