release: версия 0.0.6

В 0.0.4 «г.» убрали из подписи периода, но дату дня FullCalendar
подставляет ещё и в служебную подпись ячейки (`aria-label`, у navLinks —
`title`): видна как всплывающая подсказка и в accessibility-дереве.
Формат этой подписи библиотека наружу не отдаёт — `buildNavLinkAttrs`
форматирует дату жёстко зашитым `{year,month:'long',day:'numeric'}`, а
локаль `ru` всегда даёт «20 июля 2026 г.», — поэтому чистим уже
отрендеренный атрибут.

Чистка идёт через MutationObserver, а не через `dayCellDidMount`/
`dayHeaderDidMount`: при переключении недельного вида на месячный
FullCalendar переиспользует смонтированные ячейки, `didMount` для них
повторно не зовётся, и «г.» возвращалась в строке переиспользованных ячеек
(поймано на живой проверке).

Проверено в обоих видах и при навигации вперёд/назад/«Сегодня»: подписей с
«г.» в документе не остаётся.

.env.example

@@ -98,7 +98,7 @@ SMTP_TIMEOUT_S=30
 # --- Версия инстанса (релиз v0.0.1) ---
 # install.sh копирует значение из корневого файла VERSION при каждой
 # установке/обновлении — руками менять не нужно.
-VIDCONF_VERSION=0.0.5
+VIDCONF_VERSION=0.0.6
 
 # --- Профили compose. Дефолт ниже (`media,monitoring`) — только для ручного
 # `docker compose up` БЕЗ install.sh: медиа (LiveKit+coturn) + мониторинг,

CHANGELOG.md

@@ -3,6 +3,39 @@
 Формат основан на [Keep a Changelog](https://keepachangelog.com/ru/1.1.0/),
 проект придерживается [семантического версионирования](https://semver.org/lang/ru/).
 
+## [0.0.6] — 2026-07-27
+
+Управление фокусом основного окна конференции: участника можно закрепить, а
+без закрепления окно само следует за говорящим. Плюс общий футер на всех
+страницах сервиса.
+
+### Добавлено
+- Закрепление участника в основном окне — кнопка-булавка на плитке.
+  Закреплённый участник держит фокус, даже когда говорят другие; повторное
+  нажатие снимает закрепление, как и выход закреплённого из комнаты.
+  Закреплённая плитка помечена рамкой и подсвеченной булавкой; на
+  тач-устройствах булавка видна без наведения.
+- Общий футер на всех страницах, кроме комнаты конференции: версия инстанса
+  и копирайт со ссылкой на автора.
+
+### Изменения
+- Основное окно конференции следует за активным говорящим, а не удерживает
+  выбранного один раз участника. Фокус не переключается на короткие реплики
+  (удержание 1.2 с) и не уводится с идущей демонстрации экрана. Среди
+  нескольких одновременно говорящих крупно показывается тот, у кого включена
+  камера. Мини-плеер (Document PiP) работает как раньше.
+- Демонстрация экрана по-прежнему главнее всего: она перебивает и
+  закрепление, а после её завершения фокус возвращается на закреплённого
+  участника.
+- Футер админки заменён общим компонентом; в брендовой панели экранов входа
+  строка копирайта с захардкоженным годом убрана — год теперь берётся
+  текущий.
+
+### Исправлено
+- Календарь: «г.» после года убрана и из подписей дней в самой сетке (видны
+  как всплывающая подсказка и в accessibility-дереве) — в недельном и
+  месячном виде. В 0.0.4 это было исправлено только для подписи периода.
+
 ## [0.0.5] — 2026-07-27
 
 Контактный адрес инстанса: настраиваемый адрес для ответов на письма
@@ -129,6 +162,7 @@
 
 Первоначальная версия VidConf.
 
+[0.0.6]: https://github.com/MaxRonzhin/vidconf_rel/releases/tag/v0.0.6
 [0.0.5]: https://github.com/MaxRonzhin/vidconf_rel/releases/tag/v0.0.5
 [0.0.4]: https://github.com/MaxRonzhin/vidconf_rel/releases/tag/v0.0.4
 [0.0.3]: https://github.com/MaxRonzhin/vidconf_rel/releases/tag/v0.0.3

VERSION

@@ -1 +1 @@
-0.0.5
+0.0.6

deploy/docker-compose.yml

@@ -82,7 +82,7 @@ services:
       MEDIA_ROOT: ${MEDIA_ROOT:-/app/media}
       # Версия инстанса (релиз v0.0.1) — install.sh копирует значение
       # из файла VERSION (корень репозитория) в .env; отдаётся в GET /api/health.
-      VIDCONF_VERSION: ${VIDCONF_VERSION:-0.0.5}
+      VIDCONF_VERSION: ${VIDCONF_VERSION:-0.0.6}
     # config/ лежит в корне репозитория и не попадает в образ (контекст сборки —
     # только backend/), поэтому plugins.yaml монтируется отдельно.
     volumes:

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>
   )
 }

frontend/src/components/calendar/ConferenceCalendar.tsx

