feat(ui): header toggles, section collapse, kiwi-brand colors by kickthemoon0817 · Pull Request #1 · hletrd/kiwi-paper

kickthemoon0817 · 2026-03-28T05:30:32Z

Summary

Add KO/EN segmented pill toggle and sun/moon theme toggle to header bar
Add section collapse/expand with chevron indicators on h2/h3 headings
Apply kiwi brand color to section numbering, footnote refs, and footnote section numbers
Add back-to-TOC links on section heading numbers, fix duplicate TOC numbering
Hide footnote backref arrows, add clickable numbered links in footnotes section
Fix inconsistent line spacing from external link icons and footnotes
Make header and title bar span full wrapper width
Port all changes to renderer template

Test plan

Open example HTML and verify header toggles (KO/EN, light/dark) animate correctly
Click section headings (h2 and h3) to verify collapse/expand works
Verify section numbers and footnote superscripts use kiwi brand color
Verify TOC entries are not duplicated (e.g. "1. 개요" not "1. 1. 개요")
Click section number links to verify they scroll back to TOC
Verify footnote backref arrows are hidden
Test renderer output matches example styling

🤖 Generated with Claude Code

…ck-links - Add KO/EN segmented pill toggle and sun/moon theme toggle to header bar - Add section collapse/expand with chevron indicators on h2/h3 headings - Apply kiwi brand color to section numbering, footnote refs, and footnote section numbers - Add back-to-TOC links on section heading numbers - Fix duplicate numbering in TOC entries - Fix inconsistent line spacing from external link icons and footnote superscripts - Hide footnote backref arrows, add clickable numbered links in footnotes section - Make header and title bar span full wrapper width - Add emoji spacing in logo - Port all changes to renderer template Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

gemini-code-assist

Code Review

This pull request introduces significant UI and UX enhancements to the kiwi-paper documentation template, including a new header control bar with language (KO/EN) and theme (Light/Dark) toggles, and a dynamic section collapse feature for improved readability. The feedback focuses on resolving a state mismatch in the language toggle that causes flickering on page load, removing unnecessary !important CSS declarations to maintain stylesheet maintainability, and replacing brittle innerHTML manipulations with safer DOM methods to preserve existing heading structures. Additionally, it is recommended to move inline logo spacing to external CSS for better separation of concerns.

gemini-code-assist · 2026-03-28T05:33:07Z

+          <div class="seg-toggle-item active" data-val="en">EN</div>
+          <div class="seg-toggle-item" data-val="ko">KO</div>


언어 토글의 초기 상태가 일관되지 않아 페이지 로드 시 깜빡임(flicker)이 발생합니다. 현재 HTML에서는 'EN'이 활성화 상태로 렌더링되지만, JavaScript(var currentLang = 'ko')에서는 페이지 로드 직후 'KO'로 상태를 변경합니다. 초기 렌더링 시점부터 의도한 기본 언어(KO)가 활성화되도록 HTML을 수정하는 것이 좋습니다.

Suggested change

<div class="seg-toggle-item active" data-val="en">EN</div>

<div class="seg-toggle-item" data-val="ko">KO</div>

<div class="seg-toggle-item" data-val="en">EN</div>

<div class="seg-toggle-item active" data-val="ko">KO</div>

gemini-code-assist · 2026-03-28T05:33:07Z

+          <div class="seg-toggle-item active" data-val="en">EN</div>
+          <div class="seg-toggle-item" data-val="ko">KO</div>


언어 토글의 초기 상태가 일관되지 않아 페이지 로드 시 깜빡임(flicker)이 발생합니다. 현재 HTML에서는 'EN'이 활성화 상태로 렌더링되지만, JavaScript(var currentLang = 'ko')에서는 페이지 로드 직후 'KO'로 상태를 변경합니다. 초기 렌더링 시점부터 의도한 기본 언어(KO)가 활성화되도록 HTML을 수정하는 것이 좋습니다.

Suggested change

<div class="seg-toggle-item active" data-val="en">EN</div>

<div class="seg-toggle-item" data-val="ko">KO</div>

<div class="seg-toggle-item" data-val="en">EN</div>

<div class="seg-toggle-item active" data-val="ko">KO</div>

gemini-code-assist · 2026-03-28T05:33:07Z

