fix: Align AppSidebar to edge of browser (#363)

.changeset/thirty-pillows-greet.md

@@ -0,0 +1,5 @@
+---
+"namesake": patch
+---
+
+Reconfigure app layout for mobile support

src/components/app/AppContent/AppContent.tsx

@@ -3,5 +3,9 @@ type AppContentProps = {
 };
 
 export const AppContent = ({ children }: AppContentProps) => {
-  return <main className="flex-1 w-full app-padding">{children}</main>;
+  return (
+    <main className="flex-1 w-full max-w-[960px] mx-auto app-padding">
+      {children}
+    </main>
+  );
 };

src/components/app/AppSidebar/AppSidebar.tsx

@@ -33,8 +33,8 @@ export const AppSidebar = ({ children }: AppSidebarProps) => {
   };
 
   return (
-    <div className="w-72 lg:w-80 xl:w-[22rem] flex flex-col shrink-0 sticky top-0 h-screen overflow-y-auto border-r border-gray-dim">
-      <div className="app-padding h-header flex gap-2 items-center shrink-0 sticky top-0 bg-gray-1 dark:bg-graydark-2 z-20">
+    <div className="w-72 lg:w-80 xl:w-[22rem] flex flex-col shrink-0 sticky top-0 h-screen overflow-y-auto bg-white dark:bg-graydark-1 border-r border-gray-dim">
+      <div className="app-padding h-header flex gap-2 items-center shrink-0 sticky top-0 bg-white dark:bg-graydark-1 z-20">
         <Link href={{ to: "/" }} className="p-1 -m-1">
           <Logo className="h-5 lg:h-[1.35rem]" />
         </Link>
@@ -43,7 +43,7 @@ export const AppSidebar = ({ children }: AppSidebarProps) => {
         </Badge>
       </div>
       <div className="app-padding flex-1">{children}</div>
-      <div className="app-padding h-header -ml-3 shrink-0 flex items-center sticky bottom-0 bg-gray-1 dark:bg-graydark-2">
+      <div className="app-padding h-header -ml-3 shrink-0 flex items-center sticky bottom-0 bg-white dark:bg-graydark-1">
         <Authenticated>
           <MenuTrigger>
             <Button

src/main.tsx

@@ -52,6 +52,7 @@ const NotFoundComponent = () => (
 const router = createRouter({
   routeTree,
   context: {
+    convex: undefined!,
     title: undefined!,
     auth: undefined!,
     role: undefined!,
@@ -90,7 +91,7 @@ const InnerApp = () => {
   return (
     <RouterProvider
       router={router}
-      context={{ title, auth: authClient, role, residence, birthplace }}
+      context={{ convex, title, auth: authClient, role, residence, birthplace }}
     />
   );
 };

src/routes/__root.tsx

@@ -7,7 +7,7 @@ import {
   useLocation,
   useRouter,
 } from "@tanstack/react-router";
-import type { ConvexAuthState } from "convex/react";
+import type { ConvexAuthState, ConvexReactClient } from "convex/react";
 import {
   AlertTriangle,
   Check,
@@ -44,6 +44,7 @@ function PostHogPageView() {
 }
 
 interface RouterContext {
+  convex: ConvexReactClient;
   title: string;
   auth: Promise<ConvexAuthState>;
   role: Role;

src/routes/_authenticated/_home.tsx

@@ -1,7 +1,6 @@
 import { AppSidebar } from "@/components/app";
 import {
   Badge,
-  Container,
   Nav,
   NavGroup,
   NavItem,
@@ -169,9 +168,9 @@ function IndexRoute() {
   };
 
   return (
-    <Container className="flex">
+    <div className="flex">
       <MyQuests />
       <Outlet />
-    </Container>
+    </div>
   );
 }

src/routes/_authenticated/_home/$questSlug.index.tsx

@@ -13,8 +13,8 @@ import {
 import { QuestBasics } from "@/components/quests/QuestBasics/QuestBasics";
 import { api } from "@convex/_generated/api";
 import { JURISDICTIONS } from "@convex/constants";
-import { createFileRoute } from "@tanstack/react-router";
-import { useQuery } from "convex/react";
+import { createFileRoute, notFound } from "@tanstack/react-router";
+import { rootRouteId } from "@tanstack/react-router";
 import { Milestone } from "lucide-react";
 
 type QuestSearch = {
@@ -23,6 +23,15 @@ type QuestSearch = {
 
 export const Route = createFileRoute("/_authenticated/_home/$questSlug/")({
   component: QuestDetailRoute,
+  loader: async ({ params: { questSlug }, context: { convex } }) => {
+    const questData = await convex.query(api.quests.getWithUserQuest, {
+      slug: questSlug,
+    });
+    if (questData.quest === null) {
+      throw notFound({ routeId: rootRouteId });
+    }
+    return { questData };
+  },
   validateSearch: (search: Record<string, unknown>): QuestSearch => {
     return {
       edit: search.edit === true ? true : undefined,
@@ -31,12 +40,8 @@ export const Route = createFileRoute("/_authenticated/_home/$questSlug/")({
 });
 
 function QuestDetailRoute() {
-  const { questSlug } = Route.useParams();
   const { edit: isEditing } = Route.useSearch();
-
-  const questData = useQuery(api.quests.getWithUserQuest, {
-    slug: questSlug,
-  });
+  const { questData } = Route.useLoaderData();
 
   // TODO: Improve loading state to prevent flash of empty
   if (questData === undefined) return;

src/routes/_authenticated/admin/route.tsx

@@ -1,5 +1,5 @@
 import { AppContent, AppSidebar } from "@/components/app";
-import { Container, Nav, NavGroup, NavItem } from "@/components/common";
+import { Nav, NavGroup, NavItem } from "@/components/common";
 import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
 import { FileText, FlaskConical, Milestone } from "lucide-react";
 
@@ -20,7 +20,7 @@ export const Route = createFileRoute("/_authenticated/admin")({
 
 function AdminRoute() {
   return (
-    <Container className="flex">
+    <div className="flex">
       <AppSidebar>
         <Nav>
           <NavGroup label="Content">
@@ -39,6 +39,6 @@ function AdminRoute() {
       <AppContent>
         <Outlet />
       </AppContent>
-    </Container>
+    </div>
   );
 }

src/routes/_authenticated/settings/route.tsx

@@ -1,5 +1,5 @@
 import { AppContent, AppSidebar } from "@/components/app";
-import { Container, Nav, NavGroup, NavItem } from "@/components/common";
+import { Nav, NavGroup, NavItem } from "@/components/common";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
 import {
   Bug,
@@ -17,7 +17,7 @@ export const Route = createFileRoute("/_authenticated/settings")({
 
 function SettingsRoute() {
   return (
-    <Container className="flex">
+    <div className="flex">
       <AppSidebar>
         <Nav>
           <NavGroup label="Settings">
@@ -91,6 +91,6 @@ function SettingsRoute() {
       <AppContent>
         <Outlet />
       </AppContent>
-    </Container>
+    </div>
   );
 }