PULSE-31: PWA support and offline banner #4

Merged
uz1mani merged 12 commits from staging into main 2026-02-04 11:46:26 +00:00
9 changed files with 3178 additions and 171 deletions
Showing only changes of commit 19f75b2f45 - Show all commits

View File

@@ -40,8 +40,12 @@ export default function LayoutContent({ children }: { children: React.ReactNode
router.push('/onboarding')
greptile-apps[bot] commented 2026-02-04 11:30:21 +00:00 (Migrated from github.com)
Review

Moved auth check to parent instead of keeping it in OfflineBanner - the banner now only handles online/offline state while this component controls when it shows based on authentication.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Prompt To Fix With AI
This is a comment left during a code review.
Path: app/layout-content.tsx
Line: 48:48

Comment:
Moved auth check to parent instead of keeping it in `OfflineBanner` - the banner now only handles online/offline state while this component controls when it shows based on authentication.

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.
Moved auth check to parent instead of keeping it in `OfflineBanner` - the banner now only handles online/offline state while this component controls when it shows based on authentication. <sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub> <details><summary>Prompt To Fix With AI</summary> `````markdown This is a comment left during a code review. Path: app/layout-content.tsx Line: 48:48 Comment: Moved auth check to parent instead of keeping it in `OfflineBanner` - the banner now only handles online/offline state while this component controls when it shows based on authentication. <sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub> How can I resolve this? If you propose a fix, please make it concise. ````` </details>
greptile-apps[bot] commented 2026-02-04 11:38:19 +00:00 (Migrated from github.com)
Review

barHeightRem is defined but not used in the pt-[8.5rem] calculation on line 64. The hardcoded value could get out of sync if the banner height changes.

Prompt To Fix With AI
This is a comment left during a code review.
Path: app/layout-content.tsx
Line: 44:44

Comment:
`barHeightRem` is defined but not used in the `pt-[8.5rem]` calculation on line 64. The hardcoded value could get out of sync if the banner height changes.

How can I resolve this? If you propose a fix, please make it concise.
`barHeightRem` is defined but not used in the `pt-[8.5rem]` calculation on line 64. The hardcoded value could get out of sync if the banner height changes. <details><summary>Prompt To Fix With AI</summary> `````markdown This is a comment left during a code review. Path: app/layout-content.tsx Line: 44:44 Comment: `barHeightRem` is defined but not used in the `pt-[8.5rem]` calculation on line 64. The hardcoded value could get out of sync if the banner height changes. How can I resolve this? If you propose a fix, please make it concise. ````` </details>
}
const showOfflineBar = Boolean(auth.user && !isOnline);
const barHeightRem = '2.5rem';
return (
<>
{auth.user && <OfflineBanner />}
<Header
auth={auth}
LinkComponent={Link}
@@ -55,9 +59,9 @@ export default function LayoutContent({ children }: { children: React.ReactNode
showFaq={false}
showSecurity={false}
showPricing={true}
bottomContent={auth.user ? <OfflineBanner /> : undefined}
topOffset={showOfflineBar ? barHeightRem : undefined}
/>
<main className={`flex-1 pb-8 ${auth.user && !isOnline ? 'pt-32' : 'pt-24'}`}>
<main className={`flex-1 pb-8 ${showOfflineBar ? 'pt-[8.5rem]' : 'pt-24'}`}>
{children}
</main>
<Footer

View File

@@ -9,8 +9,8 @@ export function OfflineBanner() {
if (isOnline) return null;
return (
<div className="rounded-b-2xl bg-yellow-500/10 dark:bg-yellow-500/20 border-b border-yellow-500/20 dark:border-yellow-500/30 text-yellow-600 dark:text-yellow-400 px-4 sm:px-8 py-2 text-sm flex items-center justify-center gap-2 font-medium">
<FiWifiOff className="w-4 h-4" />
<div className="fixed top-0 left-0 right-0 z-[100] rounded-b-xl bg-yellow-500/15 dark:bg-yellow-500/25 border-b border-yellow-500/30 dark:border-yellow-500/40 text-yellow-700 dark:text-yellow-300 px-4 sm:px-8 py-2.5 text-sm flex items-center justify-center gap-2 font-medium shadow-md">
<FiWifiOff className="w-4 h-4 shrink-0" />
<span>You are currently offline. Changes may not be saved.</span>
</div>
);

8
package-lock.json generated
View File

@@ -8,7 +8,7 @@
"name": "pulse-frontend",
"version": "0.1.0",
"dependencies": {
"@ciphera-net/ui": "^0.0.41",
"@ciphera-net/ui": "^0.0.42",
"@ducanh2912/next-pwa": "^10.2.9",
"axios": "^1.13.2",
"country-flag-icons": "^1.6.4",
@@ -1467,9 +1467,9 @@
}
},
"node_modules/@ciphera-net/ui": {
"version": "0.0.41",
"resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.41/3f5042af5890632050f2c6ae6b389a6899cfdc6c",
"integrity": "sha512-egkw5aN5+kZMW7A0AKlFU2ToAZIBTMTJKWzZbxo/fo/hxavZt5YdW7r/iHesY28gbUsNuWrRN7sQ3U9sYUcNSw==",
"version": "0.0.42",
"resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.42/f3476f7f1e6e2210b4c7b1ae84964777e1b2b718",
"integrity": "sha512-PuzwXKR2DrtTWXELDFH5GhQxnz0qPHTNGtMbTdhslWEp/taEy+n3UsoBp+NFw0uQEvz7mHQ9PgDpDVztQncMfw==",
"dependencies": {
"@radix-ui/react-icons": "^1.3.0",
"clsx": "^2.1.0",

View File

@@ -10,7 +10,7 @@
"type-check": "tsc --noEmit"
},
"dependencies": {
"@ciphera-net/ui": "^0.0.41",
"@ciphera-net/ui": "^0.0.42",
"@ducanh2912/next-pwa": "^10.2.9",
"axios": "^1.13.2",
"country-flag-icons": "^1.6.4",