feat: added disclaimer #277
Conversation
WalkthroughThis update introduces disclaimer modals to both the Blabsy and Pictique platforms, requiring users to acknowledge prototype warnings before accessing protected content. UI enhancements are made to login and authentication pages, including new logos, descriptive text, and improved QR code rendering. Supporting components, icons, stores, and dependencies are added or updated. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ProtectedLayout (Blabsy)
participant AuthContext
participant Modal
User->>ProtectedLayout (Blabsy): Access protected route
ProtectedLayout (Blabsy)->>AuthContext: Check authentication
AuthContext-->>ProtectedLayout (Blabsy): Authenticated/Not Authenticated
alt Not Authenticated
ProtectedLayout (Blabsy)-->>User: Show placeholder
else Authenticated
ProtectedLayout (Blabsy)->>Modal: Show disclaimer modal
User->>Modal: Accept disclaimer
Modal-->>ProtectedLayout (Blabsy): Set disclaimerAccepted = true
ProtectedLayout (Blabsy)-->>User: Render children (app content)
User->>Modal: Close without accepting
Modal-->>ProtectedLayout (Blabsy): Trigger signOut
end
sequenceDiagram
participant User
participant Pictique Layout
participant Disclaimer Store
participant Auth Store
User->>Pictique Layout: Access protected content
Pictique Layout->>Disclaimer Store: Check isDisclaimerModalOpen
alt Modal open
Pictique Layout-->>User: Show disclaimer modal
User->>Pictique Layout: Click "I Understand"
Pictique Layout->>Disclaimer Store: closeDisclaimerModal()
Disclaimer Store-->>Pictique Layout: Modal closed
Pictique Layout-->>User: Show app content
User->>Pictique Layout: Close modal without accepting
Pictique Layout->>Auth Store: Remove tokens, redirect to /auth
else Modal closed
Pictique Layout-->>User: Show app content
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
platforms/pictique/src/lib/stores/disclaimer.ts (1)
3-3: Consider user experience with modal persistence.The modal opens on every page load since
isDisclaimerModalOpendefaults totruewithout persistence. Consider if users should see this disclaimer repeatedly or if acknowledgment should be remembered.If you want to remember user acknowledgment, consider using localStorage:
-export const isDisclaimerModalOpen = writable(true); +export const isDisclaimerModalOpen = writable( + typeof window !== 'undefined' + ? !localStorage.getItem('disclaimer-acknowledged') + : true +);And update the close function:
-export const closeDisclaimerModal = () => isDisclaimerModalOpen.set(false); +export const closeDisclaimerModal = () => { + if (typeof window !== 'undefined') { + localStorage.setItem('disclaimer-acknowledged', 'true'); + } + isDisclaimerModalOpen.set(false); +};platforms/pictique/src/routes/(protected)/+layout.svelte (1)
182-225: Well-implemented disclaimer modal with proper security handling.The modal implementation correctly:
- Forces user acknowledgment before access
- Removes authentication tokens and redirects if closed without confirmation
- Provides clear disclaimer content about prototype nature
- Includes contact information for feedback
Consider adding a loading state or animation when the user clicks "I Understand" to provide visual feedback:
<Button variant="secondary" size="sm" class="mt-2" + disabled={isProcessing} callback={() => { + isProcessing = true; closeDisclaimerModal(); confirmedDisclaimer = true; + isProcessing = false; }}>I Understand</Button>platforms/pictique/src/routes/(auth)/auth/+page.svelte (1)
80-85: Consider simplifying technical language for better user experience.The explanation about W3DS architecture is quite technical. Consider making it more user-friendly or adding a "Learn More" link to detailed documentation.
-You are entering Pictique - a social network built on the Web 3.0 Data Space (W3DS) -architecture. This system is designed around the principle of data-platform separation, -where all your personal content is stored in your own sovereign eVault, not on -centralised servers. +You are entering Pictique - a social network where you own and control your data. +Your content is stored in your personal eVault, giving you full sovereignty over your information.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
platforms/blabsy/public/assets/w3dslogo.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
platforms/blabsy/src/components/layout/common-layout.tsx(1 hunks)platforms/blabsy/src/components/login/login-main.tsx(2 hunks)platforms/blabsy/src/lib/context/auth-context.tsx(0 hunks)platforms/pictique/package.json(1 hunks)platforms/pictique/src/declaration.d.ts(1 hunks)platforms/pictique/src/lib/icons/W3dslogo.svelte(1 hunks)platforms/pictique/src/lib/icons/index.ts(1 hunks)platforms/pictique/src/lib/stores/disclaimer.ts(1 hunks)platforms/pictique/src/routes/(auth)/auth/+page.svelte(2 hunks)platforms/pictique/src/routes/(protected)/+layout.svelte(5 hunks)
💤 Files with no reviewable changes (1)
- platforms/blabsy/src/lib/context/auth-context.tsx
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: the project uses svelte 5, which uses the new "runes" api including $props() for handling component ...
Learnt from: pixel-punk-20
PR: MetaState-Prototype-Project/prototype#121
File: platforms/metagram/src/stories/Button.svelte:0-0
Timestamp: 2025-05-08T09:02:43.311Z
Learning: The project uses Svelte 5, which uses the new "runes" API including $props() for handling component props instead of the export let syntax from Svelte 3/4.
Applied to files:
platforms/pictique/package.jsonplatforms/pictique/src/lib/icons/index.tsplatforms/pictique/src/declaration.d.ts
📚 Learning: the project uses svelte 5, which introduces the new "runes" api including $props() for handling comp...
Learnt from: pixel-punk-20
PR: MetaState-Prototype-Project/prototype#121
File: platforms/metagram/src/stories/Button.svelte:0-0
Timestamp: 2025-05-08T09:02:43.311Z
Learning: The project uses Svelte 5, which introduces the new "runes" API including $props() for handling component props instead of the export let syntax from Svelte 3/4.
Applied to files:
platforms/pictique/package.jsonplatforms/pictique/src/lib/icons/index.ts
🔇 Additional comments (16)
platforms/pictique/package.json (1)
59-59: Security and necessity verification required for svelte-qrcode-actionBefore approving, please ensure:
- Distinct functionality: confirm you need both packages—
svelte-qrcodeis a component, whilesvelte-qrcode-actionis an “action” API for direct DOM use.- No known vulnerabilities: run locally
to verify no advisories are reported fornpm i --package-lock-only npm audit --json | jq '.vulnerabilities'svelte-qrcode-action@^1.0.2.- Actual usage: search your codebase for imports or directives referencing
svelte-qrcode-action; remove the dependency if it isn’t being consumed.platforms/pictique/src/lib/icons/index.ts (1)
1-13: LGTM! Consistent quote style and new logo export.The standardization to double quotes improves consistency, and the new
W3dslogoexport aligns with the branding enhancements mentioned in the PR objectives.platforms/pictique/src/lib/stores/disclaimer.ts (1)
5-5: LGTM! Clean store implementation.The function correctly updates the store state to close the modal.
platforms/pictique/src/declaration.d.ts (1)
1-7: LGTM! Improved readability through formatting.The multi-line format and consistent quote style improve code readability while maintaining the same type declarations.
platforms/blabsy/src/components/login/login-main.tsx (2)
6-6: LGTM! Proper Next.js Image import.Using Next.js Image component is the recommended approach for optimized image loading.
89-97: LGTM! Informative content enhances user understanding.The descriptive text effectively explains the W3DS architecture and data sovereignty principles to users, improving transparency about the platform's design.
platforms/pictique/src/lib/icons/W3dslogo.svelte (1)
1-21: Clean SVG logo implementation.The W3DS logo component is well-structured with proper SVG syntax, appropriate clipping paths, and consistent styling. The static approach is suitable for a branding element.
platforms/pictique/src/routes/(protected)/+layout.svelte (2)
8-8: Good store-based state management for disclaimer modal.The import of disclaimer store functions provides clean separation of concerns for modal state management.
28-28: Proper reactive state tracking for user confirmation.The
confirmedDisclaimerstate variable correctly tracks whether the user has acknowledged the disclaimer, preventing repeated modal displays.platforms/blabsy/src/components/layout/common-layout.tsx (3)
15-16: Proper authentication integration.Good use of authentication hooks to ensure user is authenticated and provide access to signOut functionality.
18-18: Appropriate React state management for disclaimer acceptance.Using useState for tracking disclaimer acceptance is the right approach for this React component.
21-77: Excellent cross-platform consistency in disclaimer implementation.The modal implementation mirrors the Svelte version perfectly, providing:
- Consistent user experience across Blabsy and Pictique platforms
- Same disclaimer content and structure
- Identical security behavior (signOut on close without acceptance)
- Clear visual styling and messaging
This consistency helps maintain a unified user experience across the MetaState ecosystem.
platforms/pictique/src/routes/(auth)/auth/+page.svelte (4)
4-4: Good integration of new UI components.The imports for the W3DS logo and QR code action properly integrate the new branding and functionality enhancements.
Also applies to: 8-8
42-45: Improved visual hierarchy with header section.The addition of the logo and tagline creates better visual branding and user orientation on the login page.
87-87: Good branding consistency with W3DS logo placement.The logo placement at the bottom reinforces the W3DS branding and creates visual consistency across the platform.
50-74: Verify QR code readability with gradient backgroundWe’ve confirmed you’re using svelte-qrcode-action v1.0.2 (a small Svelte wrapper around styled-qr-code, last published a year ago). Gradient fills can reduce scan reliability under certain conditions.
• Test the generated QR code on multiple devices and lighting scenarios to ensure it remains easily detectable.
• If you notice scan failures:
– Provide a solid-color fallback (e.g. plain white or dark background).
– Or expose a prop to switch off gradients for environments with low contrast.
• Verify that the package’s dependency (styled-qr-code) supports these options or consider adding a post-render canvas overlay to boost contrast.
| <div className='absolute right-0 rotate-90 top-1/2'> | ||
| <Image | ||
| src='/assets/w3dslogo.svg' | ||
| alt='W3DS logo' | ||
| width={100} | ||
| height={20} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify absolute positioning context and asset availability.
The absolute positioning may not work as expected without a positioned parent container. Also ensure the logo asset exists at the specified path.
🏁 Script executed:
#!/bin/bash
# Description: Check if the W3DS logo asset exists and verify positioning context
# Check if the logo file exists in the public assets directory
fd -t f "w3dslogo.svg" platforms/blabsy/public
# Look for any positioned parent containers in the component
rg -A 10 -B 5 "position.*relative|position.*absolute" platforms/blabsy/src/components/login/login-main.tsxLength of output: 199
Ensure correct positioning context and verify asset path
- Asset Verification: Confirmed that
platforms/blabsy/public/assets/w3dslogo.svgexists, so usingsrc="/assets/w3dslogo.svg"is valid. - Positioning Context: There’s no ancestor in
login-main.tsxwith a positioning context (e.g.,relative). Without it, the.absolutewrapper will be positioned against the viewport.
• AddclassName="relative"(or equivalent CSS) to the nearest container around lines 80–87 to scope the absolute positioning.
🤖 Prompt for AI Agents
In platforms/blabsy/src/components/login/login-main.tsx around lines 80 to 87,
the div with class 'absolute' lacks a positioned ancestor, causing it to be
positioned relative to the viewport. To fix this, add className="relative" to
the nearest container element wrapping this div to establish a positioning
context, ensuring the absolute positioning is scoped correctly. The asset path
is correct and requires no change.
Description of change
Added disclaimers.
Issue Number
Closes #278
Type of change
How the change has been tested
Manually.
Change checklist
Summary by CodeRabbit
New Features
Bug Fixes
Chores