cinny/src/app/features/room/thread/ThreadsListPanel.tsx

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useAtom, useAtomValue } from 'jotai';
import { atomWithStorage, createJSONStorage } from 'jotai/utils';
import { NotificationCountType, Room, Thread } from 'matrix-js-sdk';
import {
  Avatar,
  Box,
  Button,
  Chip,
  Header,
  Icon,
  IconButton,
  Icons,
  Scroll,
  Text,
  config,
  toRem,
} from 'folds';
import classNames from 'classnames';
import { useVirtualizer } from '@tanstack/react-virtual';
import * as css from './ThreadsListPanel.css';
import { ContainerColor } from '../../../styles/ContainerColor.css';
import { VirtualTile } from '../../../components/virtualizer';
import { UserAvatar } from '../../../components/user-avatar';
import { StackedAvatar } from '../../../components/stacked-avatar';
import { UnreadBadge, UnreadBadgeCenter } from '../../../components/unread-badge';
import { useMemberAvatar } from '../../../hooks/useMemberAvatar';
import { trimReplyFromBody } from '../../../utils/room';
import { scaleSystemEmoji } from '../../../plugins/react-custom-html-parser';
import { markAllThreadsRead } from '../../../utils/markThreadsRead';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { useSetting } from '../../../state/hooks/settings';
import { settingsAtom } from '../../../state/settings';
import { threadNotificationsAtom } from '../../../state/threadNotifications';
import { getMutedThreads } from '../../../utils/threadNotifications';
import { nameInitials } from '../../../utils/common';
import {
  ThreadFilter,
  ThreadSort,
  ThreadSnapshot,
  filterThreads,
  sortThreads,
  isThreadFilter,
  isThreadSort,
} from '../../../utils/threadList';
import { useRoomThreads } from '../../../hooks/useRoomThreads';
import { useTimestampFormatter } from '../../../hooks/useTimestampFormatter';
import { formatRelativeAge } from '../../../utils/formatTimestamp';
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
import { useLocalRoomNames } from '../../../hooks/useRoomMeta';

// Persisted across panel opens (the panel unmounts on close). getOnInit reads
// localStorage synchronously so the chosen filter/sort apply on first render.
const threadFilterAtom = atomWithStorage<ThreadFilter>(
  'cinny_threads_filter_v1',
  'all',
  createJSONStorage(() => localStorage),
  { getOnInit: true },
);
const threadSortAtom = atomWithStorage<ThreadSort>(
  'cinny_threads_sort_v1',
  'recent',
  createJSONStorage(() => localStorage),
  { getOnInit: true },
);

const FILTER_OPTIONS: { value: ThreadFilter; label: string }[] = [
  { value: 'all', label: 'All' },
  { value: 'unread', label: 'Unread' },
  { value: 'participating', label: 'Participating' },
];
const SORT_OPTIONS: { value: ThreadSort; label: string }[] = [
  { value: 'recent', label: 'Recent' },
  { value: 'oldest', label: 'Oldest' },
];

const MAX_PARTICIPANTS = 5;

// Segmented button, mirroring the Bookmarks panel sort control for consistency.
function SegButton({
  label,
  active,
  onClick,
}: {
  label: string;
  active: boolean;
  onClick: () => void;
}) {
  return (
    <Button
      size="300"
      variant={active ? 'Primary' : 'Secondary'}
      fill={active ? 'Solid' : 'Soft'}
      radii="300"
      aria-pressed={active}
      onClick={onClick}
    >
      <Text size="B300">{label}</Text>
    </Button>
  );
}

function ParticipantAvatar({ room, userId }: { room: Room; userId: string }) {
  const { name, avatarUrl } = useMemberAvatar(room, userId);
  return (
    <StackedAvatar title={name} variant="SurfaceVariant" size="200" radii="Pill">
      <UserAvatar
        userId={userId}
        src={avatarUrl}
        alt={name}
        renderFallback={() => <Icon size="50" src={Icons.User} filled />}
      />
    </StackedAvatar>
  );
}

