From 8fcfd60ff599385cf8db1e622d9542b6456875ea Mon Sep 17 00:00:00 2001
From: benya <benya@daemonlord.ru>
Date: Sun, 8 Mar 2026 11:34:45 +0300
Subject: [PATCH] feat(web): improve archive chats UX

- keep archived list synced while browsing chats

- add archived entry in All tab with unread count-like badge

- show loading/empty states in Archived tab
---
 web/src/components/ChatList.tsx | 41 +++++++++++++++++++++++++++++----
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/web/src/components/ChatList.tsx b/web/src/components/ChatList.tsx
index 9b0260b..a0b4667 100644
--- a/web/src/components/ChatList.tsx
+++ b/web/src/components/ChatList.tsx
@@ -24,6 +24,7 @@ export function ChatList() {
   const [archivedChats, setArchivedChats] = useState<typeof chats>([]);
   const [searchLoading, setSearchLoading] = useState(false);
   const [tab, setTab] = useState<"all" | "people" | "groups" | "channels" | "archived">("all");
+  const [archivedLoading, setArchivedLoading] = useState(false);
   const [ctxChatId, setCtxChatId] = useState<number | null>(null);
   const [ctxPos, setCtxPos] = useState<{ x: number; y: number } | null>(null);
   const [deleteModalChatId, setDeleteModalChatId] = useState<number | null>(null);
@@ -50,11 +51,9 @@ export function ChatList() {
   }, [loadChats]);
 
   useEffect(() => {
-    if (tab !== "archived") {
-      return;
-    }
     let cancelled = false;
     void (async () => {
+      setArchivedLoading(true);
       try {
         const rows = await getChats(undefined, true);
         if (!cancelled) {
@@ -64,12 +63,16 @@ export function ChatList() {
         if (!cancelled) {
           setArchivedChats([]);
         }
+      } finally {
+        if (!cancelled) {
+          setArchivedLoading(false);
+        }
       }
     })();
     return () => {
       cancelled = true;
     };
-  }, [tab]);
+  }, [tab, chats.length]);
 
   useEffect(() => {
     const term = search.trim();
@@ -310,6 +313,36 @@ export function ChatList() {
         ) : null}
       </div>
       <div className="tg-scrollbar flex-1 overflow-auto">
+        {tab === "all" && archivedChats.length > 0 ? (
+          <button
+            className="block w-full border-b border-slate-800/60 px-4 py-3 text-left transition hover:bg-slate-800/65"
+            onClick={() => setTab("archived")}
+            type="button"
+          >
+            <div className="flex items-start gap-3">
+              <div className="mt-0.5 flex h-10 w-10 items-center justify-center rounded-full bg-slate-700/70 text-sm font-semibold text-slate-100">
+                🗂
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center justify-between gap-2">
+                  <p className="truncate text-sm font-semibold">Archived Chats</p>
+                  <span className="inline-flex min-w-5 items-center justify-center rounded-full bg-slate-700 px-1.5 py-0.5 text-[10px] font-semibold text-slate-200">
+                    {archivedChats.length}
+                  </span>
+                </div>
+                <p className="truncate text-xs text-slate-400">Hidden chats and channels</p>
+              </div>
+            </div>
+          </button>
+        ) : null}
+
+        {tab === "archived" && archivedLoading ? (
+          <p className="px-4 py-3 text-xs text-slate-400">Loading archived chats...</p>
+        ) : null}
+        {tab === "archived" && !archivedLoading && archivedChats.length === 0 ? (
+          <p className="px-4 py-3 text-xs text-slate-400">Archive is empty</p>
+        ) : null}
+
         {visibleChats.map((chat) => (
           <button
             className={`block w-full border-b border-slate-800/60 px-4 py-3 text-left transition ${