feat: add button to open / close bototm drawer from header

srcbookdev · Oct 21, 2024 · 4de6b0b · 4de6b0b
1 parent a5c981d
commit 4de6b0b
Showing 1 changed file with 28 additions and 0 deletions.
diff --git a/packages/web/src/components/apps/header.tsx b/packages/web/src/components/apps/header.tsx
@@ -5,6 +5,9 @@ import {
   EllipsisIcon,
   PlayCircleIcon,
   Code2Icon,
+  CircleAlertIcon,
+  PanelBottomOpenIcon,
+  PanelBottomCloseIcon,
 } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { SrcbookLogo } from '@/components/logos';
@@ -29,6 +32,7 @@ import { useApp } from './use-app';
 import { Input } from '@srcbook/components';
 import { useState } from 'react';
 import { usePreview } from './use-preview';
+import { useLogs } from './use-logs';
 
 export type EditorHeaderTab = 'code' | 'preview';
 
@@ -43,6 +47,7 @@ export default function EditorHeader(props: PropsType) {
   const { app, updateApp } = useApp();
   const { start: startPreview, stop: stopPreview, status: previewStatus } = usePreview();
   const { status: npmInstallStatus, nodeModulesExists } = usePackageJson();
+  const { open, togglePane, panelIcon } = useLogs();
 
   const [nameChangeDialogOpen, setNameChangeDialogOpen] = useState(false);
 
@@ -162,6 +167,29 @@ export default function EditorHeader(props: PropsType) {
               className={cn('w-[1px] h-6 bg-border mx-2', { invisible: props.tab !== 'preview' })}
             />
 
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="icon"
+                    size="icon"
+                    onClick={togglePane}
+                    className="active:translate-y-0"
+                  >
+                    {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>Open logs</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>