type ThreadRowProps = {
  room: Room;
  thread: Thread;
  unread: number;
  highlight: number;
  participants: string[];
  onOpen: (threadId: string) => void;
  onJump: (threadId: string) => void;
  /** Phone layout: a bigger touch target for the jump button. */
  touch?: boolean;
};
function ThreadRow({
  room,
  thread,
  unread,
  highlight,
  participants,
  onOpen,
  onJump,
  touch,
}: ThreadRowProps) {
  const { prefs } = useTimestampFormatter();
  const rootEvent = thread.rootEvent;
  const rootSender = rootEvent?.getSender() ?? '';
  const { name: rootName, avatarUrl } = useMemberAvatar(room, rootSender);
  const bodyRaw =
    typeof rootEvent?.getContent().body === 'string' ? (rootEvent.getContent().body as string) : '';
  const snippet = bodyRaw ? scaleSystemEmoji(trimReplyFromBody(bodyRaw)) : '(no preview)';
  const count = thread.length;
  const lastTs = thread.replyToEvent?.getTs() ?? rootEvent?.getTs();
  const extra = participants.length - MAX_PARTICIPANTS;
  const replyLabel = `${count} ${count === 1 ? 'reply' : 'replies'}`;
  const ariaLabel = `Open thread by ${rootName}${unread > 0 ? ', unread' : ''}, ${replyLabel}${
    typeof lastTs === 'number' ? `, last reply ${formatRelativeAge(lastTs, prefs)}` : ''
  }`;

  return (
    <Box direction="Column" style={{ position: 'relative' }}>
      <Box
        as="button"
        direction="Column"
        gap="100"
        className={css.ThreadRow}
        onClick={() => onOpen(thread.id)}
        aria-label={ariaLabel}
      >
        {/* Leaves room for the "Go to message" button laid over this corner. */}
        <Box alignItems="Center" gap="200" style={{ paddingRight: toRem(touch ? 36 : 28) }}>
          <Avatar size="200" radii="300">
            <UserAvatar
              userId={rootSender}
              src={avatarUrl}
              alt={rootName}
              renderFallback={() => <Text size="H6">{nameInitials(rootName)}</Text>}
            />
          </Avatar>
          <Text size="T200" truncate style={{ flexGrow: 1, fontWeight: config.fontWeight.W600 }}>
            {rootName}
          </Text>
          {unread > 0 && (
            <UnreadBadgeCenter>
              <UnreadBadge highlight={highlight > 0} count={unread} />
            </UnreadBadgeCenter>
          )}
        </Box>

        <Text
          size="T200"
          priority="400"
          style={{
            display: '-webkit-box',
            WebkitLineClamp: 2,
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden',
            wordBreak: 'break-word',
          }}
        >
          {snippet}
        </Text>

        <Box alignItems="Center" gap="200">
          <Icon size="50" src={Icons.Thread} />
          <Text size="T200" priority="300" truncate style={{ flexGrow: 1 }}>
            {count} {count === 1 ? 'reply' : 'replies'}
            {typeof lastTs === 'number' ? ` · ${formatRelativeAge(lastTs, prefs)}` : ''}
          </Text>
          <Box shrink="No" alignItems="Center">
            {participants.slice(0, MAX_PARTICIPANTS).map((userId) => (
              <ParticipantAvatar key={userId} room={room} userId={userId} />
            ))}
            {extra > 0 && (
              <Text size="T200" priority="300" style={{ marginLeft: config.space.S100 }}>
                +{extra}
              </Text>
            )}
          </Box>
        </Box>
      </Box>
      {/* [Gitea #165] Jump to the thread's first message in the room. A sibling
          of the row button, not nested in it (no buttons inside buttons). */}
      <IconButton
        size={touch ? '400' : '300'}
        radii="300"
        variant="SurfaceVariant"
        aria-label={`Go to the message that started ${rootName}'s thread`}
        title="Go to message"
        onClick={() => onJump(thread.id)}
        style={{ position: 'absolute', top: toRem(6), right: toRem(6) }}
      >
        <Icon size="100" src={Icons.ArrowGoRight} />
      </IconButton>
    </Box>
  );
}

