fix: adjust layout in BaseItem and BaseList components

Author: younocode

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

@@ -119,6 +119,7 @@ type TreeMode = 'view' | 'edit';
 interface IBaseNodeTreeProps {
   mode?: TreeMode;
   emptyText?: string;
+  skeleton?: React.ReactNode;
 }
 
 export const BaseNodeTree = (props: IBaseNodeTreeProps) => {
@@ -549,14 +550,20 @@ export const BaseNodeTree = (props: IBaseNodeTreeProps) => {
   if (Object.keys(treeItems).length === 0) {
     if (isLoading) {
       return (
-        <div className="flex w-full flex-col gap-2 px-2">
-          <Skeleton className="h-7 w-full" />
-          <Skeleton className="h-7 w-full" />
-          <Skeleton className="h-7 w-full" />
-          <Skeleton className="h-7 w-full" />
-          <Skeleton className="h-7 w-full" />
-          <Skeleton className="h-7 w-full" />
-        </div>
+        <>
+          {props.skeleton ? (
+            props.skeleton
+          ) : (
+            <div className="flex w-full flex-col gap-2 px-2">
+              <Skeleton className="h-7 w-full" />
+              <Skeleton className="h-7 w-full" />
+              <Skeleton className="h-7 w-full" />
+              <Skeleton className="h-7 w-full" />
+              <Skeleton className="h-7 w-full" />
+              <Skeleton className="h-7 w-full" />
+            </div>
+          )}
+        </>
       );
     } else if (emptyText) {
       return (

apps/nextjs-app/src/features/app/blocks/space/BaseItem.tsx

@@ -165,7 +165,7 @@ export const BaseItem: FC<IBaseItemProps> = (props) => {
       </div>
 
       {/* Last Opened Column */}
-      <div className="w-60 shrink-0 text-xs">
+      <div className="w-40 shrink-0 text-xs lg:w-60">
         {lastVisitTime ? dayjs(lastVisitTime).fromNow() : '-'}
       </div>
 

apps/nextjs-app/src/features/app/blocks/space/BaseList.tsx

@@ -2,7 +2,7 @@ import { useQueryClient, useMutation } from '@tanstack/react-query';
 import { deleteBase, permanentDeleteBase, updateBase, type IGetBaseVo } from '@teable/openapi';
 import { ReactQueryKeys } from '@teable/sdk/config';
 import { AnchorContext } from '@teable/sdk/context';
-import { Collapsible, CollapsibleContent, ScrollArea } from '@teable/ui-lib/shadcn';
+import { Collapsible, CollapsibleContent, ScrollArea, Skeleton } from '@teable/ui-lib/shadcn';
 import { keyBy } from 'lodash';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
@@ -14,7 +14,6 @@ import { BaseNodeTree } from '../base/base-side-bar/BaseNodeTree';
 import { useLastVisitBase } from '../base/hooks';
 import { BaseItem } from './BaseItem';
 import { useBaseList } from './useBaseList';
-
 interface IBaseListProps {
   baseIds: string[];
 }
@@ -121,7 +120,19 @@ export const BaseList = (props: IBaseListProps) => {
       <CollapsibleContent>
         <AnchorContext.Provider value={{ baseId: base.id }}>
           <BaseNodeProvider>
-            <BaseNodeTree mode="view" emptyText={t('space:baseList.empty')} />
+            <div className="bg-muted">
+              <BaseNodeTree
+                mode="view"
+                emptyText={t('space:baseList.empty')}
+                skeleton={
+                  <div className="flex w-full flex-col gap-2 px-2">
+                    <Skeleton className="h-7 w-full" />
+                    <Skeleton className="h-7 w-full" />
+                    <Skeleton className="h-7 w-full" />
+                  </div>
+                }
+              />
+            </div>
           </BaseNodeProvider>
         </AnchorContext.Provider>
       </CollapsibleContent>
@@ -134,7 +145,7 @@ export const BaseList = (props: IBaseListProps) => {
       <div className="sticky top-0 z-10 flex h-8 items-center border-b bg-background text-xs font-medium text-muted-foreground">
         <div className="flex-1 truncate pl-6 pr-2">{t('space:baseList.allBases')}</div>
         <div className="w-40 shrink-0">{t('space:baseList.owner')}</div>
-        <div className="w-60 shrink-0">{t('space:baseList.lastOpened')}</div>
+        <div className="w-40 shrink-0 lg:w-60">{t('space:baseList.lastOpened')}</div>
       </div>
 
       {/* Rows */}

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

@@ -152,19 +152,15 @@ export const SpaceSwitcher = () => {
     <>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-10 min-w-0 flex-1 justify-start p-2 text-base"
-          >
+          <Button variant="ghost" size="sm" className="h-10 min-w-0 justify-start p-2 text-base">
             <SpaceAvatar name={currentSpace?.name ?? ''} className="size-8" />
             <p className="truncate text-left font-semibold ">{currentSpace?.name}</p>
             <ChevronDown className="size-4 shrink-0" />
           </Button>
         </PopoverTrigger>
 
         <PopoverContent className="min-w-[360px] p-0" align="start">
-          <Command>
+          <Command value="">
             <div className="px-4 pb-2 pt-4">
               <p className="pb-2 text-sm font-semibold ">
                 {t('space:allSpaces')} ({spaceList?.length || 0})

apps/nextjs-app/src/features/app/components/sidebar/Sidebar.tsx

@@ -4,6 +4,7 @@ import { Button, cn } from '@teable/ui-lib';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import { useEffect, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { useMedia } from 'react-use';
 import { SIDE_BAR_WIDTH } from '../toggle-side-bar/constant';
 import { HoverWrapper } from '../toggle-side-bar/HoverWrapper';
 import { SheetWrapper } from '../toggle-side-bar/SheetWrapper';
@@ -20,7 +21,7 @@ export const Sidebar: FC<PropsWithChildren<ISidebarProps>> = (props) => {
   const { headerLeft, children, className } = props;
   const isMobile = useIsMobile();
   const [leftVisible, setLeftVisible] = useState(true);
-
+  const isLargeScreen = useMedia('(min-width: 1024px)');
   const { setVisible } = useSidebarStore();
 
   const { status } = useChatPanelStore();
@@ -35,6 +36,10 @@ export const Sidebar: FC<PropsWithChildren<ISidebarProps>> = (props) => {
     setVisible(leftVisible);
   }, [leftVisible, setVisible]);
 
+  useEffect(() => {
+    setLeftVisible(isLargeScreen);
+  }, [isLargeScreen]);
+
   return (
     <>
       {isMobile ? (

packages/ui-lib/src/shadcn/ui/tree.tsx

@@ -145,7 +145,7 @@ function TreeItemLabel<T = any>({
       data-drag-target={isDragTarget ? 'true' : undefined}
       data-search-match={isSearchMatch ? 'true' : undefined}
       className={cn(
-        'flex items-center gap-1 rounded-md border border-transparent bg-background px-2 py-1 text-sm transition-colors hover:bg-accent group-focus-visible:ring-[3px] group-focus-visible:ring-ring/50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        'flex items-center gap-1 rounded-md border border-transparent px-2 py-1 text-sm transition-colors hover:bg-accent group-focus-visible:ring-[3px] group-focus-visible:ring-ring/50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
         !isFolder && 'ps-7',
         isDragTarget && 'border-dashed border-foreground bg-foreground/[0.06]',
         isSearchMatch && 'bg-blue-400/20',