feat: header layout optimize (#115)

* feat: header layout optimize

apps/nextjs-app/src/features/app/blocks/side-bar/SideBar.tsx

@@ -8,7 +8,7 @@ import { SideBarHeader } from './SideBarHeader';
 
 export const SideBar: React.FC = () => {
   return (
-    <div className="h-full w-full flex flex-col overflow-hidden">
+    <div className="flex h-full flex-col overflow-hidden basis-[300px]">
       <SideBarHeader />
 
       <div className="divide-base-300 divide-y divide-solid flex flex-col overflow-hidden py-2 gap-2">

apps/nextjs-app/src/features/app/blocks/table/Table.tsx

@@ -24,7 +24,7 @@ export const Table: React.FC<ITableProps> = ({
   useTitle(table?.name ? `${table?.icon ? table.icon + ' ' : ''}${table.name}` : 'Teable');
   return (
     <ViewProvider fallback={<h1>loading</h1>} serverData={viewServerData}>
-      <div className="grow flex flex-col h-full">
+      <div className="grow flex flex-col h-full basis-[500px]">
         <TableHeader />
         <FieldProvider fallback={<h1>🫙 Empty</h1>} serverSideData={fieldServerData}>
           <ToolBar />

apps/nextjs-app/src/features/app/blocks/table/table-header/Collaborators.tsx

@@ -1,21 +1,19 @@
+import classNames from 'classnames';
 import Image from 'next/image';
 const images = ['Girl1', 'Boy1', 'Girl2', 'Boy3', 'Girl3'];
-export const Collaborators: React.FC = () => {
+export const Collaborators: React.FC<{ className?: string }> = ({ className }) => {
   return (
-    <div className="flex gap-1 px-2">
+    <div className={classNames('flex gap-1 px-2 items-center', className)}>
       {images.map((name) => {
         return (
-          <div
-            key={name}
-            className="grow-0 shrink-0 relative overflow-hidden rounded-[50px] border border-slate-200"
-          >
+          <div key={name} className="relative overflow-hidden">
             <Image
               width={28}
               height={28}
               loading={'eager'}
               src={`/shared-assets/example/${name}.png`}
               alt={'tailwind-ui-logo'}
-              className="rounded object-cover object-center"
+              className="object-cover object-center shrink-0 rounded-[50px] border border-slate-200"
             />
           </div>
         );

apps/nextjs-app/src/features/app/blocks/table/table-header/TableHeader.tsx

@@ -1,34 +1,22 @@
-import { Table2, UserPlus } from '@teable-group/icons';
-import { useConnection, useTable } from '@teable-group/sdk/hooks';
-import { Spin } from '@teable-group/ui-lib/base';
+import { UserPlus, Plus } from '@teable-group/icons';
 import { Button } from '@teable-group/ui-lib/shadcn';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
+import { useAddView } from '../../view/list/useAddView';
+
 import { ViewList } from '../../view/list/ViewList';
 import { Collaborators } from './Collaborators';
-dayjs.extend(relativeTime);
+import { TableInfo } from './TableInfo';
 
 export const TableHeader: React.FC = () => {
-  const table = useTable();
-  const { connected } = useConnection();
-
-  if (!table) {
-    return <></>;
-  }
+  const addView = useAddView();
 
   return (
-    <div className="flex flex-row px-4 gap-4 items-center">
-      <div className='pb-1" flex justify-center items-center grow-0 shrink-0 relative overflow-hidden gap-2'>
-        {connected ? <Table2 className="w-5 h-5" /> : <Spin />}
-        <div className="flex flex-col justify-center items-start grow-0 shrink-0 h-7 relative overflow-hidden">
-          <div className="text-sm leading-none">{table.name}</div>
-          <div className="text-xs text-slate-400 leading-none">
-            last modified: {dayjs(table.lastModifiedTime).fromNow()}
-          </div>
-        </div>
-      </div>
-      <ViewList />
-      <div className="grow"></div>
+    <div className="flex flex-row px-4 h-[42px] gap-2 items-center">
+      <TableInfo className="grow-0 shrink-0" />
+      <ViewList className="overflow-x-auto" />
+      <Button className="w-7 h-7 px-0 shrink-0" size={'xs'} variant={'outline'} onClick={addView}>
+        <Plus className="w-4 h-4" />
+      </Button>
+      <div className="grow basis-0"></div>
       <Collaborators />
       <Button variant="default" size="xs">
         <UserPlus className="w-4 h-4" /> Invite

apps/nextjs-app/src/features/app/blocks/table/table-header/TableInfo.tsx

@@ -0,0 +1,28 @@
+import { Table2 } from '@teable-group/icons';
+import { useConnection, useTable } from '@teable-group/sdk/hooks';
+import { Spin } from '@teable-group/ui-lib/base';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+dayjs.extend(relativeTime);
+
+export const TableInfo: React.FC<{ className?: string }> = ({ className }) => {
+  const { connected } = useConnection();
+  const table = useTable();
+  return (
+    <div
+      className={classNames(
+        'flex justify-center items-center relative overflow-hidden gap-2',
+        className
+      )}
+    >
+      {connected ? <Table2 className="w-5 h-5" /> : <Spin />}
+      <div className="flex flex-col justify-center items-start grow-0 shrink-0 h-7">
+        <div className="text-sm leading-none">{table?.name}</div>
+        <div className="text-xs text-slate-400 leading-none">
+          last modified: {dayjs(table?.lastModifiedTime).fromNow()}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/nextjs-app/src/features/app/blocks/view/list/ViewList.tsx

@@ -1,15 +1,12 @@
-import { Plus } from '@teable-group/icons';
 import { useViewId, useViews } from '@teable-group/sdk';
-import { Button } from '@teable-group/ui-lib/shadcn/ui/button';
-import { useAddView } from './useAddView';
+import classNames from 'classnames';
 import { ViewListItem } from './ViewListItem';
 
-export const ViewList: React.FC = () => {
+export const ViewList: React.FC<{ className?: string }> = ({ className }) => {
   const views = useViews();
   const activeViewId = useViewId();
-  const addView = useAddView();
   return (
-    <div className="mx-2 flex py-2 items-center space-x-1">
+    <div className={classNames('flex items-center gap-1 h-full', className)}>
       {views.map((view) => (
         <ViewListItem
           key={view.id}
@@ -18,9 +15,6 @@ export const ViewList: React.FC = () => {
           isActive={view.id === activeViewId}
         />
       ))}
-      <Button className="w-7 h-7 ml-2 px-0" size={'xs'} variant={'outline'} onClick={addView}>
-        <Plus className="w-4 h-4" />
-      </Button>
     </div>
   );
 };

apps/nextjs-app/src/features/app/blocks/view/list/ViewListItem.tsx

@@ -28,7 +28,7 @@ export const ViewListItem: React.FC<IProps> = ({ view, removable, isActive }) =>
   const ViewButton = () => {
     return (
       <Button
-        className={classnames('max-w-xs', { 'bg-secondary': isActive })}
+        className={classnames('w-full px-1', { 'bg-secondary': isActive })}
         variant="ghost"
         size="xs"
         asChild
@@ -48,19 +48,19 @@ export const ViewListItem: React.FC<IProps> = ({ view, removable, isActive }) =>
             }
           }}
         >
-          <Sheet className="h-4 w-4" />
-          {view.name}
+          <Sheet className="h-4 w-4 shrink-0" />
+          <p className="shrink-1 overflow-hidden text-ellipsis whitespace-nowrap">{view.name}</p>
         </Link>
       </Button>
     );
   };
   return (
-    <div className={'flex items-center relative justify-start'}>
+    <div className={'flex items-center relative justify-start max-w-[33%] min-w-[100px]'}>
       {!isEditing && (
         <>
           <DropdownMenu>
             {isActive ? (
-              <DropdownMenuTrigger>
+              <DropdownMenuTrigger className="w-full">
                 <ViewButton />
               </DropdownMenuTrigger>
             ) : (

apps/nextjs-app/src/features/app/components/ai-chat/ChatWindow.tsx

@@ -142,7 +142,7 @@ export const ChatWindow = () => {
   return (
     <main
       ref={chatWindowRef}
-      className="drawer-content relative w-full h-full flex flex-col justify-start items-start overflow-y-auto"
+      className="drawer-content relative h-full flex flex-col justify-start items-start basis-[300px] overflow-y-auto"
     >
       <div className="w-full h-auto grow max-w-4xl p-2 mx-auto">
         {messageList.length === 0 ? (

apps/nextjs-app/src/features/app/components/toggle-side-bar/ResizablePane.tsx

@@ -9,7 +9,7 @@ import { OpenRightSide } from './OpenRightSide';
 
 const minSize = 150;
 
-export const AutoPane: React.FC<{
+export const ResizablePane: React.FC<{
   children: React.ReactNode[];
 }> = ({ children }) => {
   const [size, setSize] = useLocalStorage<number[]>('side-bar-size');

apps/nextjs-app/src/features/app/layouts/SpaceLayout.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { SideBar } from '@/features/app/blocks/side-bar/SideBar';
 import { AppLayout } from '@/features/app/layouts';
 import { ChatWindow } from '../components/ai-chat/ChatWindow';
-import { AutoPane } from '../components/toggle-side-bar/AutoPane';
+import { ResizablePane } from '../components/toggle-side-bar/ResizablePane';
 
 export const SpaceLayout: React.FC<{
   children: React.ReactNode;
@@ -20,11 +20,11 @@ export const SpaceLayout: React.FC<{
         <AnchorContext.Provider value={{ tableId: nodeId as string, viewId: viewId as string }}>
           <TableProvider serverData={tableServerData}>
             <div id="portal" className="h-screen flex items-start w-full relative">
-              <AutoPane>
+              <ResizablePane>
                 <SideBar />
                 {children}
                 <ChatWindow />
-              </AutoPane>
+              </ResizablePane>
             </div>
           </TableProvider>
         </AnchorContext.Provider>