feat: more work on side filtering

src/locales/ca_ES.ts

@@ -103,6 +103,7 @@ export default {
     "Estàs segur de volguer duplicar els registre/s seleccionats?",
   confirmSelectAllRegisters:
     "Estàs segur de volguer seleccionar tots els {totalRecords} registres?",
+  filter: "Filtrar",
   applyFilters: "Aplicar filtres",
   clearFilters: "Netejar filtres",
 };

src/locales/en_US.ts

@@ -99,6 +99,7 @@ export default {
   confirmDuplicate: "Are you sure you want to duplicate the selected item/s?",
   confirmSelectAllRegisters:
     "Are you sure you want to select all {totalRecords} registers?",
+  filter: "Filter",
   applyFilters: "Apply filters",
   clearFilters: "Clear filters",
 };

src/locales/es_ES.ts

@@ -105,6 +105,7 @@ export default {
     "Estás seguro de querer duplicar el registro/s seleccionado/s?",
   confirmSelectAllRegisters:
     "Estás seguro de querer seleccionar todos los {totalRecords} registros?",
+  filter: "Filtrar",
   applyFilters: "Aplicar filtros",
   clearFilters: "Aplicar filtros",
 };

src/ui/FloatingDrawer.tsx

@@ -1,16 +1,22 @@
 import React, { useState, useEffect } from "react";
 import { motion } from "framer-motion";
+import { Typography, Button } from "antd";
+import { CloseOutlined } from "@ant-design/icons";
+
+const { Title } = Typography;
 
 interface FloatingDrawerProps {
   isOpen: boolean;
   onClose: () => void;
   children: React.ReactNode;
+  title?: string;
 }
 
 export const FloatingDrawer: React.FC<FloatingDrawerProps> = ({
   isOpen,
   onClose,
   children,
+  title,
 }) => {
   const [showDrawer, setShowDrawer] = useState(isOpen);
 
@@ -46,21 +52,26 @@ export const FloatingDrawer: React.FC<FloatingDrawerProps> = ({
         overflowY: "auto",
       }}
     >
-      <button
-        onClick={onClose}
+      <div
         style={{
-          position: "absolute",
-          top: "10px",
-          right: "10px",
-          background: "none",
-          border: "none",
-          fontSize: "18px",
-          cursor: "pointer",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: "10px 16px",
+          borderBottom: "1px solid #f0f0f0",
         }}
       >
-        &times;
-      </button>
-      <div style={{ marginTop: "30px", padding: 10 }}>{children}</div>
+        <Title level={4} style={{ margin: 0 }}>
+          {title}
+        </Title>
+        <Button
+          type="text"
+          icon={<CloseOutlined />}
+          onClick={onClose}
+          aria-label="Close drawer"
+        />
+      </div>
+      <div style={{ padding: 16 }}>{children}</div>
     </motion.div>
   );
 };

src/widgets/views/SearchTreeInfinite.tsx

@@ -385,6 +385,7 @@ function SearchTreeInfiniteComp(props: SearchTreeInfiniteProps, ref: any) {
       >
         {loading || getColumnStateInProgress ? <Spin /> : content}
         <FloatingDrawer
+          title={t("filter")}
           isOpen={searchVisible}
           onClose={() => setSearchVisible?.(false)}
         >

src/widgets/views/searchFilter/SideSearchFilter.tsx

@@ -95,7 +95,6 @@ export const SideSearchFilter = (props: Props) => {
       <Space
         direction="horizontal"
         align="center"
-        className="pt-5"
         style={{
           width: "100%",
           justifyContent: "center",