feat(console): promote desktop tabs launch (#35972)

packages/console/app/src/component/desktop-promo.css

@@ -0,0 +1,101 @@
+[data-component="desktop-promo"] {
+  --promo-background: hsl(0, 20%, 99%);
+  --promo-background-weak: hsl(0, 8%, 97%);
+  --promo-text: hsl(0, 1%, 39%);
+  --promo-text-strong: hsl(0, 5%, 12%);
+  --promo-border: hsla(0, 100%, 3%, 0.12);
+
+  position: fixed;
+  z-index: 20;
+  right: 1.5rem;
+  bottom: 1.5rem;
+  width: min(28rem, calc(100vw - 2rem));
+  padding: 4px;
+  overflow: hidden;
+  color: var(--promo-text);
+  border: 1px solid var(--promo-border);
+  border-radius: 8px;
+  background: var(--promo-background);
+  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 15%);
+  font-family: var(--font-mono);
+
+  @media (prefers-color-scheme: dark) {
+    --promo-background: hsl(0, 9%, 7%);
+    --promo-background-weak: hsl(0, 6%, 10%);
+    --promo-text: hsl(0, 4%, 71%);
+    --promo-text-strong: hsl(0, 15%, 94%);
+    --promo-border: hsl(0, 4%, 23%);
+  }
+
+  @media (max-width: 40rem) {
+    right: 1rem;
+    bottom: 1rem;
+  }
+
+  [data-slot="desktop-promo-link"] {
+    display: block;
+    color: var(--promo-text);
+    text-decoration: none;
+  }
+
+  [data-slot="desktop-promo-link"]:focus-visible {
+    outline: 2px solid var(--promo-text-strong);
+    outline-offset: -3px;
+  }
+
+  video {
+    display: block;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    border-radius: 4px;
+    background: var(--promo-background-weak);
+  }
+
+  [data-slot="desktop-promo-copy"] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    padding: 1rem;
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+
+  [data-slot="desktop-promo-copy"] strong {
+    color: var(--promo-text-strong);
+    font-weight: 500;
+  }
+
+  [data-slot="desktop-promo-close"] {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    display: grid;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    place-items: center;
+    cursor: pointer;
+    color: white;
+    border: none;
+    border-radius: 0.25rem;
+    background: rgb(0 0 0 / 70%);
+    opacity: 0;
+    transition: opacity 150ms ease, background 150ms ease;
+  }
+
+  &:hover [data-slot="desktop-promo-close"],
+  [data-slot="desktop-promo-close"]:focus-visible {
+    opacity: 1;
+  }
+
+  [data-slot="desktop-promo-close"]:hover {
+    background: rgb(0 0 0 / 90%);
+  }
+
+  @media (hover: none) {
+    [data-slot="desktop-promo-close"] {
+      opacity: 1;
+    }
+  }
+}

packages/console/app/src/component/desktop-promo.tsx

@@ -0,0 +1,48 @@
+import "./desktop-promo.css"
+import { A, useLocation } from "@solidjs/router"
+import { createSignal, Show } from "solid-js"
+import { getRequestEvent } from "solid-js/web"
+import desktopPromoVideo from "~/asset/lander/desktop-tabs-landscape.mp4"
+import { useI18n } from "~/context/i18n"
+import { useLanguage } from "~/context/language"
+import { strip } from "~/lib/language"
+
+export function DesktopPromo() {
+  const i18n = useI18n()
+  const language = useLanguage()
+  const location = useLocation()
+  const [visible, setVisible] = createSignal(true)
+  const request = getRequestEvent()?.request
+  const hostname = request ? new URL(request.url).hostname : typeof window === "object" ? window.location.hostname : ""
+  const primaryHost =
+    hostname === "opencode.ai" || hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1"
+
+  return (
+    <Show
+      when={
+        visible() &&
+        primaryHost &&
+        strip(location.pathname) !== "/download" &&
+        !strip(location.pathname).startsWith("/download/")
+      }
+    >
+      <aside data-component="desktop-promo">
+        <A href={language.route("/download")} data-slot="desktop-promo-link">
+          <video src={desktopPromoVideo} autoplay playsinline loop muted preload="metadata" aria-hidden="true" />
+          <span data-slot="desktop-promo-copy">
+            <strong>{i18n.t("home.promo.title")}</strong>
+            <span>
+              {i18n.t("home.promo.body")} {i18n.t("home.promo.cta")}
+            </span>
+          </span>
+        </A>
+        <button type="button" data-slot="desktop-promo-close" onClick={() => setVisible(false)}>
+          <span class="sr-only">{i18n.t("home.promo.close")}</span>
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+            <path d="M5 5L15 15M15 5L5 15" stroke="currentColor" stroke-width="1.5" />
+          </svg>
+        </button>
+      </aside>
+    </Show>
+  )
+}