Skip to content

feat: PawWork brand chrome icon set v2 (issue #181 slice 3)#191

Merged
Astro-Han merged 3 commits into
devfrom
worktree-feat-brand-icons
Apr 23, 2026
Merged

feat: PawWork brand chrome icon set v2 (issue #181 slice 3)#191
Astro-Han merged 3 commits into
devfrom
worktree-feat-brand-icons

Conversation

@Astro-Han

@Astro-Han Astro-Han commented Apr 23, 2026

Copy link
Copy Markdown
Owner

Summary

  • Replace the chrome icon set in packages/ui with 80 PawWork-drawn SVGs (74 rebranded + 6 new: chevron-up / plugin / automation / remote-control / schedule / key).
  • Delete skill-icons.tsx; Skill cards + workspace chip now use the shared <Icon> component.
  • Wire Review / Terminal tab -active variants; fix Open-file menu icon and sidebar search icon size mismatch.
  • Polish home Skill pills: equal-width 3-col grid, 20×20 icon, native EN labels (Process docs / Analyze data / Start writing).

Closes part of #181 (slice 3: sidebar icon set alignment).

Test plan

  • bun turbo typecheck --filter=@opencode-ai/ui --filter=@opencode-ai/app passes
  • Manual: Chinese + English Skill pills render equal width with new icons
  • Manual: Review / Terminal tabs show -active glyph when selected
  • Manual: Search icon matches New-session icon size in sidebar
  • Manual: Open-file menu item no longer duplicates Open-project's icon
  • Dev HMR context-loss observed during bulk edit; logged separately as [Bug] Solid HMR loses context providers after bulk edits to high-fanout modules #189 (orthogonal)

Carve-out note

packages/ui/src/components/icon.tsx is now accept-HEAD on upstream sync. When upstream introduces new icons or renames, add matching PawWork paths locally; do not replace the file wholesale.

Summary by CodeRabbit

  • New Features

    • Side panel tabs now show active-state icons to indicate the selected tab.
  • UI Improvements

    • Skill cards use a responsive grid (single-column on small, three columns on larger screens).
    • Icon usage unified across the app for consistent visuals (workspace, chevron, plus, pin, skill icons).
    • Sidebar pin button styling updated for better contrast.
    • File dropdown icon updated.
  • Text Updates

    • Session card titles changed to “Process docs” and “Start writing”.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request standardizes icon usage across the application by replacing various custom SVG components and the SkillIcon component with a unified Icon component. It also updates icon naming conventions, refines the skill selection view layout to a three-column grid, and updates several i18n strings for better clarity. The review feedback highlights the use of hardcoded hex colors in the skill metadata, suggesting a shift toward Tailwind classes or semantic tokens to maintain consistency with the project's design system.

Comment thread packages/app/src/components/session/pawwork-skill-meta.ts
Comment thread packages/app/src/components/session/session-new-view.tsx Outdated
@coderabbitai

coderabbitai Bot commented Apr 23, 2026

Copy link
Copy Markdown
Contributor

Warning

Rate limit exceeded

@Astro-Han has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 0 minutes and 12 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 0 minutes and 12 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 3e40ecfd-cf93-41ea-9817-ef2ec2bc2bac

📥 Commits

Reviewing files that changed from the base of the PR and between 453fe08 and 856cbf2.

📒 Files selected for processing (9)
  • packages/app/e2e/app/home.spec.ts
  • packages/app/src/components/prompt-input/workspace-chip.tsx
  • packages/app/src/components/session/pawwork-skill-meta.ts
  • packages/app/src/components/session/session-new-view.tsx
  • packages/app/src/components/session/skill-icons.tsx
  • packages/app/src/i18n/en.ts
  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/pages/session/session-side-panel.tsx
  • packages/ui/src/components/icon.tsx
📝 Walkthrough

Walkthrough

Consolidates local SVG icon implementations into a shared Icon component across multiple UI pieces, removes the in-repo SkillIcon registry, updates skill-card icon mappings and session card layout to a responsive grid, tweaks some copy, and adds active-state icon swapping for session side-panel tabs.

Changes

Cohort / File(s) Summary
Prompt input & Sidebar icons
packages/app/src/components/prompt-input/workspace-chip.tsx, packages/app/src/pages/layout/pawwork-sidebar.tsx
Replaces local inline SVGs with the shared <Icon /> component (name, size, class/style forwarding). Adjusts pin icon styling and removes selector-based icon-size override.
Skill icon system removal
packages/app/src/components/session/skill-icons.tsx
Deletes the SkillIcon component, SkillIconName type, and the internal ICONS path registry.
Skill metadata & session-new view
packages/app/src/components/session/pawwork-skill-meta.ts, packages/app/src/components/session/session-new-view.tsx
Introduces explicit PawworkSkillCard type and readonly PawworkSkillCard[] for pawworkSkillCards; updates icon name mappings (document-processingdoc-processing, writing-assistantpencil-line and styling). Replaces SkillIcon usage with shared Icon and converts skill strip from wrapping flex to responsive grid (1 col → 3 cols on sm+).
Session side panel tab icons
packages/app/src/pages/session/session-side-panel.tsx
Adds optional active prop to shell tab icon component; swaps review/terminal icons to their -active variants when active. Changes file-open dropdown icon from folder-add-left to open-file.
Localization
packages/app/src/i18n/en.ts
Small copy edits: card titles changed to "Process docs" and "Start writing".

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

Possibly related PRs

Suggested labels

enhancement, P2, app, ui

Poem

🐰 I hopped through code with tiny paws so spry,

Replaced lone SVGs with one shared sigh,
Icons now gather, neat and bright,
Tabs that shimmer when they’re right,
A little rabbit cheers—UI patched and spry!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 60.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the main change: introduction of a PawWork brand icon set v2 and references the related issue, aligning with the substantial icon set replacement and component refactoring.
Description check ✅ Passed The PR description includes a comprehensive summary, clear test plan with verification steps, related issue reference, and carve-out notes. All key checklist items are addressed with appropriate detail.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch worktree-feat-brand-icons

Comment @coderabbitai help to get the list of available commands and usage tips.

Comment thread packages/app/src/pages/layout/pawwork-sidebar.tsx
Comment thread packages/app/src/components/session/session-new-view.tsx Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/app/src/pages/session/session-side-panel.tsx (1)

320-332: ⚠️ Potential issue | 🟠 Major

Use sidePanelTab() for shell active state (not activeTab()).

Line 320 and Line 331 compare against inner review/file tab state, so shell icon activation becomes incorrect (notably Terminal). Use shell tab state instead.

Proposed fix
- <RightPanelShellIcon icon={tab.icon} active={activeTab() === tab.value} />
+ <RightPanelShellIcon icon={tab.icon} active={sidePanelTab() === tab.value} />
...
- <RightPanelShellIcon icon={tab.icon} active={activeTab() === tab.value} />
+ <RightPanelShellIcon icon={tab.icon} active={sidePanelTab() === tab.value} />
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/app/src/pages/session/session-side-panel.tsx` around lines 320 -
332, The ShellTab/SortableShellTab children use activeTab() to decide icon state
but should use the shell-specific state sidePanelTab(); update the active check
passed to RightPanelShellIcon in both occurrences (inside ShellTab and inside
SortableShellTab) to compare against sidePanelTab() instead of activeTab(), so
the icon active prop reflects the side panel's selected tab (look for
RightPanelShellIcon, ShellTab, SortableShellTab, activeTab(), and sidePanelTab()
to apply the change); keep the onClose handler (view().sidePanel.closeTab)
as-is.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/app/src/components/session/pawwork-skill-meta.ts`:
- Around line 24-25: The metadata currently uses an inline style via the
homeIconStyle property; change it to use a Tailwind text color class instead by
removing the inline homeIconStyle and setting homeIconClass to a standard class
such as "text-violet-500" (or your chosen accent token) in the pawwork skill
metadata. Update any consumer code that reads homeIconStyle (e.g., icon
rendering in session components) to prefer homeIconClass for styling so
metadata-driven styling is consistent across components; ensure no other parts
still rely on homeIconStyle.

In `@packages/app/src/pages/layout/pawwork-sidebar.tsx`:
- Line 139: The Icon component is being used with names "pin" and "workspace"
that aren't registered in the icon registry; add definitions for these icons to
the UI icon registry (the icons map/registration in the Icon component module)
similar to the existing "review-active", "terminal-active", and "open-file"
entries. Define SVG paths (or import the SVGs) and register them under the keys
"pin" and "workspace" so <Icon name="pin" /> and <Icon name="workspace" />
resolve correctly; ensure the registration uses the same function/shape as the
existing icons to preserve size/props handling.

---

Outside diff comments:
In `@packages/app/src/pages/session/session-side-panel.tsx`:
- Around line 320-332: The ShellTab/SortableShellTab children use activeTab() to
decide icon state but should use the shell-specific state sidePanelTab(); update
the active check passed to RightPanelShellIcon in both occurrences (inside
ShellTab and inside SortableShellTab) to compare against sidePanelTab() instead
of activeTab(), so the icon active prop reflects the side panel's selected tab
(look for RightPanelShellIcon, ShellTab, SortableShellTab, activeTab(), and
sidePanelTab() to apply the change); keep the onClose handler
(view().sidePanel.closeTab) as-is.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: eda624d9-801c-4702-bc63-9fd4294b1d1c

📥 Commits

Reviewing files that changed from the base of the PR and between 77793b4 and f014308.

📒 Files selected for processing (8)
  • packages/app/src/components/prompt-input/workspace-chip.tsx
  • packages/app/src/components/session/pawwork-skill-meta.ts
  • packages/app/src/components/session/session-new-view.tsx
  • packages/app/src/components/session/skill-icons.tsx
  • packages/app/src/i18n/en.ts
  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/pages/session/session-side-panel.tsx
  • packages/ui/src/components/icon.tsx
💤 Files with no reviewable changes (1)
  • packages/app/src/components/session/skill-icons.tsx
📜 Review details
🧰 Additional context used
📓 Path-based instructions (1)
packages/app/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (packages/app/AGENTS.md)

Always prefer createStore over multiple createSignal calls in SolidJS

Files:

  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/components/session/session-new-view.tsx
  • packages/app/src/i18n/en.ts
  • packages/app/src/components/session/pawwork-skill-meta.ts
  • packages/app/src/pages/session/session-side-panel.tsx
  • packages/app/src/components/prompt-input/workspace-chip.tsx
🧠 Learnings (6)
📓 Common learnings
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 126
File: packages/ui/src/theme/context.tsx:11-16
Timestamp: 2026-04-22T09:32:52.535Z
Learning: In Astro-Han/pawwork (`packages/ui/src/theme/context.tsx` and related files), the renaming of localStorage theme keys from `opencode-*` to `pawwork-*` (THEME_ID, COLOR_SCHEME, THEME_CSS_LIGHT, THEME_CSS_DARK) is intentional and should NOT include a migration path from the old keys. Migrating would re-couple PawWork and OpenCode browser storage namespaces, which the PR is explicitly designed to avoid. A reset to the PawWork default theme on upgrade is acceptable by design.
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 180
File: packages/app/src/components/session/pawwork-skill-meta.ts:0-0
Timestamp: 2026-04-23T07:23:12.091Z
Learning: In Astro-Han/pawwork, when a design token does not yet exist for a specific accent/brand color (e.g., violet), the project preference is to use a standard Tailwind color class (e.g., `text-violet-500`) rather than introducing a new semantic token. This applies to `homeIconClass` values in `packages/app/src/components/session/pawwork-skill-meta.ts` and similar UI metadata files.
📚 Learning: 2026-04-22T09:32:52.535Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 126
File: packages/ui/src/theme/context.tsx:11-16
Timestamp: 2026-04-22T09:32:52.535Z
Learning: In Astro-Han/pawwork (`packages/ui/src/theme/context.tsx` and related files), the renaming of localStorage theme keys from `opencode-*` to `pawwork-*` (THEME_ID, COLOR_SCHEME, THEME_CSS_LIGHT, THEME_CSS_DARK) is intentional and should NOT include a migration path from the old keys. Migrating would re-couple PawWork and OpenCode browser storage namespaces, which the PR is explicitly designed to avoid. A reset to the PawWork default theme on upgrade is acceptable by design.

Applied to files:

  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/components/session/pawwork-skill-meta.ts
  • packages/app/src/components/prompt-input/workspace-chip.tsx
📚 Learning: 2026-04-23T07:23:12.091Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 180
File: packages/app/src/components/session/pawwork-skill-meta.ts:0-0
Timestamp: 2026-04-23T07:23:12.091Z
Learning: In Astro-Han/pawwork, when a design token does not yet exist for a specific accent/brand color (e.g., violet), the project preference is to use a standard Tailwind color class (e.g., `text-violet-500`) rather than introducing a new semantic token. This applies to `homeIconClass` values in `packages/app/src/components/session/pawwork-skill-meta.ts` and similar UI metadata files.

Applied to files:

  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/components/session/session-new-view.tsx
  • packages/app/src/components/prompt-input/workspace-chip.tsx
📚 Learning: 2026-04-23T07:23:23.849Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 180
File: packages/app/src/components/session/session-new-view.tsx:13-18
Timestamp: 2026-04-23T07:23:23.849Z
Learning: In pawwork (Astro-Han/pawwork), prefer using `createStore` instead of multiple `createSignal` calls only when the signals represent **coupled** object state that is updated together (i.e., there is at least one shared batch-update site where the state is changed in the same transaction). If the state fields are **independent** and are mutated by separate handlers (e.g., one handler updates only `selectedSkill` while another updates only `mode`), keep them as individual `createSignal` calls—using `createStore` for truly independent fields adds boilerplate without behavioral benefit.

Applied to files:

  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/components/session/session-new-view.tsx
  • packages/app/src/i18n/en.ts
  • packages/app/src/components/session/pawwork-skill-meta.ts
  • packages/app/src/pages/session/session-side-panel.tsx
  • packages/app/src/components/prompt-input/workspace-chip.tsx
📚 Learning: 2026-04-22T05:24:42.404Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 98
File: packages/desktop-electron/src/main/menu-labels.ts:1-2
Timestamp: 2026-04-22T05:24:42.404Z
Learning: In Astro-Han/pawwork, the app i18n layer (`packages/app/src/i18n/`) only contains `en.ts` and `zh.ts`, and `normalizeLocale` (in `packages/app/src/context/language.tsx`) only returns `"en"` or `"zh"`. The desktop `MenuLocale = "en" | "zh"` union in `packages/desktop-electron/src/main/menu-labels.ts` is intentionally limited to these two locales and is not a broader restriction — do not flag it as overly restrictive or suggest adding other locales.

Applied to files:

  • packages/app/src/i18n/en.ts
📚 Learning: 2026-04-23T07:23:12.091Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 180
File: packages/app/src/components/session/pawwork-skill-meta.ts:0-0
Timestamp: 2026-04-23T07:23:12.091Z
Learning: In Astro-Han/pawwork UI metadata components (e.g., files under `packages/app/src/components/session/`), when a semantic/design token for a specific accent/brand color (such as `violet`) does not exist yet, use the corresponding standard Tailwind color utility/class (e.g., `text-violet-500`) rather than introducing a new semantic token. Apply this specifically to `homeIconClass` values and similar metadata fields that currently expect a Tailwind class string.

Applied to files:

  • packages/app/src/components/session/pawwork-skill-meta.ts
🔇 Additional comments (4)
packages/app/src/i18n/en.ts (1)

592-597: Copy update looks good.

These label changes are consistent with the new-session UX wording and keep key usage intact.

packages/app/src/components/prompt-input/workspace-chip.tsx (1)

64-67: Nice migration to shared Icon usage.

This removes local SVG duplication and keeps icon rendering consistent with the rest of the UI layer.

Also applies to: 94-95, 111-112

packages/app/src/pages/session/session-side-panel.tsx (1)

352-353: Open-file icon swap is correct.

This aligns the menu item glyph with its action and fixes the prior semantic mismatch.

packages/app/src/components/session/session-new-view.tsx (1)

26-27: Grid + shared icon migration looks solid.

The layout and icon rendering changes are consistent with the intended skill-pill polish and shared icon architecture.

Also applies to: 36-48

Comment thread packages/app/src/components/session/pawwork-skill-meta.ts
Comment thread packages/app/src/pages/layout/pawwork-sidebar.tsx
@Astro-Han

Copy link
Copy Markdown
Owner Author

Placeholder for inline review

@Astro-Han Astro-Han left a comment

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Icon set v2 review - see inline comments

Comment thread packages/app/src/pages/layout/pawwork-sidebar.tsx

@Astro-Han Astro-Han left a comment

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Detailed icon-set review with inline comments, sorted by priority.

Summary:

  • 3x P1 (pin icon affordance, hardcoded hex color, leaked impl detail)
  • 4x P2 (color downgrade, active-variant coupling, grid i18n, same-line entry)
  • 3x P3 (blank lines, label clarity, implicit size change)

Comment thread packages/app/src/pages/layout/pawwork-sidebar.tsx
Comment thread packages/app/src/components/session/pawwork-skill-meta.ts
Comment thread packages/app/src/components/session/session-new-view.tsx
Comment thread packages/app/src/pages/layout/pawwork-sidebar.tsx
Comment thread packages/app/src/pages/session/session-side-panel.tsx
Comment thread packages/app/src/components/session/session-new-view.tsx
Comment thread packages/ui/src/components/icon.tsx
Comment thread packages/ui/src/components/icon.tsx Outdated
Comment thread packages/app/src/i18n/en.ts
Comment thread packages/app/src/pages/layout/pawwork-sidebar.tsx
@Astro-Han Astro-Han force-pushed the worktree-feat-brand-icons branch from f014308 to 453fe08 Compare April 23, 2026 15:07

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (3)
packages/app/src/components/session/pawwork-skill-meta.ts (1)

14-17: ⚠️ Potential issue | 🟠 Major

Avoid inline hex styling in skill metadata; use homeIconClass instead.

Line 39 hardcodes a color via homeIconStyle, which diverges from the established metadata pattern and makes theme/searchability harder.

Suggested change
-// Writing accent (`#8B5FBF`) lives as inline style because Tailwind v4 is
-// configured with `--color-*: initial`, so palette utilities like
-// `text-violet-500` resolve to no CSS variable and render black.
 export const pawworkSkillCards: readonly PawworkSkillCard[] = [
@@
   {
     name: "writing-assistant",
     iconName: "pencil-line",
     homeIcon: "pencil-line",
-    homeIconClass: "",
-    homeIconStyle: { color: "#8B5FBF" },
+    homeIconClass: "text-violet-500",
     titleKey: "session.new.card.writing.title",
     descriptionKey: "session.new.card.writing.description",
   },
 ]

Based on learnings: in packages/app/src/components/session/* metadata, when no semantic accent token exists, prefer a standard Tailwind class (e.g., text-violet-500) over inline style fields.

Also applies to: 38-40

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/app/src/components/session/pawwork-skill-meta.ts` around lines 14 -
17, The pawworkSkillCards metadata contains an inline hex color in the
homeIconStyle field (violates pattern); update the affected PawworkSkillCard
entries to remove homeIconStyle and instead set homeIconClass to a standard
Tailwind utility (e.g., "text-violet-500") so the accent uses a class token
consistent with other metadata; ensure you update all entries that currently use
homeIconStyle (search for homeIconStyle in pawworkSkillCards) and keep the rest
of each card object unchanged.
packages/app/src/pages/layout/pawwork-sidebar.tsx (1)

134-139: ⚠️ Potential issue | 🟡 Minor

Restore a stronger pinned-state visual signal.

At Line 134 and Line 139, pinned rows now use a subtler color (text-text-strong) with the same pin glyph, which weakens quick scanability in mixed lists. Consider restoring brand-accent color for pinned rows (or using a distinct pin variant).

Suggested tweak
 classList={{
   "inline-flex size-6 items-center justify-center rounded transition-colors": true,
-  "text-text-strong opacity-100 pointer-events-auto": isPinned(),
+  "text-accent-brand opacity-100 pointer-events-auto": isPinned(),
   "text-text-weak opacity-0 pointer-events-none group-hover/session:opacity-100 group-hover/session:pointer-events-auto group-focus-within/session:opacity-100 group-focus-within/session:pointer-events-auto hover:text-text-base":
     !isPinned(),
 }}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/app/src/pages/layout/pawwork-sidebar.tsx` around lines 134 - 139,
The pinned-row visual is too subtle: in pawwork-sidebar.tsx the class
conditional that uses isPinned() currently applies "text-text-strong" which
reduces scanability; update the pinned state styling to use your brand accent
color (e.g., replace "text-text-strong" with the project's accent token like
"text-accent" or "text-brand-accent") or swap to a distinct pin glyph variant
(change Icon name="pin" to a filled/solid variant such as "pin-filled" or
similar) so pinned rows are visually stronger and immediately scannable; update
the conditional around isPinned() and the Icon usage accordingly.
packages/app/src/components/session/session-new-view.tsx (1)

26-26: ⚠️ Potential issue | 🟡 Minor

Make the skill-pill grid degrade more safely on narrow widths.

At Line 26, w-fit with sm:grid-cols-3 can still produce cramped/overflow behavior near small breakpoints and with longer localized labels.

Suggested responsive fallback
-<div class="mt-8 grid w-fit max-w-[640px] grid-cols-1 gap-3 sm:grid-cols-3">
+<div class="mt-8 grid w-full max-w-[640px] grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/app/src/components/session/session-new-view.tsx` at line 26, The
grid uses `w-fit` and `sm:grid-cols-3` which causes cramped/overflow at narrow
breakpoints; update the wrapping div class in session-new-view.tsx to remove
`w-fit`, use responsive columns like `grid-cols-1 sm:grid-cols-2 md:grid-cols-3`
and keep `max-w-[640px]` so it can expand/contract smoothly, and ensure child
pill elements (e.g., SkillPill) have `min-w-0` or `truncate` to prevent
overflow; modify the div's class string and adjust the skill-pill component
classes accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/app/src/pages/session/session-side-panel.tsx`:
- Line 320: The shell icon active state is using the wrong selector
(activeTab()) causing incorrect highlighting; update the RightPanelShellIcon
usages (and any similar shell-icon components) to derive their active prop from
sidePanelTab() === tab.value instead of activeTab(), ensuring shell/tab icons
(e.g., Terminal, Review) reflect the shell-side-panel selection rather than file
sub-tab state.

---

Duplicate comments:
In `@packages/app/src/components/session/pawwork-skill-meta.ts`:
- Around line 14-17: The pawworkSkillCards metadata contains an inline hex color
in the homeIconStyle field (violates pattern); update the affected
PawworkSkillCard entries to remove homeIconStyle and instead set homeIconClass
to a standard Tailwind utility (e.g., "text-violet-500") so the accent uses a
class token consistent with other metadata; ensure you update all entries that
currently use homeIconStyle (search for homeIconStyle in pawworkSkillCards) and
keep the rest of each card object unchanged.

In `@packages/app/src/components/session/session-new-view.tsx`:
- Line 26: The grid uses `w-fit` and `sm:grid-cols-3` which causes
cramped/overflow at narrow breakpoints; update the wrapping div class in
session-new-view.tsx to remove `w-fit`, use responsive columns like `grid-cols-1
sm:grid-cols-2 md:grid-cols-3` and keep `max-w-[640px]` so it can
expand/contract smoothly, and ensure child pill elements (e.g., SkillPill) have
`min-w-0` or `truncate` to prevent overflow; modify the div's class string and
adjust the skill-pill component classes accordingly.

In `@packages/app/src/pages/layout/pawwork-sidebar.tsx`:
- Around line 134-139: The pinned-row visual is too subtle: in
pawwork-sidebar.tsx the class conditional that uses isPinned() currently applies
"text-text-strong" which reduces scanability; update the pinned state styling to
use your brand accent color (e.g., replace "text-text-strong" with the project's
accent token like "text-accent" or "text-brand-accent") or swap to a distinct
pin glyph variant (change Icon name="pin" to a filled/solid variant such as
"pin-filled" or similar) so pinned rows are visually stronger and immediately
scannable; update the conditional around isPinned() and the Icon usage
accordingly.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: e029a5bd-7ec8-4142-b645-71e7c9e5b774

📥 Commits

Reviewing files that changed from the base of the PR and between f014308 and 453fe08.

📒 Files selected for processing (8)
  • packages/app/src/components/prompt-input/workspace-chip.tsx
  • packages/app/src/components/session/pawwork-skill-meta.ts
  • packages/app/src/components/session/session-new-view.tsx
  • packages/app/src/components/session/skill-icons.tsx
  • packages/app/src/i18n/en.ts
  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/pages/session/session-side-panel.tsx
  • packages/ui/src/components/icon.tsx
💤 Files with no reviewable changes (1)
  • packages/app/src/components/session/skill-icons.tsx
📜 Review details
🧰 Additional context used
📓 Path-based instructions (1)
packages/app/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (packages/app/AGENTS.md)

Always prefer createStore over multiple createSignal calls in SolidJS

Files:

  • packages/app/src/i18n/en.ts
  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/components/prompt-input/workspace-chip.tsx
  • packages/app/src/pages/session/session-side-panel.tsx
  • packages/app/src/components/session/session-new-view.tsx
  • packages/app/src/components/session/pawwork-skill-meta.ts
🧠 Learnings (8)
📓 Common learnings
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 126
File: packages/ui/src/theme/context.tsx:11-16
Timestamp: 2026-04-22T09:32:52.535Z
Learning: In Astro-Han/pawwork (`packages/ui/src/theme/context.tsx` and related files), the renaming of localStorage theme keys from `opencode-*` to `pawwork-*` (THEME_ID, COLOR_SCHEME, THEME_CSS_LIGHT, THEME_CSS_DARK) is intentional and should NOT include a migration path from the old keys. Migrating would re-couple PawWork and OpenCode browser storage namespaces, which the PR is explicitly designed to avoid. A reset to the PawWork default theme on upgrade is acceptable by design.
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 180
File: packages/app/src/components/session/pawwork-skill-meta.ts:0-0
Timestamp: 2026-04-23T07:23:12.091Z
Learning: In Astro-Han/pawwork, when a design token does not yet exist for a specific accent/brand color (e.g., violet), the project preference is to use a standard Tailwind color class (e.g., `text-violet-500`) rather than introducing a new semantic token. This applies to `homeIconClass` values in `packages/app/src/components/session/pawwork-skill-meta.ts` and similar UI metadata files.
📚 Learning: 2026-04-23T07:23:23.849Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 180
File: packages/app/src/components/session/session-new-view.tsx:13-18
Timestamp: 2026-04-23T07:23:23.849Z
Learning: In pawwork (Astro-Han/pawwork), prefer using `createStore` instead of multiple `createSignal` calls only when the signals represent **coupled** object state that is updated together (i.e., there is at least one shared batch-update site where the state is changed in the same transaction). If the state fields are **independent** and are mutated by separate handlers (e.g., one handler updates only `selectedSkill` while another updates only `mode`), keep them as individual `createSignal` calls—using `createStore` for truly independent fields adds boilerplate without behavioral benefit.

Applied to files:

  • packages/app/src/i18n/en.ts
  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/components/prompt-input/workspace-chip.tsx
  • packages/app/src/pages/session/session-side-panel.tsx
  • packages/app/src/components/session/session-new-view.tsx
  • packages/app/src/components/session/pawwork-skill-meta.ts
📚 Learning: 2026-04-22T09:32:52.535Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 126
File: packages/ui/src/theme/context.tsx:11-16
Timestamp: 2026-04-22T09:32:52.535Z
Learning: In Astro-Han/pawwork (`packages/ui/src/theme/context.tsx` and related files), the renaming of localStorage theme keys from `opencode-*` to `pawwork-*` (THEME_ID, COLOR_SCHEME, THEME_CSS_LIGHT, THEME_CSS_DARK) is intentional and should NOT include a migration path from the old keys. Migrating would re-couple PawWork and OpenCode browser storage namespaces, which the PR is explicitly designed to avoid. A reset to the PawWork default theme on upgrade is acceptable by design.

Applied to files:

  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/components/prompt-input/workspace-chip.tsx
  • packages/app/src/components/session/pawwork-skill-meta.ts
📚 Learning: 2026-04-23T07:23:12.091Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 180
File: packages/app/src/components/session/pawwork-skill-meta.ts:0-0
Timestamp: 2026-04-23T07:23:12.091Z
Learning: In Astro-Han/pawwork, when a design token does not yet exist for a specific accent/brand color (e.g., violet), the project preference is to use a standard Tailwind color class (e.g., `text-violet-500`) rather than introducing a new semantic token. This applies to `homeIconClass` values in `packages/app/src/components/session/pawwork-skill-meta.ts` and similar UI metadata files.

Applied to files:

  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/components/prompt-input/workspace-chip.tsx
  • packages/app/src/pages/session/session-side-panel.tsx
  • packages/app/src/components/session/session-new-view.tsx
📚 Learning: 2026-04-23T08:51:00.819Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 186
File: packages/opencode/test/plugin/workspace-adaptor.test.ts:139-144
Timestamp: 2026-04-23T08:51:00.819Z
Learning: In Astro-Han/pawwork (`packages/opencode/src/util/filesystem.ts`), the `Filesystem` utility does NOT expose a `remove` or `unlink` helper. The established repository pattern for auth.json teardown in tests (e.g. `provider.test.ts`, `amazon-bedrock.test.ts`, `workspace-adaptor.test.ts`) is to combine `Filesystem.write` with `node:fs/promises unlink`. Do not flag this mixed usage as inconsistent — it is the correct and intentional pattern.

Applied to files:

  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/components/prompt-input/workspace-chip.tsx
📚 Learning: 2026-04-20T14:21:51.047Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 71
File: packages/app/src/components/session/session-status-connections.tsx:146-147
Timestamp: 2026-04-20T14:21:51.047Z
Learning: In the Astro-Han/pawwork repository (SolidJS app), `sync.data.config` is always initialized to `{}` at `packages/app/src/context/global-sync.tsx` line 71 and is never `undefined` at runtime. Non-optional property access like `sync.data.config.plugin` is intentional and consistent with the pattern used in `packages/app/src/components/status-popover-body.tsx` line 243. Do not flag `sync.data.config.plugin` as needing optional chaining.

Applied to files:

  • packages/app/src/pages/layout/pawwork-sidebar.tsx
📚 Learning: 2026-04-20T14:36:04.099Z
Learnt from: CR
Repo: Astro-Han/pawwork PR: 0
File: packages/app/e2e/AGENTS.md:0-0
Timestamp: 2026-04-20T14:36:04.099Z
Learning: Applies to packages/app/e2e/**/*.spec.ts : Use `data-component`, `data-action`, or semantic roles for selectors instead of CSS class names or IDs

Applied to files:

  • packages/app/src/components/session/session-new-view.tsx
  • packages/app/src/components/session/pawwork-skill-meta.ts
📚 Learning: 2026-04-23T07:23:12.091Z
Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 180
File: packages/app/src/components/session/pawwork-skill-meta.ts:0-0
Timestamp: 2026-04-23T07:23:12.091Z
Learning: In Astro-Han/pawwork UI metadata components (e.g., files under `packages/app/src/components/session/`), when a semantic/design token for a specific accent/brand color (such as `violet`) does not exist yet, use the corresponding standard Tailwind color utility/class (e.g., `text-violet-500`) rather than introducing a new semantic token. Apply this specifically to `homeIconClass` values and similar metadata fields that currently expect a Tailwind class string.

Applied to files:

  • packages/app/src/components/session/pawwork-skill-meta.ts
🔇 Additional comments (7)
packages/app/src/pages/session/session-side-panel.tsx (2)

72-89: Good active-variant icon mapping for Review/Terminal.

The RightPanelShellIcon update at Line 85 and Line 88 cleanly switches between base and -active icon names and matches the available icon registry entries.


352-352: Open-file menu icon fix looks correct.

Switching to Icon name="open-file" at Line 352 is aligned with the stated duplication fix and improves semantic clarity.

packages/app/src/pages/layout/pawwork-sidebar.tsx (1)

253-253: Good cleanup on search icon sizing.

Line 253 dropping the explicit nested icon-size override keeps sizing consistent with shared button/icon defaults.

packages/app/src/components/prompt-input/workspace-chip.tsx (1)

64-67: Icon migration is clean and consistent.

The switch to shared Icon usage preserves behavior and styling while removing local SVG duplication.

Also applies to: 94-112

packages/app/src/components/session/pawwork-skill-meta.ts (1)

4-12: Nice type-hardening for skill metadata.

PawworkSkillCard plus PawworkSkillName = PawworkSkillCard["name"] reduces drift between data and exported types.

Also applies to: 45-45

packages/app/src/i18n/en.ts (1)

592-597: Copy update aligns with the PR’s home-skill label polish goal.

No technical concerns in this i18n key update.

packages/app/src/components/session/session-new-view.tsx (1)

43-48: Shared Icon adoption here looks good.

The metadata-driven icon name/class/style wiring keeps the rendering path consistent with the new centralized icon set.

Comment thread packages/app/src/pages/session/session-side-panel.tsx
Replace 74 chrome icons in packages/ui/src/components/icon.tsx with
PawWork-drawn SVGs (vtracer-traced from imagegen batches, single DNA).
Add 6 new icons: chevron-up, plugin, automation, remote-control,
schedule, key. sidebar-active uses upstream-style left-panel
semi-transparent fill; dot-grid keeps the 3-horizontal-dot form.

Carve-out: packages/ui/src/components/icon.tsx is now accept-HEAD on
upstream sync (see project memory: UI 层重写 carve-out).
- Delete skill-icons.tsx; Skill cards now use <Icon name="..."> with
  the v2 brand chrome set (doc-processing / bar-chart / pencil-line).
- Migrate workspace-chip inline SVGs to chrome Icon (workspace /
  chevron-down / plus-small).
- Polish Skill pills: grid-cols-3 w-fit for equal-width pills,
  20×20 icon (size="normal"), shorter native EN labels
  ("Process docs" / "Analyze data" / "Start writing").
- Pass active state to RightPanelShellIcon so Review / Terminal tabs
  render review-active / terminal-active when selected (previously
  both variants lived in icon.tsx but were unused).
- Fix Add-tab dropdown's "Open file" menu item icon: was folder-add-left
  (duplicating Open-project's glyph), now open-file.
- Remove the 20×20 magnifying-glass override on the sidebar search
  button so it matches the 16×16 of the new-session button (was 25%
  larger).

Closes part of #181 (sidebar icon set alignment, slice 3 of 3).
@Astro-Han Astro-Han force-pushed the worktree-feat-brand-icons branch from 453fe08 to 856cbf2 Compare April 23, 2026 15:24
@Astro-Han Astro-Han merged commit 6218050 into dev Apr 23, 2026
23 checks passed
@Astro-Han Astro-Han deleted the worktree-feat-brand-icons branch April 23, 2026 15:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant