From ca0f5b44dca24151f283bbc40dc32671506f31f4 Mon Sep 17 00:00:00 2001
From: Jim Hodapp <james.hodapp@gmail.com>
Date: Sat, 17 Aug 2024 13:35:44 -0500
Subject: [PATCH 1/3] Fix the overarching goal div alignment to always line up
 with the coaching notes div on the left and right sides

---
 src/app/coaching-sessions/[id]/page.tsx | 132 ++++++++++++------------
 1 file changed, 66 insertions(+), 66 deletions(-)

diff --git a/src/app/coaching-sessions/[id]/page.tsx b/src/app/coaching-sessions/[id]/page.tsx
index 2bc2ddb..bb15dc8 100644
--- a/src/app/coaching-sessions/[id]/page.tsx
+++ b/src/app/coaching-sessions/[id]/page.tsx
@@ -144,76 +144,76 @@ export default function CoachingSessionsPage() {
 
       <Separator />
 
-      <div className="flex flex-col pt-4 px-6">
-        <Collapsible
-          open={isOpen}
-          onOpenChange={setIsOpen}
-          className="w-full space-y-2"
-        >
-          <div className="flex items-center justify-between space-x-4 px-4">
-            <Button
-              variant="outline"
-              className={cn(
-                "relative h-8 w-full justify-start rounded-[0.5rem] bg-muted text-sm font-semibold text-muted-foreground shadow-inner"
-              )}
-              onClick={() => setIsOpen(!isOpen)}
-            >
-              <span className="hidden md:inline-flex md:inline-flex">
-                Overarching goal: to achieve...
-              </span>
-              <span className="inline-flex md:hidden">Goal...</span>
-              <div className="ml-auto flex w-full space-x-2 justify-end">
-                <div className="flex items-center space-x-2">
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        {/* FIXME: causes a React hydration error to put a checkbox here, not sure why */}
-                        {/* <Checkbox id="oa_achieved" /> */}
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p className="font-normal">Achieved?</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-                <span>
-                  {!isOpen && <ChevronDown className="h-4 w-4" />}
-                  {isOpen && <ChevronUp className="h-4 w-4" />}
+      <div className="grid grid-flow-row auto-rows-min gap-4">
+        <div className="row-span-1 pt-4">
+          <Collapsible
+            open={isOpen}
+            onOpenChange={setIsOpen}
+            className="w-full space-y-2"
+          >
+            <div className="flex items-center justify-between space-x-4 px-4">
+              <Button
+                variant="outline"
+                className={cn(
+                  "relative h-8 w-full justify-start rounded-[0.5rem] bg-muted text-sm font-semibold text-muted-foreground shadow-inner"
+                )}
+                onClick={() => setIsOpen(!isOpen)}
+              >
+                <span className="hidden md:inline-flex md:inline-flex">
+                  Overarching goal: to achieve...
                 </span>
-              </div>
-            </Button>
-            {/* <CollapsibleTrigger asChild>
-              <Button variant="ghost" size="sm" className="w-9 p-0">
-                <ChevronsUpDown className="h-4 w-4" />
-                <span className="sr-only">Toggle</span>
+                <span className="inline-flex md:hidden">Goal...</span>
+                <div className="ml-auto flex w-full space-x-2 justify-end">
+                  <div className="flex items-center space-x-2">
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          {/* FIXME: causes a React hydration error to put a checkbox here, not sure why */}
+                          {/* <Checkbox id="oa_achieved" /> */}
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p className="font-normal">Achieved?</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  </div>
+                  <span>
+                    {!isOpen && <ChevronDown className="h-4 w-4" />}
+                    {isOpen && <ChevronUp className="h-4 w-4" />}
+                  </span>
+                </div>
               </Button>
-            </CollapsibleTrigger> */}
-          </div>
-          <CollapsibleContent className="px-4">
-            <div className="flex-col space-y-4 sm:flex">
-              <Tabs defaultValue="agreements" className="flex-1">
-                <TabsList className="grid w-full grid-cols-3">
-                  <TabsTrigger value="agreements">Agreements</TabsTrigger>
-                  <TabsTrigger value="actions">Actions</TabsTrigger>
-                  <TabsTrigger value="program">Program</TabsTrigger>
-                </TabsList>
-                <TabsContent value="agreements">
-                  <div className="bg-gray-500 text-white p-4">Agreements</div>
-                </TabsContent>
-                <TabsContent value="actions">
-                  <div className="bg-red-500 text-white p-4">Actions</div>
-                </TabsContent>
-                <TabsContent value="program">
-                  <div className="bg-blue-500 text-white p-4">Program</div>
-                </TabsContent>
-              </Tabs>
+              {/* <CollapsibleTrigger asChild>
+                <Button variant="ghost" size="sm" className="w-9 p-0">
+                  <ChevronsUpDown className="h-4 w-4" />
+                  <span className="sr-only">Toggle</span>
+                </Button>
+              </CollapsibleTrigger> */}
             </div>
