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: {} };
+  },
+});