refactor: fav UX

src/routes/favs/index.tsx

@@ -1,5 +1,4 @@
-import { useState, useEffect } from "react";
-import Styled from "./styled";
+import { useState, useEffect, MouseEvent } from "react";
 import FavoredMessage from "../../common/component/Message/FavoredMessage";
 import dayjs from "dayjs";
 import IconAudio from "../../assets/icons/file.audio.svg";
@@ -7,34 +6,38 @@ import IconVideo from "../../assets/icons/file.video.svg";
 import IconUnknown from "../../assets/icons/file.unknown.svg";
 import IconImage from "../../assets/icons/file.image.svg";
 import IconChannel from "../../assets/icons/channel.svg";
+import IconRemove from "../../assets/icons/close.svg";
 import { ContentTypes } from "../../app/config";
 import { useAppSelector } from "../../app/store";
 import { Favorite } from "../../app/slices/favorites";
 import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import useFavMessage from "../../common/hook/useFavMessage";
 
 type filter = "audio" | "video" | "image" | "";
 function FavsPage() {
   const { t } = useTranslation("fav");
   const [filter, setFilter] = useState<filter>("");
   const [favs, setFavs] = useState<Favorite[]>([]);
+  const { removeFavorite } = useFavMessage({});
   const Filters = [
     {
-      icon: <IconUnknown className="icon" />,
+      icon: <IconUnknown className="w-[15px] h-5" />,
       title: t("all_items"),
       filter: ""
     },
     {
-      icon: <IconImage className="icon" />,
+      icon: <IconImage className="w-[15px] h-5" />,
       title: t("image"),
       filter: "image"
     },
     {
-      icon: <IconVideo className="icon" />,
+      icon: <IconVideo className="w-[15px] h-5" />,
       title: t("video"),
       filter: "video"
     },
     {
-      icon: <IconAudio className="icon" />,
+      icon: <IconAudio className="w-[15px] h-5" />,
       title: t("audio"),
       filter: "audio"
     }
@@ -109,26 +112,30 @@ function FavsPage() {
       }
     }
   }, [filter, favorites]);
-
+  const handleRemove = (evt: MouseEvent<HTMLButtonElement>) => {
+    const { id = "" } = evt.currentTarget.dataset;
+    // console.log("remove fav", id);
+    removeFavorite(id);
+  };
   return (
-    <Styled>
-      <div className="left">
-        <ul className="filters">
+    <div className="h-screen flex bg-white mt-2 mr-6 mb-2.5 overflow-auto">
+      <div className="min-w-[268px] p-2 shadow-inner-[-1px_0px_0px_rgba(0,_0,_0,_0.1)]">
+        <ul className="flex flex-col gap-0.5">
           {Filters.map(({ icon, title, filter: f }) => {
             return (
               <li
                 key={f}
-                className={`filter ${f == filter ? "active" : ""}`}
+                className={clsx(f == filter && 'bg-[rgba(116,_127,_141,_0.2)]', `cursor-pointer flex items-center gap-2 p-2 rounded-lg hover:bg-[rgba(116,_127,_141,_0.2)]`)}
                 onClick={handleFilter.bind(null, f as filter)}
               >
                 {icon}
-                <span className="txt">{title}</span>
+                <span className="font-bold text-sm text-gray-600">{title}</span>
               </li>
             );
           })}
         </ul>
       </div>
-      <div className="right">
+      <div className="w-full p-4 flex flex-col overflow-y-scroll gap-8">
         {favs.map(({ id, created_at, messages }) => {
           if (!messages || messages.length == 0) return null;
           const [
@@ -136,27 +143,28 @@ function FavsPage() {
               source: { gid, uid }
             }
           ] = messages;
-          const tip = gid ? (
-            <span className="from channel">
-              <IconChannel className="icon" /> {channelData[gid]?.name}
-            </span>
-          ) : (
-            <span className="from user">
-              From <strong>{userData[uid]?.name}</strong>
-            </span>
-          );
+          const tip = <span className={clsx("inline-flex items-center gap-1 mr-2")}>
+            {gid ? <><IconChannel className="w-3 h-3" /> {channelData[gid]?.name}</> : <>
+              From <strong className="font-bold text-gray-800">{userData[uid]?.name}</strong>
+            </>}
+          </span>;
           return (
-            <div className="container" key={id}>
-              <h4 className="tip">
+            <div className="max-w-[600px] flex flex-col gap-1" key={id}>
+              <h4 className="inline-flex items-center text-xs text-gray-400">
                 {tip}
                 {dayjs(created_at).format("YYYY-MM-DD")}
               </h4>
-              <FavoredMessage key={id} id={id} />
+              <div className="relative group">
+                <FavoredMessage key={id} id={id} />
+                <button className="absolute top-2 right-2 flex justify-center items-center w-6 h-6 p-1 border border-solid border-slate-200 rounded invisible group-hover:visible" data-id={id} onClick={handleRemove} >
+                  <IconRemove className="fill-slate-900" />
+                </button>
+              </div>
             </div>
           );
         })}
       </div>
-    </Styled>
+    </div>
   );
 }
 export default FavsPage;