@@ -98,6 +98,57 @@ function renderEventContent(arg: EventContentArg) {
 /** «г.» — сноска Intl.DateTimeFormat('ru-RU', ...) после года при формате year+month(+day); в подписи периода не нужна. */
 const YEAR_SUFFIX_RE = /\s*г\.(?=\s|$)/g
 
+/**
+ * Подписи дней в самой сетке, из которых надо убрать «г.» (см.
+ * `useStripYearSuffix`): месячный вид — номер дня в ячейке, недельный —
+ * подпись колонки дня.
+ */
+const DAY_LABEL_SELECTOR = '.fc-daygrid-day-number, .fc-col-header-cell-cushion'
+
+/** Убирает «г.» из `aria-label`/`title` элемента; ничего не пишет, если менять нечего. */
+function stripYearSuffixAttrs(el: Element) {
+  for (const attr of ['aria-label', 'title']) {
+    const value = el.getAttribute(attr)
+    if (!value) continue
+    const cleaned = value.replace(YEAR_SUFFIX_RE, '')
+    if (cleaned !== value) el.setAttribute(attr, cleaned)
+  }
+}
+
+/**
+ * Убирает «г.» из служебных подписей дней внутри сетки FullCalendar.
+ *
+ * Кроме подписи периода (её формат мы задаём сами, см. `buildTitleFormatter`),
+ * дату дня FullCalendar подставляет ещё и в подпись ячейки — она видна в
+ * accessibility-дереве и как всплывающая подсказка. Формат этой подписи
+ * библиотека наружу НЕ отдаёт: `buildNavLinkAttrs` (@fullcalendar/core)
+ * форматирует дату жёстко зашитым `{year,month:'long',day:'numeric'}` и кладёт
+ * результат в `aria-label` (в `title` — когда включены navLinks), а с локалью
+ * `ru` Intl всегда даёт «20 июля 2026 г.». Настройкой это не убирается,
+ * поэтому правим уже отрендеренный атрибут.
+ *
+ * Почему MutationObserver, а не хуки `dayCellDidMount`/`dayHeaderDidMount`:
+ * при переключении недельного вида на месячный FullCalendar ПЕРЕИСПОЛЬЗУЕТ
+ * уже смонтированные ячейки — `didMount` для них повторно не зовётся, а
+ * подпись внутри перерисовывается заново, и «г.» возвращается (поймали на
+ * живой проверке: после переключения вида ровно строка переиспользованных
+ * ячеек оставалась с «г.»). Наблюдатель же ловит любую перерисовку.
+ * Зацикливания нет: `stripYearSuffixAttrs` пишет атрибут, только если он
+ * реально меняется, поэтому вызванная нашей же правкой итерация ничего не
+ * пишет и цепочка обрывается.
+ */
+function useStripYearSuffix(rootRef: React.RefObject<HTMLElement | null>) {
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root) return
+    const clean = () => root.querySelectorAll(DAY_LABEL_SELECTOR).forEach(stripYearSuffixAttrs)
+    clean()
+    const observer = new MutationObserver(clean)
+    observer.observe(root, { subtree: true, childList: true, attributeFilter: ['aria-label', 'title'] })
+    return () => observer.disconnect()
+  }, [rootRef])
+}
+
 /**
  * Форма аргумента, который FullCalendar передаёт функции-`titleFormat`
  * (`VerboseFormattingArg` из @fullcalendar/core/internal-common — не
@@ -152,6 +203,9 @@ export function ConferenceCalendar({
 }: ConferenceCalendarProps) {
   const calendarRef = useRef<FullCalendar | null>(null)
   const titleRef = useRef<HTMLSpanElement | null>(null)
+  const gridRef = useRef<HTMLDivElement | null>(null)
+
+  useStripYearSuffix(gridRef)
 
   // См. комментарий у `latestOnEditClick` в начале файла — синхронизируем
   // переменную вместо того, чтобы замыкать пропс напрямую в renderEventContent.
@@ -269,7 +323,7 @@ export function ConferenceCalendar({
         </div>
       </div>
 
-      <div className="vc-calendar" aria-busy={isLoading}>
+      <div className="vc-calendar" aria-busy={isLoading} ref={gridRef}>
         <FullCalendar
           ref={calendarRef}
           plugins={CALENDAR_PLUGINS}

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>
+  )
+}

frontend/src/components/room/RoomParticipantTile.tsx

@@ -1,4 +1,4 @@
-import { ScreenShare } from 'lucide-react'
+import { Pin, PinOff, ScreenShare } from 'lucide-react'
 import { Track } from 'livekit-client'
 import {
   AudioTrack,
@@ -19,6 +19,7 @@ import {
   type TrackReferenceOrPlaceholder,
 } from '@livekit/components-react'
 import { Avatar } from '@/components/ui/Avatar'
+import { stageTrackKey } from '@/components/room/stageFocus'
 
 /** Метаданные участника из LiveKit access-токена (см. `AccessToken.with_metadata` на backend) — JSON `{"avatar_url": "..."}`; у гостей отсутствуют. */
 interface ParticipantMetadata {
@@ -43,7 +44,7 @@ function parseAvatarUrl(metadata: string | undefined): string | null {
  * разметке (см. `node_modules/@livekit/components-react/src/components/participant/ParticipantTile.tsx`,
  * версия 2.9.23 — источник этой копии).
  */
-function TileBody({ onStopSharing }: { onStopSharing?: () => void }) {
+function TileBody({ onStopSharing, pinnedKey, onTogglePin }: TileControlsProps) {
   const trackReference = useEnsureTrackRef()
   const isEncrypted = useIsEncrypted(trackReference.participant)
   const autoManageSubscription = useFeatureContext()?.autoSubscription
@@ -60,6 +61,12 @@ function TileBody({ onStopSharing }: { onStopSharing?: () => void }) {
   const showSharingChip = Boolean(
     onStopSharing && trackReference.source === Track.Source.ScreenShare && trackReference.participant.isLocal,
   )
+  // Кнопка закрепления — только там, где сцена умеет закрепление (основное
+  // окно передаёт `onTogglePin`; в мини-плеере плитка одна, закреплять нечего).
+  // Ключ плитки берём из её собственного трека: в карусели/гриде плитки
+  // рендерятся шаблоном без пропсов, снаружи «какая это плитка» не передать.
+  const tileKey = stageTrackKey(trackReference)
+  const isPinned = pinnedKey === tileKey
 
   return (
     <>
@@ -106,6 +113,25 @@ function TileBody({ onStopSharing }: { onStopSharing?: () => void }) {
         <ConnectionQualityIndicator className="lk-participant-metadata-item" />
       </div>
       <FocusToggle trackRef={trackReference} />
+      {onTogglePin && (
+        <button
+          type="button"
+          className={`room-pin-toggle${isPinned ? ' is-pinned' : ''}`}
+          aria-pressed={isPinned}
+          title={isPinned ? 'Открепить' : 'Закрепить в основном окне'}
+          aria-label={
+            isPinned ? `Открепить: ${displayName}` : `Закрепить в основном окне: ${displayName}`
+          }
+          onClick={(e) => {
+            // Иначе клик долетит до самой плитки (`onParticipantClick`
+            // у `ParticipantTile`) — булавка не должна означать «клик по плитке».
+            e.stopPropagation()
+            onTogglePin(tileKey)
+          }}
+        >
+          {isPinned ? <PinOff aria-hidden="true" /> : <Pin aria-hidden="true" />}
+        </button>
+      )}
       {showSharingChip && (
         <div className="stage-sharing-chip">
           <ScreenShare className="lucide" aria-hidden="true" />
@@ -119,10 +145,8 @@ function TileBody({ onStopSharing }: { onStopSharing?: () => void }) {
   )
 }
 
-interface RoomParticipantTileProps {
-  trackRef?: TrackReferenceOrPlaceholder
-  disableSpeakingIndicator?: boolean
-  onParticipantClick?: (event: ParticipantClickEvent) => void
+/** Управляющие элементы поверх плитки — общие для обёртки и её `TileBody`. */
+interface TileControlsProps {
   /**
    * Остановить демонстрацию экрана — если передано, при рендере СВОЕЙ активной
    * демонстрации (Track.Source.ScreenShare + `participant.isLocal`) поверх
@@ -131,6 +155,23 @@ interface RoomParticipantTileProps {
    * в этом приложении не появляется (см. `RoomStage.tsx`).
    */
   onStopSharing?: () => void
+  /**
+   * Ключ закреплённой сейчас плитки (`identity:source`, см. `stageTrackKey`) —
+   * плитка сравнивает его со своим и подсвечивает булавку/рамку.
+   */
+  pinnedKey?: string | null
+  /**
+   * Закрепить/открепить эту плитку в основном окне. Передаёт свой ключ
+   * (плитки в карусели/гриде рендерятся шаблоном, снаружи их не различить).
+   * Не передан — кнопки-булавки на плитке нет (мини-плеер: плитка одна).
+   */
+  onTogglePin?: (key: string) => void
+}
+
+interface RoomParticipantTileProps extends TileControlsProps {
+  trackRef?: TrackReferenceOrPlaceholder
+  disableSpeakingIndicator?: boolean
+  onParticipantClick?: (event: ParticipantClickEvent) => void
 }
 
 /**
@@ -142,15 +183,20 @@ interface RoomParticipantTileProps {
  * собственного токена), и для удалённых.
  *
  * Пин-логика оригинала (`handleSubscribe`/сброс пина при отписке от трека)
- * сознательно опущена — приложение пока нигде не создаёт `LayoutContext`
- * (пиннинг плиток не реализован), поэтому в оригинале эта ветка и так была
- * мёртвым кодом без провайдера контекста.
+ * сознательно опущена — приложение нигде не создаёт `LayoutContext`, поэтому
+ * в оригинале эта ветка и так была мёртвым кодом без провайдера контекста (по
+ * той же причине ничего не рисует и штатный `FocusToggle` ниже). Своё
+ * закрепление участника (задача 3.1) сделано мимо `LayoutContext`: состояние —
+ * в `RoomStage`, кнопка — `.room-pin-toggle` здесь, выбор фокуса —
+ * `pickStageFocus`.
  */
 export function RoomParticipantTile({
   trackRef,
   disableSpeakingIndicator,
   onParticipantClick,
   onStopSharing,
+  pinnedKey,
+  onTogglePin,
 }: RoomParticipantTileProps) {
   return (
     <ParticipantTile
@@ -158,7 +204,7 @@ export function RoomParticipantTile({
       disableSpeakingIndicator={disableSpeakingIndicator}
       onParticipantClick={onParticipantClick}
     >
-      <TileBody onStopSharing={onStopSharing} />
+      <TileBody onStopSharing={onStopSharing} pinnedKey={pinnedKey} onTogglePin={onTogglePin} />
     </ParticipantTile>
   )
 }

frontend/src/components/room/RoomStage.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import { Track } from 'livekit-client'
+import { useEffect, useState } from 'react'
+import { Track, type Participant } from 'livekit-client'
 import {
   CarouselLayout,
   FocusLayoutContainer,
@@ -12,7 +12,7 @@ import {
   type TrackReferenceOrPlaceholder,
 } from '@livekit/components-react'
 import { RoomParticipantTile } from '@/components/room/RoomParticipantTile'
-import { pickStageFocus } from '@/components/room/stageFocus'
+import { pickStageFocus, stageTrackKey } from '@/components/room/stageFocus'
 
 /**
  * Стабильная (модульная, не пересоздаётся на каждый рендер) ссылка на
@@ -39,9 +39,45 @@ const STAGE_TRACK_SOURCES = [
   { source: Track.Source.ScreenShare, withPlaceholder: false },
 ]
 
-/** Ключ трека для `pickStageFocus` — см. обоснование в `stageFocus.ts`. */
-function stageTrackKey(t: TrackReferenceOrPlaceholder): string {
-  return `${t.participant.identity}:${t.source}`
+/**
+ * Удержание фокуса основного окна при смене говорящего, мс.
+ *
+ * Основное окно следует за спикером (`followSpeaker`, задача 3.2), и без
+ * удержания короткие реплики («ага», «угу») уводили бы большую плитку на
+ * секунду и возвращали обратно. Источник говорящих (`useSpeakingParticipants`
+ * поверх `RoomEvent.ActiveSpeakersChanged`) сам по себе не дребезжит, но
+ * реплику длиной в полсекунды он честно отдаёт как смену состава.
+ *
+ * Значение подобрано от периода самого события: LiveKit пересчитывает активных
+ * спикеров примерно раз в 0.5 с, то есть короткая реплика — это 1–2 обновления.
+ * 1.2 с ≈ 2–3 обновления: блик до 1.2 с не проходит вовсе (значение успевает
+ * вернуться обратно, таймер перезапускается), а осмысленная фраза переключает
+ * фокус с задержкой, которая на глаз читается как плавность, а не как тормоз.
+ * Меньше (~0.6 с) — короткие «ага» всё ещё пролезают, больше (~2 с) — заметно
+ * запаздывает переход на нового докладчика.
+ */
+const SPEAKER_HOLD_MS = 1200
+
+/**
+ * Возвращает состав говорящих, «успокоенный» удержанием: новое значение
+ * применяется, только если оно продержалось `holdMs` без изменений. Короткая
+ * реплика меняет состав и возвращает его обратно раньше таймера — тогда
+ * применять уже нечего (cleanup эффекта гасит таймер, а новое значение
+ * сравнивается по ссылке с текущим).
+ *
+ * `holdMs <= 0` — удержания нет, значение отдаётся как есть (режим PiP: там
+ * фокус обязан следовать за говорящим мгновенно, поведение не менялось).
+ */
+function useSteadySpeakers(speakers: Participant[], holdMs: number): Participant[] {
+  const [steady, setSteady] = useState(speakers)
+
+  useEffect(() => {
+    if (holdMs <= 0 || speakers === steady) return
+    const timer = setTimeout(() => setSteady(speakers), holdMs)
+    return () => clearTimeout(timer)
+  }, [speakers, steady, holdMs])
+
+  return holdMs <= 0 ? speakers : steady
 }
 
 /**
@@ -75,23 +111,27 @@ function stageTrackKey(t: TrackReferenceOrPlaceholder): string {
  *
  * Проп `variant="pip"` — для рендера
  * ВНУТРИ мини-плеера (Document PiP, портал в `RoomPage.tsx`). В этом режиме
- * показываем ТОЛЬКО одну крупную плитку активного окна — без карусели/грида
- * — и фокус ЖИВО следует за активным спикером (см. `followSpeaker` у
- * `pickStageFocus`), а не удерживается, как в основном окне. Основной рендер
- * (`variant="full"`, дефолт) не меняется вовсе.
+ * показываем ТОЛЬКО одну крупную плитку активного окна — без карусели/грида.
+ *
+ * Фокус следует за активным спикером в ОБОИХ вариантах (`followSpeaker` у
+ * `pickStageFocus`; для основного окна — с 0.0.6, задача 3.2), но по-разному:
+ * PiP переключается мгновенно и всегда показывает говорящего, а основное окно
+ * ждёт `SPEAKER_HOLD_MS` (не дёргается на коротких репликах), не уводит из
+ * фокуса живую демонстрацию экрана (`holdScreenShare`) и умеет закрепление
+ * участника (`pinnedKey`, задача 3.1) — кнопка-булавка на плитке.
  */
 export function RoomStage({ variant = 'full' }: { variant?: 'full' | 'pip' }) {
   const room = useRoomContext()
   const tracks = useTracks(STAGE_TRACK_SOURCES, {
     onlySubscribed: false,
   })
-  // Только для PiP (см. followSpeaker ниже) — активные спикеры уже
-  // отсортированы SDK по громкости (`Room.activeSpeakers`, обновляются по
-  // `RoomEvent.ActiveSpeakersChanged`, событие шлётся лишь при РЕАЛЬНОЙ смене
-  // состава/порядка говорящих — не дребезжит на каждый чих, в отличие от
-  // сырого `participant.isSpeaking`). Хук вызывается безусловно (Rules of
-  // Hooks) — для `variant="full"` его результат просто не используется.
-  const speakingParticipants = useSpeakingParticipants()
+  // Активные спикеры уже отсортированы SDK по громкости
+  // (`Room.activeSpeakers`, обновляются по `RoomEvent.ActiveSpeakersChanged`,
+  // событие шлётся лишь при РЕАЛЬНОЙ смене состава/порядка говорящих — не
+  // дребезжит на каждый чих, в отличие от сырого `participant.isSpeaking`).
+  // Основное окно поверх этого ещё и удерживает состав (см. `useSteadySpeakers`
+  // и `SPEAKER_HOLD_MS`), PiP берёт значение как есть.
+  const speakingParticipants = useSteadySpeakers(useSpeakingParticipants(), variant === 'pip' ? 0 : SPEAKER_HOLD_MS)
 
   const cameraTracks = tracks.filter((t) => t.source === Track.Source.Camera)
   const screenShareTracks = tracks.filter((t) => isTrackReference(t) && t.source === Track.Source.ScreenShare)
@@ -121,47 +161,66 @@ export function RoomStage({ variant = 'full' }: { variant?: 'full' | 'pip' }) {
   // новый массив только когда реально что-то изменилось (см. комментарий у
   // `STAGE_TRACK_SOURCES` про стабильность ссылки).
   //
-  // Для PiP (`variant="pip"`) пересчёт триггерится ЕЩЁ и сменой
-  // `speakingParticipants` (тоже сравнение по ссылке — хук отдаёт новый
-  // массив только при реальном изменении состава/порядка говорящих), и
-  // передаётся `followSpeaker: true` — фокус живо переключается на нового
-  // спикера, а не удерживает прежний (см. правило 2 в `pickStageFocus`). Для
-  // основного окна (`variant="full"`) `speakingChanged` всегда `false` —
-  // поведение байт-в-байт то же, что было до этой правки.
+  // Пересчёт триггерится ещё и сменой `speakingParticipants` (тоже сравнение
+  // по ссылке — хук отдаёт новый массив только при реальном изменении состава/
+  // порядка говорящих), и сменой закрепления (`pinnedKey`) — оба входа
+  // `pickStageFocus` меняют результат без изменения самих треков.
   const [prevTracks, setPrevTracks] = useState(tracks)
   const [prevSpeakingParticipants, setPrevSpeakingParticipants] = useState(speakingParticipants)
   const [focusKey, setFocusKey] = useState<string | null>(null)
+  // Закрепление живёт в состоянии сцены (задача 3.1): ключ `identity:source`
+  // плитки, которую пользователь закрепил булавкой; `null` — закрепления нет.
+  // Только для основного окна — в PiP плитка одна и закреплять нечего.
+  const [pinnedKey, setPinnedKey] = useState<string | null>(null)
+  const [prevPinnedKey, setPrevPinnedKey] = useState<string | null>(null)
+
+  const cameraKeys = cameraTracks.map(stageTrackKey)
+  const screenShareKeys = screenShareTracks.map(stageTrackKey)
+  // Закреплённый участник вышел из комнаты (его ключа нет ни среди камер — а
+  // камера есть у КАЖДОГО участника хотя бы плейсхолдером, — ни среди
+  // демонстраций) — закрепление снимаем, чтобы сцена не осталась в подвешенном
+  // состоянии и булавка не «висела» на исчезнувшем ключе.
+  const pinnedAlive = pinnedKey !== null && (cameraKeys.includes(pinnedKey) || screenShareKeys.includes(pinnedKey))
 
   const tracksChanged = tracks !== prevTracks
-  const speakingChanged = variant === 'pip' && speakingParticipants !== prevSpeakingParticipants
+  const speakingChanged = speakingParticipants !== prevSpeakingParticipants
+  const pinnedChanged = pinnedKey !== prevPinnedKey
 
-  if (tracksChanged || speakingChanged) {
+  if (pinnedKey !== null && !pinnedAlive) {
+    setPinnedKey(null)
+  }
+
+  if (tracksChanged || speakingChanged || pinnedChanged) {
     const prevKeys = prevTracks.map(stageTrackKey)
     if (tracksChanged) setPrevTracks(tracks)
     if (speakingChanged) setPrevSpeakingParticipants(speakingParticipants)
-    // Источник «говорящих» — РАЗНЫЙ для основного окна и PiP, намеренно:
-    // здесь строго тот же расчёт, что был в основном окне ДО этой правки
-    // (`participant.isSpeaking`, без сортировки — фолбэк только на первый
-    // рендер, дребезг неважен, см. JSDoc правила 3/4 в stageFocus.ts), а для
-    // PiP — упорядоченный по громкости `speakingParticipants` (нужен именно
-    // порядок, чтобы взять самого громкого, и именно throttled-источник SDK,
-    // чтобы followSpeaker не дёргался на каждый чих).
-    const speakingCameraKeys =
-      variant === 'pip'
-        ? speakingParticipants
-            .map((p) => cameraTracks.find((t) => t.participant.identity === p.identity))
-            .filter((t): t is TrackReferenceOrPlaceholder => Boolean(t))
-            .map(stageTrackKey)
-        : cameraTracks.filter((t) => t.participant.isSpeaking).map(stageTrackKey)
+    if (pinnedChanged) setPrevPinnedKey(pinnedKey)
+    // Говорящие — упорядоченные по громкости камера-ключи: нужен именно
+    // порядок (взять самого громкого) и именно throttled-источник SDK
+    // (`useSpeakingParticipants`, в основном окне ещё и с удержанием), чтобы
+    // followSpeaker не дёргался на каждый чих. Сырой `participant.isSpeaking`,
+    // на котором основное окно жило до 0.0.6, дребезжит и для слежения за
+    // спикером не годится.
+    const speakingCameraKeys = speakingParticipants
+      .map((p) => cameraTracks.find((t) => t.participant.identity === p.identity))
+      .filter((t): t is TrackReferenceOrPlaceholder => Boolean(t))
+      .map(stageTrackKey)
     const result = pickStageFocus({
-      cameraKeys: cameraTracks.map(stageTrackKey),
-      screenShareKeys: screenShareTracks.map(stageTrackKey),
+      cameraKeys,
+      screenShareKeys,
       speakingCameraKeys,
+      // Приоритет «говорящий с камерой выше говорящего без камеры» — только
+      // основному окну: PiP по договорённости ведёт себя ровно как раньше.
+      cameraKeysWithVideo:
+        variant === 'pip'
+          ? []
+          : cameraTracks.filter((t) => isTrackReference(t) && !t.publication.isMuted).map(stageTrackKey),
       prevKeys,
       prevFocusKey: focusKey,
-      followSpeaker: variant === 'pip',
-      // Только для PiP — в основном окне фолбэк на «первый трек» не менялся
-      // (см. JSDoc про speakingChanged выше: поведение full-варианта не трогаем).
+      pinnedKey: pinnedAlive ? pinnedKey : null,
+      followSpeaker: true,
+      holdScreenShare: variant !== 'pip',
+      // Только для PiP — в основном окне фолбэк на «первый трек» не менялся.
       localKey: variant === 'pip' ? `${room.localParticipant.identity}:${Track.Source.Camera}` : null,
     })
     if (result.focusKey !== focusKey) {
@@ -192,6 +251,15 @@ export function RoomStage({ variant = 'full' }: { variant?: 'full' | 'pip' }) {
     void room.localParticipant.setScreenShareEnabled(false)
   }
 
+  /**
+   * Закрепить/открепить плитку: повторное нажатие на уже закреплённой снимает
+   * закрепление. Ключ приходит из самой плитки (она знает свой трек из
+   * контекста — в карусели/гриде плитки рендерятся шаблоном, без пропсов).
+   */
+  function handleTogglePin(key: string) {
+    setPinnedKey((prev) => (prev === key ? null : key))
+  }
+
   // Мини-плеер показывает ТОЛЬКО активное окно — без карусели/
   // грида, одна плитка на весь контейнер (см. `.room-single-tile`,
   // `styles/room.css`). `focusTrack` уже вычислен выше тем же `pickStageFocus`
@@ -209,17 +277,24 @@ export function RoomStage({ variant = 'full' }: { variant?: 'full' | 'pip' }) {
     <section className="stage">
       {!hasScreenShare && (!focusTrack || carouselTracks.length === 0) ? (
         <GridLayout tracks={tracks} className="stage-tiles">
-          <RoomParticipantTile />
+          <RoomParticipantTile pinnedKey={pinnedKey} onTogglePin={handleTogglePin} />
         </GridLayout>
       ) : (
         <FocusLayoutContainer className="stage-tiles">
           <CarouselLayout tracks={carouselTracks}>
-            <RoomParticipantTile />
+            <RoomParticipantTile pinnedKey={pinnedKey} onTogglePin={handleTogglePin} />
           </CarouselLayout>
           {/* FocusLayout оригинала — лёгкая обёртка ровно над ParticipantTile
               (см. её исходник), поэтому вместо неё используем свою обёртку
               напрямую с тем же trackRef (аватар в фокус-плитке). */}
-          {focusTrack && <RoomParticipantTile trackRef={focusTrack} onStopSharing={handleStopSharing} />}
+          {focusTrack && (
+            <RoomParticipantTile
+              trackRef={focusTrack}
+              onStopSharing={handleStopSharing}
+              pinnedKey={pinnedKey}
+              onTogglePin={handleTogglePin}
+            />
+          )}
         </FocusLayoutContainer>
       )}
       <RoomAudioRenderer />

frontend/src/components/room/stageFocus.ts

@@ -1,9 +1,11 @@
 /**
  * Чистая функция выбора «сцены в фокусе» (демонстрация экрана).
  *
- * Никаких зависимостей от React/DOM/LiveKit SDK — на вход только примитивы,
- * на выход тоже примитивы; можно покрыть unit-тестом при появлении раннера
- * (vitest в проект сознательно не вводим, тестируем вручную).
+ * Никаких зависимостей от React/DOM/LiveKit SDK в РАНТАЙМЕ — на вход только
+ * примитивы, на выход тоже примитивы; можно покрыть unit-тестом при появлении
+ * раннера (vitest в проект сознательно не вводим, тестируем вручную).
+ * Единственный импорт из SDK — `import type` у `stageTrackKey` (тип стирается
+ * при компиляции, рантайм-зависимости не добавляет).
  *
  * Ключ трека — НЕ sid публикации и НЕ голая identity участника, а составной
  * `${identity}:${source}` (см. `RoomStage.tsx`, функция `stageTrackKey`):
@@ -20,9 +22,21 @@
  *   однозначность (camera и screen_share одного участника — разные ключи).
  */
 
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-react'
+
 /** Вид источника трека на сцене. */
 export type StageFocusKind = 'camera' | 'screen_share'
 
+/**
+ * Ключ трека для `pickStageFocus` — см. обоснование схемы в начале файла.
+ * Живёт здесь (а не в `RoomStage.tsx`), потому что нужен обеим сторонам:
+ * сцене — чтобы считать фокус, плитке (`RoomParticipantTile`) — чтобы понять,
+ * закреплена ли именно она, и каким ключом сообщить о нажатии на «закрепить».
+ */
+export function stageTrackKey(t: TrackReferenceOrPlaceholder): string {
+  return `${t.participant.identity}:${t.source}`
+}
+
 export interface PickStageFocusInput {
   /** Ключи текущих камера-треков (один на участника — трек либо его плейсхолдер). */
   cameraKeys: readonly string[]
@@ -35,19 +49,51 @@ export interface PickStageFocusInput {
    * `followSpeaker`, для живого переключения фокуса.
    */
   speakingCameraKeys: readonly string[]
+  /**
+   * Подмножество `cameraKeys` с ЖИВЫМ видео (камера включена и не в мьюте) —
+   * среди нескольких одновременно говорящих такой участник выигрывает у
+   * говорящего с выключенной камерой: показывать крупно аватар-заглушку, когда
+   * рядом говорит человек с картинкой, бессмысленно. Не указан — приоритета
+   * нет, берётся первый (самый громкий) говорящий, как было раньше.
+   */
+  cameraKeysWithVideo?: readonly string[]
   /** Объединённый набор ключей (camera+screenshare) с ПРЕДЫДУЩЕГО рендера — определяет, какие screenshare-ключи «новые». */
   prevKeys: readonly string[]
   /** Ключ, что был в фокусе на предыдущем рендере; `null` — фокус ещё не выбирался. */
   prevFocusKey: string | null
   /**
-   * Режим мини-плеера (PiP): фокус должен ЖИВО следовать за
-   * активным спикером (переключаться сразу, а не удерживать текущий), в
-   * отличие от основного окна сцены — там держим фокус, даже если заговорил
-   * кто-то другой (см. правило 2 ниже и обоснование в `RoomStage.tsx` про
-   * дребезг `isSpeaking` у фейковых медиапотоков). По умолчанию `false` —
-   * поведение основного окна не меняется.
+   * Ключ трека, ЗАКРЕПЛЁННОГО пользователем в основном окне (кнопка-булавка на
+   * плитке, состояние живёт в `RoomStage.tsx`); `null` — закрепления нет.
+   * Закрепление держит фокус вопреки говорящим, но уступает ЛЮБОЙ активной
+   * демонстрации экрана (формулировка оператора: «перебивается только чьей-либо
+   * демонстрацией экрана») — а когда демонстрация закончилась, фокус
+   * возвращается именно на закреплённого, а не на того, кто был до неё:
+   * правило закрепления стоит ВЫШЕ удержания предыдущего фокуса.
+   * Ключ закреплённого участника, покинувшего комнату, игнорируется (его нет
+   * ни в `cameraKeys`, ни в `screenShareKeys`) — снимает закрепление вызывающая
+   * сторона.
+   */
+  pinnedKey?: string | null
+  /**
+   * Фокус должен ЖИВО следовать за активным спикером (переключаться сразу, а
+   * не удерживать текущий). С 0.0.6 включено и для мини-плеера (PiP), и для
+   * основного окна — решение оператора (этап 3, задача 3.2). Защита от
+   * дребезга — на стороне вызывающего: источник «говорящих» — throttled
+   * `useSpeakingParticipants()` поверх `RoomEvent.ActiveSpeakersChanged`, а в
+   * основном окне ещё и удержание в ~1.2 с (см. `useSteadySpeakers` в
+   * `RoomStage.tsx`), не сырой дребезжащий `participant.isSpeaking`.
+   * По умолчанию `false` — фокус удерживается (см. правило 5).
    */
   followSpeaker?: boolean
+  /**
+   * Живая демонстрация экрана в фокусе НЕ уступает заговорившему участнику
+   * (правило 3). Нужно основному окну: там демонстрация — это содержательный
+   * центр разговора, и уводить её из большого окна на каждую реплику нельзя.
+   * Мини-плеер (PiP) показывает ровно одну плитку и намеренно ведёт себя иначе
+   * — всегда показывает того, кто говорит, поэтому там `false` (поведение
+   * PiP не менялось с 0.0.4).
+   */
+  holdScreenShare?: boolean
   /**
    * Ключ локального участника (та же схема `identity:source`) — предпоследний
    * фолбэк, ПЕРЕД чисто первым элементом набора: если фокуса ещё не было и
@@ -64,6 +110,20 @@ export interface PickStageFocusResult {
   kind: StageFocusKind | null
 }
 
+/**
+ * Выбирает говорящего, которого стоит показать крупно: среди живых говорящих
+ * (упорядоченных по громкости) сначала ищем того, у кого включена камера, и
+ * только если такого нет — берём самого громкого как есть.
+ */
+function pickSpeakerKey(
+  speakingCameraKeys: readonly string[],
+  cameraKeys: readonly string[],
+  cameraKeysWithVideo: readonly string[],
+): string | null {
+  const liveSpeakers = speakingCameraKeys.filter((key) => cameraKeys.includes(key))
+  return liveSpeakers.find((key) => cameraKeysWithVideo.includes(key)) ?? liveSpeakers[0] ?? null
+}
+
 /**
  * Выбирает, какой трек показать крупно (в `FocusLayoutContainer`).
  *
@@ -72,24 +132,38 @@ export interface PickStageFocusResult {
  *    фокус безусловно переходит на него (последний из новых, если появилось
  *    сразу несколько), даже если до этого в фокусе была камера или другая
  *    демонстрация. Так же ведут себя типовые UI конференций (Google Meet).
- * 2. `followSpeaker` (только PiP): если сейчас есть говорящий — фокус СРАЗУ
- *    переходит на него, даже если текущий фокус ещё жив. В основном окне
- *    (`followSpeaker: false`) этот шаг пропускается — см. правило 3.
- * 3. Иначе, если текущий фокус жив (остался среди camera/screenshare-ключей) —
+ * 2. Закрепление (`pinnedKey`, только основное окно): закреплённый участник
+ *    забирает фокус у говорящих и у удержания предыдущего фокуса, но уступает
+ *    ЛЮБОЙ активной демонстрации экрана. Поэтому правило и стоит выше
+ *    удержания (правило 5): как только демонстрация закончилась и
+ *    `screenShareKeys` опустел, фокус возвращается на закреплённого, а не
+ *    остаётся на том, кто был в фокусе до демонстрации.
+ * 3. `holdScreenShare` (только основное окно): демонстрация, уже стоящая в
+ *    фокусе, не уступает заговорившему — иначе большое окно уводило бы шэр на
+ *    каждую реплику. В PiP шаг пропускается (там одна плитка и она всегда
+ *    показывает говорящего).
+ * 4. `followSpeaker`: если сейчас есть говорящий — фокус СРАЗУ переходит на
+ *    него, даже если текущий фокус ещё жив; среди одновременно говорящих
+ *    предпочитаем того, у кого включена камера (`cameraKeysWithVideo`).
+ *    При `followSpeaker: false` этот шаг пропускается — см. правило 5.
+ * 5. Иначе, если текущий фокус жив (остался среди camera/screenshare-ключей) —
  *    держим его: НЕ дёргаем фокус на каждый ре-рендер (изменение состава
- *    участников, дребезг isSpeaking и т.п.). Это и есть «стабильный фолбэк»
- *    для PiP, когда никто не говорит — держим предыдущего активного.
- * 4. Иначе (фокуса не было или он пропал) — приоритет активной демонстрации
- *    над камерой; среди камер — активный спикер, иначе `localKey` (если
- *    указан и жив), иначе первая по порядку.
+ *    участников, дребезг isSpeaking и т.п.). Это и есть «стабильный фолбэк»,
+ *    когда никто не говорит — держим предыдущего активного.
+ * 6. Иначе (фокуса не было или он пропал) — приоритет активной демонстрации
+ *    над камерой; среди камер — активный спикер (снова с приоритетом камеры),
+ *    иначе `localKey` (если указан и жив), иначе первая по порядку.
  */
 export function pickStageFocus({
   cameraKeys,
   screenShareKeys,
   speakingCameraKeys,
+  cameraKeysWithVideo = [],
   prevKeys,
   prevFocusKey,
+  pinnedKey = null,
   followSpeaker = false,
+  holdScreenShare = false,
   localKey = null,
 }: PickStageFocusInput): PickStageFocusResult {
   if (cameraKeys.length === 0 && screenShareKeys.length === 0) {
@@ -102,8 +176,25 @@ export function pickStageFocus({
     return { focusKey: newScreenShareKeys[newScreenShareKeys.length - 1], kind: 'screen_share' }
   }
 
+  if (pinnedKey) {
+    // Закреплена сама демонстрация — она и есть «активная демонстрация»,
+    // уступать нечему (UI позволяет закрепить любую плитку, включая шэр).
+    if (screenShareKeys.includes(pinnedKey)) {
+      return { focusKey: pinnedKey, kind: 'screen_share' }
+    }
+    // Закреплена камера: пока в комнате идёт чья-то демонстрация, она
+    // перебивает закрепление (правило оператора) — идём дальше по списку.
+    if (cameraKeys.includes(pinnedKey) && screenShareKeys.length === 0) {
+      return { focusKey: pinnedKey, kind: 'camera' }
+    }
+  }
+
+  if (holdScreenShare && prevFocusKey && screenShareKeys.includes(prevFocusKey)) {
+    return { focusKey: prevFocusKey, kind: 'screen_share' }
+  }
+
   if (followSpeaker) {
-    const liveSpeaker = speakingCameraKeys.find((key) => cameraKeys.includes(key))
+    const liveSpeaker = pickSpeakerKey(speakingCameraKeys, cameraKeys, cameraKeysWithVideo)
     if (liveSpeaker) {
       return { focusKey: liveSpeaker, kind: 'camera' }
     }
@@ -120,7 +211,7 @@ export function pickStageFocus({
     return { focusKey: screenShareKeys[screenShareKeys.length - 1], kind: 'screen_share' }
   }
 
-  const speaking = speakingCameraKeys.find((key) => cameraKeys.includes(key))
+  const speaking = pickSpeakerKey(speakingCameraKeys, cameraKeys, cameraKeysWithVideo)
   if (speaking) {
     return { focusKey: speaking, kind: 'camera' }
   }

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>
   )
 }

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

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>
   )
 }

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>
   )
 }

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)}>

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>
   )
 }

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) (индиго) сочеталась с жёстким

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); }
+}

frontend/src/styles/room.css

@@ -416,6 +416,52 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
 }
 .stage-sharing-chip button:hover { filter: brightness(0.95); }
 
+/*
+ * ---------- Кнопка закрепления участника (булавка) ----------
+ * Рендерится внутри `RoomParticipantTile` (см. её `TileBody`), т.е. внутри
+ * `.lk-participant-tile` — тот у @livekit/components-styles уже
+ * `position: relative`. Геометрия и логика появления повторяют штатную
+ * `.lk-focus-toggle-button` той же библиотеки (правый верхний угол, видна по
+ * наведению) — чтобы плитка выглядела цельно, а не «нашей кнопкой поверх
+ * чужой». Отличие: у закреплённой плитки булавка видна ВСЕГДА и подсвечена —
+ * закрепление должно читаться без наведения.
+ */
+.room-pin-toggle {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  z-index: 5;
+  display: flex;
+  padding: 0.25rem;
+  border: none;
+  border-radius: calc(var(--lk-border-radius, 0.5rem) / 2);
+  background: rgba(0, 0, 0, 0.5);
+  color: var(--color-room-text-primary);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  transition-delay: 0.2s;
+}
+.room-pin-toggle svg { width: 20px; height: 20px; }
+.lk-participant-tile:hover .room-pin-toggle,
+.lk-participant-tile:focus-within .room-pin-toggle,
+.room-pin-toggle.is-pinned { opacity: 1; transition-delay: 0s; }
+.room-pin-toggle.is-pinned { background: var(--color-room-mic-on); color: #10331f; }
+
+/* Тач-устройства (мобильный/планшет): hover нет вовсе — иначе булавка была бы
+   недоступна. Тулбар комнаты не задет: кнопка живёт на плитке. */
+@media (hover: none) {
+  .room-pin-toggle { opacity: 1; transition-delay: 0s; }
+}
+
+/* Метка закреплённой плитки — рамка по контуру. Класс закрепления висит на
+   кнопке (корневой div плитки рендерит библиотека, свой класс туда не
+   добавить), поэтому селектор идёт через `:has()`. */
+.lk-participant-tile:has(.room-pin-toggle.is-pinned) {
+  outline: 2px solid var(--color-room-mic-on);
+  outline-offset: -2px;
+}
+
 /* ---------- Заглушка «конференция в мини-окне» (Document PiP) ---------- */
 .room-pip-placeholder {
   flex: 1;