Polish the repo home page UI
Assisted-by: Claude Sonnet 4.6 via Claude Code
change yrxszspxuvmwzvkotwtpszkqsuoypnop
commit a603d2ede4e8e87fdda30e042f95119785bf8544
author Alpha Chen <alpha@kejadlen.dev>
date
parent pnxyzzyz
diff --git a/quire-server/src/quire/web/handlers.rs b/quire-server/src/quire/web/handlers.rs
index 1d946b7..7c0672d 100644
--- a/quire-server/src/quire/web/handlers.rs
+++ b/quire-server/src/quire/web/handlers.rs
@@ -61,7 +61,7 @@ pub async fn repo_home(State(quire): State<Quire>, AxumPath(repo): AxumPath<Stri
         tags,
         recent_runs,
         recent_changes,
-        active_section: "readme".to_string(),
+        active_section: "overview".to_string(),
     };
     render(&tmpl)
 }
@@ -163,7 +163,7 @@ fn read_tags(repo: &Repo) -> Vec<TagRow> {
         &[
             "for-each-ref",
             "--format=%(refname:short)|%(committerdate:relative)",
-            "--sort=-version:refname",
+            "--sort=-creatordate",
             "refs/tags/",
         ],
     )
diff --git a/quire-server/static/style.css b/quire-server/static/style.css
index 43ed4d7..8945dbc 100644
--- a/quire-server/static/style.css
+++ b/quire-server/static/style.css
@@ -443,7 +443,7 @@ html.dark {
 
 .readme-content h2 {
   font-family: var(--font-humanist);
-  font-size: 19px;
+  font-size: 22px;
   font-weight: 600;
   margin: 28px 0 10px;
   line-height: 1.3;
@@ -451,12 +451,15 @@ html.dark {
 
 .readme-content h3 {
   font-family: var(--font-humanist);
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 600;
   margin: 20px 0 8px;
 }
 
-.readme-content p { margin: 0 0 16px; }
+.readme-content p {
+  margin: 0 0 16px;
+  font-size: var(--step-1);
+}
 
 .readme-content p:last-child { margin-bottom: 0; }
 
@@ -466,7 +469,7 @@ html.dark {
   padding-left: 22px;
 }
 
-.readme-content li { margin: 5px 0; }
+.readme-content li { margin: 5px 0; font-size: var(--step-1); }
 
 .readme-content code {
   font-family: var(--font-mono);
@@ -617,25 +620,23 @@ html.dark {
 .ci-mini-list {
   font-family: var(--font-mono);
   font-size: 12.5px;
+  display: grid;
+  grid-template-columns: 10px 64px 1fr auto auto;
+  column-gap: 8px;
+  row-gap: 0;
+  align-items: baseline;
   line-height: 1.85;
 }
 
-.ci-mini-row {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-}
+.ci-mini-row { display: contents; }
 
 .ci-mini-link {
   color: var(--ink);
   text-decoration: none;
-  width: 64px;
-  flex-shrink: 0;
 }
 
 .ci-mini-branch {
   color: var(--accent);
-  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/quire-server/templates/_footer.html b/quire-server/templates/_footer.html
index 6c0622a..d05e487 100644
--- a/quire-server/templates/_footer.html
+++ b/quire-server/templates/_footer.html
@@ -1,9 +1,6 @@
 <footer class="page-footer">
   <span>quire v{{ self.version() }}</span>
-  <span>
-    <button class="dark-toggle" @click="toggleDark()" :aria-label="darkMode ? 'switch to light' : 'switch to dark'" title="toggle dark mode">
-      <span x-show="!darkMode">◐</span><span x-show="darkMode">◑</span>
-    </button>
-    <span class="footer-hint">press <kbd>?</kbd> for keyboard shortcuts</span>
-  </span>
+  <button class="dark-toggle" @click="toggleDark()" :aria-label="darkMode ? 'switch to light' : 'switch to dark'" title="toggle dark mode">
+    <span x-show="!darkMode">◐</span><span x-show="darkMode">◑</span>
+  </button>
 </footer>
diff --git a/quire-server/templates/_repo_section_nav.html b/quire-server/templates/_repo_section_nav.html
index ba760aa..d473dbe 100644
--- a/quire-server/templates/_repo_section_nav.html
+++ b/quire-server/templates/_repo_section_nav.html
@@ -1,5 +1,5 @@
 <nav class="repo-section-nav">
-  <a class="section-link {% if active_section == "readme" %}section-link--active{% endif %}" href="/{{ repo }}">readme</a>
+  <a class="section-link {% if active_section == "overview" %}section-link--active{% endif %}" href="/{{ repo }}">overview</a>
   <a class="section-link {% if active_section == "tree" %}section-link--active{% endif %}" href="/{{ repo }}/tree">tree</a>
   <a class="section-link {% if active_section == "log" %}section-link--active{% endif %}" href="/{{ repo }}/log">log</a>
   <a class="section-link {% if active_section == "bookmarks" %}section-link--active{% endif %}" href="/{{ repo }}/bookmarks">bookmarks{% if !bookmarks.is_empty() %} <span class="section-count">{{ bookmarks.len() }}</span>{% endif %}</a>
diff --git a/quire-server/templates/repo_home.html b/quire-server/templates/repo_home.html
index 70ae532..64bddc3 100644
--- a/quire-server/templates/repo_home.html
+++ b/quire-server/templates/repo_home.html
@@ -25,13 +25,9 @@
 
 {# ── Repo identity band ─────────────────────────────────────── #}
 <header class="repo-header">
-  <div class="repo-title-row">
-    <h1 class="repo-name">{{ repo }}</h1>
-  </div>
   <div class="repo-meta-row">
     {% if let Some(h) = head %}
     <span class="repo-meta-item">
-      <span class="repo-meta-label">on</span>
       <span class="bookmark-glyph">※</span>
       <span class="bookmark-name">{{ h.bookmark }}</span>
       <span class="repo-meta-sep">→</span>
@@ -74,10 +70,7 @@
 
     <div class="side-block">
       <div class="side-block-title">Clone</div>
-      <div class="clone-label">https</div>
       <div class="clone-url">https://quire.local/{{ repo }}.git</div>
-      <div class="clone-label">ssh</div>
-      <div class="clone-url">git@quire.local:{{ repo }}.git</div>
     </div>
 
     {% if !bookmarks.is_empty() %}
@@ -106,7 +99,6 @@
       <div class="bookmark-list">
         {% for t in self.tags_preview() %}
         <div class="bookmark-row">
-          <span class="bookmark-kind">tag</span>
           <a class="bookmark-link" href="/{{ repo }}/log">{{ t.name }}</a>
           <span class="bookmark-age">{{ t.age }}</span>
         </div>
@@ -120,7 +112,7 @@
 
     {% if !recent_runs.is_empty() %}
     <div class="side-block">
-      <div class="side-block-title">CI · last {{ recent_runs.len() }}</div>
+      <div class="side-block-title">CI</div>
       <div class="ci-mini-list">
         {% for run in recent_runs %}
         <div class="ci-mini-row">