fix(vcs): refine log ref labels, row height and favorite star (#335)

Git Log ref labels use an outlined tag glyph in the ref colour instead of a solid flag; log rows are 26px with wider graph lanes and larger nodes. With Highlight › Current Branch on, commits outside HEAD are dimmed instead of the current branch being tinted. Excluded folders in the project tree get a tinted row background (Tree gains an optional rowClassName). The favorite star is a rounder shape, and the filled one has no separate outline stroke.

src/features/project-tree/ProjectView.module.css

@@ -42,6 +42,9 @@
 .excluded {
   color: var(--vcs-ignored);
 }
+.excludedRow {
+  background: color-mix(in srgb, var(--vcs-ignored) 14%, transparent);
+}
 .error {
   text-decoration: underline wavy var(--danger);
   text-decoration-skip-ink: none;

src/features/project-tree/ProjectView.tsx

@@ -654,6 +654,7 @@ export function ProjectView() {
         isExpandable={isExpandable}
         loadChildren={loadChildren}
         renderNode={renderNode}
+        rowClassName={(n) => (n.excluded ? styles.excludedRow : undefined)}
         expanded={expanded}
         onExpandedChange={onExpandedChange}
         selected={selected}

src/features/vcs/GitLog.module.css

@@ -144,7 +144,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 22px;
+  height: 26px;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -153,9 +153,10 @@
   cursor: default;
   font-size: var(--fs-ui);
 }
-/* View Options › Highlight › Current Branch (before .row:hover / .selected so they win). */
-.currentBranch {
-  background: color-mix(in srgb, var(--accent) 7%, transparent);
+/* View Options › Highlight › Current Branch: commits outside HEAD are dimmed. */
+.offBranch .subject,
+.offBranch .muted {
+  color: var(--fg-subtle);
 }
 .row:hover {
   background: var(--bg-tree-hover);
@@ -232,6 +233,7 @@
   margin-left: 0;
 }
 .ref {
+  --tag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5h4.2l4.8 4.8-4.2 4.2-4.8-4.8z' fill='none' stroke='black' stroke-width='1.1' stroke-linejoin='round'/%3E%3Ccircle cx='4' cy='4' r='.9'/%3E%3C/svg%3E");
   display: inline-flex;
   align-items: center;
   gap: 4px;
@@ -242,14 +244,15 @@
   text-overflow: ellipsis;
   max-width: 180px;
 }
-/* IDEA's branch label: a small flag in the ref's colour. */
+/* Outlined tag glyph in the ref's colour. */
 .ref::before {
   content: "";
   flex: none;
-  width: 7px;
-  height: 10px;
+  width: 11px;
+  height: 11px;
   background: var(--ref-color);
-  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
+  -webkit-mask: var(--tag-glyph) center / contain no-repeat;
+  mask: var(--tag-glyph) center / contain no-repeat;
 }
 .refHead {
   --ref-color: var(--warning);

src/features/vcs/GitLog.tsx

@@ -92,8 +92,8 @@ import { gitTabs, shownTab } from "./gitTabs";
 import { ChangesTree, StashContent, tabItems, useStashTabCounts } from "./CommitView";
 import { WorktreesPanel } from "./gitMenuDialogs";
 
-const ROW = 22;
-const LANE = 12;
+const ROW = 26;
+const LANE = 14;
 
 /** The Git window's tabs (they depend on the commit interface) and the one shown. */
 function useGitTabs() {
@@ -1021,7 +1021,7 @@ function CommitList() {
                 selected={selectedSet.has(commitKey(c))}
                 head={headKeys.has(commitKey(c))}
                 mine={opts.highlightMine && isMine(c, user)}
-                onBranch={!!onBranch?.has(commitKey(c))}
+                onBranch={!onBranch || onBranch.has(commitKey(c))}
                 opts={opts}
                 remoteNames={new Set((c as RepoCommit).remoteNames ?? remoteNames)}
                 onPick={pick}
@@ -1075,7 +1075,7 @@ const CommitRow = memo(function CommitRow({
       id={id}
       role="option"
       aria-selected={selected}
-      className={clsx(styles.row, onBranch && styles.currentBranch, selected && styles.selected)}
+      className={clsx(styles.row, !onBranch && styles.offBranch, selected && styles.selected)}
       style={{ top }}
       onMouseDown={(e) => {
         if (e.shiftKey) e.preventDefault(); // no text selection on range clicks
@@ -1149,7 +1149,7 @@ export function GraphCell({ row, head }: { row: GraphRow; head?: boolean }) {
       <circle
         cx={x(row.lane)}
         cy={cy}
-        r={head ? 4 : 3.2}
+        r={head ? 4.5 : 3.8}
         fill={head ? "var(--bg-app)" : laneColor(row.color)}
         stroke={laneColor(row.color)}
         strokeWidth={head ? 2 : 0}

src/ui/Tree.tsx

@@ -103,6 +103,7 @@ export interface TreeProps<T> {
   rowHeight?: number;
   indent?: number;
   className?: string;
+  rowClassName?: (node: T) => string | undefined;
   "aria-label"?: string;
   handleRef?: Ref<TreeHandle>;
   empty?: ReactNode;
@@ -145,6 +146,7 @@ export function Tree<T>(props: TreeProps<T>) {
     rowHeight = 24,
     indent = 20,
     className,
+    rowClassName,
     handleRef,
     empty,
   } = props;
@@ -537,7 +539,12 @@ export function Tree<T>(props: TreeProps<T>) {
                 aria-setsize={positions[v.index]![1]}
                 aria-expanded={row.expandable ? row.expanded : undefined}
                 aria-selected={isSelected}
-                className={clsx(styles.row, isSelected && styles.selected, isLead && styles.lead)}
+                className={clsx(
+                  styles.row,
+                  rowClassName?.(row.node),
+                  isSelected && styles.selected,
+                  isLead && styles.lead,
+                )}
                 style={style}
                 onMouseDown={(e) => onRowMouseDown(e, v.index)}
                 onDoubleClick={(e) => activate(row, e)}

src/ui/openidea/vcs/favorite.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 1.75L9.93 5.66L14.25 6.29L11.12 9.33L11.86 13.63L8 11.6L4.14 13.63L4.88 9.33L1.75 6.29L6.07 5.66L8 1.75Z" fill="#FFAF0F" stroke="#E08855" stroke-linejoin="round"/>
+<path d="M8 2.6L9.5 6L13.2 6.4L10.4 8.9L11.2 12.5L8 10.6L4.8 12.5L5.6 8.9L2.8 6.4L6.5 6z" fill="#FFAF0F" stroke="#FFAF0F" stroke-width="2.2" stroke-linejoin="round"/>
 </svg>

src/ui/openidea/vcs/favorite_dark.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 1.75L9.93 5.66L14.25 6.29L11.12 9.33L11.86 13.63L8 11.6L4.14 13.63L4.88 9.33L1.75 6.29L6.07 5.66L8 1.75Z" fill="#F2C55C" stroke="#D6AE58" stroke-linejoin="round"/>
+<path d="M8 2.6L9.5 6L13.2 6.4L10.4 8.9L11.2 12.5L8 10.6L4.8 12.5L5.6 8.9L2.8 6.4L6.5 6z" fill="#F2C55C" stroke="#F2C55C" stroke-width="2.2" stroke-linejoin="round"/>
 </svg>

src/ui/openidea/vcs/notFavorite.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 1.75L9.93 5.66L14.25 6.29L11.12 9.33L11.86 13.63L8 11.6L4.14 13.63L4.88 9.33L1.75 6.29L6.07 5.66L8 1.75Z" stroke="#6C707E" stroke-linejoin="round"/>
+<path d="M8 2.6L9.5 6L13.2 6.4L10.4 8.9L11.2 12.5L8 10.6L4.8 12.5L5.6 8.9L2.8 6.4L6.5 6z" stroke="#6C707E" stroke-width="1.2" stroke-linejoin="round"/>
 </svg>

src/ui/openidea/vcs/notFavorite_dark.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 1.75L9.93 5.66L14.25 6.29L11.12 9.33L11.86 13.63L8 11.6L4.14 13.63L4.88 9.33L1.75 6.29L6.07 5.66L8 1.75Z" stroke="#CED0D6" stroke-linejoin="round"/>
+<path d="M8 2.6L9.5 6L13.2 6.4L10.4 8.9L11.2 12.5L8 10.6L4.8 12.5L5.6 8.9L2.8 6.4L6.5 6z" stroke="#CED0D6" stroke-width="1.2" stroke-linejoin="round"/>
 </svg>