Pre-launch — Gluecron is in final validation. Public signups and git hosting for non-owner users open after launch review.
ccantynz/Gluecron.com
CodeIssuesDiscussionsWikiPull RequestsProjectsCommitsActionsReleasesContributorsPulse● GatesSecuritySettingsDeploymentsPipelineInsightsAgents✨ Explain✨ Ask AI✨ Workspace✨ Spec✨ Tests▓ Debt Map✨ NL Search🏛 Archaeology
Blame · Line-by-line history

components.tsx

Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.

Gluecron.com/src/views/components.tsx
components.tsxBlame492 lines · 1 contributor
Normal viewRaw
fc1817aClaude1import type { FC } from "hono/jsx";
06d5ffeClaude2import { html } from "hono/html";
fc1817aClaude3import type { GitCommit, GitTreeEntry, GitDiffFile } from "../git/repository";
06d5ffeClaude4import type { Repository } from "../db/schema";
fc1817aClaude5
06d5ffeClaude6export const RepoHeader: FC<{
7 owner: string;
8 repo: string;
9 starCount?: number;
10 starred?: boolean;
c81ab7aClaude11 forkCount?: number;
06d5ffeClaude12 currentUser?: string | null;
c81ab7aClaude13 forkedFrom?: string | null;
71cd5ecClaude14 archived?: boolean;
15 isTemplate?: boolean;
16}> = ({
17 owner,
18 repo,
19 starCount,
20 starred,
21 forkCount,
22 currentUser,
23 forkedFrom,
24 archived,
25 isTemplate,
26}) => (
fc1817aClaude27 <div class="repo-header">
c81ab7aClaude28 <div>
29 <div style="display: flex; align-items: center; gap: 8px; font-size: 20px">
30 <a href={`/${owner}`} class="owner">
31 {owner}
32 </a>
33 <span class="separator">/</span>
34 <a href={`/${owner}/${repo}`} class="name">
35 {repo}
36 </a>
71cd5ecClaude37 {archived && (
38 <span
39 class="badge"
40 style="background:var(--bg-secondary);color:var(--text-muted);font-size:11px;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:0.5px"
41 title="Read-only: pushes and new issues/PRs disabled"
42 >
43 Archived
44 </span>
45 )}
46 {isTemplate && (
47 <span
48 class="badge"
49 style="background:var(--bg-secondary);color:var(--accent);font-size:11px;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:0.5px"
50 title="This repository can be used as a template"
51 >
52 Template
53 </span>
54 )}
c81ab7aClaude55 </div>
56 {forkedFrom && (
57 <div style="font-size: 12px; color: var(--text-muted); margin-top: 2px">
58 forked from <a href={`/${forkedFrom}`}>{forkedFrom}</a>
59 </div>
60 )}
61 </div>
06d5ffeClaude62 <div class="repo-header-actions">
c81ab7aClaude63 {currentUser && currentUser !== owner && (
45e31d0Claude64 <form method="post" action={`/${owner}/${repo}/fork`} style="display:inline">
c81ab7aClaude65 <button type="submit" class="star-btn">
66 {"\u2442"} Fork {forkCount !== undefined && forkCount > 0 ? forkCount : ""}
67 </button>
68 </form>
69 )}
06d5ffeClaude70 {starCount !== undefined && (
71 currentUser ? (
45e31d0Claude72 <form method="post" action={`/${owner}/${repo}/star`} style="display:inline">
06d5ffeClaude73 <button
74 type="submit"
75 class={`star-btn${starred ? " starred" : ""}`}
76 >
77 {starred ? "\u2605" : "\u2606"} {starCount}
78 </button>
79 </form>
80 ) : (
81 <span class="star-btn">
82 {"\u2606"} {starCount}
83 </span>
84 )
85 )}
86 </div>
fc1817aClaude87 </div>
88);
89
90export const RepoNav: FC<{
91 owner: string;
92 repo: string;
3ef4c9dClaude93 active:
94 | "code"
95 | "commits"
96 | "issues"
97 | "pulls"
98 | "releases"
eafe8c6Claude99 | "actions"
3ef4c9dClaude100 | "gates"
3cbe3d6Claude101 | "insights"
102 | "explain"
103 | "changelog"
1e162a8Claude104 | "semantic"
105 | "wiki"
0316dbbClaude106 | "projects"
107 | "settings";
fc1817aClaude108}> = ({ owner, repo, active }) => (
109 <div class="repo-nav">
06d5ffeClaude110 <a href={`/${owner}/${repo}`} class={active === "code" ? "active" : ""}>
fc1817aClaude111 Code
112 </a>
79136bbClaude113 <a
114 href={`/${owner}/${repo}/issues`}
115 class={active === "issues" ? "active" : ""}
116 >
117 Issues
118 </a>
1e162a8Claude119 <a
120 href={`/${owner}/${repo}/wiki`}
121 class={active === "wiki" ? "active" : ""}
122 >
123 Wiki
124 </a>
0074234Claude125 <a
126 href={`/${owner}/${repo}/pulls`}
127 class={active === "pulls" ? "active" : ""}
128 >
129 Pull Requests
130 </a>
1e162a8Claude131 <a
132 href={`/${owner}/${repo}/projects`}
133 class={active === "projects" ? "active" : ""}
134 >
135 Projects
136 </a>
fc1817aClaude137 <a
138 href={`/${owner}/${repo}/commits`}
139 class={active === "commits" ? "active" : ""}
140 >
141 Commits
142 </a>
eafe8c6Claude143 <a
144 href={`/${owner}/${repo}/actions`}
145 class={active === "actions" ? "active" : ""}
146 >
147 Actions
148 </a>
3ef4c9dClaude149 <a
150 href={`/${owner}/${repo}/releases`}
151 class={active === "releases" ? "active" : ""}
152 >
153 Releases
154 </a>
155 <a
156 href={`/${owner}/${repo}/gates`}
157 class={active === "gates" ? "active" : ""}
158 >
159 {"\u25CF"} Gates
160 </a>
161 <a
162 href={`/${owner}/${repo}/insights`}
163 class={active === "insights" ? "active" : ""}
164 >
165 Insights
166 </a>
3cbe3d6Claude167 <a
168 href={`/${owner}/${repo}/explain`}
169 class={active === "explain" ? "active" : ""}
170 style="margin-left: auto; color: #bc8cff"
171 >
172 {"\u2728"} Explain
173 </a>
174 <a href={`/${owner}/${repo}/ask`} style="color: #bc8cff">
3ef4c9dClaude175 {"\u2728"} Ask AI
176 </a>
14c3cc8Claude177 <a
178 href={`/${owner}/${repo}/spec`}
179 style="color: #bc8cff"
180 title="Spec to PR — paste a feature spec, AI opens a draft PR"
181 >
182 {"\u2728"} Spec
183 </a>
fc1817aClaude184 </div>
185);
186
06d5ffeClaude187export const BranchSwitcher: FC<{
188 owner: string;
189 repo: string;
190 currentRef: string;
191 branches: string[];
192 pathType: "tree" | "blob" | "commits";
193 subPath?: string;
194}> = ({ owner, repo, currentRef, branches, pathType, subPath }) => {
195 if (branches.length <= 1) {
196 return <div class="branch-selector">{currentRef}</div>;
197 }
198
199 return (
200 <div class="branch-dropdown">
201 <button class="branch-selector" type="button">
202 {currentRef} &#9662;
203 </button>
204 <div class="branch-dropdown-content">
205 {branches.map((branch) => {
206 let href: string;
207 if (pathType === "commits") {
208 href = `/${owner}/${repo}/commits/${branch}`;
209 } else if (subPath) {
210 href = `/${owner}/${repo}/${pathType}/${branch}/${subPath}`;
211 } else {
212 href = `/${owner}/${repo}/tree/${branch}`;
213 }
214 return (
215 <a
216 href={href}
217 class={branch === currentRef ? "active-branch" : ""}
218 >
219 {branch}
220 </a>
221 );
222 })}
223 </div>
224 </div>
225 );
226};
227
fc1817aClaude228export const Breadcrumb: FC<{
229 owner: string;
230 repo: string;
231 ref: string;
232 path: string;
233}> = ({ owner, repo, ref, path }) => {
234 const parts = path.split("/").filter(Boolean);
235 const crumbs: { name: string; href: string }[] = [
236 { name: repo, href: `/${owner}/${repo}/tree/${ref}` },
237 ];
238 let accumulated = "";
239 for (const part of parts) {
240 accumulated += (accumulated ? "/" : "") + part;
241 crumbs.push({
242 name: part,
243 href: `/${owner}/${repo}/tree/${ref}/${accumulated}`,
244 });
245 }
246 return (
247 <div class="breadcrumb">
248 {crumbs.map((crumb, i) => (
249 <>
250 {i > 0 && <span>/</span>}
251 {i === crumbs.length - 1 ? (
252 <strong>{crumb.name}</strong>
253 ) : (
254 <a href={crumb.href}>{crumb.name}</a>
255 )}
256 </>
257 ))}
258 </div>
259 );
260};
261
262export const FileTable: FC<{
263 entries: GitTreeEntry[];
264 owner: string;
265 repo: string;
266 ref: string;
267 path: string;
268}> = ({ entries, owner, repo, ref, path }) => (
269 <table class="file-table">
270 <tbody>
271 {entries.map((entry) => {
272 const fullPath = path ? `${path}/${entry.name}` : entry.name;
273 const href =
274 entry.type === "tree"
275 ? `/${owner}/${repo}/tree/${ref}/${fullPath}`
276 : `/${owner}/${repo}/blob/${ref}/${fullPath}`;
277 return (
278 <tr>
279 <td class="file-icon">
280 {entry.type === "tree" ? "\u{1F4C1}" : "\u{1F4C4}"}
281 </td>
282 <td class="file-name">
283 <a href={href}>{entry.name}</a>
284 </td>
285 <td style="text-align: right; color: var(--text-muted); font-size: 13px;">
286 {entry.size !== undefined ? formatSize(entry.size) : ""}
287 </td>
288 </tr>
289 );
290 })}
291 </tbody>
292 </table>
293);
294
06d5ffeClaude295export const HighlightedCode: FC<{
296 highlightedHtml: string;
297 lineCount: number;
298}> = ({ highlightedHtml, lineCount }) => {
299 const lineNums = Array.from({ length: lineCount }, (_, i) => i + 1);
300 return (
301 <div class="blob-code">
302 <table>
303 <tbody>
304 <tr>
305 <td class="line-num" style="vertical-align: top; padding-top: 0; padding-bottom: 0">
306 <pre style="margin: 0; line-height: 1.6; font-size: 13px">
307 {lineNums.map((n) => (
308 <>
309 <span>{n}</span>
310 {"\n"}
311 </>
312 ))}
313 </pre>
314 </td>
315 <td class="line-content" style="vertical-align: top; padding-top: 0; padding-bottom: 0">
316 <pre style="margin: 0; line-height: 1.6; font-size: 13px">{html([highlightedHtml] as unknown as TemplateStringsArray)}</pre>
317 </td>
318 </tr>
319 </tbody>
320 </table>
321 </div>
322 );
323};
324
325export const PlainCode: FC<{ lines: string[] }> = ({ lines }) => (
326 <div class="blob-code">
327 <table>
328 <tbody>
329 {lines.map((line, i) => (
330 <tr>
331 <td class="line-num">{i + 1}</td>
332 <td class="line-content">{line}</td>
333 </tr>
334 ))}
335 </tbody>
336 </table>
337 </div>
338);
339
fc1817aClaude340export const CommitList: FC<{
341 commits: GitCommit[];
342 owner: string;
343 repo: string;
3951454Claude344 verifications?: Record<string, { verified: boolean; reason: string }>;
345}> = ({ commits, owner, repo, verifications }) => (
fc1817aClaude346 <div class="commit-list">
3951454Claude347 {commits.map((commit) => {
348 const v = verifications?.[commit.sha];
349 return (
350 <div class="commit-item">
351 <div>
352 <div class="commit-message">
353 <a href={`/${owner}/${repo}/commit/${commit.sha}`}>
354 {commit.message}
355 </a>
356 {v?.verified && (
357 <span
358 title="Signed with a registered key"
359 style="margin-left:8px;font-size:10px;padding:1px 6px;border-radius:3px;background:var(--green,#2ea043);color:#fff;text-transform:uppercase;letter-spacing:.4px"
360 >
361 Verified
362 </span>
363 )}
364 </div>
365 <div class="commit-meta">
366 {commit.author} committed {formatRelativeDate(commit.date)}
367 </div>
fc1817aClaude368 </div>
3951454Claude369 <a
370 href={`/${owner}/${repo}/commit/${commit.sha}`}
371 class="commit-sha"
372 >
373 {commit.sha.slice(0, 7)}
374 </a>
fc1817aClaude375 </div>
3951454Claude376 );
377 })}
fc1817aClaude378 </div>
379);
380
381export const DiffView: FC<{ raw: string; files: GitDiffFile[] }> = ({
382 raw,
383 files,
384}) => {
385 const sections = parseDiff(raw);
386
387 return (
388 <div class="diff-view">
389 <div style="margin-bottom: 16px; font-size: 14px; color: var(--text-muted);">
390 Showing{" "}
391 <strong style="color: var(--text)">{files.length}</strong> changed
392 file{files.length !== 1 ? "s" : ""} with{" "}
393 <span class="stat-add">
394 +{files.reduce((s, f) => s + f.additions, 0)}
395 </span>{" "}
396 and{" "}
397 <span class="stat-del">
398 -{files.reduce((s, f) => s + f.deletions, 0)}
399 </span>
400 </div>
401 {sections.map((section) => (
402 <div class="diff-file">
403 <div class="diff-file-header">{section.path}</div>
404 <div class="diff-content">
405 {section.lines.map((line) => {
406 let cls = "line";
407 if (line.startsWith("+")) cls += " line-add";
408 else if (line.startsWith("-")) cls += " line-del";
409 else if (line.startsWith("@@")) cls += " line-hunk";
410 return <span class={cls}>{line + "\n"}</span>;
411 })}
412 </div>
413 </div>
414 ))}
415 </div>
416 );
417};
418
06d5ffeClaude419export const RepoCard: FC<{ repo: Repository; ownerName: string }> = ({
420 repo,
421 ownerName,
422}) => (
423 <div class="card">
424 <h3>
425 <a href={`/${ownerName}/${repo.name}`}>{repo.name}</a>
426 </h3>
427 {repo.description && <p>{repo.description}</p>}
428 <div class="card-meta">
429 {repo.isPrivate && <span class="badge">Private</span>}
430 <span>{"\u2606"} {repo.starCount}</span>
431 {repo.pushedAt && (
432 <span>Updated {formatRelativeDate(repo.pushedAt.toString())}</span>
433 )}
434 </div>
435 </div>
436);
437
fc1817aClaude438function parseDiff(raw: string): Array<{ path: string; lines: string[] }> {
439 const sections: Array<{ path: string; lines: string[] }> = [];
440 const diffRegex = /^diff --git a\/(.+?) b\/.+$/;
441 let current: { path: string; lines: string[] } | null = null;
442
443 for (const line of raw.split("\n")) {
444 const match = line.match(diffRegex);
445 if (match) {
446 if (current) sections.push(current);
447 current = { path: match[1], lines: [] };
448 continue;
449 }
450 if (current && !line.startsWith("diff --git")) {
451 if (
452 line.startsWith("index ") ||
453 line.startsWith("--- ") ||
454 line.startsWith("+++ ") ||
455 line.startsWith("new file") ||
456 line.startsWith("deleted file") ||
457 line.startsWith("old mode") ||
458 line.startsWith("new mode")
459 ) {
460 continue;
461 }
462 current.lines.push(line);
463 }
464 }
465 if (current) sections.push(current);
466 return sections;
467}
468
469function formatSize(bytes: number): string {
470 if (bytes < 1024) return `${bytes} B`;
471 if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
472 return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
473}
474
475function formatRelativeDate(dateStr: string): string {
476 const date = new Date(dateStr);
477 const now = new Date();
478 const diffMs = now.getTime() - date.getTime();
479 const diffMins = Math.floor(diffMs / 60000);
480 if (diffMins < 1) return "just now";
481 if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? "s" : ""} ago`;
482 const diffHours = Math.floor(diffMins / 60);
483 if (diffHours < 24)
484 return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`;
485 const diffDays = Math.floor(diffHours / 24);
486 if (diffDays < 30) return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`;
487 return date.toLocaleDateString("en-US", {
488 month: "short",
489 day: "numeric",
490 year: "numeric",
491 });
492}