Skip to content

Conversation

@chmurson
Copy link
Collaborator

@chmurson chmurson commented Oct 7, 2025

Summary by CodeRabbit

  • Style

    • Improved dark-mode text color for nested outline items for better readability.
  • Chores

    • Reordered Tailwind imports and added shared UI stylesheet.
    • Updated shared UI dependency and removed legacy modal library.
  • Refactor

    • Replaced custom modal with a standardized DialogModal and improved open/close behavior.
    • Switched several native buttons to shared UI Button components.
  • Chores

    • Removed internal dropdown-menu implementation.
  • Infrastructure

    • Exposed host snapshot-tests directory into test services via extra volume mounts.

@netlify
Copy link

netlify bot commented Oct 7, 2025

Deploy Preview for graypaper-reader ready!

Name Link
🔨 Latest commit 90e5910
🔍 Latest deploy log https://app.netlify.com/projects/graypaper-reader/deploys/68e52f6f0762e50008d6a127
😎 Deploy Preview https://deploy-preview-324--graypaper-reader.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

coderabbitai bot commented Oct 7, 2025

Walkthrough

Replaced local dropdown-menu module; migrated modal UI from react-modal to shared-ui DialogModal and removed react-modal; updated Tailwind imports and added shared-ui styles; swapped several HTML buttons for @fluffylabs/shared-ui Button; adjusted Outline link dark-mode class; added test-volume mounts in docker-compose.

Changes

Cohort / File(s) Summary of changes
Outline styling
src/components/Outline/Outline.tsx
Changed non-first-level Link dark-mode class: replaced dark:text-brand-light with dark:text-brand-dark.
Modal & entry changes
src/components/Header/components/SettingsModal.tsx, src/components/Header/components/MoreNotesActionsButton.tsx, src/main.tsx, package.json
Removed react-modal and its setup; replaced local modal with shared-ui DialogModal (wired open/onClose); removed a main entry CSS import; bumped @fluffylabs/shared-ui version.
Dropdown removal
src/components/ui/dropdown-menu.tsx
Deleted entire Radix-based local dropdown-menu module and all exported wrapper components (module and exports removed).
Shared UI Buttons
src/components/RemoteSources/RemoteSources.tsx, src/components/RemoteSources/components/RemoteSource.tsx
Replaced raw <button> elements with Button from @fluffylabs/shared-ui (variants/sizes applied); handlers unchanged.
Tailwind / shared styles
src/tailwind.css
Replaced single Tailwind import with layered preflight, theme, utilities imports and added @fluffylabs/shared-ui/style.css; existing keyframes retained.
Docker: snapshot tests mounts
docker-compose.yml
Added volume mount ./tools/snapshot-tests/tests:/app/tools/snapshot-tests/tests to snapshot-tests and snapshot-tests-update services.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant Header
  participant MoreBtn as MoreNotesActionsButton
  participant Settings as SettingsModal
  participant Dialog as DialogModal(shared-ui)

  User->>Header: clicks "More"
  Header->>MoreBtn: open modal
  MoreBtn->>Settings: set isOpen = true
  Settings->>Dialog: Dialog.open = isOpen
  Dialog-->>Settings: user clicks Close
  Settings->>MoreBtn: onClose -> toggleModal
  MoreBtn->>Header: isOpen = false (modal closed)

  rect #F0F7FF
    note right of Dialog: DialogModal replaces react-modal and local modal implementation
  end
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

Suggested reviewers

  • DrEverr
  • mateuszsikora

Poem

I nibble at classes, hop through code in spring,
Swapped modals for dialogs — a tidy little thing.
Buttons now polished, Tailwind stacked neat,
Dropdowns departed, tests mount their seat.
Thump! The reader hums — a rabbit's small cheer. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The title “Use dialog from shared UI” accurately and concisely describes the primary change of replacing the local modal implementation with the shared UI DialogModal without including extraneous details.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch use-dialog-from-shared-ui

📜 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 cf86814 and 90e5910.

⛔ Files ignored due to path filters (20)
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/homepage-outline-dark-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/homepage-outline-light-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-edit-dark-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-edit-light-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-github-expanded-dark-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-github-expanded-light-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-github-option-hover-dark-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-github-option-hover-light-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-more-clicked-dark-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-more-clicked-light-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-more-settings-clicked-dark-mode-darwin.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-more-settings-clicked-dark-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-more-settings-clicked-light-mode-darwin.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-more-settings-clicked-light-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-dropdown-dark-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-dropdown-light-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-off-dark-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-off-light-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-on-dark-mode-linux.png is excluded by !**/*.png
  • tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-on-light-mode-linux.png is excluded by !**/*.png
📒 Files selected for processing (1)
  • docker-compose.yml (2 hunks)
⏰ 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

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

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

@github-actions
Copy link
Contributor

github-actions bot commented Oct 7, 2025

Visual Regression Test Report ✅ Passed

Github run id: 18317522940

🔗 Artifacts: Download

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
package.json (1)

53-53: Drop the orphaned @types/react-modal entry.

Since we no longer ship react-modal, the corresponding type package now just bloats installs. Please remove it to keep devDependencies aligned with actual usage.

-    "@types/react-modal": "^3.16.3",
📜 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 0951489 and cf86814.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (1)
  • package.json (1 hunks)
⏰ 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

@chmurson chmurson merged commit ae1c249 into main Oct 7, 2025
8 of 9 checks passed
@chmurson chmurson deleted the use-dialog-from-shared-ui branch October 7, 2025 15:23
@coderabbitai coderabbitai bot mentioned this pull request Nov 11, 2025
@coderabbitai coderabbitai bot mentioned this pull request Dec 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant