refactor molecule components to use .withProps() subcomponents and extract inline code

- Add UnstyledButton listItem theme variant to replace inline style for border-radius
- Extract subcomponent constants with .withProps() across all molecules
- Replace raw <span /> with Mantine <Flex /> in ResourcePreviewPanel
- Extract inline template literals and expressions to named functions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

clients/web/src/theme/UnstyledButton.ts

@@ -0,0 +1,10 @@
+import { UnstyledButton } from "@mantine/core";
+
+export const ThemeUnstyledButton = UnstyledButton.extend({
+  styles: (_theme, props) => {
+    if (props.variant === "listItem") {
+      return { root: { borderRadius: "var(--mantine-radius-md)" } };
+    }
+    return { root: {} };
+  },
+});

clients/web/src/theme/index.ts

@@ -9,3 +9,4 @@ export { ThemePaper } from "./Paper";
 export { ThemeSelect } from "./Select";
 export { ThemeSwitch } from "./Switch";
 export { ThemeTextInput } from "./TextInput";
+export { ThemeUnstyledButton } from "./UnstyledButton";

clients/web/src/theme/theme.ts

@@ -11,6 +11,7 @@ import {
   ThemeSelect,
   ThemeSwitch,
   ThemeTextInput,
+  ThemeUnstyledButton,
 } from "./index";
 
 export const theme = createTheme({
@@ -45,5 +46,6 @@ export const theme = createTheme({
     Select: ThemeSelect,
     Switch: ThemeSwitch,
     TextInput: ThemeTextInput,
+    UnstyledButton: ThemeUnstyledButton,
   },
 });