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
This commit is contained in:
parent
91b859746b
commit
e89f5ce8e6
@ -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.",
|
"//": "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": 14,
|
"raw_interactive_controls": 13,
|
||||||
"legacy_global_surface_classes": 0,
|
"legacy_global_surface_classes": 0,
|
||||||
"hardcoded_color_literals": 0,
|
"hardcoded_color_literals": 0,
|
||||||
"direct_bytelyst_ui_imports_outside_adapter": 0
|
"direct_bytelyst_ui_imports_outside_adapter": 0
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
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 { submitIntake, type IntakeContentType } from "@/lib/intake-client";
|
||||||
import { toast } from "@/lib/toast";
|
import { toast } from "@/lib/toast";
|
||||||
|
|
||||||
@ -81,23 +81,15 @@ export function IntakeUrlBar({ workspaceId, onIntakeSubmitted }: IntakeUrlBarPro
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ flex: 1, position: "relative" }}>
|
<div style={{ flex: 1, position: "relative" }}>
|
||||||
<input
|
<Input
|
||||||
type="url"
|
type="url"
|
||||||
value={url}
|
value={url}
|
||||||
onChange={(e) => setUrl(e.target.value)}
|
onChange={(e) => setUrl(e.target.value)}
|
||||||
onKeyDown={(e) => { if (e.key === "Enter") void handleSubmit(); }}
|
onKeyDown={(e) => { if (e.key === "Enter") void handleSubmit(); }}
|
||||||
placeholder="Paste a URL to auto-process (YouTube, article, tweet, PDF, GitHub…)"
|
placeholder="Paste a URL to auto-process (YouTube, article, tweet, PDF, GitHub…)"
|
||||||
aria-label="URL to process"
|
aria-label="URL to process"
|
||||||
style={{
|
// Right-pad enough to fit the detected-type badge overlay.
|
||||||
width: "100%",
|
style={detectedType ? { paddingRight: "5rem" } : undefined}
|
||||||
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)",
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
{detectedType && (
|
{detectedType && (
|
||||||
<span
|
<span
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user