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", "ogg"];
+const voiceExtensions = ["mp3"];
 
 export function getActionAttachmentType(
   action: CommentAction,

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

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

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

@@ -50,7 +50,7 @@ export default function ChangeWaitForButton({
       cleanWaitFor = waitFor;
     }
 
-    action.waitFor = cleanWaitFor * 60;
+    action.waitFor = cleanWaitFor > 10 ? 10 * 60 : 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 max-h-2 min-h-2 min-w-2 max-w-2 rounded-full bg-neutral",
+            "mr-2 h-2 w-2 rounded-full bg-neutral",
             isSelected && "bg-white",
           )}
         />

src/shared/ui/List/Root.tsx

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

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

@@ -147,14 +147,6 @@ 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,8 +11,7 @@ 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;
@@ -60,8 +59,6 @@ export default function ActionEditor({
   canExit = false,
 }: ActionEditorProps) {
   const imageRef = useRef<HTMLInputElement>(null);
-  const voiceRef = useRef<HTMLInputElement>(null);
-
   const attachmentType = initialAction
     ? getActionAttachmentType(initialAction)
     : "empty";
@@ -78,12 +75,6 @@ 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",
@@ -115,8 +106,6 @@ export default function ActionEditor({
 
     if (origin === "image") {
       setImageUrl(fileUrl);
-    } else if (origin === "voice") {
-      setVoiceUrl(fileUrl);
     }
 
     setLoading(false);
@@ -148,16 +137,8 @@ export default function ActionEditor({
         fileUrls: [imageUrl],
       });
     } else if (value === 2) {
-      if (!voiceUrl) {
+      alert("Unsupported");
-        alert("Загрузите голосовое :3");
+      return;
-        return;
-      }
-
-      onSave(actionIndex, {
-        actionType: action.actionType,
-        text: null,
-        fileUrls: [voiceUrl],
-      });
     }
   }
 
@@ -173,11 +154,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>
 
@@ -231,7 +212,6 @@ export default function ActionEditor({
 
               <input
                 ref={imageRef}
-                accept="image/*"
                 type="file"
                 className="mb-4 hidden select-none"
                 onChange={async (e) => await handleFileChange(e, "image")}
@@ -253,38 +233,9 @@ export default function ActionEditor({
             />
           </TabPanel>
 
-          <TabPanel value={value} index={2}>
+          {/* <TabPanel value={value} index={2}>
-            <div className="mt-5 text-center">
+            In progress
-              <input
+          </TabPanel> */}
-                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,56 +1,34 @@
-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 relative flex h-screen w-[450px] flex-col bg-bg-color px-4 pb-2">
+    <div className="no-scrollbar h-screen w-[300px] overflow-y-scroll bg-bg-color px-4 pb-8">
-      <div className="mt-3 flex w-full items-start gap-x-3 pb-3">
+      <List.Root className="mt-8 space-y-2">
-        <TextField
+        {chains.map((chain, index) => (
-          fullWidth
+          <List.LinkItem
-          placeholder="Искать по названию"
+            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="no-scrollbar grow overflow-y-scroll">
+      <div className="mt-4">
-        <List.Root className="space-y-2">
+        <AddChainButton>
-          {filteredChains.map((chain) => (
+          <span className="mr-2 text-2xl font-light">+</span>Добавить
-            <List.LinkItem
+        </AddChainButton>
-              key={chain._id}
-              to={`/$namespace/${chain._id}`}
-              isSelected={chainId == chain._id}
-            >
-              {chain.name}
-            </List.LinkItem>
-          ))}
-        </List.Root>
       </div>
     </div>
   );