-          </CollapsibleContent>
-        </Collapsible>
-      </div>
+            <CollapsibleContent className="px-4">
+              <div className="flex-col space-y-4 sm:flex">
+                <Tabs defaultValue="agreements" className="flex-1">
+                  <TabsList className="grid w-full grid-cols-3">
+                    <TabsTrigger value="agreements">Agreements</TabsTrigger>
+                    <TabsTrigger value="actions">Actions</TabsTrigger>
+                    <TabsTrigger value="program">Program</TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="agreements">
+                    <div className="bg-gray-500 text-white p-4">Agreements</div>
+                  </TabsContent>
+                  <TabsContent value="actions">
+                    <div className="bg-red-500 text-white p-4">Actions</div>
+                  </TabsContent>
+                  <TabsContent value="program">
+                    <div className="bg-blue-500 text-white p-4">Program</div>
+                  </TabsContent>
+                </Tabs>
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
+        </div>
 
-      <div className="flex flex-col">
-        <div className="container h-full py-6">
+        <div className="row-span-1 h-full py-6 px-4">
           <div className="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]">
             <div className="flex-col space-y-4 sm:flex md:order-1">
               <Tabs defaultValue="notes" className="flex-1">

From 70c3c13bb6a225d47922960fdfe5264601087a44 Mon Sep 17 00:00:00 2001
From: Jim Hodapp <james.hodapp@gmail.com>
Date: Tue, 20 Aug 2024 21:44:15 -0500
Subject: [PATCH 2/3] Make sure the coaching session title div stays aligned
 with coaching notes on left and right sides as the window size changes.

---
 src/app/coaching-sessions/[id]/page.tsx | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/app/coaching-sessions/[id]/page.tsx b/src/app/coaching-sessions/[id]/page.tsx
index bb15dc8..30434da 100644
--- a/src/app/coaching-sessions/[id]/page.tsx
+++ b/src/app/coaching-sessions/[id]/page.tsx
@@ -129,7 +129,7 @@ export default function CoachingSessionsPage() {
   return (
     <>
       <div className="hidden h-full flex-col md:flex">
-        <div className="container flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
+        <div className="flex flex-col items-start justify-between space-y-2 py-4 px-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
           <h4 className="w-16 md:w-32 lg:w-48 font-semibold">Session Title</h4>
           <div className="ml-auto flex w-full space-x-2 sm:justify-end">
             <PresetSelector current={current} future={future} past={past} />
@@ -217,16 +217,15 @@ export default function CoachingSessionsPage() {
           <div className="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]">
             <div className="flex-col space-y-4 sm:flex md:order-1">
               <Tabs defaultValue="notes" className="flex-1">
-                <TabsList className="grid flex w-96 grid-cols-4 justify-start">
+                <TabsList className="grid flex w-128 grid-cols-2 justify-start">
                   <TabsTrigger value="notes">Notes</TabsTrigger>
-                  <TabsTrigger value="program">Program</TabsTrigger>
                   <TabsTrigger value="console">Console</TabsTrigger>
-                  <TabsTrigger value="coachs_notes">
+                  {/* <TabsTrigger value="coachs_notes">
                     <div className="flex gap-2 items-start">
                       <LockClosedIcon className="mt-1" />
                       Coach&#39;s Notes
                     </div>
-                  </TabsTrigger>
+                  </TabsTrigger> */}
                 </TabsList>
                 <TabsContent value="notes">
                   <div className="flex h-full flex-col space-y-4">
@@ -240,11 +239,6 @@ export default function CoachingSessionsPage() {
                     </p>
                   </div>
                 </TabsContent>
-                <TabsContent value="program">
-                  <div className="p-4 min-h-[400px] md:min-h-[630px] lg:min-h-[630px] bg-red-500 text-white">
-                    Program
-                  </div>
-                </TabsContent>
                 <TabsContent value="console">
                   <div className="p-4 min-h-[400px] md:min-h-[630px] lg:min-h-[630px] bg-blue-500 text-white">
                     Console

From 545195ba58787681f6d4d1a789c60252c8973d95 Mon Sep 17 00:00:00 2001
From: Jim Hodapp <james.hodapp@gmail.com>
Date: Tue, 20 Aug 2024 21:51:59 -0500
Subject: [PATCH 3/3] Remove the CodeViewer and PresetShare components from the
 coaching session page.

---
 src/app/coaching-sessions/[id]/page.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/app/coaching-sessions/[id]/page.tsx b/src/app/coaching-sessions/[id]/page.tsx
index 30434da..3cdfd91 100644
--- a/src/app/coaching-sessions/[id]/page.tsx
+++ b/src/app/coaching-sessions/[id]/page.tsx
@@ -133,10 +133,6 @@ export default function CoachingSessionsPage() {
           <h4 className="w-16 md:w-32 lg:w-48 font-semibold">Session Title</h4>
           <div className="ml-auto flex w-full space-x-2 sm:justify-end">
             <PresetSelector current={current} future={future} past={past} />
-            <div className="hidden space-x-2 md:flex">
-              <CodeViewer />
-              <PresetShare />
-            </div>
             <PresetActions />
           </div>
         </div>