Feat(webapp): animated resizable panel (#3319)

This is a small improvement mainly with the UI Skills file:

- Animate open and close the Resizable panels
- Uses the built in animation hooks from react-window-splitter
- Includes a global variable for the animation easing and timing for
consistency


https://github.com/user-attachments/assets/50ed0019-ed12-4e08-b95c-7c6d1fe5bac0

Author: samejr

apps/webapp/app/components/GitMetadata.tsx

@@ -25,9 +25,10 @@ export function GitMetadataBranch({
         <LinkButton
           variant="minimal/small"
           LeadingIcon={<GitBranchIcon className="size-4" />}
+          leadingIconClassName="group-hover/table-row:text-text-bright"
           iconSpacing="gap-x-1"
           to={git.branchUrl}
-          className="pl-1"
+          className="pl-1 duration-0 [&_span]:duration-0 [&_span]:group-hover/table-row:text-text-bright"
         >
           {git.branchName}
         </LinkButton>
@@ -49,8 +50,9 @@ export function GitMetadataCommit({
           variant="minimal/small"
           to={git.commitUrl}
           LeadingIcon={<GitCommitIcon className="size-4" />}
+          leadingIconClassName="group-hover/table-row:text-text-bright"
           iconSpacing="gap-x-1"
-          className="pl-1"
+          className="pl-1 duration-0 [&_span]:duration-0 [&_span]:group-hover/table-row:text-text-bright"
         >
           {`${git.shortSha} / ${git.commitMessage}`}
         </LinkButton>
@@ -74,8 +76,9 @@ export function GitMetadataPullRequest({
           variant="minimal/small"
           to={git.pullRequestUrl}
           LeadingIcon={<GitPullRequestIcon className="size-4" />}
+          leadingIconClassName="group-hover/table-row:text-text-bright"
           iconSpacing="gap-x-1"
-          className="pl-1"
+          className="pl-1 duration-0 [&_span]:duration-0 [&_span]:group-hover/table-row:text-text-bright"
         >
           #{git.pullRequestNumber} {git.pullRequestTitle}
         </LinkButton>

apps/webapp/app/components/logs/LogsTable.tsx

@@ -167,8 +167,8 @@ export function LogsTable({
                   >
                     <DateTimeAccurate date={log.triggeredTimestamp} hour12={false} />
                   </TableCell>
-                  <TableCell className="min-w-24" onClick={handleRowClick} hasAction>
-                    <TruncatedCopyableValue value={log.runId} />
+                  <TableCell className="min-w-24 cursor-pointer" onClick={handleRowClick}>
+                    <span className="font-mono text-xs">{log.runId}</span>
                   </TableCell>
                   <TableCell className="min-w-32" onClick={handleRowClick} hasAction>
                     <span className="font-mono text-xs">{log.taskIdentifier}</span>

apps/webapp/app/components/primitives/Resizable.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useRef } from "react";
 import { PanelGroup, Panel, PanelResizer } from "react-window-splitter";
 import { cn } from "~/utils/cn";
 
@@ -69,6 +69,30 @@ const ResizableHandle = ({
   </PanelResizer>
 );
 
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
+const RESIZABLE_PANEL_ANIMATION = {
+  easing: "ease-in-out" as const,
+  duration: 200,
+};
+
+const COLLAPSIBLE_HANDLE_CLASSNAME = "transition-opacity duration-200";
+
+function collapsibleHandleClassName(show: boolean) {
+  return cn(COLLAPSIBLE_HANDLE_CLASSNAME, !show && "pointer-events-none opacity-0");
+}
+
+function useFrozenValue<T>(value: T | null | undefined): T | null | undefined {
+  const ref = useRef(value);
+  if (value != null) ref.current = value;
+  return ref.current;
+}
+
+export {
+  RESIZABLE_PANEL_ANIMATION,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  collapsibleHandleClassName,
+  useFrozenValue,
+};
 
 export type ResizableSnapshot = React.ComponentProps<typeof PanelGroup>["snapshot"];

apps/webapp/app/components/primitives/SearchInput.tsx

@@ -10,11 +10,13 @@ export type SearchInputProps = {
   placeholder?: string;
   /** Additional URL params to reset when searching or clearing (e.g. pagination). Defaults to ["cursor", "direction"]. */
   resetParams?: string[];
+  autoFocus?: boolean;
 };
 
 export function SearchInput({
   placeholder = "Search logs…",
   resetParams = ["cursor", "direction"],
+  autoFocus,
 }: SearchInputProps) {
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -71,6 +73,7 @@ export function SearchInput({
           value={text}
           onChange={(e) => setText(e.target.value)}
           fullWidth
+          autoFocus={autoFocus}
           className={cn("", isFocused && "placeholder:text-text-dimmed/70")}
           onKeyDown={(e) => {
             if (e.key === "Enter") {

apps/webapp/app/components/primitives/TreeView/TreeView.tsx

@@ -197,6 +197,18 @@ export function useTree<TData, TFilterValue>({
     concreteStateFromInput({ tree, selectedId, collapsedIds, filter })
   );
 
+  //sync external selectedId prop into internal state
+  useEffect(() => {
+    const internalSelectedId = selectedIdFromState(state.nodes);
+    if (selectedId !== internalSelectedId) {
+      if (selectedId === undefined) {
+        dispatch({ type: "DESELECT_ALL_NODES" });
+      } else {
+        dispatch({ type: "SELECT_NODE", payload: { id: selectedId, scrollToNode: false, scrollToNodeFn } });
+      }
+    }
+  }, [selectedId]);
+
   //fire onSelectedIdChanged()
   useEffect(() => {
     const selectedId = selectedIdFromState(state.nodes);

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

@@ -6,16 +6,18 @@ import {
   ExclamationTriangleIcon,
   LightBulbIcon,
   MagnifyingGlassIcon,
+  XMarkIcon,
   UserPlusIcon,
   VideoCameraIcon,
 } from "@heroicons/react/20/solid";
 import { json, type MetaFunction } from "@remix-run/node";
-import { Link, useRevalidator, useSubmit } from "@remix-run/react";
+import { Link, useFetcher, useRevalidator } from "@remix-run/react";
 import { type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { DiscordIcon } from "@trigger.dev/companyicons";
 import { formatDurationMilliseconds } from "@trigger.dev/core/v3";
 import type { TaskRunStatus } from "@trigger.dev/database";
-import { Fragment, Suspense, useEffect, useState } from "react";
+import { Fragment, Suspense, useCallback, useEffect, useRef, useState } from "react";
+import type { PanelHandle } from "react-window-splitter";
 import { Bar, BarChart, ResponsiveContainer, Tooltip, type TooltipProps } from "recharts";
 import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
@@ -42,9 +44,11 @@ import { Paragraph } from "~/components/primitives/Paragraph";
 import { PopoverMenuItem } from "~/components/primitives/Popover";
 import * as Property from "~/components/primitives/PropertyTable";
 import {
+  RESIZABLE_PANEL_ANIMATION,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  collapsibleHandleClassName,
 } from "~/components/primitives/Resizable";
 import { Spinner } from "~/components/primitives/Spinner";
 import { StepNumber } from "~/components/primitives/StepNumber";
@@ -84,6 +88,7 @@ import {
   uiPreferencesStorage,
 } from "~/services/preferences/uiPreferences.server";
 import { requireUserId } from "~/services/session.server";
+import { motion } from "framer-motion";
 import { cn } from "~/utils/cn";
 import {
   docsPath,
@@ -192,14 +197,20 @@ export default function Page() {
   }, [streamedEvents]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const [showUsefulLinks, setShowUsefulLinks] = useState(usefulLinksPreference ?? true);
+  const usefulLinksPanelRef = useRef<PanelHandle>(null);
+  const fetcher = useFetcher();
+  const fetcherRef = useRef(fetcher);
+  fetcherRef.current = fetcher;
 
-  // Create a submit handler to save the preference
-  const submit = useSubmit();
-
-  const handleUsefulLinksToggle = (show: boolean) => {
+  const toggleUsefulLinks = useCallback((show: boolean) => {
     setShowUsefulLinks(show);
-    submit({ showUsefulLinks: show.toString() }, { method: "post" });
-  };
+    if (show) {
+      usefulLinksPanelRef.current?.expand();
+    } else {
+      usefulLinksPanelRef.current?.collapse();
+    }
+    fetcherRef.current.submit({ showUsefulLinks: show.toString() }, { method: "post" });
+  }, []);
 
   return (
     <PageContainer>
@@ -226,27 +237,24 @@ export default function Page() {
       </NavBar>
       <PageBody scrollable={false}>
         <ResizablePanelGroup orientation="horizontal" className="max-h-full">
-          <ResizablePanel id="tasks-main" className="max-h-full">
+          <ResizablePanel id="tasks-main" min="100px" className="max-h-full">
             <div className={cn("grid h-full grid-rows-1")}>
               {hasTasks ? (
                 <div className="flex min-w-0 max-w-full flex-col">
                   {tasks.length === 0 ? <UserHasNoTasks /> : null}
                   <div className="max-h-full overflow-hidden">
-                    <div className="flex items-center gap-1 p-2">
-                      <Input
-                        placeholder="Search tasks"
-                        variant="tertiary"
-                        icon={MagnifyingGlassIcon}
-                        fullWidth={true}
+                    <div className="flex items-center justify-between gap-1 p-2">
+                      <AnimatedSearchField
                         value={filterText}
-                        onChange={(e) => setFilterText(e.target.value)}
+                        onChange={setFilterText}
+                        placeholder="Search tasks…"
                         autoFocus
                       />
-                      {!showUsefulLinks && (
+                        {!showUsefulLinks && (
                         <Button
-                          variant="minimal/small"
+                          variant="secondary/small"
                           TrailingIcon={LightBulbIcon}
-                          onClick={() => handleUsefulLinksToggle(true)}
+                          onClick={() => toggleUsefulLinks(true)}
                           className="px-2.5"
                         />
                       )}
@@ -417,20 +425,29 @@ export default function Page() {
               )}
             </div>
           </ResizablePanel>
-          {hasTasks && showUsefulLinks ? (
-            <>
-              <ResizableHandle id="tasks-handle" />
-              <ResizablePanel
-                id="tasks-inspector"
-                min="200px"
-                default="400px"
-                max="500px"
-                className="w-full"
-              >
-                <HelpfulInfoHasTasks onClose={() => handleUsefulLinksToggle(false)} />
-              </ResizablePanel>
-            </>
-          ) : null}
+          <ResizableHandle
+            id="tasks-handle"
+            className={collapsibleHandleClassName(hasTasks && showUsefulLinks)}
+          />
+          <ResizablePanel
+            id="tasks-inspector"
+            handle={usefulLinksPanelRef}
+            default="400px"
+            min="400px"
+            max="500px"
+            className="overflow-hidden"
+            collapsible
+            collapsed={!hasTasks || !showUsefulLinks}
+            onCollapseChange={() => {}}
+            collapsedSize="0px"
+            collapseAnimation={RESIZABLE_PANEL_ANIMATION}
+          >
+            <div className="h-full" style={{ minWidth: 400 }}>
+              {hasTasks && (
+                <HelpfulInfoHasTasks onClose={() => toggleUsefulLinks(false)} />
+              )}
+            </div>
+          </ResizablePanel>
         </ResizablePanelGroup>
       </PageBody>
     </PageContainer>
@@ -850,3 +867,54 @@ function FailedToLoadStats() {
     />
   );
 }
+
+function AnimatedSearchField({
+  value,
+  onChange,
+  placeholder,
+  autoFocus,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  autoFocus?: boolean;
+}) {
+  const [isFocused, setIsFocused] = useState(false);
+
+  return (
+    <motion.div
+      initial={{ width: "auto" }}
+      animate={{ width: isFocused && value.length > 0 ? "24rem" : "auto" }}
+      transition={{ type: "spring", stiffness: 300, damping: 30 }}
+      className="relative h-6 min-w-52"
+    >
+      <Input
+        type="text"
+        variant="secondary-small"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        fullWidth
+        autoFocus={autoFocus}
+        className={cn(isFocused && "placeholder:text-text-dimmed/70")}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") e.currentTarget.blur();
+        }}
+        icon={<MagnifyingGlassIcon className="size-4" />}
+        accessory={
+          value.length > 0 ? (
+            <button
+              type="button"
+              onClick={() => onChange("")}
+              className="flex size-4.5 items-center justify-center rounded-[2px] border border-text-dimmed/40 text-text-dimmed transition hover:bg-charcoal-600 hover:text-text-bright"
+            >
+              <XMarkIcon className="size-3" />
+            </button>
+          ) : undefined
+        }
+      />
+    </motion.div>
+  );
+}