Skip to content

feat: legal pages#470

Merged
basmasking merged 5 commits intomainfrom
469-term-and-privacy-pages
Feb 20, 2026
Merged

feat: legal pages#470
basmasking merged 5 commits intomainfrom
469-term-and-privacy-pages

Conversation

@petermasking
Copy link
Member

Fixes #469

Changes proposed in this pull request:

  • Terms and Privacy pages
  • Updated dependencies

@MaskingTechnology/comify

@petermasking petermasking linked an issue Feb 20, 2026 that may be closed by this pull request
@coderabbitai
Copy link

coderabbitai bot commented Feb 20, 2026

No actionable comments were generated in the recent review. 🎉


Summary by CodeRabbit

  • New Features

    • Added Terms of Use and Privacy Policy pages accessible via /terms and /privacy.
    • Introduced a dedicated Legal section with its own layout and header including a home/back action.
    • Legal links updated to route-based pages (e.g., /terms, /privacy).
  • Chores

    • Updated runtime and development dependencies.

Walkthrough

Adds embedded Terms and Privacy pages and a LegalLayout; updates routing exports (protected→app, public→legal), introduces guestRoutes, replaces PDF links with in-app routes, and upgrades several dev/runtime dependencies.

Changes

Cohort / File(s) Summary
Dependency Updates
package.json
Bumped versions for @maskingtech/designsystem, @types/node, @types/react, @vitejs/plugin-react, rimraf, and typescript-eslint. No script or runtime behavior changes.
Top-level Routes & Entry
src/apps/social/app/Routes.tsx, src/apps/social/app/application/Routes.tsx, src/apps/social/app/application/index.ts
Renamed exported route groups (protectedRoutesappRoutes, publicRouteslegalRoutes), introduced guestRoutes, moved the NotFound catch-all into legalRoutes, added /terms and /privacy routes, and re-exported LegalLayout.
Legal Pages
src/apps/social/app/application/Terms.tsx, src/apps/social/app/application/Privacy.tsx
Added static, default-exported React components rendering Terms of Use and Privacy Policy content using design system primitives; purely presentational.
Legal UI Components
src/apps/social/app/application/components/LegalHeader.tsx, src/apps/social/app/application/components/LegalInfo.tsx
Added LegalHeader component (accepts onGoHome callback); updated LegalInfo links from /assets/*.pdf to in-app routes (/terms, /privacy).
Navigation & Layout
src/apps/social/app/application/hooks/useNavigateHome.ts, src/apps/social/app/application/layouts/Legal.tsx
Added useNavigateHome hook (navigates to /) and Legal layout composing LegalHeader, PortraitLayout, and an Outlet for nested legal routes.

Sequence Diagram

sequenceDiagram
    participant User
    participant Router as Application Router
    participant LegalLayout
    participant LegalHeader
    participant LegalContent as Terms/Privacy

    User->>Router: Navigate to /terms or /privacy
    Router->>LegalLayout: Mount LegalLayout for legalRoutes
    LegalLayout->>LegalHeader: supply onGoHome (useNavigateHome)
    LegalLayout->>LegalContent: render Outlet (Terms/Privacy)
    LegalContent->>User: display page content
    User->>LegalHeader: click logo / back
    LegalHeader->>Router: invoke navigate('/') via onGoHome
    Router->>User: route to home
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐇 I hopped through routes and stitched a page,
Terms and Privacy now center stage.
PDFs tucked away, the links now roam,
A LegalLayout lights the homeward dome.
Click the logo — I'll guide you home.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'feat: legal pages' clearly and concisely summarizes the main change: adding legal pages (Terms and Privacy) to the application.
Description check ✅ Passed The description follows the template structure, includes the fixed issue number (#469), lists the key changes (Terms and Privacy pages, dependency updates), and tags the team.
Linked Issues check ✅ Passed The pull request fully addresses issue #469 by implementing Terms and Privacy pages as embedded routes rather than PDF downloads, with supporting components and layouts.
Out of Scope Changes check ✅ Passed All changes are directly related to implementing legal pages (#469): new page components, routing updates, layout components, and necessary dependency updates. No unrelated modifications detected.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


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.

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: 7

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/apps/social/app/application/components/LegalHeader.tsx`:
- Around line 12-16: The JSX return in the LegalHeader component is missing a
trailing semicolon causing the build failure; update the return statement in
LegalHeader.tsx (the block that returns Panel/ClickArea/Logo and references
onGoBack) to terminate the statement with a semicolon (add the semicolon after
the closing JSX expression) so the file parses correctly.
- Line 2: The import line in LegalHeader.tsx brings in Icon, Text, and Row which
are not used and trigger the unused-import lint error; update the import from
'@maskingtech/designsystem' to only import the used symbols (Panel and
ClickArea) by removing Icon, Text, and Row from the import list in the file's
top-level import statement so the lint rule and build succeed.

In `@src/apps/social/app/application/components/LegalInfo.tsx`:
- Line 8: The privacy Link in LegalInfo.tsx uses a relative URL ("privacy")
which can resolve incorrectly; update the Link usage in the LegalInfo component
so the privacy link uses an absolute path ("/privacy") like the terms link,
ensuring the href/url prop is "/privacy" (and keep the same target='_blank'
behavior); verify both Link occurrences in this component are consistent and
correctly use absolute paths.

In `@src/apps/social/app/application/layouts/Legal.tsx`:
- Line 13: The line defining Header is missing a trailing semicolon which breaks
the build; update the declaration of Header (const Header = <LegalHeader
onGoBack={navigateHome} />) to include a semicolon at the end so the statement
terminates properly, ensuring you modify the const Header assignment in the
Legal.tsx file where LegalHeader and navigateHome are referenced.

In `@src/apps/social/app/application/Privacy.tsx`:
- Line 2: Remove the unused import symbol `Text` from the import list in
Privacy.tsx to resolve the no-unused-vars lint error; update the import
statement that currently reads "import { Column, List, Paragraph, Text, Title }
from '@maskingtech/designsystem';" to omit `Text` so it becomes "import {
Column, List, Paragraph, Title } from '@maskingtech/designsystem';".

In `@src/apps/social/app/application/Routes.tsx`:
- Around line 13-17: The catch-all Route for NotFound is inside legalRoutes and
therefore renders with LegalLayout for all unmatched URLs; remove the catch-all
Route path='*' from legalRoutes and instead add a top-level catch-all Route
(e.g., in appRoutes or the root routes tree) that renders NotFound with the
correct layout (or wrap NotFound with LegalLayout only if you intentionally want
404s to use LegalLayout). Update references to legalRoutes, NotFound,
LegalLayout and appRoutes accordingly so the global 404 is a sibling route, not
nested inside legalRoutes.

In `@src/apps/social/app/application/Terms.tsx`:
- Around line 4-5: Rename the default React component function currently named
Feature to Terms in Terms.tsx (and likewise rename Feature to Privacy in the
sibling Privacy.tsx) so component display names are unique; update the function
declaration from "function Feature()" to "function Terms()" (or "function
Privacy()") and keep the default export as the renamed function, and search for
any local references to Feature (tests, imports, displayName usage) and update
them to the new symbol names.

Comment on lines +13 to +17
export const legalRoutes = <Route>
<Route path='/terms' element={<Terms />} />
<Route path='/privacy' element={<Privacy />} />
<Route path='*' element={<NotFound />} />
</Route>;
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find router composition points and route group usage

# Search for where legalRoutes, appRoutes, guestRoutes are used/imported
echo "=== Route group usage outside Routes.tsx ==="
rg -n 'legalRoutes|appRoutes|guestRoutes' --type=tsx --type=ts -g '!**/Routes.tsx' | head -50

