UI cleanup

Author: peterjthomson

app/components/canvas/CanvasRenderer.tsx

@@ -11,7 +11,7 @@
  * - Canvas config determines layout
  */
 
-import { useCallback, type ReactNode } from 'react'
+import React, { useCallback, useState, type ReactNode } from 'react'
 import type { Column } from '../../types/app-types'
 import type {
   PullRequest,
@@ -167,6 +167,7 @@ export function CanvasRenderer({
     activeCanvas,
     resizeColumn,
     reorderColumns,
+    setColumnPanel,
   } = useCanvas()
 
   // Render a list panel based on column config
@@ -293,6 +294,8 @@ export function CanvasRenderer({
               onDoubleClickStash={handlers.onDoubleClickStash}
               onSelectRepo={handlers.onSelectRepo}
               onDoubleClickRepo={handlers.onDoubleClickRepo}
+              onCreateBranch={handlers.onCreateBranch}
+              onCreateWorktree={handlers.onCreateWorktree}
               formatRelativeTime={handlers.formatRelativeTime}
             />
           )
@@ -322,18 +325,75 @@ export function CanvasRenderer({
   // Render a viz panel based on column config
   const renderVizSlot = useCallback(
     (column: Column): ReactNode => {
+      // Shared viz header with chart selector
+      const VizHeader = ({ 
+        panel, 
+        label, 
+        icon 
+      }: { 
+        panel: string
+        label: string
+        icon: string 
+      }) => {
+        const [controlsOpen, setControlsOpen] = useState(false)
+        
+        const chartOptions = [
+          { id: 'git-graph', label: 'Git Graph', icon: '◉' },
+          { id: 'timeline', label: 'Timeline', icon: '◔' },
+          { id: 'tech-tree', label: 'Tech Tree', icon: '⬡' },
+        ]
+        
+        return (
+          <>
+            <div 
+              className={`column-header clickable-header ${controlsOpen ? 'open' : ''}`}
+              onClick={() => setControlsOpen(!controlsOpen)}
+            >
+              <div className="column-title">
+                <h2>
+                  <span className="column-icon">{icon}</span>
+                  {label}
+                </h2>
+                <span className={`header-chevron ${controlsOpen ? 'open' : ''}`}>▾</span>
+              </div>
+            </div>
+            {controlsOpen && (
+              <div className="column-controls" onClick={(e) => e.stopPropagation()}>
+                <div className="control-row">
+                  <label>Chart</label>
+                  <select
+                    value={panel}
+                    onChange={(e) => {
+                      // Update column panel through canvas context
+                      if (activeCanvas) {
+                        setColumnPanel(activeCanvas.id, column.id, e.target.value as import('../../types/app-types').PanelType)
+                      }
+                      setControlsOpen(false)
+                    }}
+                    className="control-select"
+                  >
+                    {chartOptions.map((opt) => (
+                      <option key={opt.id} value={opt.id}>
+                        {opt.icon} {opt.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            )}
+          </>
+        )
+      }
+      
       switch (column.panel) {
         case 'git-graph':
           return (
             <div className="viz-panel git-graph-panel">
-              <div className="column-header">
-                <div className="column-title">
-                  <h2>
-                    <span className="column-icon">{column.icon || '◉'}</span>
-                    {column.label || 'History'}
-                  </h2>
-                </div>
-              </div>
+              <VizHeader 
+                panel={column.panel}
+                label={column.label || 'History'} 
+                icon={column.icon || '◉'} 
+              />
               <div className="viz-panel-content">
                 <GitGraph
                   commits={data.commits}
@@ -349,27 +409,31 @@ export function CanvasRenderer({
         case 'timeline':
           return (
             <div className="viz-panel timeline-panel">
-              <ContributorChart
-                topN={10}
-                bucketSize="week"
-                height={500}
-                invertedTheme={true}
-                onManageUsers={handlers.onOpenMailmap}
+              <VizHeader 
+                panel={column.panel}
+                label={column.label || 'Timeline'} 
+                icon={column.icon || '◔'} 
               />
+              <div className="viz-panel-content">
+                <ContributorChart
+                  topN={10}
+                  bucketSize="week"
+                  height={500}
+                  invertedTheme={true}
+                  onManageUsers={handlers.onOpenMailmap}
+                />
+              </div>
             </div>
           )
 
         case 'tech-tree':
           return (
             <div className="viz-panel tech-tree-panel">
-              <div className="column-header">
-                <div className="column-title">
-                  <h2>
-                    <span className="column-icon">{column.icon || '⬡'}</span>
-                    {column.label || 'Tech Tree'}
-                  </h2>
-                </div>
-              </div>
+              <VizHeader 
+                panel={column.panel}
+                label={column.label || 'Tech Tree'} 
+                icon={column.icon || '⬡'} 
+              />
               <div className="viz-panel-content">
                 <TechTreeChart
                   limit={25}
@@ -390,7 +454,7 @@ export function CanvasRenderer({
           )
       }
     },
-    [data.commits, selection.selectedCommit, handlers]
+    [data.commits, selection.selectedCommit, handlers, activeCanvas, setColumnPanel]
   )
 
   // Render an editor panel based on column config

app/components/panels/editor/MailmapDetailsPanel.tsx

@@ -311,23 +311,56 @@ export function MailmapDetailsPanel({
       {/* Meta grid like other detail panels */}
       <div className="detail-meta-grid">
         <div className="detail-meta-item">
-          <span className="meta-label">Mapped</span>
-          <span className="meta-value">{stats.mappedEntries}</span>
-        </div>
-        <div className="detail-meta-item">
-          <span className="meta-label">Raw Unique</span>
+          <span className="meta-label">Git Authors</span>
           <span className="meta-value">{stats.rawUnique}</span>
         </div>
         <div className="detail-meta-item">
-          <span className="meta-label">Unique</span>
+          <span className="meta-label">After Mapping</span>
           <span className="meta-value">{stats.uniqueWithMapping}</span>
         </div>
+        <div className="detail-meta-item">
+          <span className="meta-label">Entries</span>
+          <span className="meta-value">{stats.mappedEntries}</span>
+        </div>
       </div>
 
       <p className="mailmap-hint">
         Drag one user onto another to combine them. The drop target becomes the canonical name.
       </p>
 
+      {/* Existing .mailmap entries */}
+      {existingMailmap.length > 0 && (
+        <div className="mailmap-section">
+          <h4>Current .mailmap ({existingMailmap.length} entries)</h4>
+          <table className="mailmap-table">
+            <thead>
+              <tr>
+                <th>Canonical</th>
+                <th>Alias</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {existingMailmap.map((entry, idx) => (
+                <tr key={`entry-${idx}`}>
+                  <td>{entry.canonicalName} &lt;{entry.canonicalEmail}&gt;</td>
+                  <td>{entry.aliasName ? `${entry.aliasName} ` : ''}&lt;{entry.aliasEmail}&gt;</td>
+                  <td>
+                    <button 
+                      className="mailmap-delete-btn"
+                      onClick={() => handleDeleteEntry(entry)}
+                      title="Remove entry"
+                    >
+                      ×
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
       {/* Pending Merges */}
       {pendingMerges.length > 0 && (
         <div className="mailmap-section">
@@ -370,39 +403,6 @@ export function MailmapDetailsPanel({
           ))}
         </div>
       </div>
-
-      {/* Existing .mailmap entries */}
-      {existingMailmap.length > 0 && (
-        <div className="mailmap-section">
-          <h4>Current .mailmap ({existingMailmap.length} entries)</h4>
-          <table className="mailmap-table">
-            <thead>
-              <tr>
-                <th>Canonical</th>
-                <th>Alias</th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              {existingMailmap.map((entry, idx) => (
-                <tr key={`entry-${idx}`}>
-                  <td>{entry.canonicalName} &lt;{entry.canonicalEmail}&gt;</td>
-                  <td>{entry.aliasName ? `${entry.aliasName} ` : ''}&lt;{entry.aliasEmail}&gt;</td>
-                  <td>
-                    <button 
-                      className="mailmap-delete-btn"
-                      onClick={() => handleDeleteEntry(entry)}
-                      title="Remove entry"
-                    >
-                      ×
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
     </div>
   )
 }

app/components/panels/editor/RepoDetailPanel.tsx

@@ -101,20 +101,6 @@ export function RepoDetailPanel({
         )}
       </div>
 
-      {/* Info section */}
-      {repo.isCurrent ? (
-        <div className="detail-info-section">
-          <div className="info-note">
-            This is the currently open repository. Use the panels to explore branches, PRs, and worktrees.
-          </div>
-        </div>
-      ) : (
-        <div className="detail-info-section">
-          <div className="info-note">
-            Open this repository in Ledger to view its branches, pull requests, and worktrees.
-          </div>
-        </div>
-      )}
     </div>
   )
 }

app/components/panels/list/BranchList.tsx

@@ -117,6 +117,12 @@ export function BranchList({
     ? 'No branches match filter' 
     : isRemote ? 'No remote branches' : 'No local branches'
 
+  // Build active filter label
+  const activeFilterParts: string[] = []
+  if (search.trim()) activeFilterParts.push(`"${search.trim()}"`)
+  if (filter !== 'all') activeFilterParts.push(filter === 'local-only' ? 'Local Only' : 'Unmerged')
+  const activeFilter = activeFilterParts.length > 0 ? activeFilterParts.join(' · ') : undefined
+
   return (
     <div className={`list-panel branch-list-panel ${isRemote ? 'remote' : 'local'}`}>
       <ListPanelHeader
@@ -125,6 +131,7 @@ export function BranchList({
         count={filteredBranches.length}
         controlsOpen={controlsOpen}
         onToggleControls={() => setControlsOpen(!controlsOpen)}
+        activeFilter={activeFilter}
       />
 
       {/* Controls */}

app/components/panels/list/CommitList.tsx

@@ -129,6 +129,12 @@ export function CommitList({
     ? 'No commits match filter'
     : 'No commits'
 
+  // Build active filter label
+  const activeFilterParts: string[] = []
+  if (search.trim()) activeFilterParts.push(`"${search.trim()}"`)
+  if (filter !== 'all') activeFilterParts.push(filter === 'branch-heads' ? 'Branch Heads' : 'Unmerged')
+  const activeFilter = activeFilterParts.length > 0 ? activeFilterParts.join(' · ') : undefined
+
   return (
     <div className="list-panel commits-list-panel">
       <ListPanelHeader
@@ -138,6 +144,7 @@ export function CommitList({
         controlsOpen={controlsOpen}
         onToggleControls={() => setControlsOpen(!controlsOpen)}
         badge={currentBranch ? <code className="commit-hash branch-badge">{currentBranch}</code> : undefined}
+        activeFilter={activeFilter}
       />
 
       {/* Controls */}

app/components/panels/list/ListPanelHeader.tsx

@@ -4,8 +4,8 @@
  * Features:
  * - Icon + label + count badge
  * - Optional badge (e.g., branch name)
- * - Clickable to toggle controls
- * - Chevron indicator for open/closed state
+ * - Funnel icon to toggle filter controls
+ * - Active filter indicator badge
  */
 
 import type { ReactNode } from 'react'
@@ -18,6 +18,8 @@ interface ListPanelHeaderProps {
   onToggleControls: () => void
   /** Optional badge element (e.g., current branch name) */
   badge?: ReactNode
+  /** Active filter label to display when filter is non-default */
+  activeFilter?: string
 }
 
 export function ListPanelHeader({
@@ -27,21 +29,37 @@ export function ListPanelHeader({
   controlsOpen,
   onToggleControls,
   badge,
+  activeFilter,
 }: ListPanelHeaderProps) {
   return (
-    <div
-      className={`column-header clickable-header ${controlsOpen ? 'open' : ''}`}
-      onClick={onToggleControls}
-    >
+    <div className="column-header list-header">
       <div className="column-title">
         <h2>
           {icon && <span className="column-icon">{icon}</span>}
           {label}
           {badge}
         </h2>
-        <span className={`header-chevron ${controlsOpen ? 'open' : ''}`}>▾</span>
       </div>
-      <span className="count-badge">{count}</span>
+      <div className="header-actions">
+        {activeFilter && (
+          <span className="active-filter-badge" title={`Filtered: ${activeFilter}`}>
+            {activeFilter}
+          </span>
+        )}
+        <button
+          className={`header-filter-btn ${controlsOpen ? 'active' : ''}`}
+          onClick={(e) => {
+            e.stopPropagation()
+            onToggleControls()
+          }}
+          title="Toggle filters"
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
+            <path d="M0 1h10L6 5v4L4 10V5L0 1z" />
+          </svg>
+        </button>
+        <span className="count-badge">{count}</span>
+      </div>
     </div>
   )
 }