cinny/src/app/pages/client/sidebar/SettingsTab.tsx

import React, { useState } from 'react';
import {
  Badge,
  Box,
  Icon,
  Icons,
  Menu,
  MenuItem,
  PopOut,
  RectCords,
  Text,
  Tooltip,
  TooltipProvider,
  color,
  config,
  toRem,
} from 'folds';
import FocusTrap from 'focus-trap-react';
import { SidebarItem, SidebarItemTooltip, SidebarAvatar } from '../../../components/sidebar';
import { stopPropagation } from '../../../utils/keyboard';
import { UserAvatar } from '../../../components/user-avatar';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
import { nameInitials } from '../../../utils/common';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
import { Settings } from '../../../features/settings';
import { useUserProfile } from '../../../hooks/useUserProfile';
import { Modal500 } from '../../../components/Modal500';
import { useSetting } from '../../../state/hooks/settings';
import { settingsAtom } from '../../../state/settings';

type PresenceOption = {
  id: 'auto' | 'online' | 'idle' | 'dnd' | 'invisible';
  label: string;
  dotColor: string;
  soft?: boolean;
};

const PRESENCE_OPTIONS: PresenceOption[] = [
  { id: 'online', label: 'Online', dotColor: color.Success.Main },
  { id: 'idle', label: 'Idle', dotColor: color.Warning.Main },
  { id: 'dnd', label: 'Do Not Disturb', dotColor: color.Critical.Main },
  { id: 'invisible', label: 'Invisible', dotColor: color.Secondary.Main, soft: true },
  { id: 'auto', label: 'Auto (activity-based)', dotColor: color.Primary.Main },
];

function PresenceDot({ option, size = 10 }: { option: PresenceOption; size?: number }) {
  return (
    <div
      style={{
        width: size,
        height: size,
        borderRadius: '50%',
        background: option.soft ? 'transparent' : option.dotColor,
        border: option.soft ? `2px solid ${option.dotColor}` : undefined,
        flexShrink: 0,
      }}
    />
  );
}

function presenceVariant(status: string): 'Success' | 'Warning' | 'Critical' | 'Secondary' {
  if (status === 'online') return 'Success';
  if (status === 'idle') return 'Warning';
  if (status === 'dnd') return 'Critical';
  return 'Secondary';
}

function PresencePicker() {
  const [presenceStatus, setPresenceStatus] = useSetting(settingsAtom, 'presenceStatus');
  const [menuAnchor, setMenuAnchor] = useState<RectCords>();

  const currentOption =
    PRESENCE_OPTIONS.find((o) => o.id === presenceStatus) ?? PRESENCE_OPTIONS[4];
  const closeMenu = () => setMenuAnchor(undefined);

  return (
    <PopOut
      anchor={menuAnchor}
      position="Right"
      align="End"
      content={
        <FocusTrap
          focusTrapOptions={{
            initialFocus: false,
            onDeactivate: closeMenu,
            clickOutsideDeactivates: true,
            escapeDeactivates: stopPropagation,
            isKeyForward: (evt: KeyboardEvent) =>
              evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
          }}
        >
          <Menu variant="Surface" style={{ padding: config.space.S100, minWidth: toRem(210) }}>
            <Box direction="Column" gap="100">
              <Box style={{ padding: `${config.space.S100} ${config.space.S200}` }}>
                <Text size="L400" priority="300">
                  Set Status
                </Text>
              </Box>
              {PRESENCE_OPTIONS.map((option) => (
                <MenuItem
                  key={option.id}
                  size="300"
                  variant={option.id === presenceStatus ? 'Primary' : 'Surface'}
                  radii="300"
                  before={<PresenceDot option={option} />}
                  after={
                    option.id === presenceStatus ? <Icon size="100" src={Icons.Check} /> : undefined
                  }
                  onClick={() => {
                    setPresenceStatus(option.id);
                    closeMenu();
                  }}
                >
                  <Text size="T300">{option.label}</Text>
                </MenuItem>
              ))}
            </Box>
          </Menu>
        </FocusTrap>
      }
    >
      {/* Presence dot sits in the bottom-right corner of SidebarItem (which is position:relative) */}
      <TooltipProvider
        position="Right"
        tooltip={
          <Tooltip>
            <Text size="T200">{`Status: ${currentOption.label}`}</Text>
          </Tooltip>
        }
      >
        {(triggerRef) => (
          <button
            type="button"
            ref={triggerRef}
            aria-label={`Status: ${currentOption.label}. Click to change.`}
            onClick={(e) => {
              e.stopPropagation();
              setMenuAnchor(e.currentTarget.getBoundingClientRect());
            }}
            style={{
              position: 'absolute',
              bottom: 2,
              right: 2,
              background: color.Background.Container,
              border: 'none',
              borderRadius: '50%',
              padding: 2,
              lineHeight: 0,
              cursor: 'pointer',
              zIndex: 1,
            }}
          >
            <Badge
              size="200"
              variant={presenceVariant(presenceStatus)}
              fill={presenceStatus === 'invisible' ? 'Soft' : 'Solid'}
              radii="Pill"
            />
          </button>
        )}
      </TooltipProvider>
    </PopOut>
  );
}

export function SettingsTab() {
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
  const userId = mx.getUserId()!;
  const profile = useUserProfile(userId);

  const [settingsOpen, setSettingsOpen] = useState(false);

  const displayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
  const avatarUrl = profile.avatarUrl
    ? (mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined)
    : undefined;

  return (
    // SidebarItem already has position:relative in its CSS — the PresencePicker
    // button is absolutely positioned inside it, below the avatar.
    <SidebarItem active={settingsOpen}>
      <SidebarItemTooltip tooltip="User Settings">
        {(triggerRef) => (
          <SidebarAvatar as="button" ref={triggerRef} onClick={() => setSettingsOpen(true)}>
            <UserAvatar
              userId={userId}
              src={avatarUrl}
              renderFallback={() => <Text size="H4">{nameInitials(displayName)}</Text>}
            />
          </SidebarAvatar>
        )}
      </SidebarItemTooltip>
      <PresencePicker />
      {settingsOpen && (
        <Modal500 requestClose={() => setSettingsOpen(false)}>
          <Settings requestClose={() => setSettingsOpen(false)} />
        </Modal500>
      )}
    </SidebarItem>
  );
}