prreviewbuddy 0.82.1 → 0.83.3

package/static/shell.css

@@ -154,7 +154,8 @@
   --lh-body:  1.55;
   --lh-tight: 1.3;
 
-  --rail-width: 268px;
+  --rail-full-width: 268px;
+  --rail-width: var(--rail-full-width);
   /* A proportion, not a number: the assistant is part of the workspace rather than a widget
      docked to its edge, so it should take a share of whatever room there is. The floor keeps it
      wide enough for a code block; the ceiling keeps the review itself the larger pane. A width
@@ -416,15 +417,6 @@ body > * { flex: 0 0 auto; }
   color: var(--text-tertiary, var(--text-secondary));
   opacity: 0.75;
 }
-.prb-feedback {
-  color: inherit;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-.prb-feedback:hover { color: var(--text-primary); opacity: 1; }
-/* The words, and only the words, above phone width. The icon is the phone-width form, where the
-   strip has no room for a text link; see the 600px block. */
-.prb-feedback-icon { display: none; }
 
 /* ── The global strip ──
  *
@@ -459,17 +451,9 @@ body > * { flex: 0 0 auto; }
 /* Quieter than the wordmark on a marketing page and quieter than the branch below it: at this size
    it is a mark saying which product this is, not a title. */
 .prb-strip .prb-wordmark { font-size: var(--t-body); }
-/* The push comes from the wordmark, so everything after it packs to the far end whether or not the
-   narrow-window places are in flow. A `margin-left: auto` on the bell instead would put the bell
-   beside the wordmark at every width the places are hidden, which is most of them. */
+/* The push comes from the wordmark, so everything after it packs to the far end. */
 .prb-strip .prb-wordmark { margin-right: auto; }
 .prb-strip .prb-build { margin: 0; }
-/* The workspace places in the strip exist for the width at which the rail is hidden, and only then.
-   Declared here, above the 860px block that reveals it: the two rules have the same specificity, so
-   whichever comes last wins, and while this one sat at the foot of the file the media query could
-   never take effect — the places were hidden at every width, including the only one that needed
-   them. */
-.prb-header-nav { display: none; align-items: center; gap: 16px; font-size: var(--t-meta); }
 
 /* The workspace pages that are not a review: the same rail and the same one-viewport shell as a
    review page, with the content scrolling in its own pane beside it.
@@ -552,6 +536,17 @@ body > * { flex: 0 0 auto; }
   background: var(--border-strong);
 }
 
+/* New review in the strip is the rail's labelled button standing in while the rail is hidden, so it
+   is drawn only then: below 860px and in a review's focus mode, both revealed further down. Declared
+   here, above the 860px block, so that block can win at equal specificity. Filled, as the rail's is:
+   wherever it is, it is the primary action. */
+.prb-strip .prb-strip-new-review { display: none; background: var(--brand); color: var(--on-brand); }
+.prb-strip .prb-strip-new-review:hover { background: var(--brand-hover); color: var(--on-brand); }
+.prb-strip .prb-strip-new-review:focus-visible { outline-color: var(--brand-ink); }
+/* Show sidebar: the way back from Hidden, and drawn only while the reader has hidden it. */
+.prb-strip .prb-sidebar-restore { display: none; }
+:root[data-sidebar-hidden] .prb-strip .prb-sidebar-restore { display: flex; }
+
 /* Why a control cannot be pressed, beside the control rather than inside a `title` nobody hovers
    and no keyboard reaches. Quiet as the strip is quiet: it is an explanation, not a warning. */
 .prb-strip-note {
@@ -1082,6 +1077,144 @@ a.prb-rail-item { text-decoration: none; }
   color: var(--text-primary);
 }
 .prb-rail-item:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: -2px; }
