feat: add status bar

l1xnan · Mar 24, 2024 · b18e93e · b18e93e
1 parent 240e58b
commit b18e93e
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 56 deletions.
diff --git a/src/Home.tsx b/src/Home.tsx
@@ -1,15 +1,16 @@
-import { useAtom } from 'jotai/react';
+import { Hidden } from '@/components/custom/hidden';
 
 import { Content, Sidebar } from '@/components/Layout';
-import { Hidden } from '@/components/custom/hidden';
 import { useResize } from '@/hooks';
 import classes from '@/hooks/resize.module.css';
 import { Main } from '@/pages/main';
 import DBTree from '@/pages/sidebar';
-import { Favorite, History, SqlCode } from '@/pages/sidebar/Favorite.tsx';
-import { ASide, activeSideAtom } from '@/pages/sidebar/aside';
+import { activeSideAtom, ASide } from '@/pages/sidebar/aside';
+import { Favorite, History, SqlCode } from '@/pages/sidebar/Favorite';
 import { sizeAtom } from '@/stores/app';
 import { useAtomValue } from 'jotai';
+import { useAtom } from 'jotai/react';
+import { BellIcon } from 'lucide-react';
 import { RefObject } from 'react';
 
 function Home() {
@@ -22,36 +23,48 @@ function Home() {
   );
   const activeAside = useAtomValue(activeSideAtom);
   return (
-    <div className="h-full max-h-screen p-0 m-0">
-      <ASide />
-      <div
-        ref={targetRefLeft as RefObject<HTMLDivElement>}
-        className="h-full pl-9 top-0 absolute flex flex-row"
-        style={{ width: sizeLeft }}
-      >
-        <Sidebar>
-          <Hidden display={activeAside == 'database'}>
-            <DBTree />
-          </Hidden>
-          <Hidden display={activeAside == 'favorite'}>
-            <Favorite />
-          </Hidden>
-          <Hidden display={activeAside == 'history'}>
-            <History />
-          </Hidden>
-          <Hidden display={activeAside == 'code'}>
-            <SqlCode />
-          </Hidden>
-        </Sidebar>
-        <div className={classes.controls}>
-          <div className={classes.resizeVertical} onMouseDown={actionLeft} />
+    <div className="h-screen max-h-screen p-0 m-0 flex flex-col">
+      <div className="h-full p-0 m-0 flex-1 relative">
+        <ASide />
+        <div
+          ref={targetRefLeft as RefObject<HTMLDivElement>}
+          className="h-full pl-9 top-0 absolute flex flex-row"
+          style={{ width: sizeLeft }}
+        >
+          <Sidebar>
+            <Hidden display={activeAside == 'database'}>
+              <DBTree />
+            </Hidden>
+            <Hidden display={activeAside == 'favorite'}>
+              <Favorite />
+            </Hidden>
+            <Hidden display={activeAside == 'history'}>
+              <History />
+            </Hidden>
+            <Hidden display={activeAside == 'code'}>
+              <SqlCode />
+            </Hidden>
+          </Sidebar>
+          <div className={classes.controls}>
+            <div className={classes.resizeVertical} onMouseDown={actionLeft} />
+          </div>
         </div>
+        <Content style={{ marginLeft: sizeLeft }}>
+          <Main />
+        </Content>
       </div>
-      <Content style={{ marginLeft: sizeLeft }}>
-        <Main />
-      </Content>
+      <StatusBar />
     </div>
   );
 }
 
+export function StatusBar() {
+  return (
+    <footer className="w-full h-6 min-h-6 border-t flex flex-row justify-between items-center px-2">
+      <div></div>
+      <BellIcon className="size-4" />
+    </footer>
+  );
+}
+
 export default Home;
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -9,7 +9,7 @@ const Content = React.forwardRef<HTMLDivElement, WrapperProps>(
     return (
       <div
         className={cn(
-          'flex flex-col flex-grow h-screen min-h-screen overflow-hidden',
+          'flex flex-col flex-grow overflow-hidden h-full',
           className,
         )}
         ref={ref}
@@ -25,10 +25,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, WrapperProps>(
   ({ className, ...props }, ref) => {
     return (
       <div
-        className={cn(
-          'flex-shrink-0 h-screen min-h-screen w-full overflow-auto border-r',
-          className,
-        )}
+        className={cn('flex-shrink-0 w-full overflow-auto border-r', className)}
         ref={ref}
         {...props}
       />

diff --git a/src/pages/editor/VerticalContainer.tsx b/src/pages/editor/VerticalContainer.tsx
@@ -17,17 +17,8 @@ export default function VerticalContainer({
   const childrenArray = Children.toArray(children);
 
   return (
-    <div
-      className="flex flex-col relative"
-      style={{
-        height: 'calc(100vh - 64px)',
-      }}
-    >
-      <div
-        style={{
-          height: `calc(100vh - ${sizeTop + 64}px)`,
-        }}
-      >
+    <div className="flex flex-col relative h-full overflow-hidden">
+      <div style={{ height: `calc(100% - ${sizeTop}px)` }}>
         {childrenArray[0]}
       </div>
       {bottom ? (

diff --git a/src/pages/editor/index.tsx b/src/pages/editor/index.tsx
@@ -113,15 +113,15 @@ export default function Editor({
   };
 
   return (
-    <>
+    <div className="h-full w-full overflow-hidden flex flex-col">
       <EditorToolbar
         onClick={handleClick}
         session={db?.displayName}
         onHasLimit={setHasLimit}
         hasLimit={hasLimit}
       />
       <VerticalContainer bottom={tab.children.length > 0 ? 300 : undefined}>
-        <div className="h-full flex flex-col border-b-[1px]">
+        <div className="h-full flex flex-col overflow-hidden border-b">
           <MonacoEditor
             ref={ref}
             value={stmt}
@@ -135,6 +135,6 @@ export default function Editor({
           setActiveKey={setActiveKey}
         />
       </VerticalContainer>
-    </>
+    </div>
   );
 }
diff --git a/src/pages/sidebar/Favorite.tsx b/src/pages/sidebar/Favorite.tsx
@@ -5,9 +5,9 @@ import { Code2Icon, SearchIcon, TableIcon } from 'lucide-react';
 export function Favorite() {
   const items = useAtomValue(favoriteAtom);
   return (
-    <div className="grid min-h-screen w-full">
+    <div className="grid h-full w-full">
       <div className="hidden border-r bg-muted/40 md:block">
-        <div className="flex h-full max-h-screen flex-col gap-2">
+        <div className="flex h-full flex-col gap-2">
           <div className="flex h-8 items-center border-b px-4">
             <a className="flex items-center gap-2 font-semibold">
               <span className="">Favorite</span>
@@ -45,9 +45,9 @@ export function Favorite() {
 
 export function History() {
   return (
-    <div className="grid min-h-screen w-full">
+    <div className="grid h-full w-full">
       <div className="hidden border-r bg-muted/40 md:block">
-        <div className="flex h-full max-h-screen flex-col gap-2">
+        <div className="flex h-full flex-col gap-2">
           <div className="flex h-8 items-center border-b px-4">
             <a className="flex items-center gap-2 font-semibold">
               <span className="">History</span>
@@ -64,9 +64,9 @@ export function History() {
 
 export function SqlCode() {
   return (
-    <div className="grid min-h-screen w-full">
+    <div className="grid h-full w-full">
       <div className="hidden border-r bg-muted/40 md:block">
-        <div className="flex h-full max-h-screen flex-col gap-2">
+        <div className="flex h-full h-full flex-col gap-2">
           <div className="flex h-8 items-center border-b px-4">
             <a className="flex items-center gap-2 font-semibold">
               <span className="">Code</span>

diff --git a/src/pages/sidebar/aside.tsx b/src/pages/sidebar/aside.tsx
@@ -57,7 +57,7 @@ const SideButton = ({ id, icon: Comp, label }: SideButtonProps) => {
 
 export function ASide() {
   return (
-    <aside className="inset-y fixed left-0 z-20 flex h-full flex-col border-r w-9">
+    <aside className="inset-y absolute left-0 z-20 flex h-full flex-col border-r w-9">
       <nav className="grid gap-0.5 p-0 [&>*]:place-self-center">
         <SideButton id="database" label="Database" icon={DatabaseIcon} />
         <SideButton id="favorite" label="Favorite" icon={FolderHeart} />