nexusAI/packages/chat-client/src/components/SessionList.jsx

import React, { useState } from 'react';
import SessionModal from './SessionModal';
import { useContextMenu } from '../hooks/useContextMenu';
import { renameSession, deleteSession } from '../api/orchestration';

export default function SessionList({ sessions, activeSession, onSelectSession, onNewChat, isOpen, onToggle, onSessionsChange }) {
  const [modalSession, setModalSession] = useState(null);
  const [hoveredId, setHoveredId] = useState(null);
  const { menu, open: openMenu, close: closeMenu } = useContextMenu();
  const [modalMode, setModalMode] = useState('settings');

  function formatDate(ts) {
    if (!ts) return '';
    const date = new Date(ts * 1000);
    const now = new Date();
    const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
    if (diffDays === 0) return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    if (diffDays === 1) return 'Yesterday';
    if (diffDays < 7) return date.toLocaleDateString([], { weekday: 'long' });
    return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
  }

  function getPreview(session) {
    if (session.isNew) return 'New conversation';
    return session.name || session.external_id;
  }

  async function handleRename(session, name) {
    try {
      await renameSession(session.external_id, name);
      onSessionsChange();
    } catch (err) {
      console.error('[SessionList] Rename failed:', err.message);
    }
  }

  async function handleDelete(session) {
    try {
      await deleteSession(session.external_id);
      onSessionsChange();
    } catch (err) {
      console.error('[SessionList] Delete failed:', err.message);
    }
  }

  return (
    <>
      <div style={{
        width: isOpen ? 'var(--sidebar-width)' : '56px',
        flexShrink: 0,
        background: 'var(--bg-surface)',
        borderRight: '1px solid var(--border)',
        transition: 'width 0.2s ease',
        overflow: 'hidden',
      }} className="flex-col">

        {/* Header */}
        <div className="panel-header" style={{
          justifyContent: isOpen ? 'space-between' : 'center',
          padding: isOpen ? '0 12px 0 16px' : '0',
        }}>
          {isOpen && <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Conversations</span>}
          <button className="btn-icon" onClick={onToggle}>{isOpen ? '◀' : '▶'}</button>
        </div>

        {/* New chat button */}
        <div style={{ padding: isOpen ? '12px' : '12px 8px', flexShrink: 0 }}>
          <button className="btn-primary" onClick={onNewChat} style={{
            width: '100%',
            padding: isOpen ? '8px 12px' : '8px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: isOpen ? 'flex-start' : 'center',
            gap: '8px',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
          }}>
            <span style={{ fontSize: '18px', lineHeight: 1, flexShrink: 0 }}>+</span>
            {isOpen && <span>New Chat</span>}
          </button>
        </div>

        {/* Session list */}
        <div className="flex-1 scroll-y">
          {isOpen && sessions.map(session => {
            const isActive = activeSession?.external_id === session.external_id;
            const isHovered = hoveredId === session.external_id;

            return (
              <div
                key={session.external_id}
                onMouseEnter={() => setHoveredId(session.external_id)}
                onMouseLeave={() => setHoveredId(null)}
                onContextMenu={e => !session.isNew && openMenu(e, session)}
                style={{
                  position: 'relative',
                  display: 'flex',
                  alignItems: 'stretch',
                  background: isActive ? 'var(--bg-elevated)' : isHovered ? 'var(--bg-elevated)' : 'transparent',
                  borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
                  transition: 'background 0.1s',
                }}
              >
                {/* Session select button — no action icons inside */}
                <button
                  onClick={() => onSelectSession(session)}
                  className="btn-reset"
                  style={{
                    flex: 1,
                    padding: '10px 16px',
                    paddingRight: isHovered && !session.isNew ? '4px' : '16px',
                    textAlign: 'left',
                    flexDirection: 'column',
                    gap: '3px',
                    minWidth: 0, // allows truncation to work
                  }}
                >
                  <div className="flex" style={{ gap: '8px', width: '100%' }}>
                    <span className="text-base truncate" style={{
                      color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
                      fontWeight: isActive ? 500 : 400,
                      flex: 1,
                    }}>
                      {getPreview(session)}
                    </span>
                    {!isHovered && (
                      <span className="text-xs text-muted flex-shrink">
                        {formatDate(session.updated_at)}
                      </span>
                    )}
                  </div>
                  {session.isNew && (
                    <span className="text-xs text-accent" style={{ fontStyle: 'italic' }}>Unsaved</span>
                  )}
                </button>

                {/* Action icons — outside the button, alongside it */}
                {isHovered && !session.isNew && (
                  <div className="flex items-center flex-shrink" style={{ gap: '2px', paddingRight: '8px' }}>
                    <button
                      className="btn-icon"
                      title="Rename"
                      onClick={() => { setModalMode('settings'); setModalSession(session); }}
                      style={{ padding: '2px 4px', fontSize: '12px' }}
                    >✎</button>
                    <button
                      className="btn-icon"
                      title="Delete"
                      onClick={() => { setModalMode('confirm-delete'); setModalSession(session); }}
                      style={{ padding: '2px 4px', fontSize: '12px', color: '#ff6b6b' }}
                    >✕</button>
                  </div>
                )}
              </div>
            );
          })}

          {isOpen && sessions.length === 0 && (
            <div className="text-base text-muted" style={{ padding: '24px 16px', textAlign: 'center' }}>
              No conversations yet
            </div>
          )}
        </div>
      </div>

      {/* Context menu */}
      {menu && (
        <div
          onClick={e => e.stopPropagation()}
          style={{
            position: 'fixed',
            top: menu.y,
            left: menu.x,
            background: 'var(--bg-elevated)',
            border: '1px solid var(--border)',
            borderRadius: 'var(--radius-md)',
            padding: '4px',
            zIndex: 50,
            minWidth: '140px',
          }}
        >
          <button 
            className="btn-reset text-base" 
            onClick={() => { setModalMode('settings'); setModalSession(menu.session); closeMenu(); }}
            style={{ width: '100%', padding: '8px 12px', borderRadius: 'var(--radius-sm)', justifyContent: 'flex-start', color: 'var(--text-primary)' }}
            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-surface)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
          >
            ✎ Rename
          </button>
          <button className="btn-reset text-base"
            onClick={() => { setModalMode('confirm-delete'); setModalSession(menu.session); closeMenu(); }}
            style={{
              width: '100%', padding: '8px 12px', borderRadius: 'var(--radius-sm)',
              justifyContent: 'flex-start', color: '#ff6b6b'
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-surface)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
          >✕ Delete</button>
        </div>
      )}

      {/* Rename modal */}
      {modalSession && (
        <SessionModal
          session={modalSession}
          mode={modalMode}
          onRename={handleRename}
          onDelete={handleDelete}
          onClose={() => setModalSession(null)}
        />
      )}
    </>
  );
}