From b6f57384b0698f63b9b3082db93fb1c47a295cd9 Mon Sep 17 00:00:00 2001
From: Max Ronzhin <m.ronzhin@ssphera.ru>
Date: Mon, 27 Jul 2026 01:31:52 +0300
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=D0=BE=D0=B1=D1=89=D0=B8=D0=B9=20?=
 =?UTF-8?q?=D1=84=D1=83=D1=82=D0=B5=D1=80=20=D0=BD=D0=B0=20=D0=B2=D1=81?=
 =?UTF-8?q?=D0=B5=D1=85=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B0?=
 =?UTF-8?q?=D1=85,=20=D0=BA=D1=80=D0=BE=D0=BC=D0=B5=20=D0=BA=D0=BE=D0=BC?=
 =?UTF-8?q?=D0=BD=D0=B0=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`AppFooter` — версия инстанса из публичного `/api/health` (не требует
авторизации, поэтому работает и на экранах входа; поля `version` может не
быть — тогда версия не показывается) плюс копирайт с ТЕКУЩИМ годом и
ссылкой на профиль автора.

Подключён во все раскладки: `page-shell` (календарь, админка, профиль, мои
конференции), `AuthLayout` (вход, регистрация, подтверждение email),
`join-shell` и `lobby-shell`. В комнате конференции футера нет — там
полноэкранное видео.

Прежний футер админки (`.admin-footer`) удалён вместе со стилем — дубля не
осталось. В брендовой панели экранов auth строка «© 2026 VidConf ·
self-hosted» ужата до «self-hosted»: год там был захардкожен, а два
копирайта на одном экране — дубль.
---
 frontend/src/components/auth/AuthLayout.tsx  | 12 +++++--
 frontend/src/components/layout/AppFooter.tsx | 34 ++++++++++++++++++
 frontend/src/pages/AdminPage.tsx             | 12 ++-----
 frontend/src/pages/CalendarPage.tsx          |  2 ++
 frontend/src/pages/JoinPage.tsx              |  2 ++
 frontend/src/pages/LobbyPage.tsx             |  2 ++
 frontend/src/pages/MyConferencesPage.tsx     |  2 ++
 frontend/src/pages/ProfilePage.tsx           |  2 ++
 frontend/src/styles/admin.css                |  6 ++--
 frontend/src/styles/footer.css               | 38 ++++++++++++++++++++
 10 files changed, 96 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/layout/AppFooter.tsx
 create mode 100644 frontend/src/styles/footer.css

diff --git a/frontend/src/components/auth/AuthLayout.tsx b/frontend/src/components/auth/AuthLayout.tsx
index d734d0d..a6ab7fd 100644
--- a/frontend/src/components/auth/AuthLayout.tsx
+++ b/frontend/src/components/auth/AuthLayout.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { AppFooter } from '@/components/layout/AppFooter'
 import { LogoMark } from '@/components/ui/LogoMark'
 import { ThemeToggle } from '@/components/ui/ThemeToggle'
 import '@/styles/auth.css'
@@ -41,11 +42,18 @@ export function AuthLayout({ children }: { children: ReactNode }) {
           </div>
         </div>
         <p className="hint-msg" style={{ position: 'relative', zIndex: 1 }}>
-          © 2026 VidConf · self-hosted
+          self-hosted
         </p>
       </aside>
 
-      <main className="form-panel">{children}</main>
+      {/* Копирайт с годом и версией инстанса — общий `AppFooter` (он же на всех
+          остальных страницах). Из брендовой панели строку «© 2026 VidConf ·
+          self-hosted» при этом ужали до «self-hosted»: год там был
+          захардкожен, а два копирайта на одном экране — дубль. */}
+      <main className="form-panel">
+        {children}
+        <AppFooter />
+      </main>
     </div>
   )
 }
diff --git a/frontend/src/components/layout/AppFooter.tsx b/frontend/src/components/layout/AppFooter.tsx
new file mode 100644
index 0000000..ce1a124
--- /dev/null
+++ b/frontend/src/components/layout/AppFooter.tsx
@@ -0,0 +1,34 @@
+import { useQuery } from '@tanstack/react-query'
+import { getHealth } from '@/api/health'
+import '@/styles/footer.css'
+
+/**
+ * Общий футер приложения: версия инстанса и копирайт со ссылкой на автора.
+ *
+ * Ставится на всех страницах, КРОМЕ комнаты конференции (`RoomPage`) — там
+ * полноэкранное видео и тулбар, футеру места нет. Раскладок в приложении
+ * несколько (`page-shell`, `AuthLayout`, `join-shell`, `lobby-shell`), поэтому
+ * компонент рендерит только собственный `<footer>`, а привязку к конкретной
+ * раскладке делает CSS (см. `styles/footer.css`).
+ *
+ * Версия — из публичного `GET /api/health` (авторизации не требует, годится и
+ * для экранов входа). Поле `version` опционально: если backend его не отдал,
+ * версию просто не показываем (см. `HealthOut.version`). Ключ запроса тот же
+ * `['health']`, что и у админки, — react-query отдаст общий закэшированный
+ * результат, лишнего запроса не будет.
+ *
+ * Год — текущий, из `Date` (не захардкожен): страница живёт в браузере
+ * пользователя и не должна устаревать 1 января.
+ */
+export function AppFooter() {
+  const { data: health } = useQuery({ queryKey: ['health'], queryFn: getHealth, retry: false })
+
+  return (
+    <footer className="app-footer">
+      VidConf{health?.version ? ` · v${health.version}` : ''} · © {new Date().getFullYear()} · by{' '}
+      <a href="https://github.com/MaxRonzhin" target="_blank" rel="noopener">
+        MaxRonzhin
+      </a>
+    </footer>
+  )
+}
diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
index a8c6b90..f83fbe6 100644
--- a/frontend/src/pages/AdminPage.tsx
+++ b/frontend/src/pages/AdminPage.tsx
@@ -1,11 +1,10 @@
 import { useState } from 'react'
