Skip to content

Search: Use one shared field across pages - #65

Merged
whereareiam merged 1 commit into
devfrom
refactor/shared-search-field
Oct 3, 2026
Merged

whereareiam merged 1 commit into
devfrom
refactor/shared-search-field

Conversation

@whereareiam

@whereareiam whereareiam commented Oct 3, 2026 •

Copy link
Copy Markdown
Owner

Search fields were written and styled separately on almost every page that has one, alongside two shared implementations (theme-search-field and theme-search-control) that declared the same 32px box. This moves all of them onto components/common/search/search.

Changes

  • The component takes Kind: submit (default, trailing search button), icon (leading search icon) or plain. Local marks a client-side filter that is never submitted, ID and Name set the input's identity, Label overrides the accessible name, and Class adds a page layout hook.
  • Migrated: profile and organization repository search, profile projects and packages, releases, tags, the Actions run filter, the Actions log search, and both diff filters.
  • The rules for Forgejo's native query/mode/submit group (theme-search-control, used by repository code search) move from the theme engine into the component stylesheet, so one file owns search fields.
  • Page stylesheets keep only layout for these fields (width, flex). About 100 lines of per-page field styling are removed.
  • A test fails when any template other than the component writes a search input. CONTRIBUTING.md documents the variants.

Not migrated: the "Go to file" picker, which is a combobox with a shortcut hint and clear button rather than a search field.

Visual result

Intended to be unchanged. Measured in the dev preview at 1440px before and after, and against github.com:

Field Before After GitHub
Box (all fields) 32px, 1px border, 6px radius same same
Text 14px/20px same same
Plain: text offset 13px 13px 13px
Icon: icon offset 8–9px 8px 8px
Icon: text offset 33px 33px 33px
Submit: button 32×30 32×30 n/a

Two deliberate differences: icon fields on Actions and diff move the icon 1px left to GitHub's offset, and the release and tag search icon is now decorative rather than a submit button, as on GitHub (Enter submits).

Checks

  • bun commit passes (385 tests).
  • Dev preview (http://localhost:3000, Forgejo 16.0.3): release search submits and keeps its value; the Actions run filter and both diff filters filter and restore their rows; focus rings render; every field fits a 390px viewport without horizontal overflow.
  • Not exercised: profile packages (the fixture has no packages) and log-line filtering in the Actions log search (the fixture run has no loaded log lines; the field and its match counter were checked).

🤖 Generated with Claude Code

Profile, project, package, release, tag, Actions and diff pages each
wrote their own search input and restyled it in their page stylesheet,
next to two shared implementations that declared the same box.

components/common/search now renders all of them. Kind selects the
variant (submit, icon or plain), Local marks a client-side filter, and
Class carries the page's layout hook. The native query/mode/submit group
keeps its opt-in class but its rules move beside the component, so one
stylesheet owns search fields. A test fails when a template writes its
own search input.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@whereareiam whereareiam added the change Intentional style, template, or compatibility improvements label Oct 3, 2026
@whereareiam
whereareiam merged commit a3072af into dev Oct 3, 2026
11 of 16 checks passed
@whereareiam
whereareiam deleted the refactor/shared-search-field branch October 3, 2026 11:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

change Intentional style, template, or compatibility improvements

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant