removed limit

src/entities/action/lib.ts

@@ -3,7 +3,7 @@ import type { CommentAction } from "./schema";
 type ActionAttachmentType = "empty" | "image" | "voice";
 
 const imageExtensions = ["jpeg", "jpg", "png"];
-const voiceExtensions = ["mp3"];
+const voiceExtensions = ["mp3", "ogg"];
 
 export function getActionAttachmentType(
   action: CommentAction,

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 {
-  children?: React.ReactNode;
-}
-
-export default function AddChainButton({ children }: AddChainButtonProps) {
+export default function AddChainButton() {
   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}
-      </Button>
+        <AddIcon />
+      </IconButton>
 
       <Dialog
         open={isOpen}

src/features/change-wait-for/ui/ChangeWaitForButton.tsx

@@ -50,7 +50,7 @@ export default function ChangeWaitForButton({
       cleanWaitFor = waitFor;
     }
 
-    action.waitFor = cleanWaitFor > 10 ? 10 * 60 : cleanWaitFor * 60;
+    action.waitFor = cleanWaitFor * 60;
     updateAction(chainId, actionIndex, action);
 
     const chain = getChain(chainId)!;

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}
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: "auto" }}
-            exit={{ opacity: 0, height: 0 }}
+            // @ts-expect-error lazy... sry
+            key={child.key}
+            layout
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
           >
             {child}
           </motion.li>

src/widgets/action-card/ui/ActionCard.tsx

@@ -147,6 +147,14 @@ export default function ActionCard({
             className={`w-full select-none ${!action.text && "rounded-b-md"} rounded-t-md`}
           />
         )}
+        {attachmentType === "voice" && (
+          <div className="flex justify-center p-3">
+            <audio controls>
+              <source src={action.fileUrls[0]} type="audio/mp3" />
+              <source src={action.fileUrls[0]} type="audio/ogg" />
+            </audio>
+          </div>
+        )}
         {action.text && <div className="p-4">{action.text}</div>}
       </div>
     );

src/widgets/action-editor/ui/ActionEditor.tsx

@@ -11,7 +11,8 @@ import CircularProgress from "@mui/material/CircularProgress";
 
 import TextFieldsIcon from "@mui/icons-material/TextFields";
 import ImageIcon from "@mui/icons-material/Image";
-// import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
+import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
+import MicNoneIcon from "@mui/icons-material/MicNone";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -59,6 +60,8 @@ export default function ActionEditor({
   canExit = false,
 }: ActionEditorProps) {
   const imageRef = useRef<HTMLInputElement>(null);
+  const voiceRef = useRef<HTMLInputElement>(null);
+
   const attachmentType = initialAction
     ? getActionAttachmentType(initialAction)
     : "empty";
@@ -75,6 +78,12 @@ export default function ActionEditor({
       : null,
   );
 
+  const [voiceUrl, setVoiceUrl] = useState<string | null>(
+    initialAction && attachmentType === "voice"
+      ? initialAction.fileUrls[0]!
+      : null,
+  );
+
   const [action, setAction] = useState<CommentAction>(
     initialAction ?? {
       actionType: "comment",
@@ -106,6 +115,8 @@ export default function ActionEditor({
 
     if (origin === "image") {
       setImageUrl(fileUrl);
+    } else if (origin === "voice") {
+      setVoiceUrl(fileUrl);
     }
 
     setLoading(false);
@@ -137,8 +148,16 @@ export default function ActionEditor({
         fileUrls: [imageUrl],
       });
     } else if (value === 2) {
-      alert("Unsupported");
-      return;
+      if (!voiceUrl) {
+        alert("Загрузите голосовое :3");
+        return;
+      }
+
+      onSave(actionIndex, {
+        actionType: action.actionType,
+        text: null,
+        fileUrls: [voiceUrl],
+      });
     }
   }
 
@@ -154,11 +173,11 @@ export default function ActionEditor({
             >
               <Tab label="Текст" icon={<TextFieldsIcon />} {...a11yProps(0)} />
               <Tab label="Изображение" icon={<ImageIcon />} {...a11yProps(1)} />
-              {/* <Tab
+              <Tab
                 label="Голосовое"
                 icon={<RecordVoiceOverIcon />}
                 {...a11yProps(2)}
-              /> */}
+              />
             </Tabs>
           </Box>
 
@@ -212,6 +231,7 @@ export default function ActionEditor({
 
               <input
                 ref={imageRef}
+                accept="image/*"
                 type="file"
                 className="mb-4 hidden select-none"
                 onChange={async (e) => await handleFileChange(e, "image")}
@@ -233,9 +253,38 @@ export default function ActionEditor({
             />
           </TabPanel>
 
-          {/* <TabPanel value={value} index={2}>
-            In progress
-          </TabPanel> */}
+          <TabPanel value={value} index={2}>
+            <div className="mt-5 text-center">
+              <input
+                ref={voiceRef}
+                type="file"
+                accept=".mp3, .ogg"
+                className="mb-4 hidden select-none"
+                onChange={async (e) => await handleFileChange(e, "voice")}
+              />
+              <Button
+                startIcon={<MicNoneIcon />}
+                variant="contained"
+                color="info"
+                disabled={loading}
+                onClick={() => {
+                  if (!voiceRef.current) return;
+                  voiceRef.current.click();
+                }}
+              >
+                {voiceUrl ? "Изменить голосовое" : "Загрузить голосовое"}
+              </Button>
+
+              {voiceUrl && (
+                <div className="mt-10 flex justify-center">
+                  <audio controls>
+                    <source src={voiceUrl} type="audio/mp3" />
+                    <source src={voiceUrl} type="audio/ogg" />
+                  </audio>
+                </div>
+              )}
+            </div>
+          </TabPanel>
         </Box>
       </div>
 

src/widgets/sidebar/ui/Sidebar.tsx

@@ -1,34 +1,56 @@
+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">
-      <List.Root className="mt-8 space-y-2">
-        {chains.map((chain, index) => (
-          <List.LinkItem
-            key={index}
-            to={`/$namespace/${chain._id}`}
-            isSelected={chainId == chain._id}
-          >
-            {chain.name}
-          </List.LinkItem>
-        ))}
-      </List.Root>
+    <div className="no-scrollbar relative flex h-screen w-[450px] flex-col bg-bg-color px-4 pb-2">
+      <div className="mt-3 flex w-full items-start gap-x-3 pb-3">
+        <TextField
+          fullWidth
+          placeholder="Искать по названию"
+          color="primary"
+          sx={{ backgroundColor: "#23253B", input: { color: "white" } }}
+          variant="outlined"
+          size="small"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+        <AddChainButton />
+      </div>
 
-      <div className="mt-4">
-        <AddChainButton>
-          <span className="mr-2 text-2xl font-light">+</span>Добавить
-        </AddChainButton>
+      <div className="no-scrollbar grow overflow-y-scroll">
+        <List.Root className="space-y-2">
+          {filteredChains.map((chain) => (
+            <List.LinkItem
+              key={chain._id}
+              to={`/$namespace/${chain._id}`}
+              isSelected={chainId == chain._id}
+            >
+              {chain.name}
+            </List.LinkItem>
+          ))}
+        </List.Root>
       </div>
     </div>
   );