Coderabbit fixes

Author: samejr

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx

@@ -37,6 +37,7 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
   collapsibleHandleClassName,
+  useFrozenValue,
 } from "~/components/primitives/Resizable";
 import { Button } from "~/components/primitives/Buttons";
 import { FEATURE_FLAG, validateFeatureFlagValue } from "~/v3/featureFlags";
@@ -404,6 +405,11 @@ function LogsList({
     return accumulatedLogs.find((log) => log.id === selectedLogId);
   }, [selectedLogId, accumulatedLogs]);
 
+  const frozenLogId = useFrozenValue(selectedLogId);
+  const frozenLog = useFrozenValue(selectedLog);
+  const displayLogId = selectedLogId ?? frozenLogId;
+  const displayLog = selectedLog ?? frozenLog;
+
   const updateUrlWithLog = useCallback((logId: string | undefined) => {
     const url = new URL(window.location.href);
     if (logId) {
@@ -473,7 +479,7 @@ function LogsList({
         collapseAnimation={RESIZABLE_PANEL_ANIMATION}
       >
         <div className="h-full" style={{ minWidth: 430 }}>
-          {selectedLogId && (
+          {displayLogId && (
             <Suspense
               fallback={
                 <div className="flex h-full items-center justify-center">
@@ -482,8 +488,8 @@ function LogsList({
               }
             >
               <LogDetailView
-                logId={selectedLogId}
-                initialLog={selectedLog}
+                logId={displayLogId}
+                initialLog={displayLog}
                 onClose={handleClosePanel}
                 searchTerm={list.searchTerm}
               />

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx

@@ -41,6 +41,7 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
   collapsibleHandleClassName,
+  useFrozenValue,
 } from "~/components/primitives/Resizable";
 import { SearchInput } from "~/components/primitives/SearchInput";
 import { Switch } from "~/components/primitives/Switch";
@@ -1096,6 +1097,8 @@ export default function ModelsPage() {
   const [showAllDetails, setShowAllDetails] = useState(false);
   const [compareOpen, setCompareOpen] = useState(false);
   const [selectedModel, setSelectedModel] = useState<ModelCatalogItem | null>(null);
+  const frozenModel = useFrozenValue(selectedModel);
+  const displayModel = selectedModel ?? frozenModel;
 
   const popularMap = useMemo(() => {
     const map = new Map<string, PopularModel>();
@@ -1181,10 +1184,10 @@ export default function ModelsPage() {
             collapseAnimation={RESIZABLE_PANEL_ANIMATION}
           >
             <div className="h-full" style={{ minWidth: 420 }}>
-              {selectedModel && (
+              {displayModel && (
                 <ModelDetailPanel
-                  key={selectedModel.friendlyId}
-                  model={selectedModel}
+                  key={displayModel.friendlyId}
+                  model={displayModel}
                   organizationId={organizationId}
                   projectId={projectId}
                   environmentId={environmentId}

apps/webapp/app/routes/storybook.animated-panel/route.tsx

@@ -156,7 +156,9 @@ export default function Story() {
           className="overflow-hidden"
           collapsible
           collapsed={!show}
-          onCollapseChange={() => {}}
+          onCollapseChange={(isCollapsed) => {
+            if (isCollapsed) setSelectedItem(null);
+          }}
           collapsedSize="0px"
           collapseAnimation={RESIZABLE_PANEL_ANIMATION}
         >