DM sorted by recent message and small tweaks

src/app/chat/page.tsx

@@ -39,7 +39,7 @@ export default function ChatHub() {
           {/* Greeting */}
           <div onClick={() => app.setSidebarOpen(true)}>
             <h1 className="text-3xl font-bold flex cursor-pointer gap-2">
-              <ChevronLeft className="my-auto w-5" />
+              <ChevronLeft className="my-auto w-5 md:hidden" />
               Hey {app.profile?.display_name || "there"}
             </h1>
             <p className="text-muted-foreground">

src/components/MessageBox.tsx

@@ -140,10 +140,14 @@ export default function MessageBox({
             onClick={() => app.setSidebarOpen(true)}
             className="cursor-pointer flex gap-2"
           >
-            <ChevronLeftIcon className="w-5 h-5 my-auto" />
+            <ChevronLeftIcon className="w-5 h-5 my-auto md:hidden" />
             <span className="flex items-center gap-1.5">
               {channelIcon && (
-                <ProfilePicture name={channelName} url={channelIcon} className="size-7" />
+                <ProfilePicture
+                  name={channelName}
+                  url={channelIcon}
+                  className="size-7"
+                />
               )}
               {channelName}
             </span>

src/components/app/AppLayout.tsx

@@ -1,10 +1,8 @@
 "use client";
 
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect } from "react";
 import { cn } from "@/lib/utils";
 import { useRouter } from "next/navigation";
-import { get } from "@/lib/request";
-import Cookies from "js-cookie";
 import { toast } from "sonner";
 import auth from "@/lib/auth";
 import { useIsMobile } from "@/hooks/is-mobile";
@@ -28,7 +26,6 @@ export default function AppLayout({
   server?: Server;
   app: App;
 }) {
-  const [query, setQuery] = useState("");
   const router = useRouter();
   const isMobile = useIsMobile();
 
@@ -80,7 +77,7 @@ export default function AppLayout({
         {server ? (
           <SidebarChannels server={server} />
         ) : (
-          <SidebarDMs app={app} query={query} setQuery={setQuery} />
+          <SidebarDMs app={app} />
         )}
       </div>
 

src/components/app/SidebarDMs.tsx

@@ -9,38 +9,41 @@ import axios from "axios";
 import DMItem from "./DMItem";
 import App from "@/types/app";
 import { UserProfile } from "@/hooks/get-user";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
-export default function SidebarDMs({
-  app,
-  query,
-  setQuery,
-}: {
-  app: App;
-  query: string;
-  setQuery: (v: string) => void;
-}) {
+export default function SidebarDMs({ app }: { app: App }) {
   const router = useRouter();
+  const [query, setQuery] = useState("");
+  const [dms, setDms] = useState<UserProfile[]>([]);
 
   useEffect(() => {
+    if (!app.profile) return;
+
     const load = async () => {
-      const users = await Promise.all(
-        app.messages
-          .flatMap((m) => [m.from, m.channel_id])
-          .filter((id) => id !== app.profile?.id)
-          .map((id) => app.getUserById(id))
-      );
-      app.setDms(
+      const users = [
+        ...new Set(
+          await Promise.all(
+            app.messages
+              .sort((a, b) => a.timestamp - b.timestamp)
+              .flatMap((m) => [m.from, m.channel_id])
+              .filter((id) => id !== app.profile?.id)
+              .map((id) => app.getUserById(id))
+          )
+        ),
+      ].filter((v) => !!v);
+
+      app.setDms(users);
+
+      setDms(
         users.filter(
           (user) =>
-            user &&
-            (user.username.toLowerCase().includes(query.toLowerCase()) ||
-              user.id.toLowerCase().includes(query.toLowerCase()))
-        ) as UserProfile[]
+            user?.username.toLowerCase().includes(query.toLowerCase()) ||
+            user?.display_name.toLowerCase().includes(query.toLowerCase())
+        )
       );
     };
     load();
-  }, [query]);
+  }, [query, app.messages, app.profile]);
 
   return (
     <div className="w-full flex flex-col bg-card/50">
@@ -58,7 +61,7 @@ export default function SidebarDMs({
 
       <ScrollArea className="flex-1">
         <div className="p-2 flex flex-col gap-2">
-          {app.dms.map((user) => (
+          {dms.map((user) => (
             <DMItem
               key={user.id}
               name={user.display_name}
@@ -69,7 +72,7 @@ export default function SidebarDMs({
             />
           ))}
 
-          {app.dms.length === 0 && query.trim() !== "" && (
+          {dms.length === 0 && query.trim() !== "" && (
             <div className="px-3 py-2">
               <Button
                 variant="ghost"

src/hooks/get-user.ts

@@ -18,7 +18,7 @@ export default function useUser() {
   useEffect(() => {
     async function fetchUser() {
       try {
-        setUser((await get("/api/profile")).data);
+        setUser((await get("/api/profile", (r) => setUser(r.data))).data);
       } catch (e: any) {  
         router.push("/login");
         toast.error(`Error: ${e}`);
@@ -26,7 +26,7 @@ export default function useUser() {
     }
 
     fetchUser();
-  }, [router]);
+  }, []);
 
   return user;
 }