move RustyWolf tabs into the window title bar

README.md

@@ -34,7 +34,8 @@ more.
   hero / quick-tile / section cards.
 - **Asset-free feature windows** — the two feature panels (Revival Inc. / RustyWolf) are
   hand-built CSS mock windows instead of screenshots: a little necromancy game scene with a
-  blinking "PRESS START", and a little browser window with a tab strip, toolbar and start page.
+  blinking "PRESS START", and a little browser window with tabs in the title bar, a toolbar
+  and a start page.
 - **Draggable desktop icons** — free placement that snaps to a measured grid, one icon per
   cell, with a follow-the-cursor drag ghost. Icons shrink on cramped viewports so they never
   collide.
@@ -76,7 +77,7 @@ more.
 - **Fonts:** the web theme uses the system sans stack; Monocraft (self-hosted in `public/`) is
   used by the desktop theme's SMP menu and the in-desktop terminal.
 - **Images:** `next/image`
-- **Version:** `2.2.10` (see `package.json`)
+- **Version:** `2.2.11` (see `package.json`)
 - **Dependencies:** `npm audit` reports **0 vulnerabilities**. `next` is kept at a patched
   release (`>=16.3.6`) for the `next/og` RCE, and `brace-expansion` is force-upgraded via
   `overrides`. `braces` (a transitive ESLint/`fast-glob` dependency) has **no upstream fix**,

agents.md

@@ -34,7 +34,7 @@ When in doubt, prefer updating. A stale README **or** agents.md is treated as a
 ## Bump the version on EVERY prompt — also do this every time
 
 Another standing requirement: increment the **patch** version (`x.x.+1`, so
-`2.2.9` → `2.2.10` → …) as part of every task, even the small ones. Keep all of
+`2.2.10` → `2.2.11` → …) as part of every task, even the small ones. Keep all of
 these in sync:
 
 - `package.json` → `"version"`
@@ -56,7 +56,7 @@ frosted-glass **web** site, and an alternate KDE/Plasma **desktop simulation**
   utilities in the components (Tailwind is present via PostCSS but the look is
   hand-written CSS).
 - Path alias: `@/*` → `src/*`.
-- Version: `2.2.10` (see `package.json`).
+- Version: `2.2.11` (see `package.json`).
 
 ### Scripts
 ```bash
@@ -162,8 +162,8 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
   to equal height and share a fixed `16 / 10` `.fw` window (the `FeatureWindow`
   component) — a decorative, **asset-free CSS mock-up** rather than a screenshot:
   Revival Inc. is a little necromancy game scene (night sky, moon, tombstones,
-  blinking "PRESS START") and RustyWolf is a little browser window (tab strip,
-  toolbar, address bar, start page). Both are `aria-hidden` and purely
+  blinking "PRESS START") and RustyWolf is a little browser window (tabs in the
+  title bar, toolbar, address bar, start page). Both are `aria-hidden` and purely
   presentational; the real copy stays in the `.web-feature-text` paragraph below.
   The old raster feature shots (`.web-shot` + `next/image`) were removed from the
   web theme only — `revivalinc.webp` / `RustyWolfPreview.webp` are still used by

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "dvorakmortonxd",
-  "version": "2.2.10",
+  "version": "2.2.11",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "dvorakmortonxd",
-      "version": "2.2.10",
+      "version": "2.2.11",
       "dependencies": {
         "next": "^16.3.8",
         "react": "^19.3.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dvorakmortonxd",
-  "version": "2.2.10",
+  "version": "2.2.11",
   "private": true,
   "scripts": {
     "dev": "node scripts/dev-server.mjs",

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>
   );

src/app/components/WebLayout.tsx

@@ -318,7 +318,7 @@ export default function WebLayout() {
           </Section>
 
           <footer className="web-footer glass">
-            <span className="web-footer-label">v2.2.10</span>
+            <span className="web-footer-label">v2.2.11</span>
             © 2025-2026 Martin Dvořák. All rights reserved (not really I dont care, just
             follow the GPL3.0 License)
           </footer>

src/app/web.css

@@ -457,6 +457,12 @@ html[data-theme="web"] body {
   background: var(--fw-chrome);
   border-bottom: 1px solid var(--glass-border);
 }
+/* Browser variant: the tab strip lives in the title bar (Chrome/Firefox style). */
+.fw-bar-browser {
+  gap: 8px;
+  padding: 0 8px 0 12px;
+  border-bottom: none;
+}
 .fw-dots {
   display: flex;
   gap: 6px;
@@ -649,9 +655,10 @@ html[data-theme="web"] body {
 .fw-tabs {
   display: flex;
   align-items: flex-end;
+  align-self: stretch;
   gap: 5px;
-  height: 26px;
-  padding: 5px 10px 0;
+  min-width: 0;
+  flex: 1;
 }
 .fw-tab {
   display: inline-flex;
@@ -661,7 +668,8 @@ html[data-theme="web"] body {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  padding: 3px 11px;
+  padding: 7px 12px 6px;
+  margin-bottom: -1px;
   border-radius: 8px 8px 0 0;
   border: 1px solid var(--btn-border, var(--glass-border));
   border-bottom: none;