From cc8c731f3f10db403f69a2b6fffc4cad37292b53 Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Thu, 28 May 2026 13:44:50 -0700
Subject: [PATCH 1/2] desktop: float unread indicator with accent background

- Remove bordered pill styling from MoreUnreadButton
- Use bg-primary (accent color) to match the unread dot
- Position absolutely over channel list so it floats
- Add position prop (top/bottom) for directional placement

Signed-off-by: Wes <wesbillman@users.noreply.github.com>
---
 desktop/src/features/sidebar/ui/AppSidebar.tsx       |  4 +++-
 desktop/src/features/sidebar/ui/MoreUnreadButton.tsx | 12 ++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/desktop/src/features/sidebar/ui/AppSidebar.tsx b/desktop/src/features/sidebar/ui/AppSidebar.tsx
index 7d5b60f48..d256ba5d7 100644
--- a/desktop/src/features/sidebar/ui/AppSidebar.tsx
+++ b/desktop/src/features/sidebar/ui/AppSidebar.tsx
@@ -625,12 +625,13 @@ export function AppSidebar({
         </SidebarMenu>
       </SidebarHeader>
 
-      <div className="flex min-h-0 flex-1 flex-col">
+      <div className="relative flex min-h-0 flex-1 flex-col">
         {unreadAboveCount > 0 ? (
           <MoreUnreadButton
             count={unreadAboveCount}
             icon={<ArrowUp />}
             onClick={scrollToNextAbove}
+            position="top"
             testId="sidebar-more-unread-above"
           />
         ) : null}
@@ -740,6 +741,7 @@ export function AppSidebar({
             count={unreadBelowCount}
             icon={<ArrowDown />}
             onClick={scrollToNextBelow}
+            position="bottom"
             testId="sidebar-more-unread-below"
           />
         ) : null}
diff --git a/desktop/src/features/sidebar/ui/MoreUnreadButton.tsx b/desktop/src/features/sidebar/ui/MoreUnreadButton.tsx
index b73fac32f..0e3a8e2d2 100644
--- a/desktop/src/features/sidebar/ui/MoreUnreadButton.tsx
+++ b/desktop/src/features/sidebar/ui/MoreUnreadButton.tsx
@@ -3,28 +3,32 @@ import type * as React from "react";
 import { Button } from "@/shared/ui/button";
 
 const MORE_UNREAD_BUTTON_CLASS =
-  "h-7 min-h-7 gap-1.5 rounded-full border-border/50 bg-background/85 px-2.5 text-[11px] font-medium text-muted-foreground shadow-xs backdrop-blur-sm hover:bg-muted/70 hover:text-foreground [&_svg]:size-3.5";
+  "h-7 min-h-7 gap-1.5 rounded-full border-0 bg-primary px-2.5 text-[11px] font-medium text-primary-foreground shadow-md hover:bg-primary/90 [&_svg]:size-3.5";
 
 export function MoreUnreadButton({
   count,
   icon,
   onClick,
+  position,
   testId,
 }: {
   count: number;
   icon: React.ReactNode;
   onClick: () => void;
+  position: "top" | "bottom";
   testId: string;
 }) {
   return (
-    <div className="flex justify-center py-1">
+    <div
+      className={`pointer-events-none absolute inset-x-0 z-10 flex justify-center py-1 ${position === "top" ? "top-0" : "bottom-0"}`}
+    >
       <Button
-        className={MORE_UNREAD_BUTTON_CLASS}
+        className={`pointer-events-auto ${MORE_UNREAD_BUTTON_CLASS}`}
         data-testid={testId}
         onClick={onClick}
         size="sm"
         type="button"
-        variant="outline"
+        variant="ghost"
       >
         {icon}
         {count} more unread

From 7be43efc67df9b7b9c1346c9a42abdca99922dcb Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Thu, 28 May 2026 14:41:48 -0700
Subject: [PATCH 2/2] desktop: fix sidebar scroll jump on channel selection

TanStack Router's scroll restoration captures all scroll events including
the sidebar. When navigating between channels, it would restore the
sidebar to a stale position. Add a useSidebarScrollLock hook that tracks
the sidebar's scrollTop and re-applies it in a layout effect after
pathname changes, preventing the jump.

Signed-off-by: Wes <wesbillman@users.noreply.github.com>
---
 .../sidebar/lib/useSidebarScrollLock.ts       | 40 +++++++++++++++++++
 .../src/features/sidebar/ui/AppSidebar.tsx    |  2 +
 2 files changed, 42 insertions(+)
 create mode 100644 desktop/src/features/sidebar/lib/useSidebarScrollLock.ts

diff --git a/desktop/src/features/sidebar/lib/useSidebarScrollLock.ts b/desktop/src/features/sidebar/lib/useSidebarScrollLock.ts
new file mode 100644
index 000000000..09666354b
--- /dev/null
+++ b/desktop/src/features/sidebar/lib/useSidebarScrollLock.ts
@@ -0,0 +1,40 @@
+import { useRouter } from "@tanstack/react-router";
+import * as React from "react";
+
+/**
+ * Prevents TanStack Router's scroll restoration from moving the sidebar.
+ *
+ * The router registers a document-level capture listener for "scroll" that
+ * records every scrollable element's position. On navigation it restores those
+ * positions synchronously inside an "onRendered" event. We snapshot the
+ * sidebar's scrollTop in "onBeforeLoad" (before any restoration happens) and
+ * re-apply it in "onRendered" (after the router's restoration subscriber has
+ * already run, since our subscription is registered later).
+ */
+export function useSidebarScrollLock(
+  scrollRef: React.RefObject<HTMLDivElement | null>,
+) {
+  const savedScrollTop = React.useRef(0);
+  const router = useRouter();
+
+  React.useEffect(() => {
+    const unsubBefore = router.subscribe("onBeforeLoad", () => {
+      const el = scrollRef.current;
+      if (el) {
+        savedScrollTop.current = el.scrollTop;
+      }
+    });
+
+    const unsubRendered = router.subscribe("onRendered", () => {
+      const el = scrollRef.current;
+      if (el && el.scrollTop !== savedScrollTop.current) {
+        el.scrollTop = savedScrollTop.current;
+      }
+    });
+
+    return () => {
+      unsubBefore();
+      unsubRendered();
+    };
+  }, [router, scrollRef]);
+}
diff --git a/desktop/src/features/sidebar/ui/AppSidebar.tsx b/desktop/src/features/sidebar/ui/AppSidebar.tsx
index d256ba5d7..a47d0c43f 100644
--- a/desktop/src/features/sidebar/ui/AppSidebar.tsx
+++ b/desktop/src/features/sidebar/ui/AppSidebar.tsx
@@ -27,6 +27,7 @@ import { PresenceDot } from "@/features/presence/ui/PresenceBadge";
 import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
 import { ProfilePopover } from "@/features/profile/ui/ProfilePopover";
 import { useDmSidebarMetadata } from "@/features/sidebar/useDmSidebarMetadata";
+import { useSidebarScrollLock } from "@/features/sidebar/lib/useSidebarScrollLock";
 import { useUnreadOverflow } from "@/features/sidebar/lib/useUnreadOverflow";
 import { MoreUnreadButton } from "@/features/sidebar/ui/MoreUnreadButton";
 import {
@@ -418,6 +419,7 @@ export function AppSidebar({
   const isNewDmOpen = isNewDmOpenProp ?? isNewDmOpenInternal;
   const setIsNewDmOpen = onNewDmOpenChange ?? setIsNewDmOpenInternal;
   const scrollRef = React.useRef<HTMLDivElement>(null);
+  useSidebarScrollLock(scrollRef);
   const [profilePopoverOpen, setProfilePopoverOpen] = React.useState(false);
   const [createDialogKind, setCreateDialogKind] =
     React.useState<CreateChannelKind | null>(null);