Skip to content

Fix index button active state and separate from page nav #85

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

Open
jack-kerouac wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix index button active state and separate from page nav #85

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
94c8de3
Fix index button staying highlighted on transcript pages
jack-kerouac Mar 13, 2026
bbe67fa
Separate index button from page nav with divider and disable Next on …
jack-kerouac Mar 13, 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
2 changes: 1 addition & 1 deletion src/claude_code_transcripts/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1062,7 +1062,7 @@ def render_message(log_type, message_json, timestamp):
.pagination a:hover { background: var(--user-bg); }
.pagination .current { background: var(--user-border); color: white; }
.pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
.pagination .index-link { background: var(--user-border); color: white; }
.pagination .pagination-sep { width: 1px; padding: 0; margin: 0 4px; background: #ccc; }
details.continuation { margin-bottom: 16px; }
details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
Expand Down
10 changes: 4 additions & 6 deletions src/claude_code_transcripts/templates/macros.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
{# Pagination for regular pages #}
{% macro pagination(current_page, total_pages) %}
{% if total_pages <= 1 %}
<div class="pagination"><a href="index.html" class="index-link">Index</a></div>
<div class="pagination"><a href="index.html">Index</a></div>
{%- else %}
<div class="pagination">
<a href="index.html" class="index-link">Index</a>
<a href="index.html">Index</a>
<span class="pagination-sep"></span>
{% if current_page > 1 -%}
<a href="page-{{ '%03d'|format(current_page - 1) }}.html">&larr; Prev</a>
{%- else -%}
Expand Down Expand Up @@ -33,15 +34,12 @@
{%- else %}
<div class="pagination">
<span class="current">Index</span>
<span class="pagination-sep"></span>
<span class="disabled">&larr; Prev</span>
{% for page in range(1, total_pages + 1) -%}
<a href="page-{{ '%03d'|format(page) }}.html">{{ page }}</a>
{% endfor -%}
{% if total_pages >= 1 -%}
<a href="page-001.html">Next &rarr;</a>
{%- else -%}
<span class="disabled">Next &rarr;</span>
{%- endif %}
</div>
{%- endif %}
{% endmacro %}
Expand Down
8 changes: 5 additions & 3 deletions tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
.pagination a:hover { background: var(--user-bg); }
.pagination .current { background: var(--user-border); color: white; }
.pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
.pagination .index-link { background: var(--user-border); color: white; }
.pagination .pagination-sep { width: 1px; padding: 0; margin: 0 4px; background: #ccc; }
details.continuation { margin-bottom: 16px; }
details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
Expand Down Expand Up @@ -158,10 +158,11 @@ <h1>Claude Code transcript</h1>

<div class="pagination">
<span class="current">Index</span>
<span class="pagination-sep"></span>
<span class="disabled">&larr; Prev</span>
<a href="page-001.html">1</a>
<a href="page-002.html">2</a>
<a href="page-001.html">Next &rarr;</a>
<span class="disabled">Next &rarr;</span>
</div>

<p style="color: var(--text-muted); margin-bottom: 24px;">5 prompts · 33 messages · 12 tool calls · 2 commits · 2 pages</p>
Expand All @@ -180,10 +181,11 @@ <h1>Claude Code transcript</h1>

<div class="pagination">
<span class="current">Index</span>
<span class="pagination-sep"></span>
<span class="disabled">&larr; Prev</span>
<a href="page-001.html">1</a>
<a href="page-002.html">2</a>
<a href="page-001.html">Next &rarr;</a>
<span class="disabled">Next &rarr;</span>
</div>


Expand Down
8 changes: 5 additions & 3 deletions tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
.pagination a:hover { background: var(--user-bg); }
.pagination .current { background: var(--user-border); color: white; }
.pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
.pagination .index-link { background: var(--user-border); color: white; }
.pagination .pagination-sep { width: 1px; padding: 0; margin: 0 4px; background: #ccc; }
details.continuation { margin-bottom: 16px; }
details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
Expand Down Expand Up @@ -149,7 +149,8 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C


<div class="pagination">
<a href="index.html" class="index-link">Index</a>
<a href="index.html">Index</a>
<span class="pagination-sep"></span>
<span class="disabled">&larr; Prev</span>
<span class="current">1</span>
<a href="page-002.html">2</a>
Expand Down Expand Up @@ -283,7 +284,8 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C


<div class="pagination">
<a href="index.html" class="index-link">Index</a>
<a href="index.html">Index</a>
<span class="pagination-sep"></span>
<span class="disabled">&larr; Prev</span>
<span class="current">1</span>
<a href="page-002.html">2</a>
Expand Down
8 changes: 5 additions & 3 deletions tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
.pagination a:hover { background: var(--user-bg); }
.pagination .current { background: var(--user-border); color: white; }
.pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
.pagination .index-link { background: var(--user-border); color: white; }
.pagination .pagination-sep { width: 1px; padding: 0; margin: 0 4px; background: #ccc; }
details.continuation { margin-bottom: 16px; }
details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
Expand Down Expand Up @@ -149,7 +149,8 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C


<div class="pagination">
<a href="index.html" class="index-link">Index</a>
<a href="index.html">Index</a>
<span class="pagination-sep"></span>
<a href="page-001.html">&larr; Prev</a>
<a href="page-001.html">1</a>
<span class="current">2</span>
Expand Down Expand Up @@ -180,7 +181,8 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C


<div class="pagination">
<a href="index.html" class="index-link">Index</a>
<a href="index.html">Index</a>
<span class="pagination-sep"></span>
<a href="page-001.html">&larr; Prev</a>
<a href="page-001.html">1</a>
<span class="current">2</span>
Expand Down
8 changes: 5 additions & 3 deletions tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
.pagination a:hover { background: var(--user-bg); }
.pagination .current { background: var(--user-border); color: white; }
.pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
.pagination .index-link { background: var(--user-border); color: white; }
.pagination .pagination-sep { width: 1px; padding: 0; margin: 0 4px; background: #ccc; }
details.continuation { margin-bottom: 16px; }
details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
Expand Down Expand Up @@ -158,9 +158,10 @@ <h1>Claude Code transcript</h1>

<div class="pagination">
<span class="current">Index</span>
<span class="pagination-sep"></span>
<span class="disabled">&larr; Prev</span>
<a href="page-001.html">1</a>
<a href="page-001.html">Next &rarr;</a>
<span class="disabled">Next &rarr;</span>
</div>

<p style="color: var(--text-muted); margin-bottom: 24px;">2 prompts · 7 messages · 2 tool calls · 1 commits · 1 pages</p>
Expand All @@ -172,9 +173,10 @@ <h1>Claude Code transcript</h1>

<div class="pagination">
<span class="current">Index</span>
<span class="pagination-sep"></span>
<span class="disabled">&larr; Prev</span>
<a href="page-001.html">1</a>
<a href="page-001.html">Next &rarr;</a>
<span class="disabled">Next &rarr;</span>
</div>


Expand Down
27 changes: 27 additions & 0 deletions tests/test_generate_html.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,33 @@ def test_generates_page_002_html(self, output_dir, snapshot_html):
page_html = (output_dir / "page-002.html").read_text(encoding="utf-8")
assert page_html == snapshot_html

def test_index_link_not_highlighted_on_transcript_pages(self, output_dir):
"""The index button should not have the same style as the current page button."""
fixture_path = Path(__file__).parent / "sample_session.json"
generate_html(fixture_path, output_dir, github_repo="example/project")

page_html = (output_dir / "page-001.html").read_text(encoding="utf-8")
# The index link should NOT be styled like the active/current page
assert "index-link" not in page_html

def test_index_page_has_disabled_next_button(self, output_dir):
"""On the index page, Next should be disabled since index is separate from transcript pages."""
fixture_path = Path(__file__).parent / "sample_session.json"
generate_html(fixture_path, output_dir, github_repo="example/project")

index_html = (output_dir / "index.html").read_text(encoding="utf-8")
assert 'Next &rarr;</a>' not in index_html
assert 'Next &rarr;</span>' in index_html

def test_pagination_has_separator_between_index_and_pages(self, output_dir):
"""A visual separator should exist between the Index button and the page nav buttons."""
fixture_path = Path(__file__).parent / "sample_session.json"
generate_html(fixture_path, output_dir, github_repo="example/project")

for filename in ("index.html", "page-001.html"):
html = (output_dir / filename).read_text(encoding="utf-8")
assert "pagination-sep" in html

def test_github_repo_autodetect(self, sample_session):
"""Test GitHub repo auto-detection from git push output."""
loglines = sample_session["loglines"]
Expand Down