feat(mobile): add flat pages by nossila · Pull Request #393 · silverlogic/baseapp-frontend

nossila · 2026-06-19T03:36:04Z

No description provided.

Add a pages module split (web + native) over the shared pages/common fragments/queries, mirroring the comments module. Web: move PageComponent (Markdown body + admin links + comments) into the package so apps consume it from @baseapp-frontend/components/pages/web. Native: PageComponent renders the page title + HTML body via @native-html/render in a scroll view, with web-like vertical rhythm (tight tagsStyles + experimental margin collapsing). The native module exports only PageComponent; the urlPath -> component dispatch is left to consumers so each project can map target types (including custom ones). Adds a native CommentsIcon (ported from web), declares @native-html/render, highlight.js and rehype-highlight on the components package, and exports ./pages/web and ./pages/native. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014UEeymHwwPE1jQKtGpVUAx

Handle <a> taps in the native PageComponent: hrefs starting with '/' route through expo-router; everything else (http, mailto, …) opens via Linking. Port the remaining web navigation icons to native (Forum, Authentication, FlatPage, FeatureRequests, Feedback, ActivityLog) so the mobile sidebar can mirror the web nav. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014UEeymHwwPE1jQKtGpVUAx

changeset-bot · 2026-06-19T03:36:07Z

⚠️ No Changeset found

Latest commit: 7ade389

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2026-06-19T03:36:12Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d493bbca-7e37-4760-a6fa-4e4627b75b2d

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feature/mobile-flat-pages

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.}

Copilot

Pull request overview

Adds new “flat pages” UI support to the shared components package, including web + native page rendering and several new native design-system icons that can be used in mobile navigation/menus.

Changes:

Added multiple new native icons (Activity Log, Authentication, Comments, Feature Requests, Feedback, Flat Page, Forum) and exported them from the native icon barrel.
Introduced pages/web and pages/native modules with PageComponent implementations (web uses Markdown with syntax highlighting; native renders HTML via @native-html/render).
Updated packages/components package exports and dependencies to support the new page modules and highlighting/rendering libraries.

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/design-system/components/native/icons/index.ts	Exports newly added native icons via the barrel.
packages/design-system/components/native/icons/ForumIcon/index.tsx	Adds Forum icon SVG component.
packages/design-system/components/native/icons/FlatPageIcon/index.tsx	Adds Flat Page icon SVG component.
packages/design-system/components/native/icons/FeedbackIcon/index.tsx	Adds Feedback icon SVG component.
packages/design-system/components/native/icons/FeatureRequestsIcon/index.tsx	Adds Feature Requests icon SVG component.
packages/design-system/components/native/icons/CommentsIcon/index.tsx	Adds Comments icon SVG component.
packages/design-system/components/native/icons/AuthenticationIcon/index.tsx	Adds Authentication icon SVG component.
packages/design-system/components/native/icons/ActivityLogIcon/index.tsx	Adds Activity Log icon SVG component.
packages/components/package.json	Exposes pages modules and adds deps for native HTML render + code highlighting.
packages/components/modules/pages/web/PageComponent/types.ts	Defines Relay fragment prop typing for web PageComponent.
packages/components/modules/pages/web/PageComponent/index.tsx	Renders a page on web with Markdown + highlighting and admin links.
packages/components/modules/pages/web/index.ts	Exports the web pages module entrypoint.
packages/components/modules/pages/native/PageComponent/types.ts	Defines Relay fragment prop typing for native PageComponent.
packages/components/modules/pages/native/PageComponent/styles.ts	Adds native styles for page layout/typography.
packages/components/modules/pages/native/PageComponent/index.tsx	Renders a page on native using `@native-html/render` and custom link handling.
packages/components/modules/pages/native/PageComponent/constants.ts	Adds native HTML tag spacing constants for consistent layout.
packages/components/modules/pages/native/index.ts	Exports the native pages module entrypoint.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

nossila · 2026-06-19T04:23:03Z

+  // Internal links (href starting with "/") route through expo-router; everything else
+  // (http(s), mailto, tel, …) opens in the device's default handler / browser.
+  const handleLinkPress = (href?: string) => {
+    if (!href) return
+    if (href.startsWith('/')) {
+      router.push(href as Href)
+    } else {
+      Linking.openURL(href)
+    }
+  }
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      {!!page.title && (
+        <Text variant="h2" style={styles.title}>
+          {page.title}
+        </Text>
+      )}
+      <RenderHtml
+        contentWidth={width - CONTENT_HORIZONTAL_PADDING * 2}
+        source={{ html: page.body ?? '' }}
+        baseStyle={styles.body}
+        tagsStyles={HTML_TAGS_STYLES}
+        renderersProps={{ a: { onPress: (_event, href) => handleLinkPress(href) } }}


Fixed in 7ade389 — external links now go through openExternalUrl (utils.ts): only allow-listed schemes (http/https/mailto/tel) are opened, after a Linking.canOpenURL check, and the promise is awaited/caught so file:/custom schemes from page content can't be invoked and there's no unhandled rejection.

The flat-pages feature added @native-html/render, highlight.js, and rehype-highlight to packages/components but never defined their catalog entries in pnpm-workspace.yaml, leaving pnpm-lock.yaml out of date. CI install (--frozen-lockfile) failed, blocking build, unit, and component test jobs. - Add @native-html/render ^1.0.3 to the react-native catalog - Add highlight.js ^11.11.1 and rehype-highlight ^7.0.2 to design-system - Regenerate pnpm-lock.yaml Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

- web: Delete admin link pointed at /change/ (the edit page); point it at /delete/ so it opens Django's delete confirmation. - native: harden external link handling — restrict to an allow-list of schemes (http/https/mailto/tel), check Linking.canOpenURL, and await/catch the result so untrusted page content can't invoke file:/custom schemes or trigger unhandled promise rejections. Scheme list lives in constants.ts and the open helper in utils.ts per file-structure conventions. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

sonarqubecloud · 2026-06-19T04:23:26Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

nossila and others added 2 commits June 18, 2026 23:56

nossila requested a review from Copilot June 19, 2026 03:41

Copilot started reviewing on behalf of nossila June 19, 2026 03:42 View session

Copilot AI reviewed Jun 19, 2026

View reviewed changes

nossila and others added 2 commits June 19, 2026 03:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(mobile): add flat pages#393

feat(mobile): add flat pages#393
nossila wants to merge 4 commits into
masterfrom
feature/mobile-flat-pages

nossila commented Jun 19, 2026

Uh oh!

changeset-bot Bot commented Jun 19, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jun 19, 2026 •

edited

Loading

Review skipped

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

nossila Jun 19, 2026

Uh oh!

sonarqubecloud Bot commented Jun 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

nossila commented Jun 19, 2026

Uh oh!

changeset-bot Bot commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai Bot commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

nossila Jun 19, 2026

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud Bot commented Jun 19, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented Jun 19, 2026 •

edited

Loading

coderabbitai Bot commented Jun 19, 2026 •

edited

Loading