refactor(#199): consolida primitive UI — IconButton CVA, Tooltip, StatusDot, SectionLabel#201
Open
nikazzio wants to merge 1 commit into
Open
refactor(#199): consolida primitive UI — IconButton CVA, Tooltip, StatusDot, SectionLabel#201nikazzio wants to merge 1 commit into
nikazzio wants to merge 1 commit into
Conversation
…tusDot, SectionLabel - Rebuild IconButton con class-variance-authority (tone/size type-safe) - Aggiunta primitive StatusDot e SectionLabel - Tooltip: aggiunto side='bottom' - Sweep completo: DocumentView, PipelineSidebar, Header, SettingsModal, PipelineConfig, ImportPreviewDialog migrati a IconButton - Eliminati ChunkIconButton, SidebarIconButton, CompactStatusIndicator, COMPACT_STATUS_TONE, NAV_STAGE_TONE, tabBtnCls - Fix PromptTemplatesTab: rimosso colore purple non-editorial
Contributor
There was a problem hiding this comment.
Pull request overview
This PR consolidates shared frontend UI primitives for icon-only controls and compact UI affordances, aligning several shell/config/document components with the design-system direction from #199.
Changes:
- Refactors
IconButtonto CVA-backed size/tone variants and addsclass-variance-authority. - Adds shared
StatusDotandSectionLabelprimitives, exports them from the UI barrel, and extendsTooltipwithbottompositioning. - Migrates multiple local icon-button implementations across document, pipeline, settings, sidebar, import preview, and header surfaces.
Reviewed changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
src/components/ui/IconButton.tsx |
Rebuilds IconButton around CVA variants. |
src/components/ui/Tooltip.tsx |
Adds support for bottom-positioned tooltips. |
src/components/ui/StatusDot.tsx |
Adds a shared compact status indicator primitive. |
src/components/ui/SectionLabel.tsx |
Adds a shared icon + uppercase label primitive. |
src/components/ui/index.ts |
Exports the new/updated UI primitives. |
src/components/pipeline/PipelineConfig.tsx |
Migrates config controls and tabs to IconButton. |
src/components/document/DocumentView.tsx |
Replaces local chunk/stage icon controls with IconButton. |
src/components/layout/PipelineSidebar.tsx |
Replaces local sidebar icon button wrapper with IconButton. |
src/components/settings/SettingsModal.tsx |
Migrates settings selector buttons to IconButton. |
src/components/document/ImportPreviewDialog.tsx |
Migrates import/chunking controls to IconButton. |
src/components/layout/Header.tsx |
Updates active sandbox icon button to the new tone API. |
src/components/library/PromptTemplatesTab.tsx |
Replaces a non-editorial purple badge color with editorial tokens. |
package.json |
Adds class-variance-authority. |
package-lock.json |
Locks CVA and transitive clsx. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+900
to
+905
| <IconButton | ||
| size="lg" | ||
| tone={activeTab === 'settings' ? 'accent' : 'default'} | ||
| onClick={() => setActiveTab('settings')} | ||
| title={t('pipeline.tabSettings')} | ||
| aria-label={t('pipeline.tabSettings')} | ||
| className={tabBtnCls(activeTab === 'settings')} | ||
| ariaPressed={activeTab === 'settings'} |
Comment on lines
+844
to
+845
| <IconButton | ||
| size="md" |
Comment on lines
+804
to
808
| <IconButton | ||
| size="md" | ||
| tone={useChunking ? 'accent' : 'default'} | ||
| onClick={() => onUseChunkingChange(!useChunking)} | ||
| title={t('pipeline.autoSegment')} |
Comment on lines
+815
to
820
| <IconButton | ||
| size="md" | ||
| tone={headingAware && useChunking ? 'accent' : 'default'} | ||
| onClick={() => useChunking && onHeadingAwareChange(!headingAware)} | ||
| title={t('pipeline.headingAware')} | ||
| disabled={!useChunking} |
Comment on lines
+826
to
831
| <IconButton | ||
| size="md" | ||
| tone={carryTrailingShortBlocks && useChunking ? 'accent' : 'default'} | ||
| onClick={() => useChunking && onCarryTrailingShortBlocksChange(!carryTrailingShortBlocks)} | ||
| title={t('pipeline.trailingShortBlocks')} | ||
| disabled={!useChunking} |
Comment on lines
+843
to
848
| <IconButton | ||
| key={words} | ||
| type="button" | ||
| size="md" | ||
| tone={activePresetWords === words ? 'accent' : 'default'} | ||
| onClick={() => handleWordsPerChunkChange(words)} | ||
| title={t(titleKey)} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
IconButtonconclass-variance-authority— tone e size type-safe, zero classi inline duplicateStatusDot(indicatore stato non-interattivo) eSectionLabel(icona + label uppercase)Tooltip: aggiuntoside='bottom'ChunkIconButton,SidebarIconButton,CompactStatusIndicator,COMPACT_STATUS_TONE,NAV_STAGE_TONE,tabBtnCls— tutti sostituiti con<IconButton>PromptTemplatesTab(purple-500→ token editorial)Test plan
rtk tsc --noEmitverde ✅Closes #199
🤖 Generated with Claude Code