adjusted server side rendering problems

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) {

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">
+        <CollapsibleContent
-          <div className="space-y-0.5">
+          className={cn(
-            {isSortable ? (
+            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}
                 />

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}

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 };
 }

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);
 }