frontend: now working fully, fuctionality tested

web/src/components/Sidebar.tsx

@@ -0,0 +1,222 @@
+import { useMemo, useState } from 'react'
+import Avatar from './Avatar'
+import { IconLogout, IconPlus, IconSearch } from './icons'
+import { formatListTime, peerForConversation, userTitle } from '../lib/format'
+import type { Conversation, User } from '../lib/types'
+
+interface SidebarProps {
+  className?: string
+  conversations: Conversation[]
+  loading: boolean
+  error: string | null
+  selectedId: number | null
+  currentUser: User
+  directory: Map<number, User>
+  peers: Record<number, number>
+  presence: Record<number, boolean>
+  typing: Record<number, boolean>
+  onSelect: (id: number) => void
+  onNewChat: () => void
+  onRetry: () => void
+  onLogout: () => void
+}
+
+function previewOf(conversation: Conversation, currentUserId: number): string {
+  const last = conversation.last_message
+  if (!last) return 'Нет сообщений'
+  const prefix = last.sender_id === currentUserId ? 'Вы: ' : ''
+  return `${prefix}${last.body}`
+}
+
+export default function Sidebar({
+  className = '',
+  conversations,
+  loading,
+  error,
+  selectedId,
+  currentUser,
+  directory,
+  peers,
+  presence,
+  typing,
+  onSelect,
+  onNewChat,
+  onRetry,
+  onLogout,
+}: SidebarProps) {
+  const [query, setQuery] = useState('')
+
+  const items = useMemo(() => {
+    const term = query.trim().toLowerCase()
+    return conversations
+      .map((conversation) => {
+        const peer = peerForConversation(conversation, peers, directory, currentUser.id)
+        const title = peer ? userTitle(peer) : `Чат #${conversation.id}`
+        return { conversation, peer, title, preview: previewOf(conversation, currentUser.id) }
+      })
+      .filter((item) => !term || item.title.toLowerCase().includes(term) || item.preview.toLowerCase().includes(term))
+  }, [conversations, query, peers, directory, currentUser.id])
+
+  return (
+    <aside className={`${className} w-full flex-col border-line/80 bg-panel/60 md:w-[340px] md:border-r`}>
+      <div className="flex items-center justify-between gap-3 px-4 pt-4 pb-3">
+        <div className="flex items-center gap-2.5">
+          <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-accent to-accent-strong text-white shadow-lg shadow-accent/20">
+            <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" aria-hidden="true">
+              <path
+                d="M4 12.5h3l2-5 3.2 9 2.3-6 1.5 2H20"
+                stroke="currentColor"
+                strokeWidth="1.9"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </span>
+          <span className="font-display text-lg font-bold tracking-tight text-fg">Пульс</span>
+        </div>
+        <button
+          type="button"
+          onClick={onNewChat}
+          aria-label="Новый чат"
+          className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-line bg-surface text-muted transition hover:border-accent/50 hover:text-accent"
+        >
+          <IconPlus className="h-5 w-5" />
+        </button>
+      </div>
+
+      <div className="px-4 pb-2">
+        <div className="relative">
+          <IconSearch className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-faint" />
+          <label htmlFor="chat-search" className="sr-only">
+            Поиск по чатам
+          </label>
+          <input
+            id="chat-search"
+            type="search"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder="Поиск"
+            className="w-full rounded-xl border border-line bg-surface/70 py-2 pr-3 pl-9 text-sm text-fg placeholder:text-faint focus:border-accent/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/20"
+          />
+        </div>
+      </div>
+
+      <div className="scrollbar-slim flex-1 overflow-y-auto px-2 py-1">
+        {loading && (
+          <div className="space-y-1.5 p-1">
+            {[0, 1, 2, 3, 4].map((row) => (
+              <div key={row} className="flex animate-pulse-soft items-center gap-3 rounded-xl p-2.5" style={{ animationDelay: `${row * 70}ms` }}>
+                <span className="h-11 w-11 rounded-full bg-surface-2" />
+                <span className="flex-1 space-y-2">
+                  <span className="block h-3 w-1/2 rounded-full bg-surface-2" />
+                  <span className="block h-3 w-3/4 rounded-full bg-surface-2/70" />
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {!loading && error && (
+          <div className="m-2 rounded-2xl border border-line bg-surface/60 p-4 text-center">
+            <p className="text-sm text-danger">{error}</p>
+            <button
+              type="button"
+              onClick={onRetry}
+              className="mt-3 rounded-lg border border-line px-3 py-1.5 text-xs font-medium text-fg transition hover:border-accent/50 hover:text-accent"
+            >
+              Повторить
+            </button>
+          </div>
+        )}
+
+        {!loading && !error && items.length === 0 && (
+          <div className="flex flex-col items-center gap-3 px-6 py-12 text-center">
+            <div className="flex h-14 w-14 items-center justify-center rounded-2xl border border-line bg-surface-2 text-accent">
+              <IconPlus className="h-6 w-6" />
+            </div>
+            <p className="text-sm text-muted">
+              {query ? 'Ничего не найдено' : 'Пока нет чатов. Начните первый разговор.'}
+            </p>
+            {!query && (
+              <button
+                type="button"
+                onClick={onNewChat}
+                className="rounded-xl bg-gradient-to-br from-accent to-accent-strong px-4 py-2 text-sm font-semibold text-white transition hover:brightness-110"
+              >
+                Новый чат
+              </button>
+            )}
+          </div>
+        )}
+
+        <ul className="space-y-0.5">
+          {!loading &&
+            !error &&
+            items.map(({ conversation, peer, title, preview }) => {
+              const selected = conversation.id === selectedId
+              const isTyping = typing[conversation.id] === true
+              const unread = conversation.unread_count ?? 0
+              const lastAt = conversation.last_message?.created_at ?? conversation.created_at
+
+              return (
+                <li key={conversation.id}>
+                  <button
+                    type="button"
+                    onClick={() => onSelect(conversation.id)}
+                    aria-current={selected ? 'true' : undefined}
+                    className={`flex w-full items-center gap-3 rounded-xl px-2.5 py-2.5 text-left transition ${
+                      selected ? 'bg-accent-ghost ring-1 ring-accent/30' : 'hover:bg-surface-2/70'
+                    }`}
+                  >
+                    <Avatar
+                      name={title}
+                      seed={peer?.id ?? conversation.id}
+                      size="lg"
+                      online={peer ? presence[peer.id] === true : false}
+                    />
+                    <span className="min-w-0 flex-1">
+                      <span className="flex items-baseline justify-between gap-2">
+                        <span className={`truncate text-sm font-semibold ${selected ? 'text-fg' : 'text-fg/90'}`}>
+                          {title}
+                        </span>
+                        <span className="shrink-0 text-[11px] text-faint">{formatListTime(lastAt)}</span>
+                      </span>
+                      <span className="mt-0.5 flex items-center justify-between gap-2">
+                        <span className={`truncate text-xs ${isTyping ? 'text-accent' : 'text-muted'}`}>
+                          {isTyping ? 'печатает…' : preview}
+                        </span>
+                        {unread > 0 && (
+                          <span className="inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-bold text-white">
+                            {unread > 99 ? '99+' : unread}
+                          </span>
+                        )}
+                      </span>
+                    </span>
+                  </button>
+                </li>
+              )
+            })}
+        </ul>
+      </div>
+
+      <div className="flex items-center gap-3 border-t border-line/80 px-4 py-3">
+        <Avatar name={currentUser.display_name || currentUser.username} seed={currentUser.id} size="md" online />
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-semibold text-fg">
+            {currentUser.display_name || currentUser.username}
+          </p>
+          <p className="truncate text-xs text-muted">@{currentUser.username}</p>
+        </div>
+        <button
+          type="button"
+          onClick={onLogout}
+          aria-label="Выйти"
+          title="Выйти"
+          className="inline-flex h-9 w-9 items-center justify-center rounded-xl text-muted transition hover:bg-surface-2 hover:text-danger"
+        >
+          <IconLogout className="h-5 w-5" />
+        </button>
+      </div>
+    </aside>
+  )
+}