Skip to content

Commit bc70e46

Browse files
ymansurozerclaude
ymansurozer
and
claude
committed
refactor: drop the Overview file list
The sidebar (tree and walkthrough, including the Skimmed group) already lists every file, so repeating them on the guide Overview page was redundant — and per-file orientation renders in each file's header anyway. The Overview is now just the title, overview prose, optional PR description, and Start Review, and the file-list markup, its skim-group duplicate, and their CSS go with it. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015jcfPg9g4TTWQksf8vhHps
1 parent 5b2e67d commit bc70e46

2 files changed

Lines changed: 7 additions & 285 deletions

File tree

‎src/ui/guide.ts‎

Lines changed: 7 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
import { S, $, esc } from "./store";
22
import { fileReviewState, fileFinished } from "./changes";
33
import { navFileOrder, nextUnreviewed, wrapNextTarget, wrapPrevTarget } from "./seek";
4-
import {
5-
fileFullySkimmed,
6-
fileSkimReason,
7-
isFileSkim,
8-
isSkimGroupExpanded,
9-
toggleSkimGroup,
10-
} from "./skim";
11-
import { renderMarkdown, renderMarkdownInline } from "./markdown";
4+
import { fileFullySkimmed, isSkimGroupExpanded } from "./skim";
5+
import { renderMarkdown } from "./markdown";
126
import { lineStats, walkthroughGroups, walkRows } from "./walkthrough";
13-
import type { WalkGroup, WalkRow, WalkFile } from "./walkthrough";
7+
import type { WalkGroup, WalkRow } from "./walkthrough";
148

159
// Whether the current review carries an agent-attached guide with at least one file.
1610
export function hasGuide(): boolean {
@@ -211,100 +205,21 @@ export function guideStale(): boolean {
211205
);
212206
}
213207

214-
// The short skim reason for a fully-skimmed file, shown in the collapsed group: the file-level
215-
// skimReason, else the distinct block reasons joined. "" when the agent gave none.
216-
function skimReasonFor(path: string): string {
217-
if (isFileSkim(path)) return fileSkimReason(path);
218-
const reasons = [
219-
...new Set(
220-
(S.state?.changes ?? [])
221-
.filter((c) => c.path === path && c.skim?.reason)
222-
.map((c) => c.skim!.reason!.trim())
223-
.filter(Boolean),
224-
),
225-
];
226-
return reasons.join(", ");
227-
}
228-
229-
// One file row in the Overview list: path (dimmed dir, bright basename) + flag icon +
230-
// ±counts + a read-only review-state badge on top, the guide's orientation beneath.
231-
// Read-only by design — decisions stay where the diff is visible; clicking opens the file.
232-
function overviewFileRow(f: WalkFile): string {
233-
const badge =
234-
f.state === "approved"
235-
? `<svg class="ic badge approved" title="Approved"><use href="#gly-check"></use></svg>`
236-
: f.state === "changes-requested"
237-
? `<svg class="ic badge changes" title="Changes requested"><use href="#gly-flag"></use></svg>`
238-
: `<svg class="ic badge pending" title="Pending review"><use href="#gly-dot"></use></svg>`;
239-
return `<button class="go-file" data-i="${f.fileIndex}">
240-
<span class="go-file-top">
241-
<span class="go-file-path"><span class="fdir">${esc(f.dir)}</span><span class="fname">${esc(f.name)}</span></span>
242-
${f.flag ? `<svg class="ic crit" title="${esc(f.flag)}"><use href="#gly-flag"></use></svg>` : ""}
243-
<span class="go-file-stats">${f.added ? `<i class="add">+${f.added}</i>` : ""}${f.removed ? `<i class="del">−${f.removed}</i>` : ""}${badge}</span>
244-
</span>
245-
${f.orientation ? `<span class="go-file-sum">${renderMarkdownInline(f.orientation)}</span>` : ""}
246-
</button>`;
247-
}
248-
249-
// A member of the collapsed Skimmed group: muted, no state badge (out of the flow), path + its
250-
// skim reason. Clicking opens it like any file (the file/block skim strips render as issue 06).
251-
function overviewSkimRow(f: WalkFile): string {
252-
const reason = skimReasonFor(f.path);
253-
return `<button class="go-file go-file-skim" data-i="${f.fileIndex}">
254-
<span class="go-file-top">
255-
<span class="go-file-path"><span class="fdir">${esc(f.dir)}</span><span class="fname">${esc(f.name)}</span></span>
256-
<span class="go-file-stats"><svg class="ic skim" title="Skimmed"><use href="#gly-collapse-all"></use></svg></span>
257-
</span>
258-
${reason ? `<span class="go-file-sum">${esc(reason)}</span>` : ""}
259-
</button>`;
260-
}
261-
262-
// The collapsed "Skimmed · N files" group: a clickable header (caret + count) with its file rows
263-
// shown only when expanded. Mirrors the tree/walkthrough group; per-session expand state.
264-
function overviewSkimGroup(grp: WalkGroup): string {
265-
const open = isSkimGroupExpanded();
266-
return `<div class="go-grp go-grp-skim">
267-
<button class="go-grp-h go-grp-toggle" data-skimgrp="1">
268-
<svg class="ic chev${open ? " open" : ""}"><use href="#gly-chevron"></use></svg>
269-
<span class="go-grp-name">Skimmed</span>
270-
<span class="go-grp-meta">${grp.total} file${grp.total === 1 ? "" : "s"}</span>
271-
</button>
272-
${open ? grp.files.map(overviewSkimRow).join("") : ""}
273-
</div>`;
274-
}
275-
276-
// Render the Overview page into #diff: overview → optional PR description → the per-file
277-
// list grouped by category → Start. Called by render() when overviewOpen && hasGuide().
278-
// Binds the Start button + per-file jumps.
208+
// Render the Overview page into #diff: overview → optional PR description → Start. No file
209+
// list — the sidebar (tree/walkthrough, including the Skimmed group) already lists every file,
210+
// so repeating them here was redundant; per-file orientation renders in each file's header.
211+
// Called by render() when overviewOpen && hasGuide().
279212
export function renderOverview() {
280213
const g = S.state.guide!;
281-
const fileList = walkGroups()
282-
.map((grp) =>
283-
grp.skimmed
284-
? overviewSkimGroup(grp)
285-
: `<div class="go-grp">
286-
<div class="go-grp-h"><span class="go-grp-name">${esc(grp.category)}</span><span class="go-grp-meta">${grp.total} file${grp.total === 1 ? "" : "s"}${grp.added || grp.removed ? ` · <span class="go-grp-counts">${grp.added ? `<i class="add">+${grp.added}</i>` : ""}${grp.removed ? `<i class="del">−${grp.removed}</i>` : ""}</span>` : ""}</span></div>
287-
${grp.files.map(overviewFileRow).join("")}
288-
</div>`,
289-
)
290-
.join("");
291214
const title = g.title || S.state.target || "Review";
292215
$("diff").innerHTML = `<div class="guide-overview"><div class="go-card">
293216
<h1>${esc(title)}</h1>
294217
<div class="go-sub">${esc(S.state.mode)} · ${esc(S.state.session)} · ${S.state.files.length} files</div>
295218
${guideStale() ? `<div class="go-stale"><svg class="ic"><use href="#gly-warn"></use></svg> This guide was generated for an earlier version of the diff. Regenerate it and restart the desk with <code>--guide</code> to refresh.</div>` : ""}
296219
<div class="go-overview md">${renderMarkdown(g.overview)}</div>
297220
${g.prDescription ? `<div class="go-pr"><b>PR description</b><div class="md">${renderMarkdown(g.prDescription)}</div></div>` : ""}
298-
${fileList ? `<div class="label go-files-h">Files in this review</div><div class="go-files">${fileList}</div>` : ""}
299221
<div class="go-actions"><button class="btn primary" id="guideStart">Start Review <kbd>↵</kbd></button></div>
300222
</div></div>`;
301223
const start = $("diff").querySelector("#guideStart") as HTMLButtonElement | null;
302224
if (start) start.onclick = () => S.startGuided?.();
303-
$("diff")
304-
.querySelectorAll<HTMLElement>(".go-file")
305-
.forEach((el) => {
306-
el.onclick = () => S.selectFile?.(Number(el.dataset.i));
307-
});
308-
const skimToggle = $("diff").querySelector("[data-skimgrp]") as HTMLButtonElement | null;
309-
if (skimToggle) skimToggle.onclick = () => toggleSkimGroup();
310225
}

‎src/ui/index.html‎

Lines changed: 0 additions & 193 deletions
Original file line numberDiff line numberDiff line change
@@ -2543,199 +2543,6 @@
25432543
margin-top: 0
25442544
}
25452545

