feat(desktop): wrap the web client in a Tauri app

EOF

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/pages/ConnectPage.tsx

@@ -0,0 +1,55 @@
+import { useState, type FormEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useRouter } from '@tanstack/react-router';
+
+import { useDesktop } from '../desktop';
+import { Button, Field, FormError } from '../shared/ui/ui';
+import { AuthLayout } from './AuthLayout';
+import s from './auth.module.css';
+
+export function ConnectPage() {
+  const { t } = useTranslation();
+  const desktop = useDesktop();
+  const router = useRouter();
+  const [address, setAddress] = useState(desktop?.server ?? '');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!desktop) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await desktop.setServer(address);
+      await router.invalidate();
+      await router.navigate({ to: '/login' });
+    } catch (err) {
+      const text = err instanceof Error ? err.message : '';
+      setError(/Invalid|query|fragment|credentials/i.test(text) ? t('server.invalid_address') : t('server.offline'));
+      setBusy(false);
+    }
+  };
+
+  return (
+    <AuthLayout>
+      <h1>{t('server.title')}</h1>
+      <p className={s.lead}>{t('app.tagline')}</p>
+      <form onSubmit={(e) => void submit(e)} noValidate>
+        <Field
+          label={t('server.address')}
+          value={address}
+          onChange={setAddress}
+          autoComplete="url"
+          autoCapitalize="none"
+          spellCheck={false}
+          required
+        />
+        <FormError>{error}</FormError>
+        <Button type="submit" variant="primary" className={s.submit} busy={busy} disabled={!address.trim()}>
+          {t('mobile.connect')}
+        </Button>
+      </form>
+    </AuthLayout>
+  );
+}

apps/web/src/pages/LoginPage.tsx

@@ -3,6 +3,7 @@ import { useState, type FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSession } from '../app/session';
+import { useDesktop } from '../desktop';
 import { useErrorText } from '../shared/lib/errors';
 import { Button, Field, FormError } from '../shared/ui/ui';
 import { AuthLayout } from './AuthLayout';
@@ -11,6 +12,7 @@ import s from './auth.module.css';
 export function LoginPage() {
   const { t } = useTranslation(['auth', 'common']);
   const session = useSession();
+  const desktop = useDesktop();
   const errorText = useErrorText();
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
@@ -41,7 +43,13 @@ export function LoginPage() {
       footer={
         info.data ? (
           <>
-            pipu {info.data.version} · <a href="/android">{t('app.link')}</a>
+            pipu {info.data.version}
+            {desktop ? null : (
+              <>
+                {' · '}
+                <a href="/android">{t('app.link')}</a>
+              </>
+            )}
           </>
         ) : undefined
       }

apps/web/src/pages/SettingsPage.tsx

@@ -1,10 +1,12 @@
 import type { components } from '@pipu/api-client';
 import { unwrap } from '@pipu/core';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
 import { useState, type FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSession, useUser } from '../app/session';
+import { useDesktop } from '../desktop';
 import { useErrorText, useFieldError } from '../shared/lib/errors';
 import { formatDateTime } from '../shared/lib/format';
 import { Button, Field, FormError, Segmented } from '../shared/ui/ui';
@@ -297,6 +299,8 @@ function PasswordSection() {
 function SessionsSection() {
   const { t, i18n } = useTranslation();
   const session = useSession();
+  const desktop = useDesktop();
+  const navigate = useNavigate();
   const queryClient = useQueryClient();
   const errorText = useErrorText();
   const sessions = useQuery({
@@ -333,6 +337,19 @@ function SessionsSection() {
       </div>
       <FormError>{sessions.error || revoke.error ? errorText(sessions.error ?? revoke.error) : null}</FormError>
       <div>
+        {desktop && (
+          <Button
+            onClick={() => {
+              void (async () => {
+                await desktop.clearServer();
+                await session.logout();
+                await navigate({ to: '/connect' });
+              })();
+            }}
+          >
+            {t('mobile.change_server')}
+          </Button>
+        )}
         <Button variant="danger" onClick={() => void session.logout(true)}>
           {t('settings.logout_all')}
         </Button>