-import { useQuery } from '@tanstack/react-query'
 import { ShellTopbar } from '@/components/layout/ShellTopbar'
+import { AppFooter } from '@/components/layout/AppFooter'
 import { AdminConferencesTab } from '@/components/admin/AdminConferencesTab'
 import { AdminUsersTab } from '@/components/admin/AdminUsersTab'
 import { AdminTeamsTab } from '@/components/admin/AdminTeamsTab'
 import { AdminSettingsTab } from '@/components/admin/AdminSettingsTab'
-import { getHealth } from '@/api/health'
 import '@/styles/lobby.css'
 import '@/styles/calendar.css'
 import '@/styles/admin.css'
@@ -30,10 +29,6 @@ const TABS: { value: AdminTab; label: string }[] = [
  */
 export function AdminPage() {
   const [tab, setTab] = useState<AdminTab>('conferences')
-  // Версия инстанса для футера — поле `version` в `/api/health`;
-  // если его нет в ответе, футер версию просто не показывает
-  // (см. `HealthOut.version`).
-  const { data: health } = useQuery({ queryKey: ['health'], queryFn: getHealth, retry: false })
 
   return (
     <div className="admin-page page-shell">
@@ -63,11 +58,8 @@ export function AdminPage() {
         {tab === 'users' && <AdminUsersTab />}
         {tab === 'teams' && <AdminTeamsTab />}
         {tab === 'settings' && <AdminSettingsTab />}
-
-        <footer className="admin-footer">
-          VidConf{health?.version ? ` · v${health.version}` : ''}
-        </footer>
       </main>
+      <AppFooter />
     </div>
   )
 }
diff --git a/frontend/src/pages/CalendarPage.tsx b/frontend/src/pages/CalendarPage.tsx
index d298b9b..9bffd9a 100644
--- a/frontend/src/pages/CalendarPage.tsx
+++ b/frontend/src/pages/CalendarPage.tsx
@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Plus } from 'lucide-react'
 import { ShellTopbar } from '@/components/layout/ShellTopbar'
+import { AppFooter } from '@/components/layout/AppFooter'
 import { ConferenceCalendar, type CalendarViewMode } from '@/components/calendar/ConferenceCalendar'
 import { ConferenceFormCard } from '@/components/calendar/ConferenceFormCard'
 import { ConferenceOccurrenceDialog } from '@/components/calendar/ConferenceOccurrenceDialog'
@@ -102,6 +103,7 @@ export function CalendarPage() {
           />
         </div>
       </main>
+      <AppFooter />
 
       {isFormOpen && (
         <ConferenceFormModal
diff --git a/frontend/src/pages/JoinPage.tsx b/frontend/src/pages/JoinPage.tsx
index 46e51e9..ae2126c 100644
--- a/frontend/src/pages/JoinPage.tsx
+++ b/frontend/src/pages/JoinPage.tsx
@@ -9,6 +9,7 @@ import {
 } from '@/api/conferences'
 import { ApiError, errorDetail } from '@/api/client'
 import { useAuth } from '@/auth/useAuth'
+import { AppFooter } from '@/components/layout/AppFooter'
 import { LogoMark } from '@/components/ui/LogoMark'
 import { ThemeToggle } from '@/components/ui/ThemeToggle'
 import { parseJoinQuery } from '@/lib/parseJoinQuery'
@@ -409,6 +410,7 @@ export function JoinPage() {
           </section>
         )}
       </main>
+      <AppFooter />
     </div>
   )
 }
diff --git a/frontend/src/pages/LobbyPage.tsx b/frontend/src/pages/LobbyPage.tsx
index 11d248e..f4aacc4 100644
--- a/frontend/src/pages/LobbyPage.tsx
+++ b/frontend/src/pages/LobbyPage.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Calendar, Link2, User, Video } from 'lucide-react'
 import { ShellTopbar } from '@/components/layout/ShellTopbar'
+import { AppFooter } from '@/components/layout/AppFooter'
 import { LogoMedallion } from '@/components/ui/LogoMark'
 import { createConference } from '@/api/conferences'
 import { useToast } from '@/components/ui/ToastProvider'
@@ -113,6 +114,7 @@ export function LobbyPage() {
           </div>
         </div>
       </main>
+      <AppFooter />
     </div>
   )
 }
diff --git a/frontend/src/pages/MyConferencesPage.tsx b/frontend/src/pages/MyConferencesPage.tsx
index 62e5aa0..6e81110 100644
--- a/frontend/src/pages/MyConferencesPage.tsx
+++ b/frontend/src/pages/MyConferencesPage.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { AlertTriangle, CheckCircle2, Clock, Lock, Pencil, Play, Repeat } from 'lucide-react'
 import { ShellTopbar } from '@/components/layout/ShellTopbar'
+import { AppFooter } from '@/components/layout/AppFooter'
 import { ConferenceFormCard } from '@/components/calendar/ConferenceFormCard'
 import { ConferenceHoverCard } from '@/components/ui/ConferenceHoverCard'
 import { CopyPill } from '@/components/ui/CopyPill'
@@ -212,6 +213,7 @@ export function MyConferencesPage() {
           </section>
         )}
       </main>
+      <AppFooter />
 
       {editingConference && (
         <div className="modal-overlay" role="dialog" aria-modal="true" onClick={() => setEditingConference(null)}>
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index b3320ef..ecf102f 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -2,6 +2,7 @@ import { useRef, useState, type FormEvent } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { Trash2, Upload } from 'lucide-react'
 import { ShellTopbar } from '@/components/layout/ShellTopbar'
+import { AppFooter } from '@/components/layout/AppFooter'
 import { Avatar } from '@/components/ui/Avatar'
 import { Select } from '@/components/ui/Select'
 import { useToast } from '@/components/ui/ToastProvider'
@@ -271,6 +272,7 @@ export function ProfilePage() {
           </form>
         </section>
       </main>
+      <AppFooter />
     </div>
   )
 }
diff --git a/frontend/src/styles/admin.css b/frontend/src/styles/admin.css
index 14dcc04..171b7b3 100644
--- a/frontend/src/styles/admin.css
+++ b/frontend/src/styles/admin.css
@@ -168,10 +168,8 @@
   .admin-page .settings-grid { grid-template-columns: 1fr; }
 }
 
-/* ---------- Футер админки ----------
-   Версия инстанса из `/api/health` (см. AdminPage.tsx) — до появления поля
-   на backend строка сокращается до одного «VidConf» без версии. */
-.admin-page .admin-footer { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font: var(--text-caption); color: var(--color-ink-400); text-align: center; }
+/* Футер админки (`.admin-footer`) убран в 0.0.6: вместо него общий для всех
+   страниц компонент `AppFooter` (см. `styles/footer.css`). */
 
 /* =====================================================================
  * Тёмная тема: заливка var(--color-ink-700) (индиго) сочеталась с жёстким
diff --git a/frontend/src/styles/footer.css b/frontend/src/styles/footer.css
new file mode 100644
index 0000000..7d3d8ab
--- /dev/null
+++ b/frontend/src/styles/footer.css
@@ -0,0 +1,38 @@
+/*
+ * VidConf — общий футер приложения (см. `components/layout/AppFooter.tsx`).
+ *
+ * Файл импортируется самим компонентом, а не страницами: футер стоит в четырёх
+ * разных раскладках (`page-shell`, `AuthLayout`, `join-shell`, `lobby-shell`),
+ * и таскать импорт по всем страницам смысла нет.
+ *
+ * Футер — обычный блок в потоке (не `position: fixed`), поэтому контент он
+ * не перекрывает ни на какой высоте экрана.
+ */
+
+.app-footer {
+  padding: var(--space-5) var(--space-4);
+  font: var(--text-caption);
+  color: var(--color-ink-400);
+  text-align: center;
+}
+.app-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
+.app-footer a:hover { color: var(--color-ink-700); }
+
+/* Оболочка страниц (`page-shell`): выравниваем футер по ширине контента
+   (`main.page-main` — max-width 1440 + боковые отступы) и отделяем линией,
+   как это делал прежний футер админки. */
+.page-shell .app-footer {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: var(--space-4) var(--space-8) var(--space-6);
+  border-top: 1px solid var(--color-border);
+}
+
+/* Экраны auth: футер — последний элемент правой колонки с формой, поэтому
+   ограничиваем его шириной самой формы (`.screen-block`, 440px), иначе
+   центрированная строка «уезжала» бы вправо от неё. */
+.form-panel .app-footer { max-width: 440px; width: 100%; padding-inline: 0; margin-top: var(--space-8); }
+
+@media (max-width: 640px) {
+  .page-shell .app-footer { padding: var(--space-4) var(--space-4) var(--space-5); }
+}