2546-
/* Overview file list: the guide's files grouped by category, each row path + orientation +
2547-
±counts + a read-only state badge (decisions stay in the diff; clicking opens it). */
2548-
.guide-overview .go-files-h {
2549-
margin: 0 0 7px
2550-
}
2551-
2552-
.guide-overview .go-files {
2553-
display: flex;
2554-
flex-direction: column;
2555-
gap: 10px;
2556-
margin: 0 0 18px
2557-
}
2558-
2559-
.guide-overview .go-files .add,
2560-
.guide-overview .go-files .del {
2561-
font-style: normal
2562-
}
2563-
2564-
.guide-overview .go-files .add {
2565-
color: var(--green)
2566-
}
2567-
2568-
.guide-overview .go-files .del {
2569-
color: var(--red)
2570-
}
2571-
2572-
.guide-overview .go-grp {
2573-
border: 1px solid var(--line);
2574-
border-radius: var(--radius);
2575-
background: var(--surface);
2576-
overflow: hidden
2577-
}
2578-
2579-
.guide-overview .go-grp-h {
2580-
display: flex;
2581-
align-items: baseline;
2582-
justify-content: space-between;
2583-
gap: 8px;
2584-
padding: 7px 11px;
2585-
border-bottom: 1px solid var(--line);
2586-
background: var(--panel)
2587-
}
2588-
2589-
.guide-overview .go-grp-name {
2590-
font-size: var(--text-2xs);
2591-
font-weight: 700;
2592-
letter-spacing: .05em;
2593-
text-transform: uppercase;
2594-
color: var(--muted)
2595-
}
2596-
2597-
.guide-overview .go-grp-meta {
2598-
font-size: var(--text-2xs);
2599-
color: var(--ghost);
2600-
flex: none
2601-
}
2602-
2603-
/* Counts in a group header: inline-flex so the +/− gap matches the file rows below. */
2604-
.guide-overview .go-grp-counts {
2605-
display: inline-flex;
2606-
align-items: baseline;
2607-
gap: var(--churn-gap)
2608-
}
2609-
2610-
/* The collapsed Skimmed group header (issue 07): a full-width toggle button that reads like
2611-
any group header but with a caret; muted, since these files left the flow. Center-aligned
2612-
(overriding go-grp-h's baseline) — the caret is an SVG with no text baseline, so baseline
2613-
alignment floats it above the label. */
2614-
.guide-overview .go-grp-toggle {
2615-
width: 100%;
2616-
align-items: center;
2617-
justify-content: flex-start;
2618-
gap: 7px;
2619-
border: 0;
2620-
border-bottom: 0;
2621-
font: inherit;
2622-
cursor: pointer;
2623-
color: var(--muted)
2624-
}
2625-
2626-
.guide-overview .go-grp-skim.go-grp:has(.go-file) .go-grp-toggle {
2627-
border-bottom: 1px solid var(--line)
2628-
}
2629-
2630-
.guide-overview .go-grp-toggle:hover {
2631-
background: var(--surface-raised)
2632-
}
2633-
2634-
.guide-overview .go-grp-toggle .go-grp-meta {
2635-
margin-left: auto
2636-
}
2637-
2638-
.guide-overview .go-grp-toggle .chev {
2639-
width: 12px;
2640-
color: var(--ghost);
2641-
transition: transform .12s ease
2642-
}
2643-
2644-
.guide-overview .go-grp-toggle .chev.open {
2645-
transform: rotate(90deg)
2646-
}
2647-
2648-
/* A skimmed file row's reason sub-line reads muted, like the skim strips. */
2649-
.guide-overview .go-file-skim .go-file-sum {
2650-
color: var(--ghost)
2651-
}
2652-
2653-
.guide-overview .go-file {
2654-
display: block;
2655-
width: 100%;
2656-
padding: 7px 11px;
2657-
border: 0;
2658-
border-top: 1px solid var(--line);
2659-
background: transparent;
2660-
color: var(--muted);
2661-
font: inherit;
2662-
font-size: var(--text-sm);
2663-
text-align: left;
2664-
cursor: pointer
2665-
}
2666-
2667-
.guide-overview .go-file:first-of-type {
2668-
border-top: 0
2669-
}
2670-
2671-
.guide-overview .go-file:hover {
2672-
background: var(--surface-raised)
2673-
}
2674-
2675-
.guide-overview .go-file-top {
2676-
display: flex;
2677-
align-items: center;
2678-
gap: 7px
2679-
}
2680-
2681-
.guide-overview .go-file-path {
2682-
font-family: var(--mono);
2683-
font-size: var(--text-xs);
2684-
min-width: 0;
2685-
overflow: hidden;
2686-
text-overflow: ellipsis;
2687-
white-space: nowrap
2688-
}
2689-
2690-
.guide-overview .go-file-path .fdir {
2691-
color: var(--ghost)
2692-
}
2693-
2694-
.guide-overview .go-file-path .fname {
2695-
color: var(--ink)
2696-
}
2697-
2698-
.guide-overview .go-file .crit {
2699-
flex: 0 0 auto;
2700-
width: 13px;
2701-
height: 13px;
2702-
color: var(--amber)
2703-
}
2704-
2705-
.guide-overview .go-file-stats {
2706-
margin-left: auto;
2707-
flex: 0 0 auto;
2708-
display: inline-flex;
2709-
align-items: center;
2710-
gap: var(--churn-gap);
2711-
font-size: var(--text-2xs)
2712-
}
2713-
2714-
.guide-overview .go-file-stats .badge {
2715-
width: 13px;
2716-
height: 13px
2717-
}
2718-
2719-
.guide-overview .go-file-stats .badge.pending {
2720-
color: var(--cyan)
2721-
}
2722-
2723-
.guide-overview .go-file-stats .badge.approved {
2724-
color: var(--green)
2725-
}
2726-
2727-
.guide-overview .go-file-stats .badge.changes {
2728-
color: var(--amber)
2729-
}
2730-
2731-
.guide-overview .go-file-sum {
2732-
display: block;
2733-
margin-top: 3px;
2734-
color: var(--muted);
2735-
font-size: var(--text-xs);
2736-
line-height: 1.5
2737-
}
2738-
27392546
.guide-overview .go-actions {
27402547
display: flex;
27412548
align-items: center;

0 commit comments

Comments
 (0)