echo -e "\n=== Checking for catch-all routes ==="
rg -n "path=.*[\'\"]\\*[\'\"]" --type=tsx --type=ts

echo -e "\n=== Checking for NotFound usage ==="
rg -n 'NotFound' --type=tsx --type=ts

echo -e "\n=== Look for Router/Routes composition ==="
rg -n 'BrowserRouter|RouterProvider|<Routes' --type=tsx --type=ts -C3

Repository: MaskingTechnology/comify

Length of output: 427


🏁 Script executed:

#!/bin/bash
# Find router composition and route usage with corrected syntax

# First, check the file structure
echo "=== Looking for relevant files ==="
find . -type f -name "*.tsx" -o -name "*.ts" | grep -E '(Route|route|app)' | head -20

echo -e "\n=== Route group usage (legalRoutes, appRoutes, guestRoutes) ==="
rg -n 'legalRoutes|appRoutes|guestRoutes' -g '!Routes.tsx' | head -50

echo -e "\n=== Catch-all routes with asterisk ==="
rg -n "path='\\*'|path=\"\\*\"" | head -20

echo -e "\n=== NotFound component usage ==="
rg -n 'NotFound' | head -30

echo -e "\n=== Routes.tsx full content ==="
cat src/apps/social/app/application/Routes.tsx