-.footnote-ref a { color: #0275d8; font-size: 12px; font-weight: normal; }
-.footnote-backref { text-decoration: none; margin-left: 0.3em; color: var(--namu-brand); }
+.footnote-ref a { color: var(--namu-brand); font-size: 12px; font-weight: normal; }
+a[data-footnote-ref] { color: var(--namu-brand) !important; font-weight: 600; }


!important 선언은 불필요해 보입니다. a[data-footnote-ref] 선택자는 이미 다른 스타일을 재정의하기에 충분한 명시성을 가지며, 스타일시트에서 나중에 선언되었기 때문에 우선순위가 높습니다. !important를 사용하면 나중에 CSS를 디버깅하고 유지보수하기 더 어려워질 수 있습니다.

Suggested change

a[data-footnote-ref] { color: var(--namu-brand) !important; font-weight: 600; }

a[data-footnote-ref] { color: var(--namu-brand); font-weight: 600; }

gemini-code-assist · 2026-03-28T05:33:07Z

-      <button class="settings-toggle" aria-label="디스플레이 설정" title="디스플레이 설정">
-        <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>
-      </button>
+      <a class="wiki-logo" href="#">🥝<span style="margin-left:0.35em"></span>kiwi-paper</a>


로고의 아이콘과 텍스트 사이에 여백을 주기 위해 인라인 스타일이 적용된 빈 <span> 태그를 사용하고 있습니다. 이는 CSS와 HTML의 관심사를 분리하는 원칙에 어긋나며, 시맨틱하지 않습니다. CSS 클래스를 사용하여 스타일을 관리하는 것을 고려해보세요.

gemini-code-assist · 2026-03-28T05:33:07Z

-      <button class="settings-toggle" aria-label="디스플레이 설정" title="디스플레이 설정">
-        <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>
-      </button>
+      <a class="wiki-logo" href="${navigation.index || '#'}">🥝<span style="margin-left:0.35em"></span>kiwi-paper</a>


로고의 아이콘과 텍스트 사이에 여백을 주기 위해 인라인 스타일이 적용된 빈 <span> 태그를 사용하고 있습니다. 이는 CSS와 HTML의 관심사를 분리하는 원칙에 어긋나며, 시맨틱하지 않습니다. CSS 클래스를 사용하여 스타일을 관리하는 것을 고려해보세요.

gemini-code-assist · 2026-03-28T05:33:07Z

-.footnote-ref a { color: var(--link-color); font-size: 12px; font-weight: normal; }
-.footnote-backref { text-decoration: none; margin-left: 0.3em; color: var(--namu-brand); }
+.footnote-ref a { color: var(--namu-brand); font-size: 12px; font-weight: normal; }
+a[data-footnote-ref] { color: var(--namu-brand) !important; font-weight: 600; }


!important 선언은 불필요해 보입니다. a[data-footnote-ref] 선택자는 이미 다른 스타일을 재정의하기에 충분한 명시성을 가지며, 스타일시트에서 나중에 선언되었기 때문에 우선순위가 높습니다. !important를 사용하면 나중에 CSS를 디버깅하고 유지보수하기 더 어려워질 수 있습니다.

Suggested change

a[data-footnote-ref] { color: var(--namu-brand) !important; font-weight: 600; }

a[data-footnote-ref] { color: var(--namu-brand); font-weight: 600; }

gemini-code-assist · 2026-03-28T05:33:08Z

+  document.querySelectorAll('.wiki-article h2[id], .wiki-article h3[id]').forEach(function(h) {
+    var text = h.textContent;
+    var match = text.match(/^(\d+(\.\d+)*\.)\s*/);
+    if (!match) return;
+    var num = match[1];
+    var rest = text.slice(match[0].length);
+    h.innerHTML = '<a href="#toc">' + num + '</a> ' + rest;
+  });


innerHTML을 사용하여 제목을 수정하는 방식은 제목에 <code> 태그와 같은 인라인 HTML 요소가 포함될 경우 이를 제거할 수 있어 잠재적으로 취약합니다. textContent로 텍스트를 가져온 뒤 innerHTML로 재작성하면 기존의 HTML 구조가 사라지기 때문입니다. 더 안정적인 방법은 DOM 조작 메서드(예: insertBefore, createTextNode)를 사용하여 링크를 삽입하는 것입니다.

Suggested change

document.querySelectorAll('.wiki-article h2[id], .wiki-article h3[id]').forEach(function(h) {

var text = h.textContent;

var match = text.match(/^(\d+(\.\d+)*\.)\s*/);

if (!match) return;

var num = match[1];

var rest = text.slice(match[0].length);

h.innerHTML = '<a href="#toc">' + num + '</a> ' + rest;

});

document.querySelectorAll('.wiki-article h2[id], .wiki-article h3[id]').forEach(function(h) {

const firstNode = h.firstChild;

if (firstNode && firstNode.nodeType === Node.TEXT_NODE) {

const text = firstNode.nodeValue;

const match = text.match(/^(\d+(\.\d+)*\.)\s*/);

if (match) {

const num = match[1];

const restText = text.slice(match[0].length);

const link = document.createElement('a');

link.href = '#toc';

link.textContent = num;

h.insertBefore(link, firstNode);

firstNode.nodeValue = ' ' + restText.trimStart();

}

}

});

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a3a3710bc5

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-03-28T05:34:51Z

+  function setupCollapse(parent, headingSelector, stopTags) {
+    var headings = parent.querySelectorAll(headingSelector);
+    headings.forEach(function(h) {
+      var wrapper = document.createElement('div');
+      wrapper.className = 'section-content';


Restore folding updater after replacing section-fold logic

This change removes the old updateFolding implementation, but applyAll() still calls updateFolding() on startup and whenever settings are changed. In the renderer output, that produces a ReferenceError at runtime, so initial settings application is interrupted and later settings updates fail in the same path. Please either reintroduce a folding updater or remove that call and wire fold behavior into the new collapse flow.

Useful? React with 👍 / 👎.

chatgpt-codex-connector · 2026-03-28T05:34:51Z

+    if (!match) return;
+    var num = match[1];
+    var rest = text.slice(match[0].length);
+    h.innerHTML = '<a href="#toc">' + num + '</a> ' + rest;


Avoid injecting heading text via innerHTML for TOC links

Using h.textContent and then assigning h.innerHTML re-parses heading text as HTML, which strips existing inline formatting in headings and can turn escaped angle-bracket text into real elements. This is a content-integrity regression for headings containing code/emphasis or literal <...> text. Build the backlink with DOM nodes (anchor + text node) or escape the remainder before insertion.

Useful? React with 👍 / 👎.

gemini-code-assist Bot reviewed Mar 28, 2026

View reviewed changes

chatgpt-codex-connector Bot reviewed Mar 28, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): header toggles, section collapse, kiwi-brand colors#1

feat(ui): header toggles, section collapse, kiwi-brand colors#1
kickthemoon0817 wants to merge 1 commit into
hletrd:mainfrom
kickthemoon0817:feat/ui-enhancements

kickthemoon0817 commented Mar 28, 2026

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot Mar 28, 2026

Uh oh!

gemini-code-assist Bot Mar 28, 2026

Uh oh!

gemini-code-assist Bot Mar 28, 2026

Uh oh!

gemini-code-assist Bot Mar 28, 2026

Uh oh!

gemini-code-assist Bot Mar 28, 2026

Uh oh!

gemini-code-assist Bot Mar 28, 2026

Uh oh!

gemini-code-assist Bot Mar 28, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Mar 28, 2026

Uh oh!

chatgpt-codex-connector Bot Mar 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		<div class="seg-toggle-item active" data-val="en">EN</div>
		<div class="seg-toggle-item" data-val="ko">KO</div>

	a[data-footnote-ref] { color: var(--namu-brand) !important; font-weight: 600; }
	a[data-footnote-ref] { color: var(--namu-brand); font-weight: 600; }

-  document.querySelectorAll('.wiki-article h2[id], .wiki-article h3[id]').forEach(function(h) {
-    var text = h.textContent;
-    var match = text.match(/^(\d+(\.\d+)*\.)\s*/);
-    if (!match) return;
-    var num = match[1];
-    var rest = text.slice(match[0].length);
-    h.innerHTML = '<a href="#toc">' + num + '</a> ' + rest;
-  });
+  document.querySelectorAll('.wiki-article h2[id], .wiki-article h3[id]').forEach(function(h) {
+    const firstNode = h.firstChild;
+    if (firstNode && firstNode.nodeType === Node.TEXT_NODE) {
+      const text = firstNode.nodeValue;
+      const match = text.match(/^(\d+(\.\d+)*\.)\s*/);
+      if (match) {
+        const num = match[1];
+        const restText = text.slice(match[0].length);
+        const link = document.createElement('a');
+        link.href = '#toc';
+        link.textContent = num;
+        h.insertBefore(link, firstNode);
+        firstNode.nodeValue = ' ' + restText.trimStart();
+      }
+    }
+  });

Conversation

kickthemoon0817 commented Mar 28, 2026

Summary

Test plan

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Mar 28, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Mar 28, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Mar 28, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Mar 28, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Mar 28, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Mar 28, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Mar 28, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Mar 28, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot Mar 28, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant