fix(ui): reflect update availability and config changes; expand mobile player metadata

apps/web/e2e/mobile.spec.ts

@@ -102,7 +102,15 @@ test('mobile player keeps the island above navigation and exposes the queue', as
   await page.getByRole('listitem').first().click();
   const player = page.getByRole('contentinfo', { name: 'Плеер' });
   await expect(player.getByRole('button', { name: 'Очередь', exact: true })).toBeVisible();
-  expect((await player.getByText('Группа крови', { exact: true }).boundingBox())!.width).toBeGreaterThan(40);
+  expect((await player.getByText('Группа крови', { exact: true }).boundingBox())!.width).toBeGreaterThan(220);
+  const artist = player.getByRole('link', { name: 'Кино', exact: true });
+  await expect(artist).toBeVisible();
+  const artistArea = await artist.locator('..').boundingBox();
+  expect(artistArea!.width).toBeGreaterThan(220);
+  const trackInfo = await player.getByText('Группа крови', { exact: true }).boundingBox();
+  const play = await player.getByRole('button', { name: /^(Пауза|Слушать)$/ }).boundingBox();
+  expect(trackInfo!.y + trackInfo!.height).toBeLessThanOrEqual(play!.y);
+  await page.screenshot({ path: info.outputPath('player-readable.png') });
   await fits(page);
   await page.getByRole('button', { name: 'Меню профиля' }).click();
   await page.getByRole('menuitem', { name: 'Настройки', exact: true }).click();

apps/web/e2e/playlists.spec.ts

@@ -34,7 +34,9 @@ for (const width of [320, 1280]) {
     await page.getByRole('button', { name: 'Поделиться плейлистом', exact: true }).click();
     await expect(page.getByRole('status')).toHaveText('Ссылка на плейлист скопирована');
     const sharedUrl = await page.evaluate(() => navigator.clipboard.readText());
-    expect(sharedUrl).toMatch(/^http:\/\/127\.0\.0\.1:4173\/shared\/playlist\/[a-f0-9-]+$/);
+    const shared = new URL(sharedUrl);
+    expect(shared.origin).toBe(new URL(page.url()).origin);
+    expect(shared.pathname).toMatch(/^\/shared\/playlist\/[a-f0-9-]+$/);
     await expect(page.getByRole('button', { name: 'Отключить доступ по ссылке', exact: true })).toBeVisible();
 
     await expect.poll(() => page.evaluate(() => {

apps/web/e2e/server-management.spec.ts

@@ -27,9 +27,9 @@ test('admin selects repository and version, confirms and sees persistent job log
   await expect(dialog).toContainText('Тестовая репа');
   await expect(dialog).toContainText('v1.10.0');
   await dialog.getByRole('button', { name: 'Установить обновление' }).click();
-  await expect(page.getByRole('status').filter({ hasText: 'Выполняется' })).toBeVisible();
+  await expect(page.getByRole('status').filter({ hasText: /^Выполняется$/ })).toBeVisible();
   await expect(page.getByLabel('Журнал выполнения')).toContainText('build and restart');
-  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).toBeDisabled();
+  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).not.toBeVisible();
   await page.screenshot({ path: 'test-results/server-updates.png', fullPage: true });
 });
 
@@ -37,12 +37,15 @@ test('config keeps secret unchanged, saves local override and applies separately
   await login(page, 'mobile-admin', '/admin/config');
   await expect(page.getByRole('heading', { name: 'Конфигурация', exact: true })).toBeVisible();
   await expect(page.getByLabel('GITEA_TOKEN · config.local', { exact: true })).toHaveValue('');
+  await expect(page.getByRole('button', { name: 'Сохранить', exact: true })).not.toBeVisible();
   await page.getByLabel('LOG_LEVEL · config.local', { exact: true }).fill('debug');
   await expect(page.getByText('В .env есть значение:', { exact: false })).toBeVisible();
   await page.getByLabel('TRAIN_HOUR · config.local', { exact: true }).fill('6');
-  await expect(page.getByRole('button', { name: 'Применить и перезапустить', exact: true })).toBeDisabled();
+  await expect(page.getByRole('button', { name: 'Применить и перезапустить', exact: true })).not.toBeVisible();
   await page.getByRole('button', { name: 'Сохранить', exact: true }).click();
   await expect(page.getByText('Изменения сохранены в config.local', { exact: true })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Сохранить', exact: true })).not.toBeVisible();
+  await expect(page.getByRole('button', { name: 'Отменить правки', exact: true })).not.toBeVisible();
   await expect(page.getByLabel('GITEA_TOKEN · config.local', { exact: true })).toHaveAttribute('placeholder', 'Секрет сохранён');
   await expect(page.getByText('Выполняется', { exact: true })).not.toBeVisible();
   await page.getByRole('main').evaluate((element) => { element.scrollTop = 0; });
@@ -64,3 +67,61 @@ test('ordinary user is redirected away from server management', async ({ page })
   await login(page, 'alice', '/admin/updates');
   await expect(page).toHaveURL('/');
 });
+
+
+test('installed main and release show no install action; another version can be installed', async ({ page }) => {
+  await login(page, 'mobile-admin', '/admin/updates');
+  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).toBeVisible();
+  await page.getByRole('button', { name: 'main', exact: true }).click();
+  await expect(page.getByText('Эта версия уже установлена — обновлений нет', { exact: true })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).not.toBeVisible();
+  await page.getByRole('button', { name: 'Выбрать версию', exact: true }).click();
+  await expect(page.getByText('Выберите версию для проверки', { exact: true })).toBeVisible();
+  await page.getByLabel('Версия', { exact: true }).selectOption('v1.9.0');
+  await expect(page.getByText('Эта версия уже установлена — обновлений нет', { exact: true })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).not.toBeVisible();
+  await page.getByLabel('Версия', { exact: true }).selectOption('v1.10.0');
+  await expect(page.getByText('Доступно обновление', { exact: true })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).toBeVisible();
+});
+
+test('explicit check bypasses cache and hides install action until the check finishes', async ({ page }) => {
+  await login(page, 'mobile-admin', '/admin/updates');
+  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).toBeVisible();
+  await page.evaluate(() => {
+    const original = window.fetch;
+    window.fetch = async (input, init) => {
+      const request = new Request(input, init);
+      if (request.url.includes('/api/v1/admin/server/updates') && request.url.includes('fresh=true')) {
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        const response = await original(input, init);
+        const data = await response.json();
+        return new Response(JSON.stringify({ ...data, update_state: 'current', target_commit: data.current_commit }), { headers: { 'Content-Type': 'application/json' } });
+      }
+      return original(input, init);
+    };
+  });
+  await page.getByRole('button', { name: 'Проверить обновления', exact: true }).click();
+  await expect(page.getByText('Проверяем выбранную версию…', { exact: true })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).not.toBeVisible();
+  await expect(page.getByText('Эта версия уже установлена — обновлений нет', { exact: true })).toBeVisible();
+});
+
+test('saving panel disappears when all edited values return to their original state', async ({ page }) => {
+  await login(page, 'mobile-admin', '/admin/config');
+  await expect(page.getByRole('heading', { name: 'Конфигурация', exact: true })).toBeVisible();
+  const save = page.getByRole('button', { name: 'Сохранить', exact: true });
+  const apply = page.getByRole('button', { name: 'Применить и перезапустить', exact: true });
+  await expect(save).not.toBeVisible();
+  await expect(apply).not.toBeVisible();
+  const field = page.getByLabel('TRAIN_HOUR · config.local', { exact: true });
+  await field.fill('6');
+  await expect(save).toBeVisible();
+  await field.clear();
+  await expect(save).not.toBeVisible();
+  await expect(apply).not.toBeVisible();
+  await field.fill('7');
+  await page.getByRole('button', { name: 'Отменить правки', exact: true }).click();
+  await expect(save).not.toBeVisible();
+  await expect(field).toHaveValue('');
+});

apps/web/src/features/server-management/ConfigPage.tsx

@@ -46,8 +46,13 @@ export function ConfigPage() {
     },
   });
   const change = (key: string, value: string | null) => {
-    setBaseRevision((v) => v ?? query.data!.revision);
-    setDraft((v) => ({ ...v, [key]: value })); setSaved(false); save.reset();
+    const entry = query.data!.entries.find((v) => v.key === key)!;
+    const unchanged = value === null ? entry.local === null
+      : entry.secret ? value === '' : value === (entry.local ?? '');
+    const next = { ...draft };
+    if (unchanged) delete next[key]; else next[key] = value;
+    setBaseRevision(Object.keys(next).length ? baseRevision ?? query.data!.revision : null);
+    setDraft(next); setSaved(false); save.reset();
   };
   if (query.isPending) return <PageSkeleton />;
   const entries = query.data?.entries.filter((e) => (group === 'all' || e.group === group) && `${e.key} ${e.group}`.toLowerCase().includes(search.toLowerCase())) ?? [];