export type ThreadsListPanelProps = {
  room: Room;
  onClose: () => void;
  onOpenThread: (threadId: string) => void;
};
export function ThreadsListPanel({ room, onClose, onOpenThread }: ThreadsListPanelProps) {
  const localNames = useLocalRoomNames();
  const { navigateRoom } = useRoomNavigate();
  const screenSize = useScreenSizeContext();
  const handleJump = useCallback(
    (threadId: string) => {
      navigateRoom(room.roomId, threadId);
      // On a phone the list covers the timeline; get out of the way.
      if (screenSize === ScreenSize.Mobile) onClose();
    },
    [navigateRoom, room.roomId, screenSize, onClose],
  );
  const threads = useRoomThreads(room);
  const threadNotifications = useAtomValue(threadNotificationsAtom);
  const [storedFilter, setFilter] = useAtom(threadFilterAtom);
  const [storedSort, setSort] = useAtom(threadSortAtom);
  const filter: ThreadFilter = isThreadFilter(storedFilter) ? storedFilter : 'all';
  const sort: ThreadSort = isThreadSort(storedSort) ? storedSort : 'recent';

  // Escape closes the panel (parity with the app's other drawers).
  useEffect(() => {
    const handleKeyDown = (evt: KeyboardEvent) => {
      if (evt.key === 'Escape' && !evt.defaultPrevented) {
        evt.preventDefault();
        evt.stopPropagation();
        onClose();
      }
    };
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [onClose]);

  const { visible, unreadById, highlightById, participantsById, threadById } = useMemo(() => {
    const mutedSet = getMutedThreads(threadNotifications, room.roomId);
    const unreadMap = new Map<string, number>();
    const highlightMap = new Map<string, number>();
    const partsMap = new Map<string, string[]>();
    const byId = new Map<string, Thread>();
    const snaps: ThreadSnapshot[] = threads.map((t) => {
      byId.set(t.id, t);
      const muted = mutedSet.has(t.id);
      const unread = muted
        ? 0
        : (room.getThreadUnreadNotificationCount(t.id, NotificationCountType.Total) ?? 0);
      const highlight = muted
        ? 0
        : (room.getThreadUnreadNotificationCount(t.id, NotificationCountType.Highlight) ?? 0);
      unreadMap.set(t.id, unread);
      highlightMap.set(t.id, highlight);

      // Participant senders: root first, then timeline order, plus the last
      // replier (from the server bundle) so it's present even if not paginated
      // into the loaded timeline yet. Deduped, order preserved.
      const seen = new Set<string>();
      const parts: string[] = [];
      const push = (s?: string | null) => {
        if (s && !seen.has(s)) {
          seen.add(s);
          parts.push(s);
        }
      };
      push(t.rootEvent?.getSender());
      t.timeline.forEach((e) => push(e.getSender()));
      push(t.replyToEvent?.getSender());
      partsMap.set(t.id, parts);

      return {
        id: t.id,
        latestTs: t.replyToEvent?.getTs() ?? t.rootEvent?.getTs() ?? 0,
        unread,
        participated: t.hasCurrentUserParticipated,
      };
    });
    const visibleSnaps = sortThreads(filterThreads(snaps, filter), sort);
    return {
      visible: visibleSnaps,
      unreadById: unreadMap,
      highlightById: highlightMap,
      participantsById: partsMap,
      threadById: byId,
    };
  }, [threads, room, filter, sort, threadNotifications]);

  // [Gitea #165] "Mark all read" — one threaded receipt per unread thread.
  const mx = useMatrixClient();
  const [marking, setMarking] = useState(false);
  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
  const [privateReadReceipts] = useSetting(settingsAtom, 'privateReadReceipts');
  const totalUnread = useMemo(
    () => [...unreadById.values()].reduce((n, c) => n + c, 0),
    [unreadById],
  );
  const handleMarkAllRead = useCallback(() => {
    setMarking(true);
    markAllThreadsRead(mx, room, hideActivity || privateReadReceipts).finally(() =>
      setMarking(false),
    );
  }, [mx, room, hideActivity, privateReadReceipts]);

  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
  const virtualizer = useVirtualizer({
    count: visible.length,
    getScrollElement: () => scrollRef.current,
    estimateSize: () => 96,
    overscan: 8,
    getItemKey: (index) => visible[index].id,
  });

  const totalThreads = threads.length;
  const emptyMessage =
    totalThreads === 0
      ? 'No threads in this room yet. Start one from a message’s “Reply in Thread”.'
      : 'No threads match this filter.';

  return (
    <Box
      className={classNames(css.ThreadsListPanel, ContainerColor({ variant: 'Background' }))}
      shrink="No"
      direction="Column"
    >
      <Header className={css.ThreadsListHeader} variant="Background" size="600">
        <Box grow="Yes" alignItems="Center" gap="200">
          <Icon src={Icons.Thread} size="200" />
          <Box grow="Yes" direction="Column">
            <Text size="H4" truncate>
              Threads
            </Text>
            <Text size="T200" truncate style={{ opacity: 0.65 }}>
              {localNames[room.roomId] ?? room.name}
            </Text>
          </Box>
          {totalUnread > 0 && (
            <Chip
              variant="Secondary"
              fill="Soft"
              radii="300"
              outlined
              disabled={marking}
              onClick={handleMarkAllRead}
              before={<Icon size="50" src={Icons.Check} />}
            >
              <Text size="B300">Mark all read</Text>
            </Chip>
          )}
          <IconButton size="300" radii="300" aria-label="Close threads" onClick={onClose}>
            <Icon src={Icons.Cross} />
          </IconButton>
        </Box>
      </Header>

      <Box className={css.ThreadsListToolbar} direction="Column" gap="200">
        <Box role="group" aria-label="Filter threads" gap="100" wrap="Wrap">
          {FILTER_OPTIONS.map((opt) => (
            <SegButton
              key={opt.value}
              label={opt.label}
              active={filter === opt.value}
              onClick={() => setFilter(opt.value)}
            />
          ))}
        </Box>
        <Box role="group" aria-label="Sort threads" gap="100">
          {SORT_OPTIONS.map((opt) => (
            <SegButton
              key={opt.value}
              label={opt.label}
              active={sort === opt.value}
              onClick={() => setSort(opt.value)}
            />
          ))}
        </Box>
      </Box>

      <Box grow="Yes" style={{ minHeight: 0 }}>
        <Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover" hideTrack>
          {visible.length === 0 ? (
            <Box
              direction="Column"
              alignItems="Center"
              justifyContent="Center"
              gap="300"
              style={{ padding: config.space.S700, textAlign: 'center' }}
            >
              <Icon size="600" src={Icons.Thread} style={{ opacity: config.opacity.Disabled }} />
              <Text size="T300" priority="300" align="Center">
                {emptyMessage}
              </Text>
            </Box>
          ) : (
            <Box className={css.ThreadsListContent} direction="Column">
              <div
                style={{ position: 'relative', height: virtualizer.getTotalSize(), width: '100%' }}
              >
                {virtualizer.getVirtualItems().map((vItem) => {
                  const snap = visible[vItem.index];
                  const thread = threadById.get(snap.id);
                  if (!thread) return null;
                  return (
                    <VirtualTile
                      key={snap.id}
                      virtualItem={vItem}
                      ref={virtualizer.measureElement}
                      style={{ width: '100%', paddingBottom: config.space.S200 }}
                    >
                      <ThreadRow
                        room={room}
                        thread={thread}
                        unread={unreadById.get(snap.id) ?? 0}
                        highlight={highlightById.get(snap.id) ?? 0}
                        participants={participantsById.get(snap.id) ?? []}
                        onOpen={onOpenThread}
                        onJump={handleJump}
                        touch={screenSize === ScreenSize.Mobile}
                      />
                    </VirtualTile>
                  );
                })}
              </div>
            </Box>
          )}
        </Scroll>
      </Box>
    </Box>
  );
}