style: enhance UI components with new styles and layout adjustments

src/components/ExploreCubes/index.module.less

@@ -47,6 +47,15 @@
   background: rgba(71, 13, 105, 0.1);
 }
 
+.panelSelected :global(.ant-collapse-header) {
+  background: rgba(163, 27, 203, 0.15) !important;
+  border-left: 3px solid rgba(163, 27, 203, 0.7);
+}
+
+.panelSelected :global(.ant-collapse-header):hover {
+  background: rgba(163, 27, 203, 0.2) !important;
+}
+
 .panel :global(.ant-collapse-item) {
   border: 0 !important;
 }

src/components/ExploreCubes/index.tsx

@@ -98,7 +98,10 @@ const ExploreCubes: FC<ExploreCubesProps> = ({
                 {cube}
               </div>
             }
-            className={styles.panel}
+            className={cn(
+              styles.panel,
+              cubeSelectedCount > 0 && styles.panelSelected
+            )}
             extra={
               <Badge
                 count={cubeSelectedCount}

src/components/ExploreCubesCategoryItem/index.module.less

@@ -27,7 +27,8 @@
 }
 
 .memberActive {
-  background: rgba(237, 231, 240, 0.5);
+  background: rgba(163, 27, 203, 0.15);
+  border-left: 3px solid rgba(163, 27, 203, 0.7);
 }
 
 .memberHovered {
@@ -42,6 +43,6 @@
 }
 
 .memberHovered.memberActive {
-  background: #fff;
+  background: rgba(163, 27, 203, 0.1);
   filter: brightness(99%);
 }

src/components/ExploreDataSection/index.module.less

@@ -209,12 +209,10 @@
   font-size: 12px;
 }
 
