Skip to content

feat: add tile border color and width customization#61

Open
AhnSeongHyun wants to merge 5 commits into
collabs-inc:mainfrom
AhnSeongHyun:feature/tile-border-customization-v2
Open

feat: add tile border color and width customization#61
AhnSeongHyun wants to merge 5 commits into
collabs-inc:mainfrom
AhnSeongHyun:feature/tile-border-customization-v2

Conversation

@AhnSeongHyun

@AhnSeongHyun AhnSeongHyun commented Mar 25, 2026 •
edited
Loading

Copy link
Copy Markdown

Summary

  • Add customizable tile focus border color (color picker) and width (0–4px slider) in Settings > Appearance > Tile
  • Values persist via the pref system and apply through CSS custom properties (--tile-focus-border-color, --tile-focus-border-width)

Screenshots

SCR-20260325-lkvp SCR-20260325-lktm

Changes

  • shell.css: Add --tile-focus-border-color and --tile-focus-border-width CSS variables (light/dark), replace hardcoded box-shadow values with variables
  • dark-mode.js: Add applyTileBorderColor() and applyTileBorderWidth() functions
  • renderer.js: Load and apply tile border preferences on startup, handle pref changes
  • App.tsx: Add Tile settings UI section with color picker and width slider

Test plan

  • Open Settings > Appearance, verify "Tile" section with border color picker and width slider
  • Change border color → focused tile border updates in real-time
  • Change border width (0–4px) → focused tile border width updates in real-time
  • Restart app → settings persist correctly
  • Verify dark mode and light mode defaults work

🤖 Generated with Claude Code

@AhnSeongHyun
AhnSeongHyun marked this pull request as ready for review March 25, 2026 04:35
@AhnSeongHyun
AhnSeongHyun marked this pull request as draft March 25, 2026 14:45
@cla-bot

cla-bot Bot commented Mar 25, 2026

Copy link
Copy Markdown

Thank you for your pull request and welcome to our community. We could not parse the GitHub identity of the following contributors: ash84.
This is most likely caused by a git client misconfiguration; please make sure to:

  1. check if your git client is configured with an email to sign commits git config --list | grep email
  2. If not, set it up using git config --global user.email email@example.com
  3. Make sure that the git commit email is configured in your GitHub account settings, see https://github.com/settings/emails

1 similar comment
@cla-bot

cla-bot Bot commented Mar 25, 2026

Copy link
Copy Markdown

Thank you for your pull request and welcome to our community. We could not parse the GitHub identity of the following contributors: ash84.
This is most likely caused by a git client misconfiguration; please make sure to:

  1. check if your git client is configured with an email to sign commits git config --list | grep email
  2. If not, set it up using git config --global user.email email@example.com
  3. Make sure that the git commit email is configured in your GitHub account settings, see https://github.com/settings/emails

AhnSeongHyun and others added 4 commits March 26, 2026 00:09
@AhnSeongHyun @claude
feat: add tile border color and width customization
401d390 
Add settings UI controls for customizing focused tile border color (color
picker) and width (0-4px slider). Values are persisted via the pref system
and applied through CSS custom properties.

- Add --tile-focus-border-color and --tile-focus-border-width CSS vars
- Add applyTileBorderColor/applyTileBorderWidth functions in dark-mode.js
- Wire up pref loading and live updates in renderer.js
- Add Tile section with color picker and slider in settings App.tsx
- Add happy-dom test setup and 12 unit tests for new functions
- Fix bug where border width 0 was incorrectly defaulting to 1

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@AhnSeongHyun @claude
🎨 style: preserve original code formatting for shell.css
4d77977 
Keep tab indentation and single quotes from upstream.
Only include actual code changes (CSS variables for tile focus border).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@AhnSeongHyun @claude
🔥 remove: happy-dom and test code, restore original formatting
2ba6292 
- Remove happy-dom dependency and test setup
- Remove dark-mode.test.ts (not agreed upon)
- Restore original tab formatting in dark-mode.js
- Restore original bunfig.toml (remove test preload)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@AhnSeongHyun @claude
🎨 style: restore original formatting for renderer.js and App.tsx
383e509 
Keep original indentation style, only add actual code changes
for tile border customization feature.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@AhnSeongHyun
AhnSeongHyun force-pushed the feature/tile-border-customization-v2 branch from bd31c42 to 383e509 Compare March 25, 2026 15:10
@cla-bot

cla-bot Bot commented Mar 25, 2026

Copy link
Copy Markdown

Thanks for the pull request! It looks like @AhnSeongHyun haven't signed our Contributor License Agreement yet.

Please read the CLA, then sign by posting the following comment on this PR:

I have read the Contributor License Agreement (CLA) and hereby sign the CLA.

After signing, comment @cla-bot check to re-verify.

@AhnSeongHyun

AhnSeongHyun commented Mar 25, 2026

Copy link
Copy Markdown
Author

I have read the Contributor License Agreement (CLA) and hereby sign the CLA.

@AhnSeongHyun
AhnSeongHyun marked this pull request as ready for review March 25, 2026 15:12
@AhnSeongHyun

AhnSeongHyun commented Mar 25, 2026

Copy link
Copy Markdown
Author

@cla-bot check

@cla-bot cla-bot Bot added the cla-signed label Mar 25, 2026
@cla-bot

cla-bot Bot commented Mar 25, 2026

Copy link
Copy Markdown

The cla-bot has been summoned, and re-checked this pull request!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

cla-signed

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@AhnSeongHyun