fix: outline links

[chmurson]

Summary by CodeRabbit

• Refactor
  • Updated outline link behavior so clicks no longer trigger default anchor navigation; links now rely on the app's click handler to navigate, improving navigation control and preventing unintended page jumps.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for graypaper-reader ready!

Name	Link
🔨 Latest commit	bd85b5e
🔍 Latest deploy log	https://app.netlify.com/projects/graypaper-reader/deploys/695121b9324e9e00085427a1
😎 Deploy Preview	https://deploy-preview-354--graypaper-reader.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

Outline link behavior changed: anchor href is now a constant "#", and the click handler calls e.preventDefault() before invoking the component's onClick with the link destination, preventing default anchor navigation and delegating navigation to the handler. (50 words)

Changes

Cohort / File(s)	Summary
Outline component navigation refactor src/components/Outline/Outline.tsx	Anchor href replaced with "#"; onClick updated to a guarded handler that calls e.preventDefault() and then onClick(item.dest), ensuring clicks do not perform default navigation and instead use the provided handler.

Sequence Diagram(s)

(Skipped — change is a small navigation-handling tweak within a single component; does not meet diagram criteria.)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~18 minutes

Possibly related PRs

• fix: outline links #354: Similar change to OutlineDumb — hardcodes anchor href to "#" and adds preventDefault() before invoking the click handler.

Suggested reviewers

• DrEverr
• mateuszsikora

Poem

🐰 I nibble links with careful art,

href now rests, click plays its part,
preventDefault keeps hops in place,
the handler guides me to the space,
a quiet, clever navigation race.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: outline links' directly and clearly describes the main change: fixing outline link behavior by preventing default navigation and delegating control to the onClick handler.

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6f874bc and bd85b5e.

📒 Files selected for processing (1)

• src/components/Outline/Outline.tsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Visual Regression Test Report ✅ Passed

Github run id: 20553730405

🔗 Artifacts: Download

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a504590 and 6f874bc.

📒 Files selected for processing (1)

• src/components/Outline/Outline.tsx

🧰 Additional context used

📓 Path-based instructions (4)

src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,tsx}: Feature folders should keep components, hooks, and styles together in src/
Prefer hooks over Higher-Order Components (HOCs)
Colocate helper functions with their consumer components
Use PascalCase for component names
Favor semantic wrappers over long Tailwind utility class strings; complement Tailwind with @fluffylabs/shared-ui components

Files:

• src/components/Outline/Outline.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Use TypeScript as the primary language with functional React components
Use camelCase for function and variable names
Use SCREAMING_SNAKE_CASE for constants

Files:

• src/components/Outline/Outline.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use 2-space indentation

Files:

• src/components/Outline/Outline.tsx

**/*.{js,jsx,ts,tsx}

⚙️ CodeRabbit configuration file

When reviewing Tailwind CSS classes, ensure they follow Tailwind 4.x conventions and suggest modern 4.x alternatives for deprecated patterns.

Files:

• src/components/Outline/Outline.tsx

🧠 Learnings (4)

📓 Common learnings

Learnt from: chmurson
Repo: FluffyLabs/graypaper-reader PR: 330
File: src/components/Outline/OutlineLink.tsx:17-21
Timestamp: 2025-10-22T20:36:10.440Z
Learning: Project targets React 19+; prefer passing refs as a regular prop in function components and avoid React.forwardRef in new code. File: src/components/Outline/OutlineLink.tsx.

Learnt from: chmurson
Repo: FluffyLabs/graypaper-reader PR: 330
File: src/components/Outline/OutlineLink.tsx:17-21
Timestamp: 2025-10-22T20:36:10.440Z
Learning: This repo targets React 19+; prefer passing refs as a normal prop to function components and avoid React.forwardRef in new code. File context: src/components/Outline/OutlineLink.tsx.

Learnt from: chmurson
Repo: FluffyLabs/graypaper-reader PR: 330
File: src/components/Outline/OutlineLink.tsx:17-21
Timestamp: 2025-10-22T20:36:10.440Z
Learning: Tailwind CSS v4 is used; avoid non-default width utilities like border-b-1 unless configured. Prefer border-b (1px) or border-b-[1px]. File context: src/components/Outline/OutlineLink.tsx.

📚 Learning: 2025-10-22T20:36:10.440Z

Learnt from: chmurson
Repo: FluffyLabs/graypaper-reader PR: 330
File: src/components/Outline/OutlineLink.tsx:17-21
Timestamp: 2025-10-22T20:36:10.440Z
Learning: Project targets React 19+; prefer passing refs as a regular prop in function components and avoid React.forwardRef in new code. File: src/components/Outline/OutlineLink.tsx.

Applied to files:

• src/components/Outline/Outline.tsx

📚 Learning: 2025-10-22T20:36:10.440Z

Learnt from: chmurson
Repo: FluffyLabs/graypaper-reader PR: 330
File: src/components/Outline/OutlineLink.tsx:17-21
Timestamp: 2025-10-22T20:36:10.440Z
Learning: This repo targets React 19+; prefer passing refs as a normal prop to function components and avoid React.forwardRef in new code. File context: src/components/Outline/OutlineLink.tsx.

Applied to files:

• src/components/Outline/Outline.tsx

📚 Learning: 2025-10-22T20:36:10.440Z

Learnt from: chmurson
Repo: FluffyLabs/graypaper-reader PR: 330
File: src/components/Outline/OutlineLink.tsx:17-21
Timestamp: 2025-10-22T20:36:10.440Z
Learning: Tailwind CSS v4 is used; avoid non-default width utilities like border-b-1 unless configured. Prefer border-b (1px) or border-b-[1px]. File context: src/components/Outline/OutlineLink.tsx.

Applied to files:

• src/components/Outline/Outline.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: visual-tests

🔇 Additional comments (2)

src/components/Outline/Outline.tsx (2)

92-95: LGTM! Proper event handling for JavaScript-driven navigation.

The onClick handler correctly prevents default anchor behavior before routing through the linkService callback. The e.preventDefault() call is essential here to prevent the href="#" from scrolling the page to the top.

---

90-90: The href="#" change is correct; no accessibility concerns.

The OutlineLink component is a semantic <a> tag that accepts onClick as a prop. Browser-native <a> elements provide built-in keyboard accessibility (Tab focus, Enter/Space activation), and onClick handlers automatically work with keyboard events. The preventDefault() in the onClick handler only prevents default navigation, not the keyboard triggering of the click event.

The component correctly passes the ref as a regular prop without React.forwardRef, following React 19+ best practices.