Skip to content

Commit 5c4027e

Browse files
ozgesolidkeyclaude
ozgesolidkey
and
claude
committed
Major UI redesign: remove toolbar, merge into tab bar + right sidebar
Layout: - Toolbar completely removed — maximum editor space - Tab bar always visible with Open File, tabs, Search/Filter/Analyze icons - Right sidebar (36px) with all view toggles and utilities: Wrap, JSON, Columns, Split, DD, Annotations, Notes, Terminal, Minimap, Settings, Help — all with SVG icons Search: - VS Code-style floating search panel (Ctrl+F) over editor top-right - Contains search input, regex/wildcard/case/word toggles, nav, result count - Direction and start-line options inline - Esc closes panel Fixes: - Fixed null reference crash from removed btn-search-options element that prevented subsequent event handlers from registering - Terminal overlay no longer covers right sidebar - Annotations button shows active state when toggled Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent c09027e commit 5c4027e

File tree

3 files changed

+332
-88
lines changed

3 files changed

+332
-88
lines changed

‎src/renderer/index.html‎

Lines changed: 95 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -25,70 +25,32 @@
2525
</div>
2626
</div>
2727
<!-- Toolbar -->
28-
<div class="toolbar">
29-
<div class="toolbar-left">
28+
<!-- Tab Bar (always visible — replaces toolbar) -->
29+
<div id="tab-bar" class="tab-bar">
30+
<div class="tab-bar-left">
3031
<div class="open-file-wrapper">
31-
<button id="btn-open-file" class="toolbar-btn" title="Open file (click) | Recent files (right-click)" data-help="Open a log file for analysis.&#10;Right-click or use the dropdown for recent files.&#10;Supports text logs, JSON logs, CSV, and large files (100K+ lines).&#10;Drag & drop also works.">
32-
<span class="icon">&#128194;</span> Open File <span id="btn-recent-files" class="open-file-chevron" title="Recent files">&#9662;</span>
32+
<button id="btn-open-file" class="tab-bar-btn" title="Open file (Ctrl+O) | Recent (right-click)">
33+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
34+
<span id="btn-recent-files" class="open-file-chevron" title="Recent files">&#9662;</span>
3335
</button>
3436
<div id="recent-files-popup" class="recent-files-popup hidden"></div>
3537
</div>
36-
<div class="separator"></div>
37-
<div class="search-container">
38-
<input type="text" id="search-input" placeholder="Search..." class="toolbar-input">
39-
<label class="checkbox-label">
40-
<input type="checkbox" id="search-regex"> Regex
41-
</label>
42-
<label class="checkbox-label">
43-
<input type="checkbox" id="search-wildcard"> Wildcard
44-
</label>
45-
<label class="checkbox-label">
46-
<input type="checkbox" id="search-case"> Match Case
47-
</label>
48-
<label class="checkbox-label">
49-
<input type="checkbox" id="search-whole-word"> Whole Word
50-
</label>
51-
<button id="btn-search" class="toolbar-btn" title="Search" data-help="Search the log file for a pattern.&#10;Toggle Regex, Wildcard, Match Case, Whole Word modes.&#10;Ctrl+F to focus, Enter to search forward.">Search</button>
52-
<div class="search-options-wrapper">
53-
<button id="btn-search-options" class="toolbar-btn small" title="Search options">&#9881;</button>
54-
<div id="search-options-popup" class="search-options-popup hidden">
55-
<div class="search-option-row">
56-
<label class="search-option-label">Direction</label>
57-
<button id="search-direction" class="toolbar-btn small search-direction-btn" title="Toggle search direction">&#8595; Top to Bottom</button>
58-
</div>
59-
<div class="search-option-row">
60-
<label class="search-option-label" for="search-start-line">Start from line</label>
61-
<input type="number" id="search-start-line" class="search-start-line-input" placeholder="1" min="1">
62-
</div>
63-
</div>
64-
</div>
65-
<button id="btn-prev-result" class="toolbar-btn small" title="Previous result" disabled>&lt;</button>
66-
<span id="search-result-count" class="result-count"></span>
67-
<span id="search-engine-badge" class="search-engine-badge" title="Search engine"></span>
68-
<span id="hidden-matches-badge" class="hidden-matches-badge hidden" title="Click to see matches in filtered-out lines"></span>
69-
<button id="btn-next-result" class="toolbar-btn small" title="Next result" disabled>&gt;</button>
70-
</div>
71-
<div class="separator"></div>
72-
<button id="btn-filter" class="toolbar-btn" title="Filter settings" data-help="Filter visible lines by pattern, log level, or line range.&#10;Only matching lines are shown — others are hidden, not deleted.&#10;Ctrl+Shift+F to open filter dialog.">Filter</button>
73-
<button id="btn-split" class="toolbar-btn" title="Split file into parts" disabled data-help="Split a large log file into smaller parts by line count.&#10;Creates numbered files in the same directory.">Split</button>
74-
<button id="btn-analyze" class="toolbar-btn" title="Analyze file" disabled data-help="Run full analysis: log level distribution, crash detection,&#10;component breakdown, and timestamp patterns.&#10;Results appear in the Analysis panel below.">Analyze</button>
75-
<button id="btn-columns" class="toolbar-btn" title="Show/hide columns" disabled data-help="Toggle column visibility: line numbers, timestamps, levels, tags.&#10;Columns are auto-detected from log format.">Columns</button>
76-
<button id="btn-word-wrap" class="toolbar-btn" title="Toggle word wrap (⌥Z)" data-help="Wrap long lines to fit the viewer width.&#10;When off, scroll horizontally to see full lines.&#10;Shortcut: ⌥Z (Alt+Z)">Wrap</button>
77-
<button id="btn-json-format" class="toolbar-btn" title="Format & highlight JSON in logs" data-help="Detect and pretty-print JSON embedded in log lines.&#10;Adds syntax highlighting for keys, strings, numbers.&#10;Toggle on/off — does not modify the file.">JSON</button>
78-
<button id="btn-datadog" class="toolbar-btn" title="Connect to Datadog" data-help="Connect to Datadog to fetch and analyze logs remotely.&#10;Requires API and Application keys configured in Settings.">DD</button>
79-
</div>
80-
<div class="toolbar-right">
81-
<button id="btn-annotations-toggle" class="toolbar-btn small" title="Toggle Agent Annotations (Ctrl+Shift+A)" data-help="Show/hide AI agent annotations on log lines.&#10;Agents can add inline comments during analysis.&#10;Shortcut: Ctrl+Shift+A">&#128172;</button>
82-
<button id="btn-notes-toggle" class="toolbar-btn small" title="Toggle Notes (Ctrl+Shift+N)" data-help="Open the Notes drawer (slides up from bottom).&#10;Freeform notes saved per file as .logan/filename.notes.txt.&#10;Use 'Save Snippet' to append selected log lines.">&#128221;</button>
83-
<button id="btn-terminal-toggle" class="toolbar-btn small" title="Toggle Terminal (Ctrl+`)" data-help="Quake-style terminal that drops down from the top.&#10;Run shell commands without leaving LOGAN.&#10;Shortcut: Ctrl+` (backtick)">&#9000;</button>
84-
<button id="btn-help" class="toolbar-btn small" title="Keyboard shortcuts & help (F1)" data-help="Show all keyboard shortcuts and feature overview.&#10;Press F1 anytime to open.">&#9432;</button>
38+
<div class="tab-bar-separator"></div>
8539
</div>
86-
</div>
87-
88-
<!-- Tab Bar -->
89-
<div id="tab-bar" class="tab-bar hidden">
9040
<div id="tabs-container" class="tabs-container"></div>
91-
<button id="btn-new-tab" class="tab-new-btn" title="Open new file">+</button>
41+
<div class="tab-bar-right">
42+
<button id="btn-new-tab" class="tab-bar-btn" title="Open new file">+</button>
43+
<div class="tab-bar-separator"></div>
44+
<button id="btn-search-toggle" class="tab-bar-btn" title="Search (Ctrl+F)">
45+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
46+
</button>
47+
<button id="btn-filter" class="tab-bar-btn" title="Filter (Ctrl+Shift+F)">
48+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
49+
</button>
50+
<button id="btn-analyze" class="tab-bar-btn" title="Analyze" disabled>
51+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"/><path d="M8.5 2h7"/></svg>
52+
</button>
53+
</div>
9254
</div>
9355

9456
<!-- Main Content -->
@@ -142,11 +104,7 @@
142104
<span class="activity-badge" id="badge-chat"></span>
143105
</button>
144106
</div>
145-
<div class="activity-bar-bottom">
146-
<button class="activity-bar-btn" id="btn-activity-settings" title="Settings" data-help="App settings: theme, font size, Datadog keys,&#10;redaction rules, and default behaviors.">
147-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
148-
</button>
149-
</div>
107+
<div class="activity-bar-bottom"></div>
150108
</div>
151109

152110
<!-- Panel Container -->
@@ -280,6 +238,41 @@
280238
<button id="btn-dismiss-warning" class="warning-close-btn">&times;</button>
281239
</div>
282240
<div id="editor-container" class="editor-container">
241+
<!-- Search Panel (VS Code-style floating) -->
242+
<div id="search-panel" class="search-panel hidden">
243+
<div class="search-panel-row">
244+
<input type="text" id="search-input" class="search-panel-input" placeholder="Search...">
245+
<label class="search-panel-toggle" title="Regex">
246+
<input type="checkbox" id="search-regex"> <span>.*</span>
247+
</label>
248+
<label class="search-panel-toggle" title="Wildcard">
249+
<input type="checkbox" id="search-wildcard"> <span>*?</span>
250+
</label>
251+
<label class="search-panel-toggle" title="Match Case">
252+
<input type="checkbox" id="search-case"> <span>Aa</span>
253+
</label>
254+
<label class="search-panel-toggle" title="Whole Word">
255+
<input type="checkbox" id="search-whole-word"> <span>ab</span>
256+
</label>
257+
<button id="btn-search" class="search-panel-btn" title="Search">&#128269;</button>
258+
<button id="btn-prev-result" class="search-panel-btn" title="Previous" disabled>&lt;</button>
259+
<span id="search-result-count" class="search-panel-count"></span>
260+
<button id="btn-next-result" class="search-panel-btn" title="Next" disabled>&gt;</button>
261+
<span id="search-engine-badge" class="search-engine-badge" title="Search engine"></span>
262+
<span id="hidden-matches-badge" class="hidden-matches-badge hidden"></span>
263+
<button id="btn-search-panel-close" class="search-panel-close" title="Close (Esc)">&times;</button>
264+
</div>
265+
<div class="search-panel-options">
266+
<div class="search-panel-option">
267+
<label>Direction</label>
268+
<button id="search-direction" class="search-panel-btn search-direction-btn" title="Toggle direction">&#8595; Down</button>
269+
</div>
270+
<div class="search-panel-option">
271+
<label for="search-start-line">From line</label>
272+
<input type="number" id="search-start-line" class="search-panel-line-input" placeholder="1" min="1">
273+
</div>
274+
</div>
275+
</div>
283276
<!-- Markdown Preview -->
284277
<div id="markdown-preview" class="markdown-preview hidden"></div>
285278
<div id="welcome-message" class="welcome-message">
@@ -304,6 +297,45 @@ <h2>LOGAN</h2>
304297
</div>
305298
</div>
306299
</main>
300+
301+
<!-- Right Sidebar -->
302+
<div id="right-sidebar" class="right-sidebar">
303+
<button id="btn-word-wrap" class="right-sidebar-btn" title="Word Wrap (Alt+Z)">
304+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M3 12h15a3 3 0 1 1 0 6h-4"/><polyline points="13 16 11 18 13 20"/><path d="M3 18h4"/></svg>
305+
</button>
306+
<button id="btn-json-format" class="right-sidebar-btn" title="Format JSON">
307+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H6a2 2 0 0 0-2 2v2"/><path d="M4 15v2a2 2 0 0 0 2 2h2"/><path d="M16 3h2a2 2 0 0 1 2 2v2"/><path d="M20 15v2a2 2 0 0 1-2 2h-2"/><path d="M9 10h.01"/><path d="M15 10h.01"/><path d="M9 14h6"/></svg>
308+
</button>
309+
<button id="btn-columns" class="right-sidebar-btn" title="Columns" disabled>
310+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
311+
</button>
312+
<button id="btn-split" class="right-sidebar-btn" title="Split File" disabled>
313+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 3h5v5"/><path d="M8 3H3v5"/><path d="M12 22V8"/><path d="M21 3l-9 9"/><path d="M3 3l9 9"/></svg>
314+
</button>
315+
<button id="btn-datadog" class="right-sidebar-btn" title="Datadog">
316+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><text x="12" y="16" text-anchor="middle" font-size="10" fill="currentColor" stroke="none">DD</text></svg>
317+
</button>
318+
<div class="right-sidebar-separator"></div>
319+
<button id="btn-annotations-toggle" class="right-sidebar-btn" title="Annotations (Ctrl+Shift+A)">
320+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="9" y1="10" x2="15" y2="10"/></svg>
321+
</button>
322+
<button id="btn-notes-toggle" class="right-sidebar-btn" title="Notes (Ctrl+Shift+N)">
323+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
324+
</button>
325+
<button id="btn-terminal-toggle" class="right-sidebar-btn" title="Terminal (Ctrl+`)">
326+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
327+
</button>
328+
<div class="right-sidebar-separator"></div>
329+
<button id="btn-minimap-toggle" class="right-sidebar-btn" title="Toggle Minimap">
330+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><rect x="15" y="3" width="6" height="18" rx="1" fill="currentColor" opacity="0.3"/></svg>
331+
</button>
332+
<button id="btn-activity-settings" class="right-sidebar-btn" title="Settings">
333+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
334+
</button>
335+
<button id="btn-help" class="right-sidebar-btn" title="Help (F1)">
336+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
337+
</button>
338+
</div>
307339
</div>
308340

309341
<!-- Bottom Panel (tabbed) -->

0 commit comments

Comments
 (0)