From e89f5ce8e6cfb72e07c69cd3dd8e3d24c0c5891e Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Sat, 23 May 2026 10:08:10 -0700
Subject: [PATCH] feat(web/ui): migrate IntakeUrlBar input to common Input
 primitive

The IntakeUrlBar URL field was a raw <input> with ~10 lines of inline
styling carrying its own border/radius/background/font-size. This was
the last component on the dashboard surface still using a raw input
after UI5\u2013UI7, so the ratchet caught it as remaining drift.

Migrated:
  - Raw <input> + inline style block \u2192 common <Input> primitive.
  - Preserved the absolute-positioned content-type badge overlay by
    keeping the wrapper <div style={{ position: 'relative' }}> and
    using Input's style prop to right-pad when a badge is present.
  - All attributes (type=url, value, onChange, onKeyDown, placeholder,
    aria-label) preserved as-is so no behavioral change.

Ratchet impact:
  raw interactive controls: 14 \u2192 13 (\u20131)

Lowered scripts/ui-drift-baseline.json from 14 to 13 with this commit
so the CI gate now enforces that bound. The remaining 13 raw controls
are intentional and tracked:
  - NoteEditor toolbar buttons (9)  \u2014 icon-tight, deliberately raw
  - ArtifactPanel hidden file input (1) \u2014 must remain <input hidden>
  - Search-mode radios (2) \u2014 would change UX to migrate to Radix RadioGroup
  - NoteVersionsPanel disclosure button (1) \u2014 tight inline styling

Verified:
  - pnpm --filter @notelett/web run typecheck \u2014 ok
  - pnpm --filter @notelett/web run test \u2014 96/96 pass
  - bash scripts/ui-drift-ratchet.sh \u2014 all categories at new baseline
---
 scripts/ui-drift-baseline.json      |  4 ++--
 web/src/components/IntakeUrlBar.tsx | 16 ++++------------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/scripts/ui-drift-baseline.json b/scripts/ui-drift-baseline.json
index df6be3a..5b2707f 100644
--- a/scripts/ui-drift-baseline.json
+++ b/scripts/ui-drift-baseline.json
@@ -1,6 +1,6 @@
 {
-  "//": "Baseline UI drift counts. Updated 2026-05-23T08:52:00Z by scripts/ui-drift-ratchet.sh --update. Commit alongside the migration that lowered the counts.",
-  "raw_interactive_controls": 14,
+  "//": "Baseline UI drift counts. Updated 2026-05-23T17:07:35Z by scripts/ui-drift-ratchet.sh --update. Commit alongside the migration that lowered the counts.",
+  "raw_interactive_controls": 13,
   "legacy_global_surface_classes": 0,
   "hardcoded_color_literals": 0,
   "direct_bytelyst_ui_imports_outside_adapter": 0
diff --git a/web/src/components/IntakeUrlBar.tsx b/web/src/components/IntakeUrlBar.tsx
index f8f2e64..af99bc4 100644
--- a/web/src/components/IntakeUrlBar.tsx
+++ b/web/src/components/IntakeUrlBar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Button, Card } from "@/components/ui/Primitives";
+import { Button, Card, Input } from "@/components/ui/Primitives";
 import { submitIntake, type IntakeContentType } from "@/lib/intake-client";
 import { toast } from "@/lib/toast";
 
@@ -81,23 +81,15 @@ export function IntakeUrlBar({ workspaceId, onIntakeSubmitted }: IntakeUrlBarPro
       }}
     >
       <div style={{ flex: 1, position: "relative" }}>
-        <input
+        <Input
           type="url"
           value={url}
           onChange={(e) => setUrl(e.target.value)}
           onKeyDown={(e) => { if (e.key === "Enter") void handleSubmit(); }}
           placeholder="Paste a URL to auto-process (YouTube, article, tweet, PDF, GitHub…)"
           aria-label="URL to process"
-          style={{
-            width: "100%",
-            padding: "var(--nl-space-3) var(--nl-space-4)",
-            paddingRight: detectedType ? "5rem" : "var(--nl-space-4)",
-            border: "1px solid var(--nl-border-default)",
-            borderRadius: "var(--nl-radius-md)",
-            background: "var(--nl-input-bg)",
-            color: "var(--nl-text-primary)",
-            fontSize: "var(--nl-fs-base)",
-          }}
+          // Right-pad enough to fit the detected-type badge overlay.
+          style={detectedType ? { paddingRight: "5rem" } : undefined}
         />
         {detectedType && (
           <span