From 4586fa850ccf20cfe4abd9113475a3436f2716c2 Mon Sep 17 00:00:00 2001
From: Ryan Martin <51780559+rmrt1n@users.noreply.github.com>
Date: Mon, 1 Apr 2024 14:46:32 +0700
Subject: [PATCH] fix: use fixed height for bottom bar (#23)

Closes: WORLD-1013

## Overview
Inconsistent bottom bar UI when collapsed in different screens. This is caused by react-resizable-panels using only percentage values instead of pixels.

Screenshots:
**Before**:
![image](https://github.com/Argus-Labs/cardinal-editor/assets/51780559/d124bd6e-66ed-4eb2-b74a-8238cc36ea2f)


**After**:
![image](https://github.com/Argus-Labs/cardinal-editor/assets/51780559/28b8050c-f15c-4f22-a3eb-097ada818c42)


## Brief Changelog
- Show fixed height "bar" when panel is collapsed. This element is separate from the original panel contents.

## Testing and Verifying
manually tested/verified
---
 src/components/bottom-bar.tsx | 111 +++++++++++++++++++++-------------
 src/components/ui/toaster.tsx |   2 +-
 2 files changed, 70 insertions(+), 43 deletions(-)

diff --git a/src/components/bottom-bar.tsx b/src/components/bottom-bar.tsx
index b3c356b..27c4593 100644
--- a/src/components/bottom-bar.tsx
+++ b/src/components/bottom-bar.tsx
@@ -21,60 +21,87 @@ export function BottomBar() {
   const handleExpand = () => {
     const panel = ref.current
     if (panel) {
-      setCollapsed(panel.getSize() <= 3)
+      console.log(panel.getSize())
+      if (panel.getSize() <= 5) {
+        panel.collapse()
+      }
+      setCollapsed(panel.getSize() === 0)
     }
   }
   const expandBottomBar = () => {
     const panel = ref.current
     if (panel) {
-      panel.resize(panel.getSize() > 3 ? 3 : 65)
+      panel.isCollapsed() ? panel.resize(65) : panel.collapse()
+      setCollapsed(panel.isCollapsed())
     }
   }
 
   return (
-    <ResizablePanel
-      ref={ref}
-      defaultSize={3}
-      minSize={3}
-      maxSize={65}
-      onResize={handleExpand}
-      className="p-4 space-y-4"
-    >
-      <div className="flex items-center justify-between">
-        <p className="font-medium text-sm">Results</p>
-        <Button variant="outline" size="icon" className="size-8" onClick={expandBottomBar}>
-          {collapsed ? <ChevronsUp size={20} /> : <ChevronsDown size={20} />}
-        </Button>
-      </div>
-      <div className="h-[calc(100%-4rem)] overflow-y-auto bg-muted px-3 py-1 rounder border border-border">
-        {isError ? (
-          <div className="flex flex-col gap-4 items-center justify-center h-full">
-            <XCircle size={36} strokeWidth={2.5} className="text-muted-foreground flex-shrink-0" />
-            <div className="space-y-2 text-center">
-              <p className="text-muted-foreground text-sm">
-                Error fetching data.
-                <br />
-                {error.message}
-              </p>
+    <>
+      {collapsed && (
+        <div className="flex items-center justify-between px-4 py-2">
+          <p className="font-medium text-sm">Results</p>
+          <Button variant="outline" size="icon" className="size-8" onClick={expandBottomBar}>
+            {collapsed ? <ChevronsUp size={20} /> : <ChevronsDown size={20} />}
+          </Button>
+        </div>
+      )}
+      <ResizablePanel
+        collapsible
+        ref={ref}
+        defaultSize={0}
+        minSize={5}
+        maxSize={65}
+        onResize={handleExpand}
+      >
+        {!collapsed && (
+          <div className="px-4 py-2 space-y-4 h-full">
+            <div className="flex items-center justify-between">
+              <p className="font-medium text-sm">Results</p>
+              <Button variant="outline" size="icon" className="size-8" onClick={expandBottomBar}>
+                {collapsed ? <ChevronsUp size={20} /> : <ChevronsDown size={20} />}
+              </Button>
             </div>
-          </div>
-        ) : !data ? (
-          <div className="flex flex-col gap-4 items-center justify-center h-full">
-            <Braces size={36} strokeWidth={2.5} className="text-muted-foreground flex-shrink-0" />
-            <div className="space-y-2 text-center">
-              <p className="text-muted-foreground text-sm">
-                No results.
-                <br />
-                You can send messages and queries from the sidebar.
-              </p>
+            <div className="h-[calc(100%-4rem)] overflow-y-auto bg-muted px-3 py-1 rounder border border-border">
+              {isError ? (
+                <div className="flex flex-col gap-4 items-center justify-center h-full">
+                  <XCircle
+                    size={36}
+                    strokeWidth={2.5}
+                    className="text-muted-foreground flex-shrink-0"
+                  />
+                  <div className="space-y-2 text-center">
+                    <p className="text-muted-foreground text-sm">
+                      Error fetching data.
+                      <br />
+                      {error.message}
+                    </p>
+                  </div>
+                </div>
+              ) : !data ? (
+                <div className="flex flex-col gap-4 items-center justify-center h-full">
+                  <Braces
+                    size={36}
+                    strokeWidth={2.5}
+                    className="text-muted-foreground flex-shrink-0"
+                  />
+                  <div className="space-y-2 text-center">
+                    <p className="text-muted-foreground text-sm">
+                      No results.
+                      <br />
+                      You can send messages and queries from the sidebar.
+                    </p>
+                  </div>
+                </div>
+              ) : (
+                <div className="font-mono text-xs whitespace-pre-wrap">
+                  {JSON.stringify(data, null, 2)}
+                </div>
+              )}
             </div>
           </div>
-        ) : (
-          <div className="font-mono text-xs whitespace-pre-wrap">
-            {JSON.stringify(data, null, 2)}
-          </div>
         )}
-      </div>
-    </ResizablePanel>
+      </ResizablePanel>
+    </>
   )
 }
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
index 0b8559a..9f8af0d 100644
--- a/src/components/ui/toaster.tsx
+++ b/src/components/ui/toaster.tsx
@@ -13,7 +13,7 @@ export function Toaster() {
 
   return (
     <ToastProvider>
-      {toasts.map(function({ id, title, description, action, ...props }) {
+      {toasts.map(function ({ id, title, description, action, ...props }) {
         return (
           <Toast key={id} {...props}>
             <div className="grid gap-1">