fix: profile, away, tray and ui fixes from daily use

src/components/chat/completionProviders.tsx

@@ -296,18 +296,27 @@ export function slashProvider(
       const signature = formatOptions(cmd.options);
       const source = sourceLabel(cmd.source);
       return (
-        <span className="flex-1 min-w-0 flex flex-col gap-0.5">
-          <span className="flex items-baseline gap-2 min-w-0">
-            <span className="truncate">/{cmd.name}</span>
+        <span className="flex-1 min-w-0 flex flex-col gap-0.5 [[data-compact]_&]:flex-row [[data-compact]_&]:items-baseline [[data-compact]_&]:gap-2">
+          <span className="flex items-baseline gap-2 min-w-0 [[data-compact]_&]:contents">
+            <span className="truncate [[data-compact]_&]:shrink-0 [[data-compact]_&]:font-semibold">
+              /{cmd.name}
+            </span>
             {signature && (
-              <span className="row-meta truncate">{signature}</span>
+              <span className="row-meta truncate [[data-compact]_&]:shrink-0">
+                {signature}
+              </span>
             )}
-            <span className="row-meta ml-auto shrink-0" title={source.title}>
+            <span
+              className="row-meta ml-auto shrink-0 [[data-compact]_&]:order-last"
+              title={source.title}
+            >
               {source.label}
             </span>
           </span>
           {cmd.description && (
-            <span className="row-meta truncate">{cmd.description}</span>
+            <span className="row-meta truncate [[data-compact]_&]:flex-1 [[data-compact]_&]:min-w-0">
+              {cmd.description}
+            </span>
           )}
         </span>
       );

src/components/layout/AppLayout.tsx

@@ -18,10 +18,12 @@ import TitleTooltipLayer from "../ui/TitleTooltipLayer";
 import { VoicePipOverlay } from "../voice/VoicePipOverlay";
 import { ChannelList } from "./ChannelList";
 import { ChatArea } from "./ChatArea";
+import { MemberList } from "./MemberList";
 import { PageLayer } from "./PageLayer";
 import { ResizableSidebar } from "./ResizableSidebar";
 import { ServerList } from "./ServerList";
 import { SidePane } from "./SidePane";
+import SwipeBackScreen from "./SwipeBackScreen";
 import { VoiceChannelView } from "./VoiceChannelView";
 
 const PAGE_ORDER: layoutColumn[] = ["serverList", "chatView", "memberList"];
@@ -312,7 +314,16 @@ export const AppLayout: React.FC = () => {
         if (isNarrowView) {
           return (
             <div className="w-full h-full bg-discord-dark-100">
-              <SidePane />
+              {sidePane?.kind === "profile" || sidePane?.kind === "bot" ? (
+                <SwipeBackScreen
+                  under={<MemberList />}
+                  onBack={() => useStore.getState().closeProfile()}
+                >
+                  <SidePane />
+                </SwipeBackScreen>
+              ) : (
+                <SidePane />
+              )}
             </div>
           );
         }

src/components/pages/BotsPage.tsx → src/components/layout/BotPane.tsx

@@ -1,17 +1,14 @@
 import { t } from "@lingui/core/macro";
 import { Trans, useLingui } from "@lingui/react/macro";
 import type React from "react";
-import { useEffect, useMemo, useState } from "react";
-import { FaCircle } from "react-icons/fa";
+import { useMemo } from "react";
+import { FaChevronLeft, FaCircle, FaTimes } from "react-icons/fa";
 import ircClient from "../../lib/ircClient";
 import { confirmDestructive } from "../../lib/modal/ConfirmDialog";
 import useStore from "../../store";
+import type { BotPane as BotPaneTarget } from "../../store/types";
 import type { BotCommand, PushBotInfo } from "../../types";
 import LoadingSpinner from "../ui/LoadingSpinner";
-import { type PageSection, PageShell } from "../ui/page/PageShell";
-import type { PageProps } from "./PageHost";
-
-type FilterMode = "all" | "server" | "channel";
 
 const STATUS_CLS: Record<PushBotInfo["status"], string> = {
   active: "bg-emerald-700/40 text-emerald-300 border border-emerald-600/50",
@@ -59,15 +56,6 @@ function useScopeBadge(): Record<
   };
 }
 
-function useFilterLabels(): Record<FilterMode, string> {
-  const { t } = useLingui();
-  return {
-    all: t`All`,
-    server: t`Server-wide`,
-    channel: t`Channel`,
-  };
-}
-
 interface BotDetailProps {
   bot: PushBotInfo;
   isOper: boolean;
@@ -271,155 +259,112 @@ function isBotReachable(
   return !!bot.channels?.some((ch) => joinedChannels.has(ch.toLowerCase()));
 }
 
-const BotsPage: React.FC<PageProps<"bots">> = ({ page }) => {
-  const { serverId, botNick } = page;
+export const BotPane: React.FC<{ target: BotPaneTarget }> = ({ target }) => {
+  const { serverId, botNick } = target;
   const server = useStore((s) => s.servers.find((srv) => srv.id === serverId));
   const currentUser = useStore((s) => s.currentUser);
-  const closePage = useStore((s) => s.closePage);
+  const isNarrowView = useStore((s) => s.ui.isNarrowView);
+  const closeProfile = useStore((s) => s.closeProfile);
+  const openBot = useStore((s) => s.openBot);
   const requestBotCommandPick = useStore((s) => s.requestBotCommandPick);
-  const FILTER_LABELS = useFilterLabels();
-  const [filter, setFilter] = useState<FilterMode>("all");
-  const [query, setQuery] = useState("");
-  const [selectedNick, setSelectedNick] = useState<string | null>(
-    botNick ?? null,
-  );
-  useEffect(() => {
-    if (botNick) setSelectedNick(botNick);
-  }, [botNick]);
 
-  const isOper = (() => {
-    const myNick = currentUser?.username;
-    if (!myNick || !server) return false;
-    const me = server.users.find((u) => u.username === myNick);
-    return !!me?.isIrcOp;
-  })();
+  const isOper = !!server?.users.find(
+    (u) => u.username === currentUser?.username,
+  )?.isIrcOp;
 
   const bots: PushBotInfo[] = useMemo(() => {
-    if (!server?.bots) return [];
-    // Reachability filter: server-scope bots are always shown
-    // (reachable from any context).  Channel-scope bots only appear
-    // when the local user still shares a channel with them -- this
-    // matches the server-side discovery contract (server-scope on
-    // burst, channel-scope on LOCAL_JOIN of a shared channel) and
-    // hides stale entries left over after the user parts a channel.
     const joinedChannels = new Set(
-      (server.channels ?? []).map((c) => c.name.toLowerCase()),
+      (server?.channels ?? []).map((c) => c.name.toLowerCase()),
     );
-    return Object.values(server.bots)
+    return Object.values(server?.bots ?? {})
       .filter((b) => isBotReachable(b, isOper, joinedChannels))
-      .filter((b) => filter === "all" || b.scope === filter)
-      .filter((b) =>
-        query
-          ? b.nick.toLowerCase().includes(query.toLowerCase()) ||
-            (b.realname ?? "").toLowerCase().includes(query.toLowerCase())
-          : true,
-      )
-      .sort((a, b) => {
-        const sa = a.status === "active" ? 0 : a.status === "pending" ? 1 : 2;
-        const sb = b.status === "active" ? 0 : b.status === "pending" ? 1 : 2;
-        if (sa !== sb) return sa - sb;
-        return a.nick.localeCompare(b.nick);
-      });
-  }, [server?.bots, server?.channels, filter, query, isOper]);
+      .sort((a, b) => a.nick.localeCompare(b.nick));
+  }, [server?.bots, server?.channels, isOper]);
 
-  const selected = selectedNick
-    ? server?.bots?.[selectedNick.toLowerCase()]
-    : undefined;
+  const selected = botNick ? server?.bots?.[botNick.toLowerCase()] : undefined;
 
   const send = (subcmd: string) => {
     if (!isOper || !selected) return;
     ircClient.sendRaw(serverId, `PUSHBOT ${subcmd} ${selected.nick}`);
-    if (subcmd === "DELETE") setSelectedNick(null);
+    if (subcmd === "DELETE") openBot(serverId);
   };
 
-  const sections: PageSection[] = bots.map((b) => ({
-    id: b.nick,
-    label: b.nick,
-    icon: server?.botCommandsLoading?.includes(b.nick.toLowerCase()) ? (
-      <LoadingSpinner size="sm" text="" />
-    ) : (
-      <FaCircle
-        className={`text-[8px] ${b.online ? "text-emerald-400" : "text-discord-text-muted/60"}`}
-      />
-    ),
-    description: b.realname || undefined,
-  }));
-
-  const controls = (
-    <div className="flex flex-col gap-2">
-      <input
-        value={query}
-        onChange={(e) => setQuery(e.target.value)}
-        placeholder={t`Search bots`}
-        aria-label={t`Search bots`}
-        className="field-input"
-      />
-      <div className="flex gap-1 text-xs">
-        {(["all", "server", "channel"] as FilterMode[]).map((f) => (
+  return (
+    <div className="flex flex-col h-full min-h-0 overflow-x-hidden bg-discord-dark-100">
+      <header className="h-12 shrink-0 flex items-center gap-1.5 px-2 border-b border-white/[0.06]">
+        {(isNarrowView || selected) && (
           <button
             type="button"
-            key={f}
-            aria-pressed={filter === f}
-            onClick={() => setFilter(f)}
-            className={`px-2 py-1 rounded transition-colors ${
-              filter === f
-                ? "bg-discord-primary text-white"
-                : "bg-discord-dark-400 text-discord-text-muted hover:text-white"
-            }`}
+            onClick={selected ? () => openBot(serverId) : closeProfile}
+            className="icon-button w-10 h-10 rounded-lg"
+            title={t`Back`}
+            aria-label={t`Back`}
           >
-            {FILTER_LABELS[f]}
+            <FaChevronLeft className="w-3.5 h-3.5" />
           </button>
-        ))}
-        <div className="ml-auto text-discord-text-muted self-center">
-          {bots.length}
-        </div>
+        )}
+        <h2 className="flex-1 min-w-0 truncate px-1 text-[15px] font-semibold text-white">
+          <Trans>Bots</Trans>
+        </h2>
+        {!isNarrowView && (
+          <button
+            type="button"
+            onClick={closeProfile}
+            className="icon-button w-10 h-10 rounded-lg"
+            title={t`Close`}
+            aria-label={t`Close`}
+          >
+            <FaTimes className="w-3.5 h-3.5" />
+          </button>
+        )}
+      </header>
+      <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain px-3 py-4">
+        {selected ? (
+          <BotDetail
+            bot={selected}
+            isOper={isOper}
+            loading={
+              !!server?.botCommandsLoading?.includes(
+                selected.nick.toLowerCase(),
+              )
+            }
+            onAction={send}
+            onPickCommand={(cmd) => {
+              requestBotCommandPick(serverId, selected.nick, cmd);
+              closeProfile();
+            }}
+          />
+        ) : bots.length === 0 ? (
+          <div className="py-8 text-center text-sm text-discord-text-muted">
+            <Trans>No bots registered on this network yet.</Trans>
+          </div>
+        ) : (
+          <ul className="flex flex-col gap-1">
+            {bots.map((b) => (
+              <li key={b.nick}>
+                <button
+                  type="button"
+                  onClick={() => openBot(serverId, b.nick)}
+                  className="w-full text-left flex items-center gap-2 rounded px-3 py-2 text-discord-text-normal hover:bg-discord-dark-400 transition-colors"
+                >
+                  {server?.botCommandsLoading?.includes(
+                    b.nick.toLowerCase(),
+                  ) ? (
+                    <LoadingSpinner size="sm" text="" />
+                  ) : (
+                    <FaCircle
+                      className={`text-[8px] ${b.online ? "text-emerald-400" : "text-discord-text-muted/60"}`}
+                    />
+                  )}
+                  <span className="truncate">{b.nick}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
       </div>
     </div>
   );
-
-  const hasAnyBot = Object.keys(server?.bots ?? {}).length > 0;
-
-  const detail = selected ? (
-    <BotDetail
-      bot={selected}
-      isOper={isOper}
-      loading={
-        !!server?.botCommandsLoading?.includes(selected.nick.toLowerCase())
-      }
-      onAction={send}
-      onPickCommand={(cmd) => {
-        requestBotCommandPick(serverId, selected.nick, cmd);
-        closePage();
-      }}
-    />
-  ) : (
-    <div className="py-12 text-center text-sm text-discord-text-muted">
-      <Trans>Select a bot to see its commands and management actions.</Trans>
-    </div>
-  );
-
-  return (
-    <PageShell
-      title={t`Bots`}
-      sections={sections}
-      activeSection={selected?.nick}
-      onSectionChange={setSelectedNick}
-      startOnSection={!!botNick}
-      navExtra={controls}
-    >
-      {bots.length === 0 ? (
-        <div className="py-8 text-center text-sm text-discord-text-muted">
-          {hasAnyBot ? (
-            <Trans>No bots match. Clear the search or change the filter.</Trans>
-          ) : (
-            <Trans>No bots registered on this network yet.</Trans>
-          )}
-        </div>
-      ) : (
-        detail
-      )}
-    </PageShell>
-  );
 };
 
-export default BotsPage;
+export default BotPane;

src/components/layout/ChannelMessageList.tsx

@@ -279,19 +279,6 @@ export const ChannelMessageList = forwardRef<
       }
     }, [isScrolledUp]);
 
-    // Reset ref-tracked windowing state when switching channels.
-    // visibleMessageCount is NOT reset here — useState(initialScrollState?.visibleCount ?? DEFAULT_VISIBLE_MESSAGE_COUNT)
-    // already initializes it correctly on mount, and this effect runs once on mount for the
-    // same channelKey (each instance is bound to exactly one channel by the parent key={}).
-    // biome-ignore lint/correctness/useExhaustiveDependencies: intentional full reset on channel change
-    useEffect(() => {
-      prevFilteredLengthRef.current = 0;
-      prevFirstMsgIdRef.current = null;
-      prevScrollHeightRef.current = 0;
-      pendingPrependRef.current = false;
-      resizeObserverPrevSHRef.current = 0;
-    }, [channelKey]);
-
     // Whether we moved the scroll to put the anchored row back where it was.
     const keepAnchoredRow = (): boolean => {
       const container = messagesContainerRef.current;
@@ -1063,18 +1050,19 @@ export const ChannelMessageList = forwardRef<
                 return (
                   <Fragment key={message.id}>
                     {message.id === firstUnreadId && (
-                      // We draw the line over the boundary with no height of its own, so the messages stay put when it comes and goes.
+                      // We draw the line with no height of its own, so the messages stay put when it comes and goes.
+                      // A row with a header has a 16px gap above it, and the line sits in the middle of it.
                       // Above the first row there is nothing to overlap, so there it takes its own height.
                       <div
                         data-unread-line
                         className={`relative z-[5] pointer-events-none ${originalIndex === 0 ? "h-5" : "h-0"}`}
                       >
                         <div
-                          className={`absolute inset-x-4 -translate-y-1/2 flex items-center gap-2 text-xs font-semibold text-discord-red ${originalIndex === 0 ? "top-1/2" : "top-0"}`}
+                          className={`absolute inset-x-4 -translate-y-1/2 flex items-center gap-2 text-xs font-semibold text-discord-red ${originalIndex === 0 ? "top-1/2" : showHeader ? "top-2" : "top-0"}`}
                         >
                           <span className="hairline flex-1 bg-discord-red/70" />
-                          <span className="px-1 rounded bg-discord-dark-200">
-                            <Trans>New messages</Trans>
+                          <span className="px-1.5 h-4 leading-4 text-[10px] rounded-sm bg-discord-red text-white">
+                            <Trans>New</Trans>
                           </span>
                         </div>
                       </div>