Skip to content

Refactor: centralise Knob pad ↔ category mapping in a single data table #51

Description

@khurchla

Surfaced by the clarity-review pass on the v0.1.0 release branch (B4). Do NOT apply for v0.1.0 — captured for post-launch.

src/components/Knob.svelte ties each pad to its category in three separate locations:

  • CSS rule blocks: .pad-green ↔ See Work (lines ~505-511), .pad-amber ↔ GTK (~521-527), .pad-neutral ↔ Contact (~532-537)
  • aria-label strings on the target-zone buttons (~352, ~362, ~373)
  • Active / inactive / glow targets wired per pad

A small const map would single-source the mapping:

const PADS = [
  { id: 'see-work', color: 'green',   label: 'See Work',    ariaHelp: '…' },
  { id: 'gtk',      color: 'amber',   label: 'Get to Know', ariaHelp: '…' },
  { id: 'contact',  color: 'neutral', label: 'Contact',     ariaHelp: '…' },
];

Then {#each PADS} over the SVG paths and the click-target buttons collapses three near-identical CSS blocks + three near-identical buttons into one declaration.

Files

  • src/components/Knob.svelte

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions