move RustyWolf tabs into the window title bar

src/app/components/FeatureWindow.tsx

@@ -9,16 +9,24 @@ import type { ReactNode } from "react";
  * copy lives in the `.web-feature-text` paragraph below each window.
  */
 
-function Chrome({ title, children }: { title: string; children: ReactNode }) {
+function Chrome({
+  title,
+  tabs,
+  children,
+}: {
+  title?: string;
+  tabs?: ReactNode;
+  children: ReactNode;
+}) {
   return (
     <div className="fw" aria-hidden="true">
-      <div className="fw-bar">
+      <div className={"fw-bar" + (tabs ? " fw-bar-browser" : "")}>
         <span className="fw-dots">
           <span className="fw-dot" />
           <span className="fw-dot" />
           <span className="fw-dot" />
         </span>
-        <span className="fw-title">{title}</span>
+        {tabs ?? <span className="fw-title">{title}</span>}
       </div>
       <div className="fw-body">{children}</div>
     </div>
@@ -51,13 +59,6 @@ function BrowserBody() {
   const tiles = ["G", "Y", "R", "D", "X"];
   return (
     <div className="fw-browser">
-      <div className="fw-tabs">
-        <span className="fw-tab">
-          <span className="fw-tab-dot" />
-          New Tab
-        </span>
-        <span className="fw-tab-plus">+</span>
-      </div>
       <div className="fw-toolbar">
         <span className="fw-nav">‹</span>
         <span className="fw-nav">›</span>
@@ -96,7 +97,17 @@ export default function FeatureWindow({ variant }: { variant: "game" | "browser"
     );
   }
   return (
-    <Chrome title="RustyWolf — new tab">
+    <Chrome
+      tabs={
+        <div className="fw-tabs">
+          <span className="fw-tab">
+            <span className="fw-tab-dot" />
+            New Tab
+          </span>
+          <span className="fw-tab-plus">+</span>
+        </div>
+      }
+    >
       <BrowserBody />
     </Chrome>
   );