-
Notifications
You must be signed in to change notification settings - Fork 0
Design #114
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Design #114
Changes from all commits
97ae588
aa46cac
2ad1204
2b62256
246da28
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,6 +8,7 @@ import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom"; | |
| import { ThemeProvider } from "@/components/ThemeProvider"; | ||
| import { motion, AnimatePresence } from "framer-motion"; | ||
| import { lazy, Suspense } from "react"; | ||
| import { useIsMobile } from "@/hooks/use-mobile"; | ||
|
|
||
| const Index = lazy(() => import("./pages/Index")); | ||
| const Login = lazy(() => import("./pages/Login")); | ||
|
|
@@ -20,6 +21,17 @@ const PrivacyPolicy = lazy(() => import("./pages/PrivacyPolicy")); | |
| const Privacy = lazy(() => import("./pages/Privacy")); | ||
| const Terms = lazy(() => import("./pages/Terms")); | ||
| const WelcomeToZync = lazy(() => import("./pages/WelcomeToZync")); | ||
| const IndexMobile = lazy(() => import("./mobile/pages/IndexMobile")); | ||
| const LoginMobile = lazy(() => import("./mobile/pages/LoginMobile")); | ||
| const SignupMobile = lazy(() => import("./mobile/pages/SignupMobile")); | ||
| const NotFoundMobile = lazy(() => import("./mobile/pages/NotFoundMobile")); | ||
| const DashboardMobile = lazy(() => import("./mobile/pages/DashboardMobile")); | ||
| const NewProjectMobile = lazy(() => import("./mobile/pages/NewProjectMobile")); | ||
| const ProjectDetailsMobile = lazy(() => import("./mobile/pages/ProjectDetailsMobile")); | ||
| const PrivacyPolicyMobile = lazy(() => import("./mobile/pages/PrivacyPolicyMobile")); | ||
| const PrivacyMobile = lazy(() => import("./mobile/pages/PrivacyMobile")); | ||
| const TermsMobile = lazy(() => import("./mobile/pages/TermsMobile")); | ||
| const WelcomeToZyncMobile = lazy(() => import("./mobile/pages/WelcomeToZyncMobile")); | ||
| import { useActivityTracker } from "./hooks/use-activity-tracker"; | ||
| import { useChatNotifications } from "./hooks/use-chat-notifications"; | ||
| import { useUserSync } from "./hooks/use-user-sync"; | ||
|
|
@@ -32,6 +44,7 @@ const AppContent = () => { | |
| useUserSync(); | ||
| useSyncData(); // Trigger local-first data fetch and Dexie sync on login/app load | ||
| const location = useLocation(); | ||
| const isMobile = useIsMobile(); | ||
|
|
||
|
|
||
| const getPageKey = (pathname: string) => { | ||
|
|
@@ -55,33 +68,33 @@ const AppContent = () => { | |
| > | ||
| <Suspense fallback={<div className="h-full w-full flex items-center justify-center text-sm text-muted-foreground">Loading…</div>}> | ||
| <Routes location={location}> | ||
| <Route path="/" element={<Index />} /> | ||
| <Route path="/login" element={<Login />} /> | ||
| <Route path="/signup" element={<Signup />} /> | ||
| <Route path="/welcome" element={<WelcomeToZync />} /> | ||
| <Route path="/dashboard" element={<Dashboard />} /> | ||
| <Route path="/dashboard/workspace" element={<Dashboard />} /> | ||
| <Route path="/dashboard/workspace/project/:id" element={<Dashboard />} /> | ||
| <Route path="/dashboard/projects" element={<Dashboard />} /> | ||
| <Route path="/dashboard/calendar" element={<Dashboard />} /> | ||
| <Route path="/dashboard/design" element={<Dashboard />} /> | ||
| <Route path="/dashboard/tasks" element={<Dashboard />} /> | ||
| <Route path="/dashboard/notes" element={<Dashboard />} /> | ||
| <Route path="/dashboard/files" element={<Dashboard />} /> | ||
| <Route path="/dashboard/activity" element={<Dashboard />} /> | ||
| <Route path="/dashboard/people" element={<Dashboard />} /> | ||
| <Route path="/dashboard/meet" element={<Dashboard />} /> | ||
| <Route path="/dashboard/settings" element={<Dashboard />} /> | ||
| <Route path="/dashboard/chat" element={<Dashboard />} /> | ||
| <Route path="/dashboard/new-project" element={<Dashboard />} /> | ||
| <Route path="/new-project" element={<NewProject />} /> | ||
| <Route path="/projects/:id" element={<ProjectDetails />} /> | ||
| <Route path="/" element={isMobile ? <IndexMobile /> : <Index />} /> | ||
| <Route path="/login" element={isMobile ? <LoginMobile /> : <Login />} /> | ||
| <Route path="/signup" element={isMobile ? <SignupMobile /> : <Signup />} /> | ||
| <Route path="/welcome" element={isMobile ? <WelcomeToZyncMobile /> : <WelcomeToZync />} /> | ||
| <Route path="/dashboard" element={isMobile ? <DashboardMobile /> : <Dashboard />} /> | ||
| <Route path="/dashboard/workspace" element={isMobile ? <DashboardMobile /> : <Dashboard />} /> | ||
| <Route path="/dashboard/workspace/project/:id" element={isMobile ? <DashboardMobile /> : <Dashboard />} /> | ||
| <Route path="/dashboard/projects" element={isMobile ? <DashboardMobile /> : <Dashboard />} /> | ||
| <Route path="/dashboard/calendar" element={isMobile ? <DashboardMobile /> : <Dashboard />} /> | ||
| <Route path="/dashboard/design" element={isMobile ? <DashboardMobile /> : <Dashboard />} /> | ||
| <Route path="/dashboard/tasks" element={isMobile ? <DashboardMobile /> : <Dashboard />} /> | ||
| <Route path="/dashboard/notes" element={isMobile ? <DashboardMobile /> : <Dashboard />} /> | ||
| <Route path="/dashboard/files" element={isMobile ? <DashboardMobile /> : <Dashboard />} /> | ||
| <Route path="/dashboard/activity" element={isMobile ? <DashboardMobile /> : <Dashboard />} /> | ||
| <Route path="/dashboard/people" element={isMobile ? <DashboardMobile /> : <Dashboard />} /> | ||
| <Route path="/dashboard/meet" element={isMobile ? <DashboardMobile /> : <Dashboard />} /> | ||
| <Route path="/dashboard/settings" element={isMobile ? <DashboardMobile /> : <Dashboard />} /> | ||
| <Route path="/dashboard/chat" element={isMobile ? <DashboardMobile /> : <Dashboard />} /> | ||
| <Route path="/dashboard/new-project" element={isMobile ? <DashboardMobile /> : <Dashboard />} /> | ||
| <Route path="/new-project" element={isMobile ? <NewProjectMobile /> : <NewProject />} /> | ||
|
Comment on lines
24
to
+90
|
||
| <Route path="/projects/:id" element={isMobile ? <ProjectDetailsMobile /> : <ProjectDetails />} /> | ||
|
|
||
| <Route path="/privacy-policy" element={<PrivacyPolicy />} /> | ||
| <Route path="/privacy" element={<Privacy />} /> | ||
| <Route path="/terms" element={<Terms />} /> | ||
| <Route path="/privacy-policy" element={isMobile ? <PrivacyPolicyMobile /> : <PrivacyPolicy />} /> | ||
| <Route path="/privacy" element={isMobile ? <PrivacyMobile /> : <Privacy />} /> | ||
| <Route path="/terms" element={isMobile ? <TermsMobile /> : <Terms />} /> | ||
| {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} | ||
| <Route path="*" element={<NotFound />} /> | ||
| <Route path="*" element={isMobile ? <NotFoundMobile /> : <NotFound />} /> | ||
| </Routes> | ||
| </Suspense> | ||
| </motion.div> | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useIsMobile()currently returnsfalseon the initial render (the hook initializes state toundefinedand returns!!isMobile), so mobile users will briefly render the desktop routes before the effect runs. Consider delaying route rendering until the mobile breakpoint is resolved (e.g., returnundefinedfrom the hook and show a loading shell), or initialize the hook state fromwindow.innerWidthto avoid a desktop->mobile flicker and unnecessary chunk loads.