chore: update/make more clear connect flow

src/config/instances.ts

@@ -98,6 +98,11 @@ export function upsertInstance(url: string, name?: string): Instance {
   return inst;
 }
 
+/** Clear a backend's stored session without forgetting the instance itself. */
+export function clearInstanceAuth(id: string): void {
+  localStorage.removeItem(scopedKey('auth', id));
+}
+
 /** Remove a backend and wipe every scoped key it owns. */
 export function removeInstance(id: string): void {
   writeRegistry(readRegistry().filter((i) => i.id !== id));

src/features/connect/ConnectPage.tsx

@@ -2,11 +2,11 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import type { FetchBaseQueryError } from '@reduxjs/toolkit/query';
-import { Card, TextField, Button, Callout, Badge } from '@olly/modern-sk';
+import { Card, TextField, Button, Callout, Badge, Dialog } from '@olly/modern-sk';
 import { Icon } from '../../components/common/Icon';
 import { useAppDispatch } from '../../hooks/useAppDispatch';
+import { useConnectionStatus } from '../../hooks/useConnectionStatus';
 import { setTokens, setUser } from '../../store/slices/auth';
-import { setApiBaseUrl } from '../../config/runtime-config';
 import {
   useLoginMutation,
   useRegisterMutation,
@@ -17,10 +17,27 @@ import {
   getActiveInstanceId,
   setActiveInstanceId,
   removeInstance,
+  clearInstanceAuth,
+  upsertInstance,
+  type Instance,
 } from '../../config/instances';
 
 type Mode = 'login' | 'register';
 
+const HEALTH_VARIANTS = {
+  connected: 'lime',
+  connecting: 'neutral',
+  disconnected: 'ember',
+  error: 'ember',
+} as const;
+
+const HEALTH_KEY = {
+  connected: 'conn.connected',
+  connecting: 'conn.connecting',
+  disconnected: 'conn.disconnected',
+  error: 'conn.error',
+} as const;
+
 /** Map an RTKQ login failure to a user-facing i18n key. */
 function resolveLoginError(err: unknown): string {
   const e = err as FetchBaseQueryError | undefined;
@@ -43,6 +60,121 @@ function resolveRegisterError(err: unknown): string {
   return 'connect.errors.registerFailed';
 }
 
+function InstanceRow({
+  inst,
+  selected,
+  onSelect,
+  onLogout,
+  onRemove,
+}: {
+  inst: Instance;
+  selected: boolean;
+  onSelect: () => void;
+  onLogout: () => void;
+  onRemove: () => void;
+}) {
+  const { t } = useTranslation();
+  const status = useConnectionStatus(inst.baseUrl);
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.625rem',
+        padding: '0.375rem 0',
+      }}
+    >
+      <Badge variant={HEALTH_VARIANTS[status]} dot>
+        {t(HEALTH_KEY[status])}
+      </Badge>
+      <div style={{ minWidth: 0, flex: 1 }}>
+        <div
+          style={{
+            fontSize: '0.875rem',
+            fontWeight: 600,
+            color: 'var(--color-text-1)',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {inst.name}
+        </div>
+        <div
+          style={{
+            fontSize: '0.75rem',
+            color: 'var(--color-text-3)',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {inst.baseUrl}
+        </div>
+      </div>
+      {selected ? (
+        <Badge variant="outline">{t('connect.domains.selected')}</Badge>
+      ) : (
+        <Button variant="ghost" size="sm" onClick={onSelect}>
+          {t('connect.domains.use')}
+        </Button>
+      )}
+      <Dialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        title={t('connect.removeDialog.title')}
+        description={t('connect.removeDialog.description', {
+          name: inst.name,
+        })}
+        trigger={
+          <button
+            type="button"
+            className="iconbtn sm"
+            title={t('connect.domains.forgetTitle')}
+          >
+            <Icon name="trash" />
+          </button>
+        }
+        footer={
+          <div
+            style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }}
+          >
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setDialogOpen(false)}
+            >
+              {t('connect.removeDialog.cancel')}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                setDialogOpen(false);
+                onLogout();
+              }}
+            >
+              {t('connect.removeDialog.logout')}
+            </Button>
+            <Button
+              variant="ember"
+              size="sm"
+              onClick={() => {
+                setDialogOpen(false);
+                onRemove();
+              }}
+            >
+              {t('connect.removeDialog.removeAndLogout')}
+            </Button>
+          </div>
+        }
+      />
+    </div>
+  );
+}
+
 export function ConnectPage() {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
@@ -50,10 +182,15 @@ export function ConnectPage() {
 
   const [rev, setRev] = useState(0);
   const instances = listInstances();
-  const activeId = getActiveInstanceId();
+
+  const [selectedId, setSelectedId] = useState<string | null>(() =>
+    getActiveInstanceId(),
+  );
+  const selectedInstance = instances.find((i) => i.id === selectedId) ?? null;
+
+  const [addUrl, setAddUrl] = useState('https://');
 
   const [mode, setMode] = useState<Mode>('login');
-  const [apiUrl, setApiUrl] = useState('https://');
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState<string | null>(null);
@@ -67,23 +204,40 @@ export function ConnectPage() {
     setError(null);
   };
 
-  const switchTo = (id: string) => {
+  // Switching the active instance and reloading lets the app pick the saved
+  // session for that instance back up (if any); if it has none, ProtectedRoute
+  // bounces back here and `selectedId` defaults to it, surfacing the login card.
+  const selectInstance = (id: string) => {
     setActiveInstanceId(id);
     window.location.assign('/');
   };
 
-  const forget = (id: string) => {
+  const handleAdd = (e: React.FormEvent) => {
+    e.preventDefault();
+    const url = addUrl.trim();
+    if (!url || url === 'https://') return;
+    const inst = upsertInstance(url);
+    setActiveInstanceId(inst.id);
+    setAddUrl('https://');
+    setSelectedId(inst.id);
+    setRev((r) => r + 1);
+  };
+
+  const handleLogout = (id: string) => {
+    clearInstanceAuth(id);
+    setRev((r) => r + 1);
+  };
+
+  const handleRemove = (id: string) => {
     removeInstance(id);
+    if (selectedId === id) setSelectedId(getActiveInstanceId());
     setRev((r) => r + 1);
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (!selectedInstance) return;
     setError(null);
-    // Point the API layer at this backend *before* logging in — baseQuery reads
-    // the active instance's URL at request time. Auth tokens then persist under
-    // that instance's namespace, never bleeding across servers.
-    setApiBaseUrl(apiUrl);
 
     try {
       const action =
@@ -145,204 +299,160 @@ export function ConnectPage() {
           <Icon name="vinyl-record" fill /> MCMA
         </h1>
 
-        {instances.length > 0 && (
-          <Card>
-            <div
-              style={{
-                padding: '1.25rem 1.5rem',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '0.5rem',
-              }}
-            >
-              <span className="msk-label" style={{ marginBottom: '0.25rem' }}>
-                {t('connect.savedInstances')}
-              </span>
-              {instances.map((inst) => (
-                <div
-                  key={inst.id}
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '0.625rem',
-                    padding: '0.375rem 0',
-                  }}
-                >
-                  <span
-                    className={`led ${inst.id === activeId ? 'online' : 'offline'}`}
-                    style={{
-                      width: 8,
-                      height: 8,
-                      borderRadius: '50%',
-                      background:
-                        inst.id === activeId ? 'var(--lime)' : 'var(--fg-3)',
-                      boxShadow:
-                        inst.id === activeId ? '0 0 6px var(--lime)' : 'none',
-                      flexShrink: 0,
-                    }}
-                  />
-                  <div style={{ minWidth: 0, flex: 1 }}>
-                    <div
-                      style={{
-                        fontSize: '0.875rem',
-                        fontWeight: 600,
-                        color: 'var(--color-text-1)',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                      }}
-                    >
-                      {inst.name}
-                    </div>
-                    <div
-                      style={{
-                        fontSize: '0.75rem',
-                        color: 'var(--color-text-3)',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                      }}
-                    >
-                      {inst.baseUrl}
-                    </div>
-                  </div>
-                  {inst.id === activeId ? (
-                    <Badge variant="lime">{t('connect.active')}</Badge>
-                  ) : (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => switchTo(inst.id)}
-                    >
-                      {t('connect.use')}
-                    </Button>
-                  )}
-                  <button
-                    type="button"
-                    className="iconbtn sm"
-                    onClick={() => forget(inst.id)}
-                    title={t('connect.forgetTitle')}
-                  >
-                    <Icon name="trash" />
-                  </button>
-                </div>
-              ))}
-            </div>
-          </Card>
-        )}
-
         <Card>
-          <form
+          <div
-            onSubmit={handleSubmit}
             style={{
+              padding: '1.25rem 1.5rem',
               display: 'flex',
               flexDirection: 'column',
-              gap: '1rem',
+              gap: '0.5rem',
-              padding: '1.5rem',
             }}
           >
-            <span className="msk-label">
+            {instances.length > 0 && (
-              {mode === 'register'
+              <>
-                ? t('connect.form.registerTitle')
+                <span className="msk-label" style={{ marginBottom: '0.25rem' }}>
-                : t('connect.form.title')}
+                  {t('connect.domains.title')}
-            </span>
-            <div>
-              <label style={labelStyle}>{t('connect.form.serverUrl')}</label>
-              <TextField
-                value={apiUrl}
-                onChange={(e) => setApiUrl(e.target.value)}
-                placeholder="https://your-server.example.com"
-                required
-              />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('connect.form.username')}</label>
-              <TextField
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                placeholder="username"
-                autoComplete="username"
-                required
-              />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('connect.form.password')}</label>
-              <TextField
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="password"
-                autoComplete={
-                  mode === 'register' ? 'new-password' : 'current-password'
-                }
-                required
-              />
-              {mode === 'register' && (
-                <span
-                  style={{
-                    display: 'block',
-                    fontSize: '0.75rem',
-                    color: 'var(--color-text-3)',
-                    marginTop: '0.375rem',
-                  }}
-                >
-                  {t('connect.form.passwordHint')}
                 </span>
-              )}
+                {instances.map((inst) => (
-            </div>
+                  <InstanceRow
-            {error && <Callout variant="danger">{t(error)}</Callout>}
+                    key={inst.id}
-            <Button
+                    inst={inst}
-              type="submit"
+                    selected={inst.id === selectedId}
-              variant="primary"
+                    onSelect={() => selectInstance(inst.id)}
-              disabled={isLoading}
+                    onLogout={() => handleLogout(inst.id)}
-              style={{ marginTop: '0.5rem' }}
+                    onRemove={() => handleRemove(inst.id)}
+                  />
+                ))}
+              </>
+            )}
+            <form
+              onSubmit={handleAdd}
+              style={{
+                display: 'flex',
+                gap: '0.5rem',
+                marginTop: instances.length > 0 ? '0.5rem' : 0,
+              }}
             >
-              {isLoading
+              <TextField
-                ? mode === 'register'
+                value={addUrl}
-                  ? t('connect.form.registering')
+                onChange={(e) => setAddUrl(e.target.value)}
-                  : t('connect.form.submitting')
+                placeholder={t('connect.domains.addPlaceholder')}
-                : mode === 'register'
+                style={{ flex: 1 }}
-                  ? t('connect.form.registerSubmit')
+              />
-                  : t('connect.form.submit')}
+              <Button type="submit" variant="primary">
-            </Button>
+                <Icon name="plus" /> {t('connect.domains.addButton')}
+              </Button>
+            </form>
+          </div>
+        </Card>
 
-            {REGISTRATION_ENABLED && (
+        {selectedInstance && (
-              <div
+          <Card>
-                style={{
+            <form
-                  textAlign: 'center',
+              onSubmit={handleSubmit}
-                  fontSize: '0.8125rem',
+              style={{
-                  color: 'var(--color-text-3)',
+                display: 'flex',
-                }}
+                flexDirection: 'column',
-              >
+                gap: '1rem',
-                {mode === 'register' ? (
+                padding: '1.5rem',
-                  <>
+              }}
-                    {t('connect.form.haveAccount')}{' '}
+            >
-                    <Button
+              <span className="msk-label">
-                      type="button"
+                {mode === 'register'
-                      variant="ghost"
+                  ? t('connect.login.registerTitle', {
-                      size="sm"
+                      name: selectedInstance.name,
-                      onClick={() => switchMode('login')}
+                    })
-                    >
+                  : t('connect.login.title', { name: selectedInstance.name })}
-                      {t('connect.form.signInLink')}
+              </span>
-                    </Button>
+              <div>
-                  </>
+                <label style={labelStyle}>{t('connect.login.username')}</label>
-                ) : (
+                <TextField
-                  <>
+                  value={username}
-                    {t('connect.form.noAccount')}{' '}
+                  onChange={(e) => setUsername(e.target.value)}
-                    <Button
+                  placeholder="username"
-                      type="button"
+                  autoComplete="username"
-                      variant="ghost"
+                  required
-                      size="sm"
+                />
-                      onClick={() => switchMode('register')}
+              </div>
-                    >
+              <div>
-                      {t('connect.form.registerLink')}
+                <label style={labelStyle}>{t('connect.login.password')}</label>
-                    </Button>
+                <TextField
-                  </>
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="password"
+                  autoComplete={
+                    mode === 'register' ? 'new-password' : 'current-password'
+                  }
+                  required
+                />
+                {mode === 'register' && (
+                  <span
+                    style={{
+                      display: 'block',
+                      fontSize: '0.75rem',
+                      color: 'var(--color-text-3)',
+                      marginTop: '0.375rem',
+                    }}
+                  >
+                    {t('connect.login.passwordHint')}
+                  </span>
                 )}
               </div>
-            )}
+              {error && <Callout variant="danger">{t(error)}</Callout>}
-          </form>
+              <Button
-        </Card>
+                type="submit"
+                variant="primary"
+                disabled={isLoading}
+                style={{ marginTop: '0.5rem' }}
+              >
+                {isLoading
+                  ? mode === 'register'
+                    ? t('connect.login.registering')
+                    : t('connect.login.submitting')
+                  : mode === 'register'
+                    ? t('connect.login.registerSubmit')
+                    : t('connect.login.submit')}
+              </Button>
+
+              {REGISTRATION_ENABLED && (
+                <div
+                  style={{
+                    textAlign: 'center',
+                    fontSize: '0.8125rem',
+                    color: 'var(--color-text-3)',
+                  }}
+                >
+                  {mode === 'register' ? (
+                    <>
+                      {t('connect.login.haveAccount')}{' '}
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => switchMode('login')}
+                      >
+                        {t('connect.login.signInLink')}
+                      </Button>
+                    </>
+                  ) : (
+                    <>
+                      {t('connect.login.noAccount')}{' '}
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => switchMode('register')}
+                      >
+                        {t('connect.login.registerLink')}
+                      </Button>
+                    </>
+                  )}
+                </div>
+              )}
+            </form>
+          </Card>
+        )}
       </div>
     </div>
   );

src/hooks/useConnectionStatus.ts

@@ -3,7 +3,9 @@ import { getApiBaseUrl } from '../config/runtime-config';
 
 type ConnectionStatus = 'connected' | 'connecting' | 'disconnected' | 'error';
 
-export function useConnectionStatus() {
+/** Pings `${baseUrl}/health` (defaults to the active instance's base URL). */
+export function useConnectionStatus(baseUrl?: string) {
+  const url = baseUrl ?? getApiBaseUrl();
   const [status, setStatus] = useState<ConnectionStatus>('connecting');
 
   useEffect(() => {
@@ -13,7 +15,7 @@ export function useConnectionStatus() {
       if (cancelled) return;
       setStatus('connecting');
       try {
-        const res = await fetch(`${getApiBaseUrl()}/health`, {
+        const res = await fetch(`${url}/health`, {
           signal: AbortSignal.timeout(5000),
         });
         if (!cancelled) setStatus(res.ok ? 'connected' : 'error');
@@ -30,7 +32,7 @@ export function useConnectionStatus() {
       cancelled = true;
       clearInterval(interval);
     };
-  }, []);
+  }, [url]);
 
   return status;
 }

src/i18n/locales/en.ts

@@ -25,25 +25,36 @@ const en = {
     signOut: 'Sign out',
   },
   connect: {
-    savedInstances: 'Saved instances',
+    domains: {
-    active: 'active',
+      title: 'Saved instances',
-    use: 'Use',
+      addPlaceholder: 'https://your-server.example.com',
-    forgetTitle: 'Forget this instance',
+      addButton: 'Add instance',
-    form: {
+      selected: 'Selected',
-      title: 'Connect to a backend',
+      use: 'Use',
-      registerTitle: 'Create an account',
+      forgetTitle: 'Remove this instance',
-      serverUrl: 'Server URL',
+    },
+    removeDialog: {
+      title: 'Remove cached data?',
+      description:
+        'This removes "{{name}}" from your saved instances and clears its cached data on this device.',
+      cancel: 'Cancel',
+      logout: 'Just log out',
+      removeAndLogout: 'Remove data & log out',
+    },
+    login: {
+      title: 'Log in to {{name}}',
+      registerTitle: 'Sign up for {{name}}',
       username: 'Username',
       password: 'Password',
       passwordHint: 'At least 8 characters.',
-      submit: 'Connect',
+      submit: 'Log in',
-      submitting: 'Connecting…',
+      submitting: 'Logging in…',
-      registerSubmit: 'Create account',
+      registerSubmit: 'Sign up',
-      registering: 'Creating account…',
+      registering: 'Signing up…',
       noAccount: "Don't have an account?",
       registerLink: 'Sign up',
       haveAccount: 'Already have an account?',
-      signInLink: 'Sign in',
+      signInLink: 'Log in',
     },
     errors: {
       unreachable:

src/i18n/locales/ru.ts

@@ -27,21 +27,32 @@ const ru: Translations = {
     signOut: 'Выйти',
   },
   connect: {
-    savedInstances: 'Сохранённые серверы',
+    domains: {
-    active: 'активный',
+      title: 'Сохранённые серверы',
-    use: 'Выбрать',
+      addPlaceholder: 'https://your-server.example.com',
-    forgetTitle: 'Забыть этот сервер',
+      addButton: 'Добавить сервер',
-    form: {
+      selected: 'Выбран',
-      title: 'Подключиться к серверу',
+      use: 'Выбрать',
-      registerTitle: 'Создать аккаунт',
+      forgetTitle: 'Удалить этот сервер',
-      serverUrl: 'URL сервера',
+    },
+    removeDialog: {
+      title: 'Удалить локальные данные?',
+      description:
+        'Сервер «{{name}}» будет удалён из сохранённых, а его данные на этом устройстве — очищены.',
+      cancel: 'Отмена',
+      logout: 'Просто выйти',
+      removeAndLogout: 'Удалить данные и выйти',
+    },
+    login: {
+      title: 'Вход в {{name}}',
+      registerTitle: 'Регистрация на {{name}}',
       username: 'Имя пользователя',
       password: 'Пароль',
       passwordHint: 'Не менее 8 символов.',
-      submit: 'Подключиться',
+      submit: 'Войти',
-      submitting: 'Подключение…',
+      submitting: 'Вход…',
-      registerSubmit: 'Создать аккаунт',
+      registerSubmit: 'Зарегистрироваться',
-      registering: 'Создание аккаунта…',
+      registering: 'Регистрация…',
       noAccount: 'Нет аккаунта?',
       registerLink: 'Зарегистрироваться',
       haveAccount: 'Уже есть аккаунт?',