feat(web): sign-in, first-run setup, app shell and user admin (M1)

- core: AuthSession keeps the access token in memory, refreshes it
  once for all parallel requests (single-flight) and retries them;
  refresh races between tabs are retried, reuse signs out; ApiError
  carries problem+json codes and field errors
- web: TanStack Router with guards — guests go to /login, the bootstrap
  admin to /setup/admin, temporary passwords to /setup/password, admin
  pages by role
- login, setup screens, Classic shell (top bar, role-based sidebar,
  empty player), settings: name, theme, language, password, devices
- users admin: search, role filter, create with a one-time temporary
  password, reset, block, role change, delete as the policy allows;
  audit log for admins
- ru/en strings for auth, admin and error codes; language and theme
  are saved in the profile

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/widgets/AppShell.tsx

@@ -0,0 +1,104 @@
+import { Link, Outlet, useNavigate } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+
+import { useAuthState, useSession, useUser } from '../app/session';
+import {
+  auditFillIcon,
+  auditIcon,
+  groupFillIcon,
+  groupIcon,
+  homeFillIcon,
+  homeIcon,
+  logoutIcon,
+  musicIcon,
+  settingsIcon,
+} from '../shared/ui/icons';
+import { Avatar, Icon, Logo, Menu } from '../shared/ui/ui';
+import { LanguageSwitch } from './LanguageSwitch';
+import s from './AppShell.module.css';
+
+type NavPath = '/' | '/admin/users' | '/admin/audit';
+
+function NavLink({ to, label, icon, activeIcon }: { to: NavPath; label: string; icon: string; activeIcon: string }) {
+  return (
+    <Link to={to} className={s.navItem} activeOptions={{ exact: to === '/' }}>
+      {({ isActive }) => (
+        <>
+          <Icon src={isActive ? activeIcon : icon} className={s.navIcon} />
+          {label}
+        </>
+      )}
+    </Link>
+  );
+}
+
+/** Между выходом и редиректом на /login каркас не рисуется: пользователя уже нет. */
+export function AppShell() {
+  return useAuthState().status === 'signed_in' ? <Shell /> : null;
+}
+
+function Shell() {
+  const { t } = useTranslation();
+  const user = useUser();
+  const session = useSession();
+  const navigate = useNavigate();
+  const name = user.display_name ?? user.username;
+  const staff = user.role !== 'user';
+
+  return (
+    <div className={s.shell}>
+      <header className={s.top}>
+        <Link to="/" className={s.logoLink}>
+          <Logo />
+        </Link>
+        <div className={s.topRight}>
+          <Menu
+            label={t('profile.menu')}
+            triggerClassName={s.profileButton}
+            trigger={<Avatar name={name} />}
+            header={
+              <div className={s.profileHead}>
+                <Avatar name={name} size={40} />
+                <div>
+                  <div className={s.profileName}>{name}</div>
+                  <div className={s.profileMeta}>
+                    @{user.username} · {t(`roles.${user.role}`)}
+                  </div>
+                </div>
+                <LanguageSwitch />
+              </div>
+            }
+            items={[
+              { label: t('profile.settings'), icon: settingsIcon, onSelect: () => void navigate({ to: '/settings' }) },
+              { label: t('profile.logout'), icon: logoutIcon, danger: true, onSelect: () => void session.logout() },
+            ]}
+          />
+        </div>
+      </header>
+
+      <nav className={s.side} aria-label={t('nav.main')}>
+        <NavLink to="/" label={t('nav.home')} icon={homeIcon} activeIcon={homeFillIcon} />
+        {staff && (
+          <>
+            <div className={s.navSection}>{t('nav.admin')}</div>
+            <NavLink to="/admin/users" label={t('nav.users')} icon={groupIcon} activeIcon={groupFillIcon} />
+            {user.role === 'admin' && (
+              <NavLink to="/admin/audit" label={t('nav.audit')} icon={auditIcon} activeIcon={auditFillIcon} />
+            )}
+          </>
+        )}
+      </nav>
+
+      <main className={s.content}>
+        <Outlet />
+      </main>
+
+      <footer className={s.player} aria-label={t('player.empty')}>
+        <span className={s.cover}>
+          <Icon src={musicIcon} size={22} />
+        </span>
+        <span className={s.playerEmpty}>{t('player.empty')}</span>
+      </footer>
+    </div>
+  );
+}