From ae967394f6d772496cd4eebe3f6db78d3684c870 Mon Sep 17 00:00:00 2001
From: Ryan Gaus <rsg1egoman@gmail.com>
Date: Mon, 21 Oct 2024 17:03:13 -0400
Subject: [PATCH] feat: add button to open / close bototm drawer from header

---
 packages/web/src/components/apps/header.tsx | 34 ++++++++++++++-------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/web/src/components/apps/header.tsx b/packages/web/src/components/apps/header.tsx
index 6d0c55c6..44f61811 100644
--- a/packages/web/src/components/apps/header.tsx
+++ b/packages/web/src/components/apps/header.tsx
@@ -2,10 +2,12 @@ import {
   ShareIcon,
   PlayIcon,
   StopCircleIcon,
-  EllipsisIcon,
   PlayCircleIcon,
   Code2Icon,
   Loader2Icon,
+  CircleAlertIcon,
+  PanelBottomOpenIcon,
+  PanelBottomCloseIcon,
 } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { SrcbookLogo } from '@/components/logos';
@@ -32,6 +34,7 @@ import { useState } from 'react';
 import { usePreview } from './use-preview';
 import { exportApp } from '@/clients/http/apps';
 import { toast } from 'sonner';
+import { useLogs } from './use-logs';
 
 export type EditorHeaderTab = 'code' | 'preview';
 
@@ -47,6 +50,7 @@ export default function EditorHeader(props: PropsType) {
   const { start: startPreview, stop: stopPreview, status: previewStatus } = usePreview();
   const { status: npmInstallStatus, nodeModulesExists } = usePackageJson();
   const [isExporting, setIsExporting] = useState(false);
+  const { open, togglePane, panelIcon } = useLogs();
 
   const [nameChangeDialogOpen, setNameChangeDialogOpen] = useState(false);
 
@@ -198,17 +202,21 @@ export default function EditorHeader(props: PropsType) {
                   <Button
                     variant="icon"
                     size="icon"
-                    onClick={handleExport}
+                    onClick={togglePane}
                     className="active:translate-y-0"
                   >
-                    {isExporting ? (
-                      <Loader2Icon size={18} className="animate-spin" />
-                    ) : (
-                      <ShareIcon size={18} />
-                    )}
+                    {panelIcon === 'default' && !open ? (
+                      <PanelBottomOpenIcon size={18} />
+                    ) : null}
+                    {panelIcon === 'default' && open ? (
+                      <PanelBottomCloseIcon size={18} />
+                    ) : null}
+                    {panelIcon === 'error' ? (
+                      <CircleAlertIcon size={18} className="text-red-600" />
+                    ) : null}
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>Export app</TooltipContent>
+                <TooltipContent>Open logs</TooltipContent>
               </Tooltip>
             </TooltipProvider>
             <TooltipProvider>
@@ -217,13 +225,17 @@ export default function EditorHeader(props: PropsType) {
                   <Button
                     variant="icon"
                     size="icon"
-                    onClick={() => alert('More options')}
+                    onClick={handleExport}
                     className="active:translate-y-0"
                   >
-                    <EllipsisIcon size={18} />
+                    {isExporting ? (
+                      <Loader2Icon size={18} className="animate-spin" />
+                    ) : (
+                      <ShareIcon size={18} />
+                    )}
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>More options</TooltipContent>
+                <TooltipContent>Export app</TooltipContent>
               </Tooltip>
             </TooltipProvider>
           </div>