+
+/* New review, at the head of the workspace rows: the primary action, and the one filled thing in
+   the sidebar, as the Buddy AI send button is in its pane. Everything else there stays neutral, so
+   nothing competes with it. Inset so its icon lines up with the rows' icons. The focus ring is the
+   brand's ink rather than its hover colour, which would vanish against the fill. */
+.prb-rail-new { padding: 0 12px 10px; }
+.prb-new-review {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-height: 36px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 8px;
+  background: var(--brand);
+  color: var(--on-brand);
+  font: inherit;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+.prb-new-review svg { width: 16px; height: 16px; flex: none; }
+.prb-new-review-label { flex: 1; min-width: 0; }
+.prb-new-review-key { font: 500 var(--t-micro) / 1 ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; color: var(--on-brand-quiet); }
+.prb-new-review:hover { background: var(--brand-hover); }
+.prb-new-review:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
+
+/* The sidebar's own toggle, the last row of its foot. Both drawings are on the page and the state
+   says which shows, so pressing it changes nothing here but an attribute and its words. */
+.prb-sidebar-collapse-icon,
+.prb-sidebar-expand-icon { display: flex; }
+.prb-sidebar-expand-icon,
+:root[data-sidebar-compact] .prb-sidebar-collapse-icon { display: none; }
+:root[data-sidebar-compact] .prb-sidebar-expand-icon { display: flex; }
+
+/* ── The sidebar's three states ──
+   Expanded is the default and needs nothing. Compact and Hidden are attributes on <html>, drawn by
+   the server from `ui.json` so the first paint is already right (see `sidebarAttributes`).
+
+   Both change only `--rail-width`, which every grid with a rail column reads, so the review page's
+   three columns and the other pages' two follow without a template of their own. Hidden keeps the
+   rail in grid flow at no width rather than `display: none`: out of flow, the next pane would drop
+   into the rail's column, which is the defect the 860px block below had to be rewritten for. */
+:root[data-sidebar-compact] { --rail-width: 56px; }
+:root[data-sidebar-hidden] { --rail-width: 0px; }
+:root[data-sidebar-hidden] .prb-rail { visibility: hidden; overflow: hidden; padding: 0; border: 0; }
+
+/* Compact is drawn by every rule below that waits on `:not([data-sidebar-peek])`. While the reader
+   rests the pointer on it, or tabs into it, `client/sidebar.ts` sets `data-sidebar-peek` and those
+   rules stop applying: the sidebar is drawn exactly as Expanded, at its full width, over the page
+   rather than beside it. Its own column stays narrow, so nothing under it moves. It slides because
+   its width is transitioned from the column's to the full one; the labels are clipped as it grows. */
+:root[data-sidebar-compact] .prb-rail {
+  position: relative;
+  z-index: 5;
+  width: var(--rail-width);
+  transition: width 0.16s ease, box-shadow 0.16s ease;
+}
+:root[data-sidebar-compact][data-sidebar-peek] .prb-rail {
+  width: var(--rail-full-width);
+  box-shadow: 8px 0 24px var(--shadow-float);
+}
+
+/* Compact: every row is its icon, named in a tooltip beside it on hover and keyboard focus. The
+   tooltip is the row's own label, moved out to the right, so the name a screen reader hears is
+   the one it always heard. What has no icon (headings, the numbered review path, the folds, the
+   counts) waits for Expanded. The rail lets the tooltips out past its edge, and sits above the
+   pane beside it so they draw over it. */
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail { overflow: visible; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item {
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  gap: 0;
+  padding: 9px 0;
+  border-left-width: 0;
+}
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item .prb-rail-label {
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 6px);
+  transform: translateY(-50%);
+  padding: 5px 8px;
+  border-radius: 6px;
+  background: var(--text-primary);
+  color: var(--bg);
+  font-size: var(--t-micro);
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item .prb-rail-label * { color: inherit; font: inherit; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item:hover .prb-rail-label,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item:focus-visible .prb-rail-label { opacity: 1; transition: opacity 0.1s 0.35s; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-count,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-selected,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-twisty,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-heading,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-subhead,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-path { display: none; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-body { margin: 0; border-left: 0; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-body .prb-rail-item { padding-left: 0; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-group + .prb-rail-group { margin-top: 12px; padding-top: 12px; }
+/* New review is the square + at the top, its name and shortcut in the strip's own tooltip. */
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-new { padding: 0 10px 10px; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review { position: relative; justify-content: center; width: 36px; padding: 0; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review-label,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review-key { display: none; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review[data-tip]::after {
+  content: attr(data-tip);
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 6px);
+  transform: translateY(-50%);
+  padding: 5px 8px;
+  border-radius: 6px;
+  background: var(--text-primary);
+  color: var(--bg);
+  font-size: var(--t-micro);
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review[data-tip]:hover::after,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review[data-tip]:focus-visible::after { opacity: 1; transition: opacity 0.1s 0.35s; }
+
+/* Hidden: the strip's square New review stands in, as it does whenever the rail is not drawn. Send
+   feedback belongs to the sidebar and goes with it; the strip has no copy of it at any width. */
+:root[data-sidebar-hidden] .prb-strip .prb-strip-new-review { display: flex; }
+/* The page title is set in the rail's column, so it keeps its own width while that column narrows. */
+:root:is([data-sidebar-compact], [data-sidebar-hidden]) .prb-context:has(.prb-index-controls) .prb-page-title { width: auto; }
 /* The pages under a review type (Issues, Questions, Files, PR context) and the links at the foot
    share the group rows' white, so the grey themes in the review path read as their own list.
    Weight still separates these from the group rows above them. Must come after `.prb-rail-item`:
@@ -2773,9 +2906,11 @@ a.prb-guide-pick { text-decoration: none; }
   .prb-body:not([data-ask='open']),
   .prb-body[data-ask='open'] { grid-template-columns: minmax(0, 1fr); }
   .prb-rail { display: none; }
+  .prb-strip .prb-strip-new-review { display: flex; }
+  /* No sidebar fits at this width, so Show sidebar would bring back nothing. */
+  :root[data-sidebar-hidden] .prb-strip .prb-sidebar-restore { display: none; }
   .prb-guide-picker { display: flex; }
   .prb-shell { grid-template-columns: minmax(0, 1fr); }
-  .prb-header-nav { display: flex; }
   /* The assistant is an overlay at this width, not a column, so there is no boundary to drag. */
   .prb-ask-resize { display: none; }
   /* Anchored to the body it covers, not to a sum of the bars above it. That sum assumed the header
@@ -2801,24 +2936,10 @@ a.prb-guide-pick { text-decoration: none; }
    scrolled sideways. Placed after every base rule it overrides (the header, the strip, the change
    ref, the stats), because at equal specificity the later rule wins. */
 @media (max-width: 600px) {
-  /* The strip keeps every control and the build; it gives up spacing and the feedback link's words.
-     The accessible name stays "Send feedback", from the visually hidden label. */
+  /* The strip keeps every control and the build; it gives up spacing. */
   .prb-strip { gap: 4px; padding: 0 16px; }
   .prb-strip .prb-wordmark { min-width: 0; overflow: hidden; }
   .prb-strip .prb-build { margin-left: 4px; }
-  .prb-feedback { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--text-muted); opacity: 1; }
-  .prb-feedback:hover { background: var(--surface-2); }
-  .prb-feedback-icon { display: inline-flex; }
-  .prb-feedback-icon svg { width: 16px; height: 16px; }
-  .prb-feedback-label {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
 
   /* The review bar becomes two rows: what the review is of, then its facts and controls. It grows
      with its content rather than clipping it; the panes below take what is left, and Buddy AI is
@@ -3144,6 +3265,8 @@ a.prb-guide-pick { text-decoration: none; }
   cursor: pointer;
 }
 .prb-index-select:hover { color: var(--text-primary); border-color: var(--border-strong); }
+/* New collection beside Select: both at the weight of the count, neither louder than the list. */
+.prb-index-summary-actions { display: flex; flex: none; gap: 8px; }
 .prb-index-select[aria-pressed="true"] {
   border-color: var(--brand);
   background: var(--brand);
@@ -3586,12 +3709,9 @@ a.prb-guide-pick { text-decoration: none; }
 .prb-collections[hidden] { display: none; }
 .prb-index-section:not([hidden]) ~ .prb-collections:not([hidden]),
 .prb-collections:not([hidden]) ~ .prb-index-section { margin-top: 24px; }
-.prb-collections-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 2px 10px; }
-.prb-collections-title { margin: 0; font-size: var(--t-meta); font-weight: 600; color: var(--text-muted); }
-.prb-collections-hint { margin: 0; font-size: var(--t-meta); color: var(--text-muted); }
 .prb-collection { position: relative; }
 .prb-collection[hidden] { display: none; }
-.prb-collection:not([hidden]) ~ .prb-collection { margin-top: 16px; }
+.prb-collection:not([hidden]) ~ .prb-collection { margin-top: 24px; }
 /* Room at the end of the heading for the collection's menu, which is laid over it. */
 .prb-collection > .prb-index-section > .prb-index-section-head { margin-right: 34px; }
 .prb-collection > .prb-collection-menu { top: -5px; right: 0; }
@@ -3606,11 +3726,11 @@ a.prb-guide-pick { text-decoration: none; }
   cursor: pointer;
 }
 .prb-collection-completed-head:hover { color: var(--text-primary); }
-.prb-collection-new { margin-top: 14px; }
-.prb-collection-new-button { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
-.prb-collection-new-button[hidden] { display: none; }
-.prb-collection-new-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
-.prb-collection-new-form[hidden] { display: none; }
+/* New collection: a dialog the width of the name it asks for, not of the list. */
+.prb-collection-new-dialog { width: min(400px, calc(100vw - 32px)); }
+.prb-collection-new-dialog .prb-collection-error { margin-top: -4px; }
+/* Create waits for a name, and looks it. Scoped: Settings' Save is disabled while it saves and keeps its look. */
+.prb-collection-new-dialog .prb-dialog-primary:disabled { opacity: 0.5; cursor: default; }
 .prb-collection-name {
   flex: 1 1 220px;
   min-width: 0;
@@ -5724,6 +5844,10 @@ a.prb-notification-open:focus-visible { outline: 2px solid var(--brand-hover); o
    and without depending on this block staying last. */
 body .prb-body[data-focus] { grid-template-columns: minmax(0, 1fr); }
 body .prb-body[data-focus] .prb-rail { display: none; }
+/* The rail's New review goes with it, so the strip's square one stands in, as below 860px. */
+body:has(.prb-body[data-focus]) .prb-strip .prb-strip-new-review { display: flex; }
+/* Focus is left from the pane it expanded, so Show sidebar would bring back nothing here. */
+body:has(.prb-body[data-focus]) .prb-strip .prb-sidebar-restore { display: none; }
 
 /* A document surface, which is every view but the assistant: the review pane takes the width, and
    gets more room to use it. Prose stays a readable measure; a diff and a drawing are the things here
@@ -6229,6 +6353,10 @@ body .prb-body[data-focus]:not([data-focus='buddy']) .prb-ask-tab { top: 64px; }
   font-size: var(--t-micro);
 }
 .prb-palette-prompt[data-enter-target] { background: var(--surface-2); }
+/* The collection list (⌘K L C): number, name, its heading's count, and its state at the end, as the
+   section rows above it show theirs. */
+.prb-palette-collection { flex-direction: row; align-items: baseline; gap: 10px; }
+.prb-palette-collection-count { min-width: 0; color: var(--text-muted); font-size: var(--t-micro); }
 
 /* Add review (⌘P P, ⌘P B): a palette mode with more to show than a search, so the palette is wider
    while it holds one. Rows say what each pasted link will do; the options stay folded unless there