From 4418f7c2c42921042c5f0859f27a42edde1b55a5 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Fri, 15 Aug 2025 16:44:11 -0600
Subject: [PATCH] adjusted server side rendering problems

---
 .../components/features/auth/LoginForm.tsx    |  3 ---
 .../ui/sidebar/SidebarCollapsible.tsx         | 24 +++++++++++++++----
 .../src/context/Query/QueryProvider.tsx       |  2 --
 .../assetParamsToRoute.usage.example.tsx      |  6 -----
 .../acceptsTypeSafeNavigateOptions.ts         |  4 +---
 5 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/apps/web-tss/src/components/features/auth/LoginForm.tsx b/apps/web-tss/src/components/features/auth/LoginForm.tsx
index 314aaadc8..83055c749 100644
--- a/apps/web-tss/src/components/features/auth/LoginForm.tsx
+++ b/apps/web-tss/src/components/features/auth/LoginForm.tsx
@@ -36,16 +36,13 @@ export const LoginForm: React.FC<{ redirectTo: string | null | undefined }> = ({
     async ({ email, password }: { email: string; password: string }) => {
       setLoading('email');
       try {
-        console.log('onSignInWithUsernameAndPassword', email, password, redirectTo);
         const result = await signInWithEmailAndPassword({
           data: { email, password, redirectUrl: redirectTo },
         });
-        console.log('result', result);
         if (result?.error) {
           setErrorMessages([result.message]);
           setLoading(null);
         } else {
-          console.log('redirecting to', redirectTo);
           navigate({ to: redirectTo || '/' });
         }
       } catch (error: unknown) {
diff --git a/apps/web-tss/src/components/ui/sidebar/SidebarCollapsible.tsx b/apps/web-tss/src/components/ui/sidebar/SidebarCollapsible.tsx
index c32c57501..8d1638786 100644
--- a/apps/web-tss/src/components/ui/sidebar/SidebarCollapsible.tsx
+++ b/apps/web-tss/src/components/ui/sidebar/SidebarCollapsible.tsx
@@ -129,6 +129,12 @@ export const SidebarCollapsible: React.FC<
     triggerClassName,
     className,
   }) => {
+    // Track client mount to avoid SSR/CSR hydration mismatches for dnd-kit generated attributes
+    const [isMounted, setIsMounted] = React.useState(false);
+    React.useEffect(() => {
+      setIsMounted(true);
+    }, []);
+
     const [isOpen, setIsOpen] = React.useState(defaultOpen);
     const [sortedItems, setSortedItems] = React.useState(items);
     const [draggingId, setDraggingId] = React.useState<string | null>(null);
@@ -194,9 +200,19 @@ export const SidebarCollapsible: React.FC<
           </div>
         )}
 
-        <CollapsibleContent className="data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up pl-0">
-          <div className="space-y-0.5">
-            {isSortable ? (
+        <CollapsibleContent
+          className={cn(
+            isMounted &&
+              'data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up',
+            'h-[var(--radix-collapsible-content-height)]'
+          )}
+          style={{
+            minHeight:
+              !isMounted && isOpen ? `${items.length * 28 + items.length * 2 - 2}px` : undefined,
+          }}
+        >
+          <div className="gap-y-0.5 flex flex-col">
+            {isMounted && isSortable ? (
               <DndContext
                 sensors={sensors}
                 collisionDetection={closestCenter}
@@ -227,7 +243,7 @@ export const SidebarCollapsible: React.FC<
             ) : (
               items.map((item) => (
                 <SidebarItem
-                  key={item.id + item.route}
+                  key={item.id}
                   {...item}
                   active={activeItem === item.id || item.active}
                 />
diff --git a/apps/web-tss/src/context/Query/QueryProvider.tsx b/apps/web-tss/src/context/Query/QueryProvider.tsx
index eaf60a3d2..4354ad5e2 100644
--- a/apps/web-tss/src/context/Query/QueryProvider.tsx
+++ b/apps/web-tss/src/context/Query/QueryProvider.tsx
@@ -13,8 +13,6 @@ export const QueryPersister = ({
 }) => {
   const [mounted, setMounted] = React.useState(false);
 
-  console.log(queryClient.getQueryData(userQueryKeys.favoritesGetList.queryKey));
-
   return (
     <TanstackPersistQueryClientProvider
       client={queryClient}
diff --git a/apps/web-tss/src/lib/assets/assetParamsToRoute.usage.example.tsx b/apps/web-tss/src/lib/assets/assetParamsToRoute.usage.example.tsx
index 3b29f8908..b746fceec 100644
--- a/apps/web-tss/src/lib/assets/assetParamsToRoute.usage.example.tsx
+++ b/apps/web-tss/src/lib/assets/assetParamsToRoute.usage.example.tsx
@@ -49,7 +49,6 @@ export function AssetNavigationExample() {
     assetId: 'report-999',
     chatId: 'chat-123',
   });
-  console.log(justThePath); // '/app/chats/$chatId/report/$reportId'
 
   // Example 5: Converting navigation options to href
   const reportNavOptions = assetParamsToRoute({
@@ -60,7 +59,6 @@ export function AssetNavigationExample() {
 
   // Convert to actual URL
   const reportHref = routeToHref(reportNavOptions);
-  console.log(reportHref); // '/app/chats/chat-123/report/report-999'
 
   // Example 6: Using with native anchor tags
   const dashboardHref = routeToHref(dashboardNavOptions);
@@ -131,9 +129,5 @@ export function generateShareableLinks() {
   const chatHref = baseUrl + routeToHref(chatOptions);
   const metricHref = baseUrl + routeToHref(metricOptions);
 
-  console.log('Share these links:');
-  console.log('Chat:', chatHref); // https://example.com/app/chats/chat-123
-  console.log('Metric:', metricHref); // https://example.com/app/chats/chat-123/metrics/metric-456
-
   return { chatHref, metricHref };
 }
diff --git a/apps/web-tss/src/lib/tss-routes/acceptsTypeSafeNavigateOptions.ts b/apps/web-tss/src/lib/tss-routes/acceptsTypeSafeNavigateOptions.ts
index da876661e..9d1e8bb7c 100644
--- a/apps/web-tss/src/lib/tss-routes/acceptsTypeSafeNavigateOptions.ts
+++ b/apps/web-tss/src/lib/tss-routes/acceptsTypeSafeNavigateOptions.ts
@@ -11,13 +11,11 @@ export function acceptsTypeSafeNavigateOptions<
   TTo extends string | undefined = undefined,
   TMaskFrom extends FileRouteTypes['to'] = TFrom,
   TMaskTo extends string = '',
->(options: OptionsTo<TFrom, TTo, TMaskFrom, TMaskTo>): void {
+>(_options: OptionsTo<TFrom, TTo, TMaskFrom, TMaskTo>): void {
   // In a test environment, you might want to just log or store the navigation
   // For actual implementation, you could:
   // 1. Store the navigation in a test spy
   // 2. Update window.location in a test environment
   // 3. Use a mock router's navigate method
-
   // For now, just log it
-  console.log('Test navigation called with:', options);
 }