-.tableFooter {
+.toolbarInfo {
   color: rgba(0, 0, 0, 0.5);
-}
-
-.tableFooter {
-  margin-top: 16px;
+  font-size: 12px;
+  white-space: nowrap;
 }
 
 .wrapper {

src/components/ExploreDataSection/index.tsx

@@ -113,7 +113,7 @@ const ExploreDataSection: FC<ExploreDataSectionProps> = (props) => {
   const {
     order,
     hitLimit,
-    limit = 1000,
+    limit = 100,
     error,
     rows,
     columns,
@@ -219,13 +219,13 @@ const ExploreDataSection: FC<ExploreDataSectionProps> = (props) => {
         className={s.table}
         settings={settings}
         rowHeight={rowHeight}
-        footer={(tableRows) => (
-          <div className={s.tableFooter}>
-            {t("data_section.shown")}: {tableRows.length} / {limit},{" "}
+        toolbarExtra={
+          <span className={s.toolbarInfo}>
+            {t("data_section.shown")}: {rows.length} / {limit},{" "}
             {t("data_section.offset")}: {offset}, {t("data_section.columns")}:{" "}
             {columns.length}
-          </div>
-        )}
+          </span>
+        }
       />
     );
   }, [

src/components/ExploreSettingsForm/index.tsx

@@ -24,7 +24,7 @@ interface ExploreSettingsFormProps {
 
 const ExploreSettingsForm: FC<ExploreSettingsFormProps> = ({
   defaultValues = {
-    limit: 1000,
+    limit: 100,
     offset: 0,
   } as DataSchemaFormValues,
   onChange,

src/components/ModelsSidebar/index.module.less

@@ -96,6 +96,15 @@
   }
 }
 
+.fileBtnActive {
+  background: rgba(163, 27, 203, 0.15);
+  border-left: 3px solid rgba(163, 27, 203, 0.7);
+
+  .fileControls {
+    opacity: 1;
+  }
+}
+
 .fileControls {
   opacity: 0;
   transition: 0.25s ease-in-out;

src/components/ModelsSidebar/index.tsx

@@ -46,6 +46,7 @@ export interface ModelsSidebarProps {
     editFile: Partial<Dataschema>
   ) => void;
   onCreateFile: (values: Partial<Dataschema>) => void;
+  activeFile?: string | null;
   dataSources: DataSourceInfo[];
   onDataSourceChange: (dataSource: DataSourceInfo | null) => void;
   versionsCount?: number;
@@ -73,6 +74,7 @@ const ModelsSidebar: FC<ModelsSidebarProps> = ({
   onDeleteBranch,
   onSchemaDelete,
   onSchemaUpdate,
+  activeFile,
   dataSources,
   onDataSourceChange,
   dataSourceId,
@@ -195,7 +197,10 @@ const ModelsSidebar: FC<ModelsSidebarProps> = ({
               return (
                 <div
                   key={f.id}
-                  className={styles.fileBtn}
+                  className={cn(
+                    styles.fileBtn,
+                    f.name === activeFile && styles.fileBtnActive
+                  )}
                   onClick={() => onSelectFile(f.name)}
                 >
                   <Row justify={"space-between"} wrap={false}>

src/components/Sidebar/index.module.less

@@ -1,5 +1,15 @@
+.resizableWrapper {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  height: 100%;
+}
+
 .wrapper {
-  width: 282px;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
   background: #f9f9f9;
   border-right: 1px solid rgba(0, 0, 0, 0.1);
 
@@ -24,6 +34,8 @@
 
 .body {
   background: #f9f9f9;
+  overflow-y: auto;
+  height: calc(100% - 60px);
 }
 
 .iconContainer {
@@ -33,3 +45,20 @@
   width: 25px;
   height: 25px;
 }
+
+.resizeHandle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  background: transparent;
+  transition: background 0.2s;
+  z-index: 10;
+
+  &:hover,
+  &:active {
+    background: rgba(163, 27, 203, 0.3);
+  }
+}

src/components/Sidebar/index.tsx

@@ -1,10 +1,15 @@
+import { useState, useCallback, useEffect, useRef } from "react";
 import { useResponsive } from "ahooks";
 import cn from "classnames";
 
 import styles from "./index.module.less";
 
 import type { FC, ReactNode } from "react";
 
+const DEFAULT_WIDTH = 282;
+const MIN_WIDTH = 200;
+const MAX_WIDTH = 500;
+
 interface SidebarProps {
   icon?: ReactNode;
   title: ReactNode;
@@ -13,16 +18,64 @@ interface SidebarProps {
 
 const Sidebar: FC<SidebarProps> = ({ icon, title, children }) => {
   const responsive = useResponsive();
+  const [width, setWidth] = useState(DEFAULT_WIDTH);
+  const dragRef = useRef<{ startX: number; startWidth: number } | null>(null);
+
+  const onMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      dragRef.current = { startX: e.clientX, startWidth: width };
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [width]
+  );
+
+  useEffect(() => {
+    const onMouseMove = (e: MouseEvent) => {
+      if (!dragRef.current) return;
+      const newWidth = Math.min(
+        MAX_WIDTH,
+        Math.max(
+          MIN_WIDTH,
+          dragRef.current.startWidth + e.clientX - dragRef.current.startX
+        )
+      );
+      setWidth(newWidth);
+    };
+    const onMouseUp = () => {
+      if (dragRef.current) {
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      }
+      dragRef.current = null;
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, []);
+
+  if (!responsive.lg) {
+    return (
+      <div className={cn(styles.wrapper, styles.wrapperMobile)}>
+        {children && <div className={styles.body}>{children}</div>}
+      </div>
+    );
+  }
 
   return (
-    <div className={cn(styles.wrapper, !responsive.lg && styles.wrapperMobile)}>
-      {responsive.lg && (
+    <div className={styles.resizableWrapper} style={{ width }}>
+      <div className={styles.wrapper}>
         <div className={styles.header}>
           {icon && <div className={styles.iconContainer}>{icon}</div>}
           <div>{title}</div>
         </div>
-      )}
-      {children && <div className={styles.body}>{children}</div>}
+        {children && <div className={styles.body}>{children}</div>}
+      </div>
+      <div className={styles.resizeHandle} onMouseDown={onMouseDown} />
     </div>
   );
 };

src/components/VirtualTable/index.module.less

@@ -1,3 +1,10 @@
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
 .tableWrapper {
   width: 100%;
   overflow: auto;
@@ -63,12 +70,33 @@
   white-space: nowrap;
   text-align: left;
   text-overflow: ellipsis;
+  position: relative;
 }
 
 .headerParagraph {
   margin-bottom: 0 !important;
   font-weight: 700;
   font-size: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.columnResizeHandle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  color: rgba(0, 0, 0, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+
+  &:hover {
+    color: rgba(163, 27, 203, 0.6);
+  }
 }
 
 .table :global(.ReactVirtualized__Table__row) {
@@ -84,9 +112,14 @@
   padding: 13px 0px;
 }
 
+.table :global(.ReactVirtualized__Table__rowColumn:last-of-type),
+.table :global(.ReactVirtualized__Table__headerColumn:last-of-type) {
+  padding-right: 16px;
+}
+
 .table :global(.ReactVirtualized__Table__rowColumn:first-of-type),
 .table :global(.ReactVirtualized__Table__headerColumn:first-of-type) {
-  margin-left: 18px;
+  margin-left: 8px;
 }
 
 .table :global(.ReactVirtualized__Table__Grid) {
@@ -95,7 +128,14 @@
 }
 
 .indexColumn {
-  color: var(--color-black);
+  color: #000 !important;
+  overflow: visible !important;
+}
+
+.indexCell {
+  color: #000 !important;
+  font-weight: 600;
+  font-size: 12px;
 }
 
 // .table :global(.ReactVirtualized__Table__row:nth-child(even)) {