Initial commit: TopSysOps site + admin panel

Multi-page public site (Next.js), Node/Express backend with Postgres,
and Vite admin/account app, restructured from a single-page layout
into dedicated service, promotions, cases, about, FAQ, and blog pages
for SEO.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013otXCiTZsxdZ4SJKZ9wUky

admin-app/src/account/Messages.jsx

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from 'react';
+import { Send } from 'lucide-react';
+import { api } from '../lib/api.js';
+
+function cx(...args) {
+  return args.filter(Boolean).join(' ');
+}
+
+export default function Messages() {
+  const [messages, setMessages] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [input, setInput] = useState('');
+  const [sending, setSending] = useState(false);
+  const bottomRef = useRef(null);
+
+  async function load() {
+    setLoading(true);
+    setMessages(await api.accountGetMessages());
+    setLoading(false);
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  async function handleSend(e) {
+    e.preventDefault();
+    const text = input.trim();
+    if (!text || sending) return;
+    setSending(true);
+    try {
+      const msg = await api.accountSendMessage(text);
+      setMessages((m) => [...m, msg]);
+      setInput('');
+    } catch (err) {
+      // the user can just retry
+    } finally {
+      setSending(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-4rem)] md:h-[calc(100vh-2rem)] max-w-2xl">
+      <h1 className="font-bold mb-1 font-display text-lg">Написать нам</h1>
+      <p className="text-xs text-slate-400 dark:text-slate-500 mb-4">Сообщения видит команда TopSysOps и ответит вам здесь же.</p>
+
+      <div className="flex-1 overflow-y-auto rounded-lg border p-4 space-y-3 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800 mb-3">
+        {loading && <p className="text-sm text-slate-400">Загружаем переписку...</p>}
+        {!loading && messages.length === 0 && (
+          <p className="text-sm text-slate-400">Пока нет сообщений - напишите нам, если возникли вопросы.</p>
+        )}
+        {messages.map((m) => (
+          <div
+            key={m.id}
+            className={cx(
+              'max-w-[85%] rounded-lg px-3 py-2 text-sm whitespace-pre-wrap',
+              m.sender === 'customer' ? 'ml-auto bg-emerald-500 text-white' : 'bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-100'
+            )}
+          >
+            {m.body}
+          </div>
+        ))}
+        <div ref={bottomRef} />
+      </div>
+
+      <form onSubmit={handleSend} className="flex gap-2">
+        <input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Напишите сообщение..."
+          className="flex-1 rounded-md border px-3 py-2 text-sm bg-transparent border-slate-300 dark:border-slate-700"
+        />
+        <button
+          type="submit"
+          disabled={sending}
+          className="px-4 py-2 rounded-md bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 disabled:opacity-50 inline-flex items-center gap-1"
+        >
+          <Send className="h-4 w-4" />
+        </button>
+      </form>
+    </div>
+  );
+}