Style apps page sidebar and header (#340)

srcbookdev · Oct 8, 2024 · f9e8d9a · f9e8d9a
1 parent 07f6374
commit f9e8d9a
Show file tree

Hide file tree

Showing 8 changed files with 196 additions and 245 deletions.
diff --git a/packages/web/src/components/apps/header.tsx b/packages/web/src/components/apps/header.tsx
diff --git a/packages/web/src/components/apps/panels/ai.tsx b/packages/web/src/components/apps/panels/ai.tsx
diff --git a/packages/web/src/components/apps/panels/explorer.tsx b/packages/web/src/components/apps/panels/explorer.tsx
@@ -1,15 +1,11 @@
 import { Folder } from 'lucide-react';
 import { useFiles, type FileTreeType } from '../use-files';
 import { FileType } from '@srcbook/shared';
+import { cn } from '@srcbook/components';
 
 export default function ExplorerPanel() {
   const { fileTree, openedFile, setOpenedFile } = useFiles();
-
-  return (
-    <div className="w-56 py-4">
-      <FileTree tree={fileTree} openedFile={openedFile} setOpenedFile={setOpenedFile} />
-    </div>
-  );
+  return <FileTree tree={fileTree} openedFile={openedFile} setOpenedFile={setOpenedFile} />;
 }
 
 type FileTreePropsType = {
@@ -20,7 +16,7 @@ type FileTreePropsType = {
 
 function FileTree({ tree, openedFile, setOpenedFile }: FileTreePropsType) {
   return (
-    <ul className="pl-4 font-mono text-xs text-tertiary-foreground leading-6">
+    <ul className="pl-3 font-mono text-sm text-tertiary-foreground leading-6">
       {tree.map((entry) =>
         entry.directory ? (
           <li key={entry.name}>
@@ -32,11 +28,12 @@ function FileTree({ tree, openedFile, setOpenedFile }: FileTreePropsType) {
         ) : (
           <li
             key={entry.name}
-            className={
+            className={cn(
+              'transition-all',
               openedFile?.path === entry.file.path
                 ? 'cursor-default text-foreground font-semibold'
-                : 'cursor-pointer hover:text-foreground hover:font-semibold'
-            }
+                : 'cursor-pointer hover:text-foreground hover:font-semibold',
+            )}
           >
             <button onClick={() => setOpenedFile(entry.file)}>{entry.name}</button>
           </li>

diff --git a/packages/web/src/components/apps/panels/settings.tsx b/packages/web/src/components/apps/panels/settings.tsx
@@ -0,0 +1,3 @@
+export default function SettingsPanel() {
+  return null;
+}
diff --git a/packages/web/src/components/apps/sidebar.tsx b/packages/web/src/components/apps/sidebar.tsx
@@ -1,6 +1,12 @@
 import { useState } from 'react';
 
-import { BotMessageSquare, FilesIcon, FlagIcon, KeyboardIcon } from 'lucide-react';
+import {
+  ChevronsLeftIcon,
+  FlagIcon,
+  FolderTreeIcon,
+  KeyboardIcon,
+  SettingsIcon,
+} from 'lucide-react';
 import { Button } from '@srcbook/components/src/components/ui/button';
 import {
   Tooltip,
@@ -12,10 +18,23 @@ import KeyboardShortcutsDialog from '../keyboard-shortcuts-dialog';
 import FeedbackDialog from '../feedback-dialog';
 import { cn } from '@/lib/utils';
 import ExplorerPanel from './panels/explorer';
-import AIPanel from './panels/ai';
+import SettingsPanel from './panels/settings';
 import { useFiles } from './use-files';
+import { SrcbookLogo } from '../logos';
+import { Link } from 'react-router-dom';
+
+type PanelType = 'explorer' | 'settings';
 
-type PanelType = 'explorer' | 'ai';
+function getTitleForPanel(panel: PanelType | null): string | null {
+  switch (panel) {
+    case 'explorer':
+      return 'Files';
+    case 'settings':
+      return 'Settings';
+    default:
+      return null;
+  }
+}
 
 export default function Sidebar() {
   const { openedFile } = useFiles();
@@ -34,23 +53,32 @@ export default function Sidebar() {
       <FeedbackDialog open={showFeedback} onOpenChange={setShowFeedback} />
 
       <div className="flex h-full border-r border-border">
-        <div className="flex flex-col items-center justify-between w-12 h-full py-4 bg-background z-10">
+        <div className="flex flex-col items-center justify-between w-12 h-full py-3 bg-muted z-10">
           <div className="flex flex-col items-center w-full gap-2">
+            <div className="flex items-start h-10">
+              <Link to="/" className="p-0.5" title="Home">
+                <SrcbookLogo size={20} />
+              </Link>
+            </div>
             <NavItemWithTooltip tooltipContent="Explorer" onClick={() => setPanel('explorer')}>
-              <FilesIcon
+              <FolderTreeIcon
                 size={18}
                 className={cn(
+                  'transition-colors',
                   panel === 'explorer'
-                    ? 'stroke-secondary-foreground'
-                    : 'stroke-tertiary-foreground',
+                    ? 'text-secondary-foreground'
+                    : 'text-tertiary-foreground hover:text-secondary-foreground',
                 )}
               />
             </NavItemWithTooltip>
-            <NavItemWithTooltip tooltipContent="AI copilot" onClick={() => setPanel('ai')}>
-              <BotMessageSquare
+            <NavItemWithTooltip tooltipContent="Settings" onClick={() => setPanel('settings')}>
+              <SettingsIcon
                 size={18}
                 className={cn(
-                  panel === 'ai' ? 'stroke-secondary-foreground' : 'stroke-tertiary-foreground',
+                  'transition-colors',
+                  panel === 'settings'
+                    ? 'text-secondary-foreground'
+                    : 'text-tertiary-foreground hover:text-secondary-foreground',
                 )}
               />
             </NavItemWithTooltip>
@@ -60,19 +88,33 @@ export default function Sidebar() {
               tooltipContent="Keyboard shortcuts"
               onClick={() => setShowShortcuts(true)}
             >
-              <KeyboardIcon size={18} className="stroke-tertiary-foreground" />
+              <KeyboardIcon
+                size={18}
+                className="text-tertiary-foreground hover:text-secondary-foreground transition-colors"
+              />
             </NavItemWithTooltip>
             <NavItemWithTooltip
               tooltipContent="Leave feedback"
               onClick={() => setShowFeedback(true)}
             >
-              <FlagIcon size={18} className="stroke-tertiary-foreground" />
+              <FlagIcon
+                size={18}
+                className="text-tertiary-foreground hover:text-secondary-foreground transition-colors"
+              />
             </NavItemWithTooltip>
           </div>
         </div>
-        <Panel open={panel !== null}>
+        <Panel
+          open={panel !== null}
+          title={getTitleForPanel(panel)}
+          onClose={() => {
+            if (panel !== null) {
+              setPanel(panel);
+            }
+          }}
+        >
           {panel === 'explorer' && <ExplorerPanel />}
-          {panel === 'ai' && <AIPanel />}
+          {panel === 'settings' && <SettingsPanel />}
         </Panel>
       </div>
     </>
@@ -103,14 +145,28 @@ function NavItemWithTooltip(props: {
   );
 }
 
-function Panel(props: { open: boolean; children: React.ReactNode }) {
+function Panel(props: {
+  open: boolean;
+  title: string | null;
+  onClose: () => void;
+  children: React.ReactNode;
+}) {
   if (!props.open) {
     return null;
   }
 
   return (
-    <div className="h-full bg-background animate-in slide-in-from-left duration-75">
-      {props.children}
+    <div className="h-full flex flex-col bg-muted animate-in slide-in-from-left duration-75">
+      <div className="flex items-center justify-between h-12 px-3">
+        <h4 className="font-semibold leading-none">{props.title}</h4>
+        <button
+          className="p-2 text-tertiary-foreground hover:text-foreground hover:bg-sb-core-110 rounded-sm"
+          onClick={props.onClose}
+        >
+          <ChevronsLeftIcon size={18} />
+        </button>
+      </div>
+      <div className="w-56 py-3 flex-1 overflow-auto">{props.children}</div>
     </div>
   );
 }