Merge pull request #54 from refactor-group/some_final_tweaks_for_1.0-rc1

Author: jhodapp

src/app/coaching-sessions/[id]/layout.tsx

@@ -1,8 +1,8 @@
 import type { Metadata } from "next";
 import "@/styles/globals.css";
-import { siteConfig } from "@/site.config.ts"
+import { siteConfig } from "@/site.config.ts";
 
-import { SiteHeader } from "@/components/ui/site-header"
+import { SiteHeader } from "@/components/ui/site-header";
 
 export const metadata: Metadata = {
   title: siteConfig.name,
@@ -15,11 +15,11 @@ export default function CoachingSessionLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <>
+    // Ensure that SiteHeader has enough vertical space to stay sticky at the top
+    // of the page by using "min-h-screen" in the parent div
+    <div className="min-h-screen">
       <SiteHeader />
-      <main>
-        {children}
-      </main>
-    </>
+      <main>{children}</main>
+    </div>
   );
-}
+}

src/app/coaching-sessions/[id]/page.tsx

@@ -8,9 +8,6 @@ import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 
-import { PresetActions } from "@/components/ui/preset-actions";
-import { PresetSelector } from "@/components/ui/preset-selector";
-import { current, future, past } from "@/data/presets";
 import { useAppStateStore } from "@/lib/providers/app-state-store-provider";
 import { useEffect, useRef, useState } from "react";
 import {
@@ -41,9 +38,10 @@ import { CoachingSession } from "@/types/coaching-session";
 import { useRouter } from "next/navigation";
 import { fetchCoachingSessions } from "@/lib/api/coaching-sessions";
 
+// TODO: can't make this page be server side yet until we move useRouter/useEffect out of this page
 // export const metadata: Metadata = {
 //   title: "Coaching Session",
-//   description: "Coaching session main page, where the good stuff happens.",
+//   description: "Main coaching session page",
 // };
 
 export default function CoachingSessionsPage() {

src/app/dashboard/layout.tsx

@@ -1,8 +1,8 @@
 import type { Metadata } from "next";
 import "@/styles/globals.css";
-import { siteConfig } from "@/site.config.ts"
+import { siteConfig } from "@/site.config.ts";
 
-import { SiteHeader } from "@/components/ui/site-header"
+import { SiteHeader } from "@/components/ui/site-header";
 
 export const metadata: Metadata = {
   title: siteConfig.name,
@@ -15,11 +15,11 @@ export default function CoachingSessionLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <>
+    // Ensure that SiteHeader has enough vertical space to stay sticky at the top
+    // of the page by using "min-h-screen" in the parent div
+    <div className="min-h-screen">
       <SiteHeader />
-      <main>
-        {children}
-      </main>
-    </>
+      <main>{children}</main>
+    </div>
   );
-}
+}

src/app/dashboard/page.tsx

@@ -1,16 +1,15 @@
 "use client";
 
-// import { Metadata } from "next";
+import { Metadata } from "next";
 
 import * as React from "react";
 
-import Image from "next/image";
-
 import { cn } from "@/lib/utils";
 
 import { SelectCoachingSession } from "@/components/ui/dashboard/select-coaching-session";
 import { useAuthStore } from "@/lib/providers/auth-store-provider";
 
+// TODO: can't make this page be server side yet (not sure why on this page)
 // export const metadata: Metadata = {
 //   title: "Dashboard",
 //   description: "Coaching dashboard",

src/app/login/page.tsx

@@ -1,5 +1,4 @@
 import { Metadata } from "next";
-import Image from "next/image";
 import Link from "next/link";
 
 import { cn } from "@/lib/utils";

src/components/ui/coaching-sessions/actions-list.tsx

@@ -201,7 +201,7 @@ const ActionsList: React.FC<{
     async function loadActions() {
       if (!coachingSessionId) {
         console.error(
-          "Failed to fetch Actions since coachingSession.id is not set."
+          "Failed to fetch Actions since coachingSessionId is not set."
         );
         return;
       }

src/components/ui/coaching-sessions/agreements-list.tsx

@@ -33,8 +33,6 @@ const AgreementsList: React.FC<{
   onAgreementDeleted: (id: Id) => Promise<Agreement>;
 }> = ({
   coachingSessionId,
-  userId,
-  locale,
   onAgreementAdded,
   onAgreementEdited,
   onAgreementDeleted,
@@ -155,7 +153,7 @@ const AgreementsList: React.FC<{
     async function loadAgreements() {
       if (!coachingSessionId) {
         console.error(
-          "Failed to fetch Agreements since coachingSession.id is not set."
+          "Failed to fetch Agreements since coachingSessionId is not set."
         );
         return;
       }

src/components/ui/site-header.tsx

@@ -6,17 +6,7 @@ import { MobileNav } from "@/components/ui/mobile-nav";
 import { ModeToggle } from "@/components/ui/mode-toggle";
 import { UserNav } from "@/components/ui/user-nav";
 
-// import { useRouter } from 'next/navigation'
-// import { useAuthStore } from "@/lib/providers/auth-store-provider";
-
 export function SiteHeader() {
-  // This must have "use client" at the top, hooks don't work on server components
-  // or you'll get a very strange runtime error about useAuthStore() not being a function.
-  // const { isLoggedIn } = useAuthStore(
-  //   (state) => state,
-  // )
-  // const router = useRouter();
-
   return (
     <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="flex h-14 pl-4 pt-2 max-w-screen-2xl items-start">
@@ -28,18 +18,7 @@ export function SiteHeader() {
           </div>
           <nav className="flex items-center">
             <ModeToggle />
-            {/* {isLoggedIn ? ( */}
             <UserNav />
-            {/* ) : ( */}
-            {/* <> */}
-            {/* {console.warn("User is not logged in, redirecting to login route.")} */}
-            {/* TODO: For some reason, this is causing a redirect boundary error / trying to update
-                2 components (Router) + (SiteHeader) at the same time. I think it has to do with the
-                AuthStoreProvider and the two different layouts.
-                Help: https://reactjs.org/link/setstate-in-render */}
-            {/* router.push("/login") */}
-            {/* </> */}
-            {/* )} */}
           </nav>
         </div>
       </div>

src/lib/api/overarching-goals.ts

@@ -2,15 +2,13 @@
 
 import {
   OverarchingGoal,
-  overarchingGoalToString,
   defaultOverarchingGoal,
   isOverarchingGoal,
   isOverarchingGoalArray,
   parseOverarchingGoal,
 } from "@/types/overarching-goal";
 import { ItemStatus, Id } from "@/types/general";
 import { AxiosError, AxiosResponse } from "axios";
-import { DateTime } from "ts-luxon";
 import { siteConfig } from "@/site.config";
 
 export const fetchOverarchingGoalsByCoachingSessionId = async (

src/types/overarching-goal.ts

@@ -1,5 +1,4 @@
-import { DateTime } from "ts-luxon";
-import { Id, ItemStatus, SortOrder } from "@/types/general";
+import { Id, ItemStatus } from "@/types/general";
 
 // This must always reflect the Rust struct on the backend
 // entity::overarching_goals::Model