c55f360a
Simplify web UI: top-bar nav, short IDs, fluid width
a73x 2026-03-31 16:08
- Replace sidebar with top-bar navigation (site / repo / commits tree patches issues) - Show short IDs (8 chars) everywhere instead of full hashes - Fluid content width up to 1200px max - Minimal monospace CSS, no theme system - Clean up stale CSS var references Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
diff --git a/src/server/http/templates/base.html b/src/server/http/templates/base.html index 6718f03..0073c07 100644 --- a/src/server/http/templates/base.html +++ b/src/server/http/templates/base.html @@ -4,18 +4,37 @@ <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>{% block title %}{{ site_title }}{% endblock %}</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: monospace; font-size: 14px; line-height: 1.6; } a { color: #0366d6; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 4px 8px; } th { font-weight: normal; color: #666; } td { border-top: 1px solid #eee; } pre { padding: 8px; background: #f8f8f8; overflow-x: auto; } .badge { font-size: 11px; color: #666; } .status-open { color: green; } .status-closed { color: red; } .diff-add { color: green; } .diff-del { color: red; } .diff-hunk { color: #666; } .diff-file { font-weight: bold; border-top: 1px solid #ccc; padding-top: 8px; } .header { padding: 8px 16px; border-bottom: 1px solid #ccc; display: flex; align-items: baseline; gap: 16px; } .header a { text-decoration: none; } .header .site { font-weight: bold; } .header nav { display: flex; gap: 12px; } .header nav a.active { font-weight: bold; } .content { padding: 16px; max-width: 1200px; margin: 0 auto; } </style> </head> <body> <div class="header"> <a href="/">{{ site_title }}</a> <div>{% block header_right %}{% endblock %}</div> <a class="site" href="/">{{ site_title }}</a> {% block nav %}{% endblock %} </div> <div class="layout"> <div class="content"> {% block body %}{% endblock %} </div> <div class="content"> {% block body %}{% endblock %} </div> </body> </html> diff --git a/src/server/http/templates/blob.html b/src/server/http/templates/blob.html index 148f187..b1ea4bb 100644 --- a/src/server/http/templates/blob.html +++ b/src/server/http/templates/blob.html @@ -4,9 +4,9 @@ {% block content %} <h2>{{ file_path }}</h2> <p style="color: var(--text-muted);">Ref: <span class="mono">{{ ref_name }}</span> Size: {{ size_display }}</p> <p style="color: #666;">Ref: <span class="mono">{{ ref_name }}</span> Size: {{ size_display }}</p> {% if is_binary %} <p style="color: var(--text-muted); font-style: italic;">Binary file</p> <p style="color: #666; font-style: italic;">Binary file</p> {% else %} <pre>{{ content }}</pre> {% endif %} diff --git a/src/server/http/templates/commits.html b/src/server/http/templates/commits.html index fd113b5..5a525b6 100644 --- a/src/server/http/templates/commits.html +++ b/src/server/http/templates/commits.html @@ -5,7 +5,7 @@ {% block content %} <h2>Commits</h2> {% if commits.is_empty() %} <p style="color: var(--text-muted);">No commits yet.</p> <p style="color: #666;">No commits yet.</p> {% else %} <table> <thead> @@ -21,8 +21,8 @@ <tr> <td class="mono"><a href="/{{ repo_name }}/diff/{{ c.id }}">{{ c.short_id }}</a></td> <td>{{ c.summary }}</td> <td style="color: var(--text-muted);">{{ c.author }}</td> <td class="mono" style="color: var(--text-muted);">{{ c.date }}</td> <td style="color: #666;">{{ c.author }}</td> <td class="mono" style="color: #666;">{{ c.date }}</td> </tr> {% endfor %} </tbody> diff --git a/src/server/http/templates/diff.html b/src/server/http/templates/diff.html index a41eab3..966615f 100644 --- a/src/server/http/templates/diff.html +++ b/src/server/http/templates/diff.html @@ -5,9 +5,9 @@ {% block content %} <h2 class="mono">{{ short_id }}</h2> <p><strong>{{ summary }}</strong></p> <p style="color: var(--text-muted);">{{ author }} {{ date }}</p> <p style="color: #666;">{{ author }} {{ date }}</p> {% if !body.is_empty() %} <pre style="background: var(--bg-code, #f6f8fa); padding: 12px; border-radius: 4px; white-space: pre-wrap;">{{ body }}</pre> <pre style="background: #f8f8f8; padding: 12px; border-radius: 4px; white-space: pre-wrap;">{{ body }}</pre> {% endif %} <hr style="margin: 16px 0;"> <pre class="diff">{% for line in diff_lines %}{% if line.kind == "add" %}<span class="diff-add">{{ line.text }}</span>{% elif line.kind == "del" %}<span class="diff-del">{{ line.text }}</span>{% elif line.kind == "hunk" %}<span class="diff-hunk">{{ line.text }}</span>{% elif line.kind == "file" %}<span class="diff-file">{{ line.text }}</span>{% else %}{{ line.text }}{% endif %}{% endfor %}</pre> diff --git a/src/server/http/templates/error.html b/src/server/http/templates/error.html index 7e55631..49f4aba 100644 --- a/src/server/http/templates/error.html +++ b/src/server/http/templates/error.html @@ -4,7 +4,7 @@ {% block body %} <div style="max-width: 800px; margin: 80px auto; text-align: center;"> <div style="font-size: 72px; font-weight: 700; color: var(--text-muted); line-height: 1;">{{ status_code }}</div> <p style="color: var(--text-muted); margin-top: 16px; font-size: 16px;">{{ message }}</p> <div style="font-size: 72px; font-weight: 700; color: #666; line-height: 1;">{{ status_code }}</div> <p style="color: #666; margin-top: 16px; font-size: 16px;">{{ message }}</p> </div> {% endblock %} diff --git a/src/server/http/templates/issue_detail.html b/src/server/http/templates/issue_detail.html index c00a831..36c2f0c 100644 --- a/src/server/http/templates/issue_detail.html +++ b/src/server/http/templates/issue_detail.html @@ -9,25 +9,25 @@ by <strong>{{ issue.author }}</strong> </p> {% if !issue.labels.is_empty() %} <p style="color: var(--text-muted);">Labels: {{ issue.labels }}</p> <p style="color: #666;">Labels: {{ issue.labels }}</p> {% endif %} {% if !issue.assignees.is_empty() %} <p style="color: var(--text-muted);">Assignees: {{ issue.assignees }}</p> <p style="color: #666;">Assignees: {{ issue.assignees }}</p> {% endif %} {% if !issue.body.is_empty() %} <pre style="background: var(--bg-code, #f6f8fa); padding: 12px; border-radius: 4px; white-space: pre-wrap;">{{ issue.body }}</pre> <pre style="background: #f8f8f8; padding: 12px; border-radius: 4px; white-space: pre-wrap;">{{ issue.body }}</pre> {% endif %} {% if let Some(reason) = issue.close_reason %} <p style="color: var(--text-muted);">Close reason: {{ reason }}</p> <p style="color: #666;">Close reason: {{ reason }}</p> {% endif %} {% if !issue.comments.is_empty() %} <h3>Comments</h3> {% for comment in issue.comments %} <div style="border: 1px solid var(--border, #ddd); border-radius: 4px; padding: 12px; margin-bottom: 12px;"> <div style="border: 1px solid #ddd; border-radius: 4px; padding: 12px; margin-bottom: 12px;"> <p style="margin: 0 0 8px 0;"> <strong>{{ comment.author }}</strong> <span class="mono" style="color: var(--text-muted); font-size: 0.85em;">{{ comment.timestamp }}</span> <span class="mono" style="color: #666; font-size: 0.85em;">{{ comment.timestamp }}</span> </p> <pre style="margin: 0; white-space: pre-wrap;">{{ comment.body }}</pre> </div> diff --git a/src/server/http/templates/issues.html b/src/server/http/templates/issues.html index 1048dea..211f297 100644 --- a/src/server/http/templates/issues.html +++ b/src/server/http/templates/issues.html @@ -5,7 +5,7 @@ {% block content %} <h2>Issues</h2> {% if issues.is_empty() %} <p style="color: var(--text-muted);">No issues.</p> <p style="color: #666;">No issues.</p> {% else %} <table> <thead> @@ -24,9 +24,9 @@ <td class="mono"><a href="/{{ repo_name }}/issues/{{ i.id }}">{{ i.short_id }}</a></td> <td><span class="status-{{ i.status }}">{{ i.status }}</span></td> <td><a href="/{{ repo_name }}/issues/{{ i.id }}">{{ i.title }}</a></td> <td style="color: var(--text-muted);">{{ i.author }}</td> <td style="color: var(--text-muted);">{{ i.labels }}</td> <td class="mono" style="color: var(--text-muted);">{{ i.updated }}</td> <td style="color: #666;">{{ i.author }}</td> <td style="color: #666;">{{ i.labels }}</td> <td class="mono" style="color: #666;">{{ i.updated }}</td> </tr> {% endfor %} </tbody> diff --git a/src/server/http/templates/patch_detail.html b/src/server/http/templates/patch_detail.html index 0bf3834..6f16d78 100644 --- a/src/server/http/templates/patch_detail.html +++ b/src/server/http/templates/patch_detail.html @@ -7,15 +7,15 @@ <p> <span class="status-{{ patch.status }}">{{ patch.status }}</span> by <strong>{{ patch.author }}</strong> <span class="mono" style="color: var(--text-muted);">{{ patch.branch }} → {{ patch.base_ref }}</span> <span class="mono" style="color: #666;">{{ patch.branch }} → {{ patch.base_ref }}</span> </p> {% if !patch.body.is_empty() %} <pre style="background: var(--bg-code, #f6f8fa); padding: 12px; border-radius: 4px; white-space: pre-wrap;">{{ patch.body }}</pre> <pre style="background: #f8f8f8; padding: 12px; border-radius: 4px; white-space: pre-wrap;">{{ patch.body }}</pre> {% endif %} <h3>Revisions</h3> {% if patch.revisions.is_empty() %} <p style="color: var(--text-muted);">No revisions.</p> <p style="color: #666;">No revisions.</p> {% else %} <table> <thead> @@ -30,8 +30,8 @@ {% for rev in patch.revisions %} <tr> <td>{{ rev.number }}</td> <td class="mono"><a href="/{{ repo_name }}/diff/{{ rev.commit }}">{{ rev.commit }}</a></td> <td class="mono" style="color: var(--text-muted);">{{ rev.timestamp }}</td> <td class="mono"><a href="/{{ repo_name }}/diff/{{ rev.commit }}">{{ rev.commit[..8] }}</a></td> <td class="mono" style="color: #666;">{{ rev.timestamp }}</td> <td>{% if let Some(body) = rev.body %}{{ body }}{% endif %}</td> </tr> {% endfor %} @@ -42,11 +42,11 @@ {% if !patch.reviews.is_empty() %} <h3>Reviews</h3> {% for review in patch.reviews %} <div style="border: 1px solid var(--border, #ddd); border-radius: 4px; padding: 12px; margin-bottom: 12px;"> <div style="border: 1px solid #ddd; border-radius: 4px; padding: 12px; margin-bottom: 12px;"> <p style="margin: 0 0 8px 0;"> <strong>{{ review.author }}</strong> <span class="status-{{ review.verdict }}">{{ review.verdict }}</span> <span class="mono" style="color: var(--text-muted); font-size: 0.85em;">{{ review.timestamp }}</span> <span class="mono" style="color: #666; font-size: 0.85em;">{{ review.timestamp }}</span> {% if let Some(rev) = review.revision %} rev {{ rev }}{% endif %} </p> {% if !review.body.is_empty() %} @@ -59,11 +59,11 @@ {% if !patch.inline_comments.is_empty() %} <h3>Inline Comments</h3> {% for ic in patch.inline_comments %} <div style="border: 1px solid var(--border, #ddd); border-radius: 4px; padding: 12px; margin-bottom: 12px;"> <div style="border: 1px solid #ddd; border-radius: 4px; padding: 12px; margin-bottom: 12px;"> <p style="margin: 0 0 8px 0;"> <strong>{{ ic.author }}</strong> <span class="mono" style="color: var(--text-muted);">{{ ic.file }}:{{ ic.line }}</span> <span class="mono" style="color: var(--text-muted); font-size: 0.85em;">{{ ic.timestamp }}</span> <span class="mono" style="color: #666;">{{ ic.file }}:{{ ic.line }}</span> <span class="mono" style="color: #666; font-size: 0.85em;">{{ ic.timestamp }}</span> {% if let Some(rev) = ic.revision %} rev {{ rev }}{% endif %} </p> <pre style="margin: 0; white-space: pre-wrap;">{{ ic.body }}</pre> @@ -74,10 +74,10 @@ {% if !patch.comments.is_empty() %} <h3>Comments</h3> {% for comment in patch.comments %} <div style="border: 1px solid var(--border, #ddd); border-radius: 4px; padding: 12px; margin-bottom: 12px;"> <div style="border: 1px solid #ddd; border-radius: 4px; padding: 12px; margin-bottom: 12px;"> <p style="margin: 0 0 8px 0;"> <strong>{{ comment.author }}</strong> <span class="mono" style="color: var(--text-muted); font-size: 0.85em;">{{ comment.timestamp }}</span> <span class="mono" style="color: #666; font-size: 0.85em;">{{ comment.timestamp }}</span> </p> <pre style="margin: 0; white-space: pre-wrap;">{{ comment.body }}</pre> </div> diff --git a/src/server/http/templates/patches.html b/src/server/http/templates/patches.html index d946c85..cd4b166 100644 --- a/src/server/http/templates/patches.html +++ b/src/server/http/templates/patches.html @@ -5,7 +5,7 @@ {% block content %} <h2>Patches</h2> {% if patches.is_empty() %} <p style="color: var(--text-muted);">No patches.</p> <p style="color: #666;">No patches.</p> {% else %} <table> <thead> @@ -24,9 +24,9 @@ <td class="mono"><a href="/{{ repo_name }}/patches/{{ p.id }}">{{ p.short_id }}</a></td> <td><span class="status-{{ p.status }}">{{ p.status }}</span></td> <td><a href="/{{ repo_name }}/patches/{{ p.id }}">{{ p.title }}</a></td> <td style="color: var(--text-muted);">{{ p.author }}</td> <td class="mono" style="color: var(--text-muted);">{{ p.branch }}</td> <td class="mono" style="color: var(--text-muted);">{{ p.updated }}</td> <td style="color: #666;">{{ p.author }}</td> <td class="mono" style="color: #666;">{{ p.branch }}</td> <td class="mono" style="color: #666;">{{ p.updated }}</td> </tr> {% endfor %} </tbody> diff --git a/src/server/http/templates/repo_base.html b/src/server/http/templates/repo_base.html index 96bda82..f15bbd9 100644 --- a/src/server/http/templates/repo_base.html +++ b/src/server/http/templates/repo_base.html @@ -1,20 +1,15 @@ {% extends "base.html" %} {% block header_right %} <span class="repo-name">{{ repo_name }}</span> {% block nav %} <nav> <a href="/{{ repo_name }}">{{ repo_name }}</a> / <a href="/{{ repo_name }}/commits"{% if active_section == "commits" %} class="active"{% endif %}>commits</a> <a href="/{{ repo_name }}/tree"{% if active_section == "tree" %} class="active"{% endif %}>tree</a> <a href="/{{ repo_name }}/patches"{% if active_section == "patches" %} class="active"{% endif %}>patches ({{ open_patches }})</a> <a href="/{{ repo_name }}/issues"{% if active_section == "issues" %} class="active"{% endif %}>issues ({{ open_issues }})</a> </nav> {% endblock %} {% block body %} <div class="layout"> <nav class="sidebar"> <a href="/{{ repo_name }}/commits"{% if active_section == "commits" %} class="active"{% endif %}>commits</a> <a href="/{{ repo_name }}/tree"{% if active_section == "tree" %} class="active"{% endif %}>tree</a> <div class="divider"></div> <a href="/{{ repo_name }}/patches"{% if active_section == "patches" %} class="active"{% endif %}>patches <span class="badge">{{ open_patches }}</span></a> <a href="/{{ repo_name }}/issues"{% if active_section == "issues" %} class="active"{% endif %}>issues <span class="badge">{{ open_issues }}</span></a> </nav> <div class="content"> {% block content %}{% endblock %} </div> </div> {% block content %}{% endblock %} {% endblock %} diff --git a/src/server/http/templates/repo_list.html b/src/server/http/templates/repo_list.html index fef031d..dc6bdb3 100644 --- a/src/server/http/templates/repo_list.html +++ b/src/server/http/templates/repo_list.html @@ -1,10 +1,10 @@ {% extends "base.html" %} {% block body %} <div style="max-width: 800px; margin: 0 auto;"> <div> <h2 style="margin-top: 0;">Repositories</h2> {% if repos.is_empty() %} <p style="color: var(--text-muted);">No repositories found.</p> <p style="color: #666;">No repositories found.</p> {% else %} <table> <thead> @@ -18,8 +18,8 @@ {% for repo in repos %} <tr> <td><a href="/{{ repo.name }}">{{ repo.name }}</a></td> <td style="color: var(--text-muted);">{{ repo.description }}</td> <td class="mono" style="color: var(--text-muted);">{{ repo.last_commit }}</td> <td style="color: #666;">{{ repo.description }}</td> <td class="mono" style="color: #666;">{{ repo.last_commit }}</td> </tr> {% endfor %} </tbody> diff --git a/src/server/http/templates/repo_overview.html b/src/server/http/templates/repo_overview.html index 5afd167..f52b1f9 100644 --- a/src/server/http/templates/repo_overview.html +++ b/src/server/http/templates/repo_overview.html @@ -7,7 +7,7 @@ <div> <h3 style="margin-top: 0;">Open Patches</h3> {% if patches.is_empty() %} <p style="color: var(--text-muted);">No open patches.</p> <p style="color: #666;">No open patches.</p> {% else %} <table> <thead> @@ -20,9 +20,9 @@ <tbody> {% for patch in patches %} <tr> <td class="mono"><a href="/{{ repo_name }}/patches/{{ patch.id }}">{{ patch.id }}</a></td> <td class="mono"><a href="/{{ repo_name }}/patches/{{ patch.id }}">{{ patch.id[..8] }}</a></td> <td><a href="/{{ repo_name }}/patches/{{ patch.id }}">{{ patch.title }}</a></td> <td style="color: var(--text-muted);">{{ patch.author }}</td> <td style="color: #666;">{{ patch.author }}</td> </tr> {% endfor %} </tbody> @@ -33,7 +33,7 @@ <div> <h3 style="margin-top: 0;">Open Issues</h3> {% if issues.is_empty() %} <p style="color: var(--text-muted);">No open issues.</p> <p style="color: #666;">No open issues.</p> {% else %} <table> <thead> @@ -46,9 +46,9 @@ <tbody> {% for issue in issues %} <tr> <td class="mono"><a href="/{{ repo_name }}/issues/{{ issue.id }}">{{ issue.id }}</a></td> <td class="mono"><a href="/{{ repo_name }}/issues/{{ issue.id }}">{{ issue.id[..8] }}</a></td> <td><a href="/{{ repo_name }}/issues/{{ issue.id }}">{{ issue.title }}</a></td> <td style="color: var(--text-muted);">{{ issue.author }}</td> <td style="color: #666;">{{ issue.author }}</td> </tr> {% endfor %} </tbody> @@ -60,7 +60,7 @@ <div> <h3>Recent Commits</h3> {% if commits.is_empty() %} <p style="color: var(--text-muted);">No commits yet.</p> <p style="color: #666;">No commits yet.</p> {% else %} <table> <thead> @@ -76,8 +76,8 @@ <tr> <td class="mono"><a href="/{{ repo_name }}/diff/{{ commit.id }}">{{ commit.short_id }}</a></td> <td>{{ commit.summary }}</td> <td style="color: var(--text-muted);">{{ commit.author }}</td> <td class="mono" style="color: var(--text-muted);">{{ commit.date }}</td> <td style="color: #666;">{{ commit.author }}</td> <td class="mono" style="color: #666;">{{ commit.date }}</td> </tr> {% endfor %} </tbody> diff --git a/src/server/http/templates/tree.html b/src/server/http/templates/tree.html index 487b650..9474f41 100644 --- a/src/server/http/templates/tree.html +++ b/src/server/http/templates/tree.html @@ -15,17 +15,17 @@ {% if show_parent %} <tr> <td class="mono"><a href="/{{ repo_name }}/tree/{{ ref_name }}/{{ parent_path }}">..</a></td> <td style="color: var(--text-muted);">dir</td> <td style="color: #666;">dir</td> </tr> {% endif %} {% for entry in entries %} <tr> {% if entry.is_dir %} <td class="mono"><a href="/{{ repo_name }}/tree/{{ ref_name }}/{{ entry.full_path }}">{{ entry.name }}/</a></td> <td style="color: var(--text-muted);">dir</td> <td style="color: #666;">dir</td> {% else %} <td class="mono"><a href="/{{ repo_name }}/blob/{{ ref_name }}/{{ entry.full_path }}">{{ entry.name }}</a></td> <td style="color: var(--text-muted);">file</td> <td style="color: #666;">file</td> {% endif %} </tr> {% endfor %}