@@ -71,10 +76,15 @@ export function ConfigPage() {
         </section>;
       })}</div>
       {!entries.length && <p className={s.note}>{t('management.no_results')}</p>}
-      <section className={s.saveBar}>
-        <div role="status">{saved ? t('management.saved') : dirty ? t('management.unsaved', { count: Object.keys(draft).length }) : query.data.restart_required ? t('management.pending_restart') : t('management.no_changes')}</div>
-        <div className={s.actions}><Button disabled={!dirty || save.isPending} onClick={() => { setDraft({}); setBaseRevision(null); save.reset(); }}>{t('management.discard')}</Button><Button variant="primary" disabled={!dirty || running} busy={save.isPending} onClick={() => save.mutate()}>{t('management.save')}</Button><Button disabled={dirty || running || !query.data.restart_required} busy={apply.isPending} onClick={() => { apply.reset(); setConfirm(true); }}>{t('management.apply')}</Button></div>
-      </section>
+      {saved && !dirty && <p className={s.note} role="status">{t('management.saved')}</p>}
+      {dirty && <section className={s.saveBar} aria-label={t('management.unsaved_panel')}>
+        <div role="status">{t('management.unsaved', { count: Object.keys(draft).length })}</div>
+        <div className={s.actions}><Button disabled={save.isPending} onClick={() => { setDraft({}); setBaseRevision(null); save.reset(); }}>{t('management.discard')}</Button><Button variant="primary" disabled={running} busy={save.isPending} onClick={() => save.mutate()}>{t('management.save')}</Button></div>
+      </section>}
+      {!dirty && query.data.restart_required && !running && <section className={s.saveBar} aria-label={t('management.pending_restart')}>
+        <div role="status">{t('management.pending_restart')}</div>
+        <Button busy={apply.isPending} onClick={() => { apply.reset(); setConfirm(true); }}>{t('management.apply')}</Button>
+      </section>}
       {save.error && <FormError>{errorText(save.error)}</FormError>}
       {apply.error && <FormError>{errorText(apply.error)}</FormError>}
       <JobPanel job={status.data?.job} reconnecting={status.isError} />

