bytelyst/learning_ai_notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web/ui): migrate IntakeUrlBar input to common Input primitive

Browse Source 
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:
saravanakumardb1 2026-05-23 10:08:10 -07:00
parent 91b859746b
commit e89f5ce8e6
2 changed files with 6 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scripts/ui-drift-baseline.json
View File

@ -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

16
web/src/components/IntakeUrlBar.tsx
View File

@ -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