Repository: MaskingTechnology/comify

Length of output: 5302


🏁 Script executed:

#!/bin/bash
# Check App.tsx for route composition

echo "=== App.tsx content ==="
cat src/apps/social/app/App.tsx

echo -e "\n=== Check for LegalLayout or layout composition ==="
rg -n 'LegalLayout|Layout' src/apps/social/app/ -A 2 -B 2 | head -40

Repository: MaskingTechnology/comify

Length of output: 3356


🏁 Script executed:

#!/bin/bash
# Get the full Routes.tsx file at the app level

echo "=== Full Routes.tsx (app level) ==="
cat src/apps/social/app/Routes.tsx

echo -e "\n=== Check ProtectedRoute to understand its behavior ==="
cat src/apps/social/app/application/ProtectedRoute.tsx

Repository: MaskingTechnology/comify

Length of output: 1712


🏁 Script executed:

#!/bin/bash
# Final check: confirm no other global catch-all exists
echo "=== Verify legalRoutes is the only global catch-all at app level ==="
cat src/apps/social/app/Routes.tsx | grep -n "path=.*\\*"

echo -e "\n=== Verify feature routes each have their own catch-alls ==="
rg -l "path.*\\*" --type ts --type tsx | grep -E '(account|timeline|profile|explore|notification)/Routes'

Repository: MaskingTechnology/comify

Length of output: 243


🏁 Script executed:

#!/bin/bash
# Check a couple feature route files to confirm the pattern
echo "=== Check account/Routes.tsx ==="
cat src/apps/social/app/account/Routes.tsx | head -15

echo -e "\n=== Check timeline/Routes.tsx ==="
cat src/apps/social/app/timeline/Routes.tsx | head -15

Repository: MaskingTechnology/comify

Length of output: 894


Remove the catch-all from legalRoutes or clarify that 404 pages should display within LegalLayout.

The catch-all <Route path='*' element={<NotFound />} /> inside legalRoutes is wrapped by <LegalLayout /> at the app level. This means all unmatched URLs in the entire app (e.g., /badurl) will render the NotFound page with the legal page layout (header and navigation). If this is unintended—i.e., generic 404 pages should not include the legal layout—move the catch-all to a sibling layout or apply a different layout for 404s.

