Allow desktop app to connect to selfhosted servers (#4902)

# Description of Changes Changes the desktop app to allow connections to self-hosted servers on first startup. This was quite involved and hit loads of CORS issues all through the stack, but I think it's working now. This also changes the bundled backend to spawn on an OS-decided port rather than always spawning on `8080`, which means that the user can have other things running on port `8080` now and the app will still work fine. There were quite a few places that needed to be updated to decouple the app from explicitly using `8080` and I was originally going to split those changes out into another PR (#4939), but I couldn't get it working independently in the time I had, so the diff here is just going to be complex and contian two distinct changes - sorry 🙁
2026-07-17 11:45:05 +02:00 · 2025-11-20 10:03:34 +00:00
parent 75414b89f9
commit f4725b98b0
43 changed files with 3209 additions and 218 deletions
@@ -0,0 +1,66 @@
+import React from 'react';
+import { Stack, Button, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import CloudIcon from '@mui/icons-material/Cloud';
+import ComputerIcon from '@mui/icons-material/Computer';
+
+interface ModeSelectionProps {
+  onSelect: (mode: 'offline' | 'server') => void;
+  loading: boolean;
+}
+
+export const ModeSelection: React.FC<ModeSelectionProps> = ({ onSelect, loading }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <Button
+        size="xl"
+        variant="default"
+        onClick={() => onSelect('offline')}
+        disabled={loading}
+        leftSection={<ComputerIcon />}
+        styles={{
+          root: {
+            height: 'auto',
+            padding: '1.25rem',
+          },
+          inner: {
+            justifyContent: 'flex-start',
+          },
+        }}
+      >
+        <div style={{ textAlign: 'left', flex: 1 }}>
+          <Text fw={600} size="md">{t('setup.mode.offline.title', 'Use Offline')}</Text>
+          <Text size="sm" c="dimmed" fw={400}>
+            {t('setup.mode.offline.description', 'Run locally without an internet connection')}
+          </Text>
+        </div>
+      </Button>
+
+      <Button
+        size="xl"
+        variant="default"
+        onClick={() => onSelect('server')}
+        disabled={loading}
+        leftSection={<CloudIcon />}
+        styles={{
+          root: {
+            height: 'auto',
+            padding: '1.25rem',
+          },
+          inner: {
+            justifyContent: 'flex-start',
+          },
+        }}
+      >
+        <div style={{ textAlign: 'left', flex: 1 }}>
+          <Text fw={600} size="md">{t('setup.mode.server.title', 'Connect to Server')}</Text>
+          <Text size="sm" c="dimmed" fw={400}>
+            {t('setup.mode.server.description', 'Connect to a remote Stirling PDF server')}
+          </Text>
+        </div>
+      </Button>
+    </Stack>
+  );
+};