wrap settings row groups with styled container

packages/app/src/components/settings-general.tsx

@@ -48,153 +48,159 @@ export const SettingsGeneral: Component = () => {
         <div class="flex flex-col gap-1">
           <h3 class="text-14-medium text-text-strong pb-2">Appearance</h3>
 
-          <SettingsRow title="Appearance" description="Customise how OpenCode looks on your device">
-            <Select
-              options={colorSchemeOptions}
-              current={colorSchemeOptions.find((o) => o.value === theme.colorScheme())}
-              value={(o) => o.value}
-              label={(o) => o.label}
-              onSelect={(option) => option && theme.setColorScheme(option.value)}
-              variant="secondary"
-              size="small"
-            />
-          </SettingsRow>
-
-          <SettingsRow
-            title="Theme"
-            description={
-              <>
-                Customise how OpenCode is themed.{" "}
-                <a href="#" class="text-text-interactive-base">
-                  Learn more
-                </a>
-              </>
-            }
-          >
-            <Select
-              options={themeOptions()}
-              current={themeOptions().find((o) => o.id === theme.themeId())}
-              value={(o) => o.id}
-              label={(o) => o.name}
-              onSelect={(option) => {
-                if (!option) return
-                theme.setTheme(option.id)
-              }}
-              onHighlight={(option) => {
-                if (!option) return
-                theme.previewTheme(option.id)
-                return () => theme.cancelPreview()
-              }}
-              variant="secondary"
-              size="small"
-            />
-          </SettingsRow>
-
-          <SettingsRow title="Font" description="Customise the mono font used in code blocks">
-            <Select
-              options={fontOptions}
-              current={fontOptions.find((o) => o.value === settings.appearance.font())}
-              value={(o) => o.value}
-              label={(o) => o.label}
-              onSelect={(option) => option && settings.appearance.setFont(option.value)}
-              variant="secondary"
-              size="small"
-            />
-          </SettingsRow>
+          <div class="bg-surface-raised-base px-4 rounded-lg">
+            <SettingsRow title="Appearance" description="Customise how OpenCode looks on your device">
+              <Select
+                options={colorSchemeOptions}
+                current={colorSchemeOptions.find((o) => o.value === theme.colorScheme())}
+                value={(o) => o.value}
+                label={(o) => o.label}
+                onSelect={(option) => option && theme.setColorScheme(option.value)}
+                variant="secondary"
+                size="small"
+              />
+            </SettingsRow>
+
+            <SettingsRow
+              title="Theme"
+              description={
+                <>
+                  Customise how OpenCode is themed.{" "}
+                  <a href="#" class="text-text-interactive-base">
+                    Learn more
+                  </a>
+                </>
+              }
+            >
+              <Select
+                options={themeOptions()}
+                current={themeOptions().find((o) => o.id === theme.themeId())}
+                value={(o) => o.id}
+                label={(o) => o.name}
+                onSelect={(option) => {
+                  if (!option) return
+                  theme.setTheme(option.id)
+                }}
+                onHighlight={(option) => {
+                  if (!option) return
+                  theme.previewTheme(option.id)
+                  return () => theme.cancelPreview()
+                }}
+                variant="secondary"
+                size="small"
+              />
+            </SettingsRow>
+
+            <SettingsRow title="Font" description="Customise the mono font used in code blocks">
+              <Select
+                options={fontOptions}
+                current={fontOptions.find((o) => o.value === settings.appearance.font())}
+                value={(o) => o.value}
+                label={(o) => o.label}
+                onSelect={(option) => option && settings.appearance.setFont(option.value)}
+                variant="secondary"
+                size="small"
+              />
+            </SettingsRow>
+          </div>
         </div>
 
         {/* System notifications Section */}
         <div class="flex flex-col gap-1">
           <h3 class="text-14-medium text-text-strong pb-2">System notifications</h3>
 
-          <SettingsRow
-            title="Agent"
-            description="Show system notification when the agent is complete or needs attention"
-          >
-            <Switch
-              checked={settings.notifications.agent()}
-              onChange={(checked) => settings.notifications.setAgent(checked)}
-            />
-          </SettingsRow>
-
-          <SettingsRow title="Permissions" description="Show system notification when a permission is required">
-            <Switch
-              checked={settings.notifications.permissions()}
-              onChange={(checked) => settings.notifications.setPermissions(checked)}
-            />
-          </SettingsRow>
-
-          <SettingsRow title="Errors" description="Show system notification when an error occurs">
-            <Switch
-              checked={settings.notifications.errors()}
-              onChange={(checked) => settings.notifications.setErrors(checked)}
-            />
-          </SettingsRow>
+          <div class="bg-surface-raised-base px-4 rounded-lg">
+            <SettingsRow
+              title="Agent"
+              description="Show system notification when the agent is complete or needs attention"
+            >
+              <Switch
+                checked={settings.notifications.agent()}
+                onChange={(checked) => settings.notifications.setAgent(checked)}
+              />
+            </SettingsRow>
+
+            <SettingsRow title="Permissions" description="Show system notification when a permission is required">
+              <Switch
+                checked={settings.notifications.permissions()}
+                onChange={(checked) => settings.notifications.setPermissions(checked)}
+              />
+            </SettingsRow>
+
+            <SettingsRow title="Errors" description="Show system notification when an error occurs">
+              <Switch
+                checked={settings.notifications.errors()}
+                onChange={(checked) => settings.notifications.setErrors(checked)}
+              />
+            </SettingsRow>
+          </div>
         </div>
 
         {/* Sound effects Section */}
         <div class="flex flex-col gap-1">
           <h3 class="text-14-medium text-text-strong pb-2">Sound effects</h3>
 
-          <SettingsRow title="Agent" description="Play sound when the agent is complete or needs attention">
-            <Select
-              options={soundOptions}
-              current={soundOptions.find((o) => o.id === settings.sounds.agent())}
-              value={(o) => o.id}
-              label={(o) => o.label}
-              onHighlight={(option) => {
-                if (!option) return
-                playSound(option.src)
-              }}
-              onSelect={(option) => {
-                if (!option) return
-                settings.sounds.setAgent(option.id)
-                playSound(option.src)
-              }}
-              variant="secondary"
-              size="small"
-            />
-          </SettingsRow>
-
-          <SettingsRow title="Permissions" description="Play sound when a permission is required">
-            <Select
-              options={soundOptions}
-              current={soundOptions.find((o) => o.id === settings.sounds.permissions())}
-              value={(o) => o.id}
-              label={(o) => o.label}
-              onHighlight={(option) => {
-                if (!option) return
-                playSound(option.src)
-              }}
-              onSelect={(option) => {
-                if (!option) return
-                settings.sounds.setPermissions(option.id)
-                playSound(option.src)
-              }}
-              variant="secondary"
-              size="small"
-            />
-          </SettingsRow>
-
-          <SettingsRow title="Errors" description="Play sound when an error occurs">
-            <Select
-              options={soundOptions}
-              current={soundOptions.find((o) => o.id === settings.sounds.errors())}
-              value={(o) => o.id}
-              label={(o) => o.label}
-              onHighlight={(option) => {
-                if (!option) return
-                playSound(option.src)
-              }}
-              onSelect={(option) => {
-                if (!option) return
-                settings.sounds.setErrors(option.id)
-                playSound(option.src)
-              }}
-              variant="secondary"
-              size="small"
-            />
-          </SettingsRow>
+          <div class="bg-surface-raised-base px-4 rounded-lg">
+            <SettingsRow title="Agent" description="Play sound when the agent is complete or needs attention">
+              <Select
+                options={soundOptions}
+                current={soundOptions.find((o) => o.id === settings.sounds.agent())}
+                value={(o) => o.id}
+                label={(o) => o.label}
+                onHighlight={(option) => {
+                  if (!option) return
+                  playSound(option.src)
+                }}
+                onSelect={(option) => {
+                  if (!option) return
+                  settings.sounds.setAgent(option.id)
+                  playSound(option.src)
+                }}
+                variant="secondary"
+                size="small"
+              />
+            </SettingsRow>
+
+            <SettingsRow title="Permissions" description="Play sound when a permission is required">
+              <Select
+                options={soundOptions}
+                current={soundOptions.find((o) => o.id === settings.sounds.permissions())}
+                value={(o) => o.id}
+                label={(o) => o.label}
+                onHighlight={(option) => {
+                  if (!option) return
+                  playSound(option.src)
+                }}
+                onSelect={(option) => {
+                  if (!option) return
+                  settings.sounds.setPermissions(option.id)
+                  playSound(option.src)
+                }}
+                variant="secondary"
+                size="small"
+              />
+            </SettingsRow>
+
+            <SettingsRow title="Errors" description="Play sound when an error occurs">
+              <Select
+                options={soundOptions}
+                current={soundOptions.find((o) => o.id === settings.sounds.errors())}
+                value={(o) => o.id}
+                label={(o) => o.label}
+                onHighlight={(option) => {
+                  if (!option) return
+                  playSound(option.src)
+                }}
+                onSelect={(option) => {
+                  if (!option) return
+                  settings.sounds.setErrors(option.id)
+                  playSound(option.src)
+                }}
+                variant="secondary"
+                size="small"
+              />
+            </SettingsRow>
+          </div>
         </div>
       </div>
     </div>