improved ux

src/features/add-chain/ui/AddChainButton.tsx

@@ -10,13 +10,10 @@ import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
 import { TextField } from "@mui/material";
-import { Button } from "@mui/material";
+import { IconButton, Button } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
 
-interface AddChainButtonProps {
+export default function AddChainButton() {
-  children?: React.ReactNode;
-}
-
-export default function AddChainButton({ children }: AddChainButtonProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [isError, setIsError] = useState(false);
@@ -50,13 +47,14 @@ export default function AddChainButton({ children }: AddChainButtonProps) {
 
   return (
     <>
-      <Button
+      <IconButton
+        size="medium"
+        color="info"
+        sx={{ borderRadius: "4px" }}
         onClick={() => setIsOpen(true)}
-        variant="outlined"
-        sx={{ width: "100%", fontWeight: "semibold" }}
       >
-        {children}
+        <AddIcon />
-      </Button>
+      </IconButton>
 
       <Dialog
         open={isOpen}

src/shared/ui/List/LinkItem.tsx

@@ -34,7 +34,7 @@ export default function LinkItem({
       >
         <span
           className={cn(
-            "mr-2 h-2 w-2 rounded-full bg-neutral",
+            "mr-2 max-h-2 min-h-2 min-w-2 max-w-2 rounded-full bg-neutral",
             isSelected && "bg-white",
           )}
         />

src/shared/ui/List/Root.tsx

@@ -11,14 +11,15 @@ export default function Root({ children, className }: RootProps) {
   return (
     <motion.ul layout className={cn("", className)}>
       <AnimatePresence initial={false}>
-        {Children.map(children, (child, index) => (
+        {Children.map(children, (child) => (
           <motion.li
-            layout
             className="block"
-            key={index}
+            // @ts-expect-error lazy... sry
-            initial={{ opacity: 0, height: 0 }}
+            key={child.key}
-            animate={{ opacity: 1, height: "auto" }}
+            layout
-            exit={{ opacity: 0, height: 0 }}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
           >
             {child}
           </motion.li>

src/widgets/sidebar/ui/Sidebar.tsx

@@ -1,34 +1,55 @@
+import { useMemo } from "react";
+import { useState } from "react";
 import { useParams } from "@tanstack/react-router";
 import { useChainState } from "@/entities/chain/model";
 
 import List from "@/shared/ui/List";
+import { TextField } from "@mui/material";
 import { AddChainButton } from "@/features/add-chain";
 
 export default function Sidebar() {
   const params = useParams({ strict: false });
   const chains = useChainState((state) => state.chains || []);
+  const [query, setQuery] = useState("");
+
+  const filteredChains = useMemo(
+    () =>
+      chains.filter((value) =>
+        value.name?.toLowerCase().includes(query.toLocaleLowerCase()),
+      ),
+    [query, chains],
+  );
 
   // @ts-expect-error because i don't know why
   const chainId: string | undefined = params.chainId;
 
   return (
-    <div className="no-scrollbar h-screen w-[300px] overflow-y-scroll bg-bg-color px-4 pb-8">
+    <div className="no-scrollbar relative flex h-screen w-[450px] flex-col bg-bg-color px-4 pb-2">
-      <List.Root className="mt-8 space-y-2">
+      <div className="mt-3 flex w-full items-start gap-x-3 pb-2">
-        {chains.map((chain, index) => (
+        <TextField
-          <List.LinkItem
+          fullWidth
-            key={index}
+          color="primary"
-            to={`/$namespace/${chain._id}`}
+          sx={{ backgroundColor: "#23253B", input: { color: "white" } }}
-            isSelected={chainId == chain._id}
+          variant="outlined"
-          >
+          size="small"
-            {chain.name}
+          value={query}
-          </List.LinkItem>
+          onChange={(e) => setQuery(e.target.value)}
-        ))}
+        />
-      </List.Root>
+        <AddChainButton />
+      </div>
 
-      <div className="mt-4">
+      <div className="no-scrollbar grow overflow-y-scroll">
-        <AddChainButton>
+        <List.Root className="space-y-2">
-          <span className="mr-2 text-2xl font-light">+</span>Добавить
+          {filteredChains.map((chain) => (
-        </AddChainButton>
+            <List.LinkItem
+              key={chain._id}
+              to={`/$namespace/${chain._id}`}
+              isSelected={chainId == chain._id}
+            >
+              {chain.name}
+            </List.LinkItem>
+          ))}
+        </List.Root>
       </div>
     </div>
   );