Note: appRoutes is not in an isolated router context; all routes share the same <Routes> tree, so unmatched authenticated URLs do reach this catch-all.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/apps/social/app/application/Routes.tsx` around lines 13 - 17, The
catch-all Route for NotFound is inside legalRoutes and therefore renders with
LegalLayout for all unmatched URLs; remove the catch-all Route path='*' from
legalRoutes and instead add a top-level catch-all Route (e.g., in appRoutes or
the root routes tree) that renders NotFound with the correct layout (or wrap
NotFound with LegalLayout only if you intentionally want 404s to use
LegalLayout). Update references to legalRoutes, NotFound, LegalLayout and
appRoutes accordingly so the global 404 is a sibling route, not nested inside
legalRoutes.

Comment on lines +4 to +5
export default function Feature()
{
Copy link

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Rename the component function from Feature to Terms (and Privacy in the sibling file)

Both Terms.tsx and Privacy.tsx export a function named Feature. Because React uses the function name as the component display name, React DevTools, error boundaries, and stack traces will show two identical Feature nodes with no way to distinguish them.

♻️ Proposed rename
-export default function Feature()
+export default function Terms()

Apply the equivalent rename (FeaturePrivacy) in src/apps/social/app/application/Privacy.tsx.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export default function Feature()
{
export default function Terms()
{
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/apps/social/app/application/Terms.tsx` around lines 4 - 5, Rename the
default React component function currently named Feature to Terms in Terms.tsx
(and likewise rename Feature to Privacy in the sibling Privacy.tsx) so component
display names are unique; update the function declaration from "function
Feature()" to "function Terms()" (or "function Privacy()") and keep the default
export as the renamed function, and search for any local references to Feature
(tests, imports, displayName usage) and update them to the new symbol names.

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: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/apps/social/app/application/components/LegalHeader.tsx`:
- Around line 6-8: Rename the prop onGoBack to onNavigateHome in the LegalHeader
component: update the Props type to readonly onNavigateHome: () => void, rename
any destructured prop usage inside the LegalHeader function/component to
onNavigateHome, and update the component invocation in Legal.tsx to pass the
same handler (the function that calls navigate('/')) under the new prop name;
ensure any internal references (e.g., button onClick) use onNavigateHome so
behavior is unchanged but the name reflects navigation to root.
- Around line 1-17: The privacy link in LegalInfo.tsx uses a relative URL
('privacy') causing incorrect routing on non-root pages; update the Link
component's url prop for the privacy policy from 'privacy' to '/privacy' (i.e.,
locate the Link usage that currently reads url='privacy' and change it to
url='/privacy') so the privacy policy resolves as an absolute path; verify the
Link for terms remains '/terms' and run a quick smoke test on routes like /login
to confirm /privacy opens correctly.

In `@src/apps/social/app/application/Privacy.tsx`:
- Around line 104-107: Replace the plain email text inside the Paragraph in the
Privacy component with a clickable mailto link so users can open their email
client directly; locate the Paragraph element in the Privacy (or Privacy.tsx)
component and change the email string to an anchor with
href="mailto:comify@masking.tech" (or the app's Link component configured for
external mailto links) and ensure accessibility by keeping the visible text as
"comify@masking.tech".

Comment on lines 1 to 17

import { Panel, ClickArea } from '@maskingtech/designsystem';

import Logo from './Logo';

type Props = {
readonly onGoBack: () => void;
};

export default function Component({ onGoBack }: Props)
{
return <Panel type='transparent' padding='small'>
<ClickArea onClick={onGoBack}>
<Logo size='small' />
</ClickArea>
</Panel>;
}
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Search for LegalInfo.tsx and verify the url='privacy' issue
echo "=== Finding LegalInfo.tsx ==="
fd 'LegalInfo.tsx' --type f

echo -e "\n=== Searching for the privacy link pattern ==="
rg -n "url='privacy'" --type-add 'tsx:*.tsx' --type=tsx -B2 -A2

echo -e "\n=== Searching more broadly for LegalInfo content ==="
rg -n "privacy" src/apps/social/app/application/components/ --type-add 'tsx:*.tsx' --type=tsx -C2

Repository: MaskingTechnology/comify

Length of output: 1440


🏁 Script executed:

#!/bin/bash
# Search for privacy route definition
echo "=== Searching for /privacy route or privacy page ==="
rg -n "privacy" --type-add 'tsx:*.tsx' --type=tsx src/apps/social/app/application/ | grep -i "route\|path\|page" | head -20

echo -e "\n=== Searching in router/routing configuration files ==="
fd 'route|router' -t f src/apps/social/app/application/ | head -10

echo -e "\n=== Looking for any privacy-related files ==="
fd -i 'privacy' -t f src/apps/social/app/application/

Repository: MaskingTechnology/comify

Length of output: 460


Broken privacy policy link in LegalInfo.tsx — missing leading slash.

The code at line 8 shows:

<Link url='/terms' target='_blank'>terms of use</Link> and <Link url='privacy' target='_blank'>privacy policy</Link>

/terms is correctly an absolute path, but privacy (no leading /) is a relative path. On any route other than / (e.g., /login, /register), this resolves incorrectly — e.g., /login/privacy instead of /privacy — silently failing to reach the Privacy page.

🐛 Proposed fix in LegalInfo.tsx
- By getting in, you agree to our <Link url='/terms' target='_blank'>terms of use</Link> and <Link url='privacy' target='_blank'>privacy policy</Link>.
+ By getting in, you agree to our <Link url='/terms' target='_blank'>terms of use</Link> and <Link url='/privacy' target='_blank'>privacy policy</Link>.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/apps/social/app/application/components/LegalHeader.tsx` around lines 1 -
17, The privacy link in LegalInfo.tsx uses a relative URL ('privacy') causing
incorrect routing on non-root pages; update the Link component's url prop for
the privacy policy from 'privacy' to '/privacy' (i.e., locate the Link usage
that currently reads url='privacy' and change it to url='/privacy') so the
privacy policy resolves as an absolute path; verify the Link for terms remains
'/terms' and run a quick smoke test on routes like /login to confirm /privacy
opens correctly.

