chore: polish UI

src/routes/chat/Layout/Operations.tsx

@@ -55,7 +55,7 @@ const Operations: FC<Props> = ({ context, id }) => {
   });
   const canDel = canDelete(mids);
 
-  const optClass = `p-2 bg-slate-100 rounded md:hover:bg-slate-300`;
+  const optClass = `p-2 bg-slate-100 dark:bg-slate-800 rounded md:hover:bg-slate-300 dark:md:hover:bg-slate-900`;
   return (
     <>
       <div className="relative p-4 flex-center gap-8 shadow-md">

src/routes/chat/SessionList/index.tsx

@@ -37,7 +37,7 @@ const SessionList: FC<Props> = ({ tempSession }) => {
       if (!mids || mids.length == 0) {
         return { key: `channel_${id}`, unreads: 0, id, type: "channel" };
       }
-      const mid = [...mids].pop();
+      const mid = [...mids].sort().pop();
       return { key: `channel_${id}`, id, mid, type: "channel" };
     });
     const uSessions = DMs.map((id) => {
@@ -45,7 +45,7 @@ const SessionList: FC<Props> = ({ tempSession }) => {
       if (!mids || mids.length == 0) {
         return { key: `user_${id}`, unreads: 0, id, type: "user" };
       }
-      const mid = [...mids].pop();
+      const mid = [...mids].sort().pop();
       return { key: `user_${id}`, type: "user", id, mid };
     });
     const tmps = [...(cSessions as ChatSession[]), ...(uSessions as ChatSession[])].sort((a, b) => {

src/routes/chat/utils.tsx

@@ -96,7 +96,7 @@ const MessageWrapper = ({ selectMode = false, context, id, mid, children, ...res
     dispatch(updateSelectMessages({ context, id, operation, data: mid }));
   };
   return (
-    <div className={`flex items-start gap-2 relative w-full ${selectMode ? "hover:bg-slate-100" : ""}`} {...rest}>
+    <div className={`flex items-start gap-2 relative w-full ${selectMode ? "hover:bg-slate-100 dark:hover:bg-slate-900" : ""}`} {...rest}>
       {selectMode && <Checkbox className="!mt-4 !ml-2" checked={selected} />}
       {children}
       {selectMode && (