diff --git a/README.md b/README.md index e05e0fe..3919fa1 100644 --- a/README.md +++ b/README.md @@ -1435,14 +1435,16 @@ Things I chose while building, with the reasoning: navigations as the offline shell — a typo'd URL used to write the error page into the shell cache. -87. **Chat's chrome docks into the rail (the sidebar seam).** The chat header and composer are - full-bleed bands inside the main pane; at desktop widths that pane starts right at the sidebar, - so both bands ended in a hard vertical edge beside the floating rail card — the 12px gutter - showed the raw scene, and the bands' fill + backdrop blur made it read as a color step at the - seam, with their hairlines starting in mid-air at that edge. Both bands now reach the card's - right edge (the rail's own 12px padding, expanded or collapsed) and their hairlines are inset - to the content box instead of touching the seam; phones keep the plain full-width borders. The - chat suite pins the dock (band edge === card edge, zeroed band borders, inset `::after` +87. **Chat's chrome ends at the rail with a rounded corner (the sidebar seam).** The chat header + and composer are full-bleed bands inside the main pane; at desktop widths that pane starts right + at the sidebar, so both bands ended in a hard vertical edge beside the floating rail card — the + 12px gutter showed the raw scene and the bands' fill + blur made it read as a color step at the + seam. Docking them into the card did not fix it either ("this seam still looks bad" — a straight + cut is still a straight cut): both bands now keep the rail's own 12px gutter and end in the + card's 1.5rem radius on their left side, so the ending is legible as deliberate, with their + hairlines inset instead of touching the seam (the header divider spans the flat part of the + bottom edge, from the corner curve inward). Phones keep the plain full-width borders. The chat + suite pins the geometry (12px gutter, 24px left corners, zeroed band borders, inset `::after` hairlines). The "Chat is set to ignore notes text" banner went away with it — the scope chip already says what the chat may read. diff --git a/app/globals.css b/app/globals.css index b6c3a47..472c023 100644 --- a/app/globals.css +++ b/app/globals.css @@ -691,7 +691,7 @@ /* Chat header: the same glass as the cards, a touch more fill — its title and scope line sit directly over the sky. At lg its divider is the inset hairline - the desktop docking block below draws (::after), so it never hits the seam. */ + the desktop block below draws (::after), so it never hits the seam. */ .aero .chat-header { background-color: rgb(232 248 255 / 0.4); border-bottom: 1px solid rgb(255 255 255 / 0.6); @@ -711,19 +711,19 @@ background: rgb(255 255 255 / 0.65); } -/* Desktop: the chat chrome docks into the rail. The header and the composer - are full-bleed bands inside the main pane; at lg that pane starts exactly - at the sidebar, so both bands used to stop in a hard vertical edge beside - the floating rail card — the scene showed through the 12px gutter and the - bands' own fill/blur made it read as a color step at the seam. They now - reach the card's right edge (the rail's own 12px padding, in the expanded - and the collapsed state alike) and their hairlines span the content box - instead of starting in mid-air at the seam. */ +/* Desktop: the chat chrome ends at the rail with a rounded corner. The header + and the composer are full-bleed bands inside the main pane, which starts + right at the sidebar; a straight vertical edge there read as a hard cut (the + 12px gutter showed the raw scene and the bands' fill/blur made it a color + step at the seam). Both bands now stop at the seam with the rail card's own + 1.5rem radius on their left end, so the ending reads as deliberate, and their + hairlines span the content box instead of touching the seam. Phones keep the + plain full-width borders. */ @media (min-width: 1024px) { .chat-header { - margin-left: -0.75rem; - padding-left: 1.75rem; border-bottom: 0; + border-start-start-radius: 1.5rem; + border-end-start-radius: 1.5rem; } .aero .chat-header { border-bottom: 0; @@ -731,17 +731,18 @@ .chat-header::after { content: ""; position: absolute; - left: 1.75rem; + left: 1.5rem; right: 1rem; bottom: 0; height: 1px; background: var(--glass-border); } - .chat-composer { - margin-left: -0.75rem; + .chat-composer, + .chat-composer-band { + border-start-start-radius: 1.5rem; + border-end-start-radius: 1.5rem; } .chat-composer-band { - padding-left: 3.25rem; border-top: 0; } .aero .chat-composer { @@ -750,7 +751,7 @@ .chat-composer::after { content: ""; position: absolute; - left: 3.25rem; + left: 2.5rem; right: 2.5rem; top: 0; height: 1px; diff --git a/package.json b/package.json index a3a7213..8d9ec00 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "freezmo", - "version": "0.5.6", + "version": "0.5.7", "private": true, "license": "GPL-3.0-only", "scripts": { diff --git a/public/sw.js b/public/sw.js index 67ea82f..b2f3991 100644 --- a/public/sw.js +++ b/public/sw.js @@ -9,7 +9,7 @@ * * Bumping CACHE_VERSION is how a new deploy invalidates old assets. */ -const CACHE_VERSION = "freezmo-v78"; +const CACHE_VERSION = "freezmo-v79"; const SHELL_CACHE = `${CACHE_VERSION}-shell`; const ASSET_CACHE = `${CACHE_VERSION}-assets`; diff --git a/tests/chat-test.mjs b/tests/chat-test.mjs index 8e3591d..357ad42 100644 --- a/tests/chat-test.mjs +++ b/tests/chat-test.mjs @@ -291,12 +291,13 @@ try { await desktop.page.waitForTimeout(400); check("desktop: AI disclaimer under the composer", await desktop.page.getByText("Freezmo uses AI and can make mistakes").isVisible()); - /* The chat chrome docks into the rail: the header and the composer used to - end in a hard vertical edge beside the floating rail card (the scene - showed through the gutter and their fill/blur made it read as a color - step at the seam), and their hairlines started right at that edge. Both - bands now reach the card's right edge and their hairlines are inset to - the content box. */ + /* The chat chrome ends at the rail with the rail card's own radius: the + header and the composer are full-bleed bands inside the main pane, which + starts right at the sidebar — a straight vertical edge there read as a + hard cut (the 12px gutter showed the raw scene and the bands' fill/blur + made it a color step at the seam). Both now keep the rail's 12px gutter + and end in a 1.5rem rounded corner on their left side, with their + hairlines inset instead of touching the seam. */ const seam = await desktop.page.evaluate(() => { const card = document.querySelector(".sidebar-surface"); const header = document.querySelector(".chat-header"); @@ -304,23 +305,28 @@ try { if (!card || !header || !band) return null; const line = (el) => { const cs = getComputedStyle(el, "::after"); - return { content: cs.content, left: parseFloat(cs.left), right: parseFloat(cs.right) }; + return { content: cs.content, left: parseFloat(cs.left) }; }; + const hcs = getComputedStyle(header); return { cardRight: Math.round(card.getBoundingClientRect().right), headerLeft: Math.round(header.getBoundingClientRect().left), bandLeft: Math.round(band.getBoundingClientRect().left), - headerBorder: getComputedStyle(header).borderBottomWidth, + headerRadius: hcs.borderStartStartRadius, + headerEndRadius: hcs.borderEndStartRadius, + headerBorder: hcs.borderBottomWidth, bandBorder: getComputedStyle(band).borderTopWidth, headerLine: line(header), bandLine: line(band.parentElement), }; }); check( - "desktop: chat chrome docks into the rail (no seam)", + "desktop: chat chrome ends in a rounded corner at the seam", seam !== null && - seam.headerLeft === seam.cardRight && - seam.bandLeft === seam.cardRight && + seam.headerLeft === seam.cardRight + 12 && + seam.bandLeft === seam.cardRight + 12 && + seam.headerRadius === "24px" && + seam.headerEndRadius === "24px" && seam.headerBorder === "0px" && seam.bandBorder === "0px" && seam.headerLine.content !== "none" &&