fix(settings): valid HTML in setting tiles; start uploads in an effect (#291)

SettingTile rendered its description in a <p>, and many tiles pass
blocks (badges, Box, Text), so Settings had <div>/<p> inside <p> and
React warned on every page. Render it as a <div>. UploadCardRenderer
called startUpload() during render, which now updates the desktop
taskbar-progress hook mid-render; start it from an effect instead.

Refs #291

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

src/app/components/setting-tile/SettingTile.tsx

@@ -43,7 +43,9 @@ export function SettingTile({ title, description, before, after, children }: Set
           </Text>
         )}
         {description && (
-          <Text className={BreakWord} size="T200" priority="300">
+          // [Gitea #291] A <div>, not a <p>: many tiles pass blocks (badges,
+          // <Box>, <Text>) as the description, which is invalid inside a <p>.
+          <Text as="div" className={BreakWord} size="T200" priority="300">
             {description}
           </Text>
         )}

src/app/components/upload-card/UploadCardRenderer.tsx

@@ -310,9 +310,13 @@ export function UploadCardRenderer({
   const { file } = upload;
   const fileSizeExceeded = file.size >= allowSize;
 
-  if (upload.status === UploadStatus.Idle && !fileSizeExceeded) {
+  // [Gitea #291] Start in an effect, not during render: the desktop taskbar
-    startUpload();
+  // progress hook subscribes to the upload atoms, so a render-time start
-  }
+  // updated another component mid-render (React warning on every image send).
+  const idle = upload.status === UploadStatus.Idle;
+  useEffect(() => {
+    if (idle && !fileSizeExceeded) startUpload();
+  }, [idle, fileSizeExceeded, startUpload]);
 
   const handleSpoiler = (marked: boolean) => {
     setMetadata(fileItem, { ...metadata, markedAsSpoiler: marked });

src/app/features/settings/general/General.tsx

@@ -596,6 +596,10 @@ function Appearance() {
         />
       </SequenceCard>
 
+      <DesktopChromeSetting />
+      <AutostartSetting />
+      <KeychainMirrorSetting />
+
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="Twitter Emoji"
@@ -2852,23 +2856,6 @@ function PackageUpdate({ help }: { help: NonNullable<ReturnType<typeof packageUp
   );
 }
 
-/**
- * [Gitea #290] Desktop-only settings in their own section (they used to sit
- * inside Appearance, between Monochrome Mode and Twitter Emoji). Renders
- * nothing outside the desktop app.
- */
-function DesktopSettings() {
-  if (!isTauriEnv()) return null;
-  return (
-    <Box direction="Column" gap="100">
-      <Text size="L400">Desktop</Text>
-      <AutostartSetting />
-      <KeychainMirrorSetting />
-      <DesktopChromeSetting />
-    </Box>
-  );
-}
-
 function AppUpdates() {
   const { isTauri, status, check, install, installKind } = useTauriUpdater();
   if (!isTauri) return null;
@@ -2977,7 +2964,6 @@ export function General({ requestClose }: GeneralProps) {
               <StorageUsage />
               <SettingsSyncSection />
               <Calls />
-              <DesktopSettings />
               <AppUpdates />
             </Box>
           </PageContent>