Merge pull request 'Virtual displays: the Streamed-screen and session⇄game cards showed on both tabs — they join the Configuration tab' (#353) from worktree-displays-tab-dup into main

web/src/sections/Displays/DisplayCard.tsx

@@ -56,7 +56,10 @@ import { m } from "@/paraglide/messages";
  * (this is the host's *next-connect* behavior). The live-display list + multi-monitor arrangement
  * table below act on whatever is currently streaming.
  */
-export const DisplaySection: FC = () => {
+export const DisplaySection: FC<{
+	/** See [`DisplayTabs`] — the page's other configuration cards, tabbed along with the form. */
+	configurationExtra?: ReactNode;
+}> = ({ configurationExtra }) => {
 	const qc = useQueryClient();
 	const { confirm } = useDialogs();
 	const q = useGetDisplaySettings();
@@ -181,6 +184,7 @@ export const DisplaySection: FC = () => {
 	return (
 		<DisplayTabs
 			dirty={dirty}
+			configurationExtra={configurationExtra}
 			live={<LiveDisplays />}
 			configuration={
 				<>
@@ -245,8 +249,13 @@ export const DisplaySection: FC = () => {
 export const DisplayTabs: FC<{
 	dirty: boolean;
 	configuration: ReactNode;
+	/** Further self-contained cards that belong to the Configuration tab (streamed screen,
+	 * session⇄game lifetime). Rendered as siblings of the config card, INSIDE the tab: parked
+	 * below the tab shell they showed on both tabs, which read as the live tab's content being
+	 * duplicated into Configuration. */
+	configurationExtra?: ReactNode;
 	live: ReactNode;
-}> = ({ dirty, configuration, live }) => (
+}> = ({ dirty, configuration, configurationExtra, live }) => (
 	<Tabs defaultValue="configuration" className="gap-card">
 		<TabsList>
 			<TabsTrigger value="configuration">
@@ -266,10 +275,11 @@ export const DisplayTabs: FC<{
 			<TabsTrigger value="live">{m.display_live()}</TabsTrigger>
 		</TabsList>
 
-		<TabsContent value="configuration">
+		<TabsContent value="configuration" className="flex flex-col gap-card">
 			<Card>
 				<CardContent className="space-y-4">{configuration}</CardContent>
 			</Card>
+			{configurationExtra}
 		</TabsContent>
 
 		<TabsContent value="live">

web/src/sections/Displays/index.tsx

@@ -14,6 +14,10 @@ import { SessionGameCard } from "./SessionGameCard";
  * The session⇄game lifetime card sits here rather than on its own page because it is the same
  * question one step further out: keep-alive decides how long a *display* outlives a disconnect, and
  * this decides whether the *game* does.
+ *
+ * Both extra cards ride INSIDE the Configuration tab (they are policy surfaces): as plain siblings
+ * below the tab shell they were visible from either tab, which read as the Live tab's content
+ * bleeding into Configuration.
  */
 export const SectionDisplays: FC = () => {
 	useLocale();
@@ -21,9 +25,14 @@ export const SectionDisplays: FC = () => {
 		<Section maxWidth={false}>
 			<div className="flex flex-col gap-card">
 				<h1 className="text-2xl font-semibold">{m.nav_displays()}</h1>
-				<DisplaySection />
-				<MonitorCard />
-				<SessionGameCard />
+				<DisplaySection
+					configurationExtra={
+						<>
+							<MonitorCard />
+							<SessionGameCard />
+						</>
+					}
+				/>
 			</div>
 		</Section>
 	);