apps/web/src/features/server-management/UpdatesPage.tsx

@@ -1,7 +1,7 @@
 import type { components } from '@pipu/api-client';
 import { unwrap } from '@pipu/core';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
+import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSession } from '../../app/session';
 import { useErrorText } from '../../shared/lib/errors';
@@ -22,16 +22,26 @@ export function UpdatesPage() {
   const [version, setVersion] = useState('');
   const [confirm, setConfirm] = useState(false);
   const [editing, setEditing] = useState<Source[] | null>(null);
+  const fresh = useRef(false);
+  const queryKey = ['server-updates', sourceId, channel, version];
   const query = useQuery({
-    queryKey: ['server-updates', sourceId],
-    queryFn: async () => unwrap(await session.client.GET('/api/v1/admin/server/updates', {
-      params: { query: { source_id: sourceId || undefined } },
-    })),
-    refetchInterval: 3000,
+    queryKey,
+    queryFn: async () => {
+      const force = fresh.current;
+      fresh.current = false;
+      return unwrap(await session.client.GET('/api/v1/admin/server/updates', {
+        params: { query: { source_id: sourceId || undefined, channel, version: channel === 'version' ? version : undefined, fresh: force } },
+      }));
+    },
+    placeholderData: keepPreviousData,
+    refetchInterval: (q) => q.state.data?.job?.state === 'running' ? 3000 : 60000,
     retry: false,
   });
   const source = query.data?.sources.find((v) => v.id === sourceId) ?? query.data?.sources[0];
   const running = query.data?.job?.state === 'running';
+  const checking = query.isFetching;
+  const availability = query.isError ? 'unavailable' : query.data?.update_state || 'unknown';
+  const canInstall = availability === 'available' && !checking && !query.isPlaceholderData && !query.isError && !running;
   const refresh = () => qc.invalidateQueries({ queryKey: ['server-updates'] });
   const save = useMutation({
     mutationFn: async (sources: Source[]) => unwrap(await session.client.PUT('/api/v1/admin/server/update-sources', { body: { sources } })),
@@ -39,18 +49,19 @@ export function UpdatesPage() {
   });
   const start = useMutation({
     mutationFn: async () => unwrap(await session.client.POST('/api/v1/admin/server/updates', {
-      body: { source_id: source!.id, channel, version: channel === 'version' ? version : undefined },
+      body: { source_id: source!.id, channel, version: channel === 'version' ? version : undefined, expected_commit: query.data!.target_commit },
     })),
     onSuccess: (job) => {
       setConfirm(false);
-      qc.setQueryData<components['schemas']['ServerUpdates']>(['server-updates', sourceId], (old) => old ? { ...old, job } : old);
+      qc.setQueryData<components['schemas']['ServerUpdates']>(queryKey, (old) => old ? { ...old, job } : old);
       void refresh();
     },
+    onError: () => { void refresh(); },
   });
   if (query.isPending) return <PageSkeleton />;
   return <div className={s.page}>
     <header className={s.header}><div><span className={s.eyebrow}>{t('management.server')}</span><h1>{t('management.updates')}</h1><p>{t('management.updates_intro')}</p></div>
-      <Button onClick={() => void query.refetch()} busy={query.isFetching}>{t('management.refresh')}</Button>
+      <Button onClick={() => { fresh.current = true; void query.refetch(); }} busy={query.isFetching}>{t('management.check_updates')}</Button>
     </header>
     {query.error && <FormError>{errorText(query.error)}</FormError>}
     {query.data && <>
@@ -68,15 +79,21 @@ export function UpdatesPage() {
         {channel === 'version' && <label className={s.selectLabel}>{t('management.version')}<select aria-label={t('management.version')} value={version} onChange={(e) => setVersion(e.target.value)}><option value="">{t('management.choose_version')}</option>{query.data.versions.map((v) => <option key={v} value={v}>{v}</option>)}</select></label>}
         {query.data.source_error && <FormError>{t('management.source_unavailable')}</FormError>}
         {start.error && <FormError>{errorText(start.error)}</FormError>}
-        <div className={s.actions}><Button variant="primary" disabled={!source || running || !!query.data.source_error || (channel === 'version' && !version)} busy={start.isPending} onClick={() => { start.reset(); setConfirm(true); }}>{t('management.install')}</Button></div>
+        <div className={s.updateAction}>
+          <div role="status" aria-live="polite">
+            <strong>{t(`management.availability.${checking ? 'checking' : running ? 'running' : availability}`)}</strong>
+            {query.data.target_version && <p className={s.note}>{query.data.target_version} · {query.data.target_commit.slice(0, 12)}</p>}
+          </div>
+          {canInstall && <Button variant="primary" disabled={!source || !!query.data.source_error} busy={start.isPending} onClick={() => { start.reset(); setConfirm(true); }}>{t('management.install')}</Button>}
+        </div>
       </section>
       <JobPanel job={query.data.job} reconnecting={query.isError} />
     </>}
     {confirm && <Dialog title={t('management.confirm_update')} onClose={() => !start.isPending && setConfirm(false)}>
-      <p>{t('management.confirm_update_text', { source: source?.name, target: channel === 'version' ? version : t(`management.channel_${channel}`) })}</p>
+      <p>{t('management.confirm_update_text', { source: source?.name, target: query.data?.target_version || version })}</p>
       <p className={s.note}>{t('management.update_warning')}</p>
       {start.error && <FormError>{errorText(start.error)}</FormError>}
-      <div className={s.actions}><Button disabled={start.isPending} onClick={() => setConfirm(false)}>{t('management.cancel')}</Button><Button variant="primary" busy={start.isPending} onClick={() => start.mutate()}>{t('management.install')}</Button></div>
+      <div className={s.actions}><Button disabled={start.isPending} onClick={() => setConfirm(false)}>{t('management.cancel')}</Button><Button variant="primary" disabled={!canInstall} busy={start.isPending} onClick={() => start.mutate()}>{t('management.install')}</Button></div>
     </Dialog>}
     {editing && <Dialog title={t('management.sources')} onClose={() => !save.isPending && setEditing(null)}>
       <p className={s.note}>{t('management.sources_hint')}</p>

apps/web/src/features/server-management/management.module.css

@@ -32,3 +32,5 @@
 .editor { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
 .saveBar { position: sticky; bottom: 12px; z-index: 2; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface2); box-shadow: 0 8px 32px #0003; font-size: 13px; }
 @media (max-width: 650px) { .hero { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; } .hero p { max-width: none; } .toolbar { grid-template-columns: 1fr; } .editor { grid-template-columns: 1fr; } .card, .configRow { padding: 16px; } .actions { justify-content: flex-start; } }
+
+.updateAction { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }

apps/web/src/test/fakeApi.ts

@@ -126,7 +126,14 @@ export function fakeApi(initial: FakeUser[]) {
       if (!user) return problem(401, 'auth.unauthorized');
       const configs = path.includes('/config');
       if (configs ? user.role !== 'admin' : user.role !== 'admin' && !user.manages_updates) return problem(403, 'auth.forbidden');
-      if (route === 'GET /api/v1/admin/server/updates') return json({ sources: managementSources, versions: ['v1.10.0', 'v1.9.0', 'v2.0.0-rc.1'], current_version: '1.9.0', source_error: '', job: managementJob });
+      if (route === 'GET /api/v1/admin/server/updates') {
+        const channel = url.searchParams.get('channel') ?? 'latest';
+        const selected = url.searchParams.get('version') ?? '';
+        const target = channel === 'version' ? selected : channel === 'main' ? 'main' : 'v1.10.0';
+        return json({ sources: managementSources, versions: ['v1.10.0', 'v1.9.0', 'v2.0.0-rc.1'], current_version: '1.9.0', source_error: '', job: managementJob,
+          current_commit: 'a'.repeat(40), target_version: target, target_commit: target === 'v1.9.0' || target === 'main' ? 'a'.repeat(40) : 'b'.repeat(40),
+          update_state: !target ? 'select_version' : target === 'v1.9.0' || target === 'main' ? 'current' : 'available' });
+      }
       if (route === 'PUT /api/v1/admin/server/update-sources') { managementSources = body?.sources as typeof managementSources; return json({ sources: managementSources }); }
       if (route === 'GET /api/v1/admin/server/config') return json(serverConfig());
       if (route === 'PATCH /api/v1/admin/server/config') {
@@ -138,6 +145,7 @@ export function fakeApi(initial: FakeUser[]) {
       }
       if (route === 'POST /api/v1/admin/server/updates' || route === 'POST /api/v1/admin/server/config/apply') {
         managementJob = { id: 'job-1', kind: configs ? 'config' : 'update', state: 'running', target: configs ? 'config.local' : body?.channel === 'version' ? String(body.version) : body?.channel === 'main' ? 'main' : 'v1.10.0', started_at: '2026-10-22T09:00:00Z', finished_at: '', log: '→ build and restart' };
+        if (configs) configPending = false;
         return json(managementJob, 202);
       }
     }

apps/web/src/widgets/AppShell.module.css

@@ -298,7 +298,7 @@
   .shell, .shell.island {
     --side-w: 0px;
     grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto minmax(0, 1fr) 72px calc(64px + env(safe-area-inset-bottom, 0px));
+    grid-template-rows: auto minmax(0, 1fr) auto calc(64px + env(safe-area-inset-bottom, 0px));
     grid-template-areas: 'top' 'content' 'player' 'mobile';
   }
 

apps/web/src/widgets/PlayerBar.module.css

@@ -413,28 +413,29 @@ a.source:hover {
 }
 
 @media (max-width: 767px) {
-  .bar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; padding: 0 8px; }
+  .bar {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: 'now now' 'controls actions';
+    gap: 4px 8px;
+    min-height: 72px;
+    padding: 8px 12px;
+  }
   .bar.island { position: relative; left: auto; bottom: auto; width: auto; height: auto;
     transform: none; margin: 0 8px; border-radius: 16px; }
-  .empty { grid-column: 1 / -1; }
+  .empty { grid-column: 1 / -1; grid-row: 1 / -1; }
   .placeholder { flex: none; }
-  .now { gap: 8px; }
+  .now { grid-area: now; gap: 10px; }
+  .center { grid-area: controls; justify-self: start; }
   .now > :first-child { width: 44px !important; height: 44px !important; }
   .source { display: none; }
   .controls { gap: 2px; }
   .play, .icon { width: 44px; height: 44px; }
-  .right { display: flex; gap: 0; }
+  .right { grid-area: actions; display: flex; gap: 0; }
   .right > :not(.queueButton):not(.shareButton):not(.playlistButton) { display: none; }
   .error { position: absolute; bottom: calc(100% + 8px); left: 8px; right: 8px;
     padding: 8px 12px; background: var(--surface3); border-radius: 10px; text-align: center; }
-  .drawer, .drawerIsland { bottom: calc(144px + env(safe-area-inset-bottom, 0px));
-    max-height: calc(100dvh - 180px - env(safe-area-inset-bottom, 0px)); }
-}
-
-@media (max-width: 359px) {
-  .now > :first-child { display: none; }
-  /* share + очередь + три кнопки управления не оставляют месту название трека (e2e 320px). */
-  .shareButton { display: none; }
+  .drawer, .drawerIsland { bottom: calc(184px + env(safe-area-inset-bottom, 0px));
+    max-height: calc(100dvh - 220px - env(safe-area-inset-bottom, 0px)); }
 }
 
 .shareStatus {

apps/web/src/widgets/PlayerBar.tsx

@@ -111,15 +111,15 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
       >
         {narrow ? (
           <button type="button" className={s.nowArt} aria-label={t('player.expand')} onClick={() => setSheetOpen(true)}>
-            <Cover album={track.album} size={52} className={st.playing ? s.coverLive : undefined} />
+            <Cover album={track.album} size={44} className={st.playing ? s.coverLive : undefined} />
             {st.playing && <span className={s.nowEq}><Equalizer playing /></span>}
           </button>
         ) : (
           <Cover album={track.album} size={52} className={st.playing ? s.coverLive : undefined} />
         )}
         <div className={s.meta}>
-          <span className={s.title}>{track.title}</span>
-          <span className={s.artists}>
+          <span className={s.title} title={track.title}>{track.title}</span>
+          <span className={s.artists} title={track.artists.map((artist) => artist.name).join(', ')}>
             <ArtistLinks artists={track.artists} />
           </span>
           {source &&