fixed cv page layout when one column is missing

src/app/cv/_components/CvCategory.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { trpc } from "~/app/_trpc/Client"
-import CvEntry, { type CvEntryProps } from "./CvEntry"
+import CvEntry from "./CvEntry"
 import type { servTrpc } from "~/app/_trpc/ServerClient"
 import type { inferProcedureOutput } from "@trpc/server"
 import type { RouterOutputs } from "~/server/routers/_app"
@@ -9,13 +9,13 @@ import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
 type CvCategoryProps = {
   initialData: RouterOutputs['cv']['category']['get'],
   layout: "row"|"col",
-  children?: React.ReactElement<CvEntryProps>
+  children?: React.ReactElement<Parameters<typeof CvEntry>>
 }
 export default function CvCategory(props:CvCategoryProps)  {
   const query = trpc.cv.category.get.useQuery({id: props.initialData? props.initialData.id : ""});
   if (query.data !== undefined) {
 		return (
-			<Card className={props.layout == "row" ? "w-full" : ""}>
+			<Card className={cn(props.layout == "row" ? "w-full" : "","gsapan")}>
 				<CardHeader>
 					<CardTitle>
 						{query.data?.name}

src/app/cv/page.tsx

@@ -2,15 +2,25 @@
 import { useGSAP } from "@gsap/react";
 import { useGsapContext } from "../_providers/GsapProvicer";
 import { trpc } from "../_trpc/Client";
-import { useRef  } from "react";
+import { useEffect, useRef, useState  } from "react";
 import { SidebarContent, SidebarProvider, Sidebar  } from "~/components/ui/sidebar";
 import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
 import CvCategory from "./_components/CvCategory";
+import type { CategoryRouterOutputs } from "~/server/routers/cv/category";
 export default function CvPage() {
-  //TODO fix display when one column is empty
+  const [sidebarCategories,setSidebarCategories] = useState<CategoryRouterOutputs['list']>([]);
-  // useState to store filtered categories
+  const [headerCategories,setHeaderCategories]   = useState<CategoryRouterOutputs['list']>([]);
-  // should make this easier
+  const [col1Categories,setCol1Categories]       = useState<CategoryRouterOutputs['list']>([]);
+  const [col2Categories,setCol2Categories]       = useState<CategoryRouterOutputs['list']>([]);
   const categories = trpc.cv.category.list.useQuery();
+  useEffect(() => {
+    if (categories.data !== undefined) {
+      setSidebarCategories(categories.data.filter((cat) => cat.layoutPosition == "sidebar"))
+      setHeaderCategories(categories.data.filter((cat) => cat.layoutPosition == "header"))
+      setCol1Categories(categories.data.filter((cat) => cat.layoutPosition == "col1"))
+      setCol2Categories(categories.data.filter((cat) => cat.layoutPosition == "col2"))
+    }
+  },[categories.data])
   const gsap = useGsapContext()
   const container = useRef<HTMLDivElement>(null)
   enum Direction {
@@ -43,7 +53,7 @@ export default function CvPage() {
         dir = dir + 1
       }
     })
-  }, { scope: container, dependencies: [categories.isFetched], revertOnUpdate: true })
+  }, { scope: container, dependencies: [col1Categories,col2Categories,headerCategories,sidebarCategories], revertOnUpdate: true })
   if (categories.data !== undefined) {
     return (
       <>
@@ -53,7 +63,7 @@ export default function CvPage() {
               <SidebarTriggerDisappearsOnMobile />
               <Sidebar className="z-[51] gsapan">
                 <SidebarContent className="p-2">
-                  {categories.data.filter((cat) => cat.layoutPosition == 'sidebar').map((cat) => {
+                  {sidebarCategories.map((cat) => {
                     return (
                       <CvCategory layout="col" initialData={cat} key={cat.id} />
                     )
@@ -66,23 +76,26 @@ export default function CvPage() {
           <div className="h-full w-full flex flex-wrap flex-row p-[1rem] pt-[2rem] ">
             <div id="mainwrap" className="flex w-full flex-col gap-[1rem]">
               <div id="header" className="flex  w-full h-fit flex-row gap-[1rem]">
-                {categories.data.filter((cat) => cat.layoutPosition == 'header').map((cat) => {
+                {headerCategories.map((cat) => {
                   return (
                     <CvCategory layout="row" initialData={cat} key={cat.id} />
                   )
                 })}
               </div>
               <div id="colwrapper" className="flex flex-col md:flex-row w-full h-3/4 gap-[1rem]">
-                <div id="col1" className="flex flex-col w-full md:w-1/2 h-full gap-[1rem]">
+                {col1Categories.length > 0 ? 
-                  {categories.data.filter((cat) => cat.layoutPosition == 'col1').map((cat) => {
+                  <div id="col1" className={`flex flex-col w-full ${col2Categories.length > 0 ? "md:w-1/2" : ""} h-full gap-[1rem]`}>
+                    {col1Categories.map((cat) => {
                       return (
                         <CvCategory layout="col" initialData={cat} key={cat.id} />
                       )
                     })}
-                </div>
+                  </div> :
-                {categories.data.filter((cat) => cat.layoutPosition == 'col2').length > 0 ? 
+                  <></>
-                  <div id="col2" className="flex flex-col w-full md:w-1/2 h-full gap-[1rem]">
+                }
-                    {categories.data.filter((cat) => cat.layoutPosition == 'col2').map((cat) => {
+                {col2Categories.length > 0 ? 
+                  <div id="col2" className={`flex flex-col w-full ${col1Categories.length > 0 ? "md:w-1/2" : ""} h-full gap-[1rem]`}>
+                    {col2Categories.map((cat) => {
                       return (
                         <CvCategory layout="col" initialData={cat} key={cat.id} />
                       )