Skip to content

History Sidebar #293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Avni2000 merged 2 commits into from
Jul 26, 2026
Merged

History Sidebar #293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2f12062
enhancement: history sidebar, not panel
Avni2000 Jul 26, 2026
8cdf798
chore: address coderabbit comments, improve UI + accessibility for hi…
Avni2000 Jul 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 27 additions & 13 deletions packages/web/client/src/components/ConflictResolver.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@
confirmLabel: string;
} | null>(null);
const historyMenuRef = useRef<HTMLDivElement>(null);
const historyToggleRef = useRef<HTMLButtonElement>(null);
const mainContentRef = useRef<HTMLDivElement>(null);
const pendingDestructiveActionRef = useRef<(() => void) | null>(null);
const suppressApplyResolutionClickRef = useRef(false);
Expand Down Expand Up @@ -525,6 +526,7 @@
/>
<div className="history-menu" ref={historyMenuRef}>
<button
ref={historyToggleRef}
title="View and jump to previous resolution states"
className="btn btn-secondary history-toggle"
onClick={() => setHistoryOpen(prev => !prev)}
Expand All @@ -533,24 +535,36 @@
>
History
</button>
<div
<aside
className={`history-panel history-dropdown${historyOpen ? ' open' : ''}`}
data-testid="history-panel"
aria-hidden={!historyOpen}
>
<div className="history-header">
<span className="history-title">History</span>
<div className="history-actions">
<UndoRedoButtons
guardedClick={guardedClick}
onUndo={handleUndo}
onRedo={handleRedo}
canUndo={canUndo}
canRedo={canRedo}
undoTestId="history-panel-undo"
redoTestId="history-panel-redo"
/>
</div>
<button
className="history-close"
onClick={() => {
setHistoryOpen(false);
historyToggleRef.current?.focus();
}}
aria-label="Close history"
title="Close history"
data-testid="history-close"
>
&#10005;
</button>

Check warning on line 556 in packages/web/client/src/components/ConflictResolver.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Add an explicit "type" attribute to this button. 


See more on https://sonarcloud.io/project/issues?id=Avni2000_MergeNB&issues=AZ-cFe_Sfc51gLO9JpgT&open=AZ-cFe_Sfc51gLO9JpgT&pullRequest=293
Comment thread
coderabbitai[bot] marked this conversation as resolved.
</div>
<div className="history-actions">
<UndoRedoButtons
guardedClick={guardedClick}
onUndo={handleUndo}
onRedo={handleRedo}
canUndo={canUndo}
canRedo={canRedo}
undoTestId="history-panel-undo"
redoTestId="history-panel-redo"
/>
</div>
<ul className="history-list">
{history.entries.map((entry, index) => (
Expand All @@ -574,7 +588,7 @@
</li>
))}
</ul>
</div>
</aside>
</div>
</div>
<div className="take-all-group">
Expand Down
93 changes: 70 additions & 23 deletions packages/web/client/src/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ html, body {
return `
${rootSel} {
--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

/* Code Font: Inherit VS Code's Editor font, fall back to standard monospace */
--font-code: "JetBrains Mono", "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;

Expand Down Expand Up @@ -270,43 +270,50 @@ ${bodySel} {
border-radius: 12px;
}

/* History panel */
/* History sidebar */
.history-panel {
display: flex;
flex-direction: column;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 12px;
margin-bottom: 0;
border-left: 1px solid var(--border-color);
color: var(--text-primary);
}

.history-menu {
position: relative;
}

/* Slides in from the right edge and spans the full viewport height. */
.history-dropdown {
position: absolute;
top: calc(100% + 8px);
position: fixed;
top: 0;
right: 0;
width: 320px;
bottom: 0;
width: 20vw;
min-width: 260px;
max-width: 90vw;
z-index: 200;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
opacity: 0;
transform: translateY(-6px);
box-shadow: -12px 0 28px rgba(0, 0, 0, 0.35);
transform: translateX(100%);
visibility: hidden;
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
transition: transform 0.2s ease, visibility 0.2s ease;
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.

.history-dropdown.open {
opacity: 1;
transform: translateY(0);
transform: translateX(0);
visibility: visible;
pointer-events: auto;
}

.history-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
gap: 8px;
flex: 0 0 auto;
padding: 14px 16px;
border-bottom: 1px solid var(--border-color);
}

.history-title {
Expand All @@ -317,37 +324,77 @@ ${bodySel} {
font-weight: 600;
}

.history-close {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: none;
border-radius: 4px;
background: transparent;
color: var(--text-secondary);
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}

.history-close:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
}

.history-actions {
display: flex;
gap: 8px;
gap: 6px;
flex: 0 0 auto;
padding: 10px 16px;
border-bottom: 1px solid var(--border-color);
}

.history-actions .btn {
flex: 1;
}

.history-list {
list-style: none;
margin: 0;
padding: 10px;
display: flex;
flex-direction: column;
gap: 6px;
max-height: 120px;
gap: 4px;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}

.history-item {
font-size: 12px;
padding: 6px 8px;
padding: 7px 10px;
border-radius: 4px;
background: var(--bg-tertiary);
border-left: 2px solid transparent;
background: transparent;
color: var(--text-primary);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.history-item:hover {
background: #3a3a3a;
background: var(--bg-tertiary);
}

.history-item:focus-visible {
outline: 1px solid var(--accent-blue);
outline-offset: -1px;
}

.history-item.current {
border: 1px solid var(--accent-blue);
border-left-color: var(--accent-blue);
background: rgba(0, 122, 204, 0.15);
font-weight: 600;
}

.history-item.future {
Expand Down
Loading