chore: fixes

src/app/slices/ui.ts

@@ -50,7 +50,14 @@ const uiSlice = createSlice({
   initialState,
   reducers: {
     fillUI(state, action: PayloadAction<Partial<UIState>>) {
-      const { SSEStatus, ready, online, msgSound = false, ...rest } = action.payload;
+      const {
+        SSEStatus,
+        ready,
+        online,
+        msgSound = false,
+        fileListView = "item",
+        ...rest
+      } = action.payload;
       window.MSG_SOUND = msgSound;
       return { ...state, msgSound, ...rest };
     },

src/components/FileBox/index.tsx

@@ -14,6 +14,7 @@ import {
   VideoPreview
 } from "./preview";
 import { shallowEqual } from "react-redux";
+import DownloadArea from "../FileMessage/DownloadArea";
 
 interface Data {
   file_type: string;
@@ -135,13 +136,7 @@ const FileBox: FC<Props> = ({
             </span>
           </em>
         </div>
-        <a
+        <DownloadArea copyLink={content} downloadLink={`${content}&download=true`} />
-          className="hidden md:block whitespace-nowrap"
-          download={name}
-          href={`${content}&download=true`}
-        >
-          <IconDownload className="fill-gray-500 dark:fill-gray-300" />
-        </a>
       </div>
       {withPreview && <div className="h-[calc(100%_-_64px)] overflow-hidden">{previewContent}</div>}
     </div>

src/components/FileMessage/DownloadArea.tsx

@@ -10,7 +10,7 @@ type Props = {
 const DownloadArea = ({ copyLink, downloadLink }: Props) => {
   const { copy, copied } = useCopy();
   return (
-    <div className="flex flex-col-reverse gap-2 items-center">
+    <div className="flex flex-col-reverse gap-1.5 items-center">
       <button
         className="hidden md:block whitespace-nowrap"
         disabled={copied}

src/components/Message/useMessageOperation.tsx

@@ -79,7 +79,10 @@ export default function useMessageOperation({ mid, context, contextId }: Params)
     loginUser?.uid == from_uid ||
     loginUser?.is_admin ||
     (channel && channel.owner == loginUser?.uid);
-  const canCopy = [ContentTypes.text, ContentTypes.markdown].includes(content_type) || isImage;
+  const canCopy =
+    [ContentTypes.text, ContentTypes.markdown, ContentTypes.audio, ContentTypes.file].includes(
+      content_type
+    ) || isImage;
   return {
     copyContent: isImage ? copyContent.bind(null, true) : copyContent.bind(null, false),
     canCopy,

src/routes/files/Filter/Channel.tsx

@@ -31,12 +31,14 @@ const Channel: FC<Props> = ({ select = 0, updateFilter }) => {
           return (
             <li
               key={gid}
-              className="relative cursor-pointer flex items-center gap-2"
+              className="relative cursor-pointer flex items-center gap-2 justify-between"
               onClick={handleClick.bind(null, gid)}
             >
               <ChannelIcon personal={!is_public} />
-              <span className="text-gray-500 dark:text-gray-100 font-semibold text-sm">{name}</span>
+              <span className="text-gray-500 dark:text-gray-100 font-semibold text-sm flex-1">
-              {select == gid && <CheckSign className="absolute right-0 top-1/2 -translate-y-1/2" />}
+                {name}
+              </span>
+              {select == gid && <CheckSign className="" />}
             </li>
           );
         })}

src/routes/files/Filter/From.tsx

@@ -30,11 +30,13 @@ const From: FC<Props> = ({ select = "", updateFilter }) => {
         </li>
         {users.map(({ uid }) => {
           return (
-            <li key={uid} className="relative cursor-pointer" onClick={handleClick.bind(null, uid)}>
+            <li
+              key={uid}
+              className="relative flex items-center gap-2 justify-between cursor-pointer"
+              onClick={handleClick.bind(null, uid)}
+            >
               <User uid={uid} interactive={true} />
-              {select == uid && (
+              {select == uid && <CheckSign className="" />}
-                <CheckSign className="absolute right-1.5 top-1/2 -translate-y-1/2" />
-              )}
             </li>
           );
         })}

src/routes/files/index.tsx

@@ -36,7 +36,7 @@ function Files() {
   const [getFiles, { data }] = useLazyGetFilesQuery();
   const listContainerRef = useRef<HTMLDivElement>();
   const [filter, setFilter] = useState({});
-  const view = useAppSelector((store) => store.ui.fileListView.view, shallowEqual);
+  const view = useAppSelector((store) => store.ui.fileListView, shallowEqual);
 
   const updateFilter = (data) => {
     setFilter((prev) => {
@@ -55,7 +55,7 @@ function Files() {
   if (!data) return null;
   // return null;
   const nonExpiredFiles = data.filter((item) => !item.expired);
-  console.log("nonExpiredFiles", nonExpiredFiles);
+  console.log({ view });
   return (
     <div className="h-screen md:overflow-y-scroll flex flex-col items-start my-2 mr-6 rounded-2xl bg-white dark:bg-gray-700">
       <Search value={filter.name} updateSearchValue={handleUpdateSearch} />

src/routes/resources/Filter/Channel.tsx

@@ -35,12 +35,14 @@ const Channel: FC<Props> = ({ select = 0, updateFilter }) => {
           return (
             <li
               key={gid}
-              className="relative cursor-pointer flex items-center gap-2"
+              className="cursor-pointer flex items-center gap-2 justify-between"
               onClick={handleClick.bind(null, gid)}
             >
               <ChannelIcon personal={!is_public} />
-              <span className="text-gray-500 dark:text-gray-100 font-semibold text-sm">{name}</span>
+              <span className="text-gray-500 dark:text-gray-100 font-semibold text-sm flex-1">
-              {select == gid && <CheckSign className="absolute right-0 top-1/2 -translate-y-1/2" />}
+                {name}
+              </span>
+              {select == gid && <CheckSign className="" />}
             </li>
           );
         })}

src/routes/resources/Filter/From.tsx

@@ -30,11 +30,13 @@ const From: FC<Props> = ({ select = "", updateFilter }) => {
         </li>
         {users.map(({ uid }) => {
           return (
-            <li key={uid} className="relative cursor-pointer" onClick={handleClick.bind(null, uid)}>
+            <li
+              key={uid}
+              className="relative flex items-center gap-2 justify-between cursor-pointer"
+              onClick={handleClick.bind(null, uid)}
+            >
               <User uid={uid} interactive={true} />
-              {select == uid && (
+              {select == uid && <CheckSign className="" />}
-                <CheckSign className="absolute right-1.5 top-1/2 -translate-y-1/2" />
-              )}
             </li>
           );
         })}