Comment on lines 6 to 8
type Props = {
readonly onGoBack: () => void;
};
Copy link

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Optional: rename onGoBack to onNavigateHome to reflect actual behavior.

The prop name onGoBack implies browser history navigation, but the hook always calls navigate('/') (root). The mismatch could mislead future maintainers.

♻️ Suggested rename
 type Props = {
-    readonly onGoBack: () => void;
+    readonly onNavigateHome: () => void;
 };
 
-export default function Component({ onGoBack }: Props)
+export default function Component({ onNavigateHome }: Props)
 {
     return <Panel type='transparent' padding='small'>
-        <ClickArea onClick={onGoBack}>
+        <ClickArea onClick={onNavigateHome}>
             <Logo size='small' />
         </ClickArea>
     </Panel>;
 }

Also update the call site in src/apps/social/app/application/layouts/Legal.tsx:

-    const Header = <LegalHeader onGoBack={navigateHome} />;
+    const Header = <LegalHeader onNavigateHome={navigateHome} />;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
type Props = {
readonly onGoBack: () => void;
};
type Props = {
readonly onNavigateHome: () => void;
};
export default function Component({ onNavigateHome }: Props)
{
return <Panel type='transparent' padding='small'>
<ClickArea onClick={onNavigateHome}>
<Logo size='small' />
</ClickArea>
</Panel>;
}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/apps/social/app/application/components/LegalHeader.tsx` around lines 6 -
8, Rename the prop onGoBack to onNavigateHome in the LegalHeader component:
update the Props type to readonly onNavigateHome: () => void, rename any
destructured prop usage inside the LegalHeader function/component to
onNavigateHome, and update the component invocation in Legal.tsx to pass the
same handler (the function that calls navigate('/')) under the new prop name;
ensure any internal references (e.g., button onClick) use onNavigateHome so
behavior is unchanged but the name reflects navigation to root.

Comment on lines +104 to +107
<Paragraph>
For privacy-related questions or Account deletion requests, contact:
Email: comify@masking.tech
</Paragraph>
Copy link

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Optional: make the contact email address a clickable mailto: link.

The email is currently unformatted inline text inside <Paragraph>, which requires users to copy-paste it manually.

✨ Proposed improvement
-import { Column, List, Paragraph, Title } from '@maskingtech/designsystem';
+import { Column, Link, List, Paragraph, Title } from '@maskingtech/designsystem';
         <Column gap='medium'>
             <Title size='medium'>10. Contact</Title>
             <Paragraph>
-                For privacy-related questions or Account deletion requests, contact:
-                Email: comify@masking.tech
+                For privacy-related questions or Account deletion requests, contact: <Link url='mailto:comify@masking.tech'>comify@masking.tech</Link>
             </Paragraph>
         </Column>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Paragraph>
For privacy-related questions or Account deletion requests, contact:
Email: comify@masking.tech
</Paragraph>
import { Column, Link, List, Paragraph, Title } from '@maskingtech/designsystem';
Suggested change
<Paragraph>
For privacy-related questions or Account deletion requests, contact:
Email: comify@masking.tech
</Paragraph>
<Paragraph>
For privacy-related questions or Account deletion requests, contact: <Link url='mailto:comify@masking.tech'>comify@masking.tech</Link>
</Paragraph>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/apps/social/app/application/Privacy.tsx` around lines 104 - 107, Replace
the plain email text inside the Paragraph in the Privacy component with a
clickable mailto link so users can open their email client directly; locate the
Paragraph element in the Privacy (or Privacy.tsx) component and change the email
string to an anchor with href="mailto:comify@masking.tech" (or the app's Link
component configured for external mailto links) and ensure accessibility by
keeping the visible text as "comify@masking.tech".

@sonarqubecloud
Copy link

@basmasking basmasking merged commit 91554c4 into main Feb 20, 2026
7 checks passed
@basmasking basmasking deleted the 469-term-and-privacy-pages branch February 20, 2026 08:21
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.

Term and Privacy pages

2 participants