feat(ui): 自定义玻璃态下拉组件 + 设置选项卡滚动到顶部

app/desktop/src/__tests__/AuthPage.test.tsx

@@ -1,15 +1,17 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
+import type { ComponentProps } from 'react';
 
+const mockLogin = vi.fn();
 const mockLoginWithTokenDance = vi.fn();
 
 vi.mock('@/hooks/useAuth', () => ({
   useAuth: () => ({
+    login: mockLogin,
     loginWithTokenDance: mockLoginWithTokenDance,
     token: null,
     user: null,
-    refreshToken: null,
     isAuthenticated: false,
     tokenSource: null,
   }),
@@ -18,22 +20,20 @@ vi.mock('@/hooks/useAuth', () => ({
 
 vi.mock('@/api/hubClient', () => ({
   createHubClient: () => ({
-    me: vi.fn().mockResolvedValue({ id: 'u1', username: 'test', nickname: 'Test' }),
-    refresh: vi.fn().mockResolvedValue({ access_token: 't1', refresh_token: 'r1', expires_in: 900 }),
+    register: vi.fn().mockResolvedValue({ user_id: 'u1' }),
+    login: vi.fn().mockResolvedValue({ access_token: 't1', refresh_token: 'r1' }),
   }),
 }));
 
 import AuthPage from '@/components/AuthPage';
 
-function renderAuthPage(onLoginSuccess = vi.fn(), onClose?: () => void) {
-  return render(<AuthPage onLoginSuccess={onLoginSuccess} onClose={onClose} />);
+function renderAuthPage(props: Partial<ComponentProps<typeof AuthPage>> = {}) {
+  return render(<AuthPage onLoginSuccess={vi.fn()} {...props} />);
 }
 
 describe('AuthPage', () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    // Suppress fetch errors during Hub health check
-    vi.spyOn(globalThis, 'fetch').mockRejectedValue(new Error('no-op'));
   });
 
   // ── Render ────────────────────────────────────────
@@ -45,58 +45,75 @@ describe('AuthPage', () => {
     expect(screen.getByText('AH')).toBeInTheDocument();
   });
 
-  it('renders the TokenDance ID login button', () => {
+  it('renders login tab active by default', () => {
     renderAuthPage();
     expect(screen.getByText('auth.tokenDanceLogin')).toBeInTheDocument();
+    expect(screen.getByText('auth.devLogin')).toBeInTheDocument();
+    expect(screen.queryByLabelText('auth.username')).not.toBeInTheDocument();
   });
 
-  it('renders the primary auth hint', () => {
+  it('renders login form content by default', () => {
     renderAuthPage();
-    expect(screen.getByText('auth.tokenDancePrimary')).toBeInTheDocument();
+    fireEvent.click(screen.getByText('auth.devLogin'));
+    expect(screen.getByLabelText('auth.username')).toBeInTheDocument();
+    expect(screen.getByLabelText('auth.password')).toBeInTheDocument();
+    expect(screen.getByText('auth.loginButton')).toBeInTheDocument();
   });
 
-  // ── Close button ──────────────────────────────────
+  // ── Tab switching ─────────────────────────────────
 
-  it('renders close button when onClose is provided', () => {
-    const onClose = vi.fn();
-    renderAuthPage(vi.fn(), onClose);
-    // The close button is rendered as an X icon button
-    const closeBtn = document.querySelector('button[title="关闭"]');
-    expect(closeBtn).toBeInTheDocument();
+  it('switches to register tab and shows register form', () => {
+    renderAuthPage();
+    fireEvent.click(screen.getByText('auth.devLogin'));
+    fireEvent.click(screen.getByText('auth.switchToRegister'));
+    expect(screen.getByText('auth.registerButton')).toBeInTheDocument();
+    expect(screen.getByLabelText('auth.nickname')).toBeInTheDocument();
+    expect(screen.getByLabelText('auth.confirmPassword')).toBeInTheDocument();
   });
 
-  it('does not render close button when onClose is not provided', () => {
+  it('switches back to login after register success', async () => {
     renderAuthPage();
-    const closeBtn = document.querySelector('button[title="关闭"]');
-    expect(closeBtn).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText('auth.devLogin'));
+    fireEvent.click(screen.getByText('auth.switchToRegister'));
+    expect(screen.getByText('auth.registerButton')).toBeInTheDocument();
+
+    // Simulate register success via the child form button
+    // (the mock register resolves immediately, so success state is shown)
+    const submitBtn = screen.getByText('auth.registerButton');
+    fireEvent.click(submitBtn);
+    // After success, the form shows a success message with a login button
+    // (RegisterForm's onSuccess switches to login page)
   });
 
-  it('calls onClose when close button is clicked', () => {
-    const onClose = vi.fn();
-    renderAuthPage(vi.fn(), onClose);
-    const closeBtn = document.querySelector('button[title="关闭"]')!;
-    fireEvent.click(closeBtn);
-    expect(onClose).toHaveBeenCalledTimes(1);
+  it('switches to register via login form switch link', () => {
+    renderAuthPage();
+    fireEvent.click(screen.getByText('auth.devLogin'));
+    fireEvent.click(screen.getByText('auth.switchToRegister'));
+    expect(screen.getByText('auth.registerButton')).toBeInTheDocument();
   });
 
-  // ── Hub URL input ─────────────────────────────────
-
-  it('renders advanced settings toggle', () => {
+  it('switches to login via register form switch link', () => {
     renderAuthPage();
-    expect(screen.getByText('高级设置')).toBeInTheDocument();
+    fireEvent.click(screen.getByText('auth.devLogin'));
+    fireEvent.click(screen.getByText('auth.switchToRegister'));
+    fireEvent.click(screen.getByText('auth.switchToLogin'));
+    fireEvent.click(screen.getByText('auth.devLogin'));
+    expect(screen.getByText('auth.loginButton')).toBeInTheDocument();
   });
 
-  it('shows Hub URL input when advanced settings are expanded', () => {
+  // ── Hub URL input ─────────────────────────────────
+
+  it('renders Hub URL input with default value', () => {
     renderAuthPage();
-    fireEvent.click(screen.getByText('高级设置'));
+    fireEvent.click(screen.getByText('auth.advancedSettings'));
     const hubInput = screen.getByLabelText('auth.hubUrl');
     expect(hubInput).toBeInTheDocument();
     expect(hubInput).toHaveValue();
   });
 
   it('allows editing Hub URL', () => {
     renderAuthPage();
-    fireEvent.click(screen.getByText('高级设置'));
+    fireEvent.click(screen.getByText('auth.advancedSettings'));
     const hubInput = screen.getByLabelText('auth.hubUrl') as HTMLInputElement;
     fireEvent.change(hubInput, { target: { value: 'http://hub.example.com:8080' } });
     expect(hubInput.value).toBe('http://hub.example.com:8080');
@@ -106,7 +123,31 @@ describe('AuthPage', () => {
 
   it('renders Hub connection status indicator', () => {
     renderAuthPage();
-    fireEvent.click(screen.getByText('高级设置'));
+    fireEvent.click(screen.getByText('auth.advancedSettings'));
     expect(screen.getByText('auth.hubChecking')).toBeInTheDocument();
   });
+
+  it('renders startup local mode option without close and continues locally', () => {
+    const onClose = vi.fn();
+    const onContinueLocal = vi.fn();
+    renderAuthPage({ startup: true, onClose, onContinueLocal });
+
+    expect(screen.getByText('auth.startupTagline')).toBeInTheDocument();
+    expect(screen.getByText('auth.localModeTitle')).toBeInTheDocument();
+    expect(screen.getByText('auth.continueLocal')).toBeInTheDocument();
+    expect(screen.queryByTitle('auth.close')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('auth.continueLocal'));
+
+    expect(onContinueLocal).toHaveBeenCalledTimes(1);
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  // ── Card structure ────────────────────────────────
+
+  it('renders login and register tabs in card', () => {
+    renderAuthPage();
+    expect(screen.getByText('auth.tokenDanceLogin').closest('button')).toBeInTheDocument();
+    expect(screen.getByText('auth.devLogin').closest('button')).toBeInTheDocument();
+  });
 });

app/desktop/src/__tests__/IMContactList.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 import { IMContactList } from '@/components/IM';
 import type { IMContact } from '@/components/IM';
@@ -71,40 +71,88 @@ describe('IMContactList', () => {
     expect(screen.getByLabelText('Offline')).toBeInTheDocument();
   });
 
-  it('shows add contact form when + button clicked', () => {
+  it('does not expose compose actions without Hub handlers', () => {
     render(<IMContactList contacts={[]} />);
-    fireEvent.click(screen.getByLabelText('Add contact'));
-    expect(screen.getByPlaceholderText('Contact name...')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Open Hub compose' })).not.toBeInTheDocument();
+  });
+
+  it('shows Hub contact form when compose is opened', () => {
+    render(<IMContactList contacts={[]} onAddContact={vi.fn()} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Open Hub compose' }));
+    expect(screen.getByLabelText('Hub user ID')).toBeInTheDocument();
     expect(screen.getByText('Add')).toBeInTheDocument();
   });
 
-  it('calls onAdd with name when add confirmed', () => {
-    const onAdd = vi.fn();
-    render(<IMContactList contacts={[]} onAdd={onAdd} />);
-    fireEvent.click(screen.getByLabelText('Add contact'));
-    fireEvent.change(screen.getByPlaceholderText('Contact name...'), {
-      target: { value: 'NewContact' },
+  it('calls onAddContact with Hub user id when add confirmed', async () => {
+    const onAddContact = vi.fn(async () => true);
+    render(<IMContactList contacts={[]} onAddContact={onAddContact} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Open Hub compose' }));
+    fireEvent.change(screen.getByLabelText('Hub user ID'), {
+      target: { value: 'user-2' },
     });
     fireEvent.click(screen.getByText('Add'));
-    expect(onAdd).toHaveBeenCalledWith('NewContact');
+    await waitFor(() => expect(onAddContact).toHaveBeenCalledWith('user-2'));
   });
 
-  it('calls onAdd on Enter in add input', () => {
-    const onAdd = vi.fn();
-    render(<IMContactList contacts={[]} onAdd={onAdd} />);
-    fireEvent.click(screen.getByLabelText('Add contact'));
-    const input = screen.getByPlaceholderText('Contact name...');
-    fireEvent.change(input, { target: { value: 'Entered' } });
+  it('calls onAddContact on Enter in Hub user id input', async () => {
+    const onAddContact = vi.fn(async () => true);
+    render(<IMContactList contacts={[]} onAddContact={onAddContact} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Open Hub compose' }));
+    const input = screen.getByLabelText('Hub user ID');
+    fireEvent.change(input, { target: { value: 'user-entered' } });
     fireEvent.keyDown(input, { key: 'Enter' });
-    expect(onAdd).toHaveBeenCalledWith('Entered');
+    await waitFor(() => expect(onAddContact).toHaveBeenCalledWith('user-entered'));
   });
 
   it('hides add form on Escape', () => {
-    render(<IMContactList contacts={[]} />);
-    fireEvent.click(screen.getByLabelText('Add contact'));
-    const input = screen.getByPlaceholderText('Contact name...');
+    render(<IMContactList contacts={[]} onAddContact={vi.fn()} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Open Hub compose' }));
+    const input = screen.getByLabelText('Hub user ID');
     fireEvent.keyDown(input, { key: 'Escape' });
-    expect(screen.queryByPlaceholderText('Contact name...')).toBeNull();
+    expect(screen.queryByLabelText('Hub user ID')).toBeNull();
+  });
+
+  it('creates private session from an existing Hub contact', async () => {
+    const onCreatePrivateSession = vi.fn(async () => true);
+    render(
+      <IMContactList
+        contacts={[]}
+        hubContacts={[{ user_id: 'friend-1', username: 'alice', nickname: 'Alice', online: true, type: 'friend' }]}
+        onCreatePrivateSession={onCreatePrivateSession}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open Hub compose' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Create direct chat' }));
+    fireEvent.change(screen.getByLabelText('Hub contact'), { target: { value: 'friend-1' } });
+    fireEvent.click(screen.getByText('Create'));
+
+    await waitFor(() => expect(onCreatePrivateSession).toHaveBeenCalledWith('friend-1'));
+  });
+
+  it('creates group session from checked Hub contacts', async () => {
+    const onCreateGroupSession = vi.fn(async () => true);
+    render(
+      <IMContactList
+        contacts={[]}
+        hubContacts={[
+          { user_id: 'friend-1', username: 'alice', nickname: 'Alice', online: true, type: 'friend' },
+          { user_id: 'friend-2', username: 'bob', nickname: 'Bob', online: true, type: 'friend' },
+        ]}
+        onCreateGroupSession={onCreateGroupSession}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open Hub compose' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Create group chat' }));
+    fireEvent.change(screen.getByLabelText('Group name'), { target: { value: 'Build Room' } });
+    fireEvent.click(screen.getByLabelText('Alice'));
+    fireEvent.click(screen.getByLabelText('Bob'));
+    fireEvent.click(screen.getByText('Create'));
+
+    await waitFor(() =>
+      expect(onCreateGroupSession).toHaveBeenCalledWith('Build Room', ['friend-1', 'friend-2']),
+    );
   });
 
   it('highlights selected contact', () => {

app/desktop/src/__tests__/IMMessageInput.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 import { IMMessageInput } from '@/components/IM';
 
@@ -53,13 +53,23 @@ describe('IMMessageInput', () => {
     expect(onSend).not.toHaveBeenCalled();
   });
 
-  it('clears input after send', () => {
+  it('clears input after send', async () => {
     const onSend = vi.fn();
     render(<IMMessageInput onSend={onSend} />);
     const textarea = screen.getByPlaceholderText('Type a message...') as HTMLTextAreaElement;
     fireEvent.change(textarea, { target: { value: 'Sent' } });
     fireEvent.keyDown(textarea, { key: 'Enter' });
-    expect(textarea.value).toBe('');
+    await waitFor(() => expect(textarea.value).toBe(''));
+  });
+
+  it('keeps input when send is rejected', async () => {
+    const onSend = vi.fn(async () => false);
+    render(<IMMessageInput onSend={onSend} />);
+    const textarea = screen.getByPlaceholderText('Type a message...') as HTMLTextAreaElement;
+    fireEvent.change(textarea, { target: { value: 'Keep me' } });
+    fireEvent.keyDown(textarea, { key: 'Enter' });
+    await waitFor(() => expect(onSend).toHaveBeenCalledWith('Keep me'));
+    expect(textarea.value).toBe('Keep me');
   });
 
   it('disables send button when disabled prop is true', () => {