Skip to content

refined tray icon and added animations - #1

Merged
GimpyHand merged 2 commits into
masterfrom
animate-icon
Jul 2, 2026
Merged

refined tray icon and added animations#1
GimpyHand merged 2 commits into
masterfrom
animate-icon

Conversation

@GimpyHand

@GimpyHand GimpyHand commented Jul 2, 2026

Copy link
Copy Markdown
Owner

Updated tray icon from static server icon to animated dot matrix that displays the current number of servers running. Added right-click functionality to cycle through animations and colours.

dot-matrix-demo.webm

Summary by CodeRabbit

  • New Features
    • Added a dot-matrix display and multiple animated visual styles to the GNOME extension, including a style switch action and improved idle/active appearance.
    • Updated Waybar to use the matrix-style icon sprite and animation.
    • Listener counts are now shown as zero-padded two-digit values.
  • Bug Fixes
    • Improved count clamping and consistent display formatting at boundary values.
    • Refined animation and refresh lifecycle handling for more reliable updates.
  • Chores
    • Bundled the extension’s required assets (JS/CSS) and migrated legacy styling/icon references.

@GimpyHand GimpyHand self-assigned this Jul 2, 2026
@GimpyHand GimpyHand added the enhancement New feature or request label Jul 2, 2026
@coderabbitai

coderabbitai Bot commented Jul 2, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 09d9edd4-bf23-4f76-adfa-4125751b7222

📥 Commits

Reviewing files that changed from the base of the PR and between bd3eb52 and 1c777b0.

📒 Files selected for processing (5)
  • gnome-extension/port-killer@local/extension.js
  • gnome-extension/port-killer@local/styles.js
  • src/main.rs
  • src/setup.rs
  • src/setup_gnome.rs
🚧 Files skipped from review as they are similar to previous changes (5)
  • gnome-extension/port-killer@local/styles.js
  • gnome-extension/port-killer@local/extension.js
  • src/setup_gnome.rs
  • src/main.rs
  • src/setup.rs

📝 Walkthrough

Walkthrough

This PR replaces the port-killer status icon with a dot-matrix display, adds GNOME extension rendering/style modules, updates extension asset installation, revises Waybar icon/CSS handling, and formats the Waybar count text as zero-padded two digits.

Changes

Dot-matrix visualization feature

Layer / File(s) Summary
Dot-matrix rendering utility
gnome-extension/port-killer@local/dot-matrix.js
Adds glyph bitmaps, layout constants, ring geometry, and helper functions for clamping counts, formatting digits, and generating dot and scramble positions.
Style/animation and color scheme module
gnome-extension/port-killer@local/styles.js
Adds color schemes, ambient animation generators, style index decoding and labeling, and color resolution.
GNOME extension indicator wiring
gnome-extension/port-killer@local/extension.js, gnome-extension/port-killer@local/extension.css, gnome-extension/port-killer@local/metadata.json
Refactors the indicator to render the dot-matrix, persist and cycle style selection, animate with reduced-motion support, update tooltip and menu content, and clean up timers; adds CSS and metadata updates.
GNOME extension asset installation
src/setup_gnome.rs
Embeds and writes dot-matrix.js, styles.js, and extension.css during install; removes prior server-symbolic icon installation.
Waybar matrix sprite icon and CSS
src/icon.rs, src/setup.rs, examples/waybar-port-killer.jsonc
Adds matrix sprite icon constants and installs them, rewrites WAYBAR_CSS with matrix keyframe animation, adjusts style patching to detect and skip when the matrix sprite is already applied, and updates the example icon comment.
Zero-padded waybar count formatting
src/main.rs
Clamps listener count to 99 and formats waybar_json() text as zero-padded two digits, with new tests.

Estimated code review effort: 3 (Moderate) | ~30 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant PortKillerIndicator
  participant StylesModule
  participant DotMatrixModule

  User->>PortKillerIndicator: right-click
  PortKillerIndicator->>PortKillerIndicator: cycle persisted style index
  PortKillerIndicator->>StylesModule: decodeStyleIndex(flatIndex)
  StylesModule-->>PortKillerIndicator: animation + color scheme
  PortKillerIndicator->>StylesModule: resolveColors(scheme, themeFg)
  StylesModule-->>PortKillerIndicator: digit/accent/trail colors
  PortKillerIndicator->>DotMatrixModule: digitDotPositions(tens, ones)
  DotMatrixModule-->>PortKillerIndicator: dot coordinates
  PortKillerIndicator->>PortKillerIndicator: repaint drawing area
Loading
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title matches the main change: a refined tray icon with added animations.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch animate-icon

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

@coderabbitai coderabbitai 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.

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)
src/setup.rs (1)

341-355: 🗄️ Data Integrity & Integration | 🟠 Major | 🏗️ Heavy lift

Migration path can corrupt user's style.css with orphaned CSS lines.

Previously, content containing port-killer-server.svg returned early (no-op). Now that marker also triggers the removal branch at Line 345, which strips lines via .filter(|line| !line.contains("custom-port-killer")). This only removes selector lines (e.g. #custom-port-killer {, #custom-port-killer.active {) but leaves their property lines and closing } behind as stray top-level CSS, since those don't contain the literal substring "custom-port-killer". This is invalid CSS that can break GTK's stylesheet parsing beyond just this widget for anyone upgrading from a prior server-icon install.

🔧 Proposed fix: track brace depth to remove the whole rule block
-    if content.contains("`#custom-port-killer`") || content.contains("port-killer-server.svg") {
-        let without_old: String = content
-            .lines()
-            .filter(|line| !line.contains("custom-port-killer"))
-            .collect::<Vec<_>>()
-            .join("\n");
+    if content.contains("`#custom-port-killer`") || content.contains("port-killer-server.svg") {
+        let mut without_old = String::new();
+        let mut depth: i32 = 0;
+        let mut in_old_rule = false;
+        for line in content.lines() {
+            let starts_rule = line.contains("custom-port-killer") && depth == 0;
+            if starts_rule {
+                in_old_rule = true;
+            }
+            if in_old_rule {
+                depth += line.matches('{').count() as i32;
+                depth -= line.matches('}').count() as i32;
+                if depth <= 0 {
+                    in_old_rule = false;
+                    depth = 0;
+                }
+                continue;
+            }
+            without_old.push_str(line);
+            without_old.push('\n');
+        }

Recommend adding a regression test that runs patch_waybar_style against a realistic pre-existing multi-line old CSS block and asserts the resulting file is valid/parseable, not just checking WAYBAR_CSS constant contents.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/setup.rs` around lines 341 - 355, The `patch_waybar_style` migration
branch is only filtering lines containing `custom-port-killer`, which leaves
orphaned property lines and closing braces behind when replacing an old
`port-killer-server.svg` style block. Update the removal logic in `setup.rs` so
it removes the entire legacy `#custom-port-killer` rule(s) using brace-depth or
another block-aware approach before appending `WAYBAR_CSS`, and keep the early
return for `port-killer-matrix-sprite.svg` unchanged. Add a regression test
around `patch_waybar_style` that feeds in a realistic multi-line old stylesheet
and verifies the rewritten output is valid rather than only matching constants.
🧹 Nitpick comments (3)
src/main.rs (1)

230-248: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Minor: hardcoded "00" duplicates the padding logic.

The empty branch hardcodes "00".to_string() while the non-empty branch derives the padded string from count. Since count is 0 in the empty case anyway, using format!("{count:02}") in both branches would avoid duplicating the "2-digit zero pad" convention in two places.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/main.rs` around lines 230 - 248, The empty branch in the listener display
logic duplicates the zero-padding rule by hardcoding "00" instead of using the
same count formatting used in the non-empty path. Update the `main` status text
construction so the `count` value is rendered consistently with
`format!("{count:02}")` in both branches, keeping the `listeners.is_empty()`
handling and tooltip/class selection unchanged.
src/setup.rs (1)

401-407: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Consider adding a migration test for patch_waybar_style.

Current test only checks WAYBAR_CSS string contents; there's no test exercising the migration branch (Lines 341-355) against a realistic old-style CSS block, which would have caught the orphaned-line issue flagged above.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/setup.rs` around lines 401 - 407, Add a migration test for
patch_waybar_style that feeds it a realistic old-style Waybar CSS block and
asserts the migrated output is correct. The current
waybar_css_includes_matrix_animation test only checks WAYBAR_CSS constants, so
it does not exercise the migration branch in patch_waybar_style. Add coverage
around the patch_waybar_style function using an old CSS sample that would reveal
the orphaned-line issue and verify the transformed CSS is preserved as expected.
src/setup_gnome.rs (1)

5-9: 🗄️ Data Integrity & Integration | 🔵 Trivial | 💤 Low value

Delete stale icons/ files on upgrade. install_extension() now writes the extension assets at the extension root, so older installs can keep an unused icons/server-symbolic.svg unless you remove it during install.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/setup_gnome.rs` around lines 5 - 9, The install_extension flow leaves
behind stale extension assets from older installs, specifically unused files
under the icons directory. Update install_extension in setup_gnome.rs to remove
the old icons/server-symbolic.svg path as part of the upgrade/install cleanup
before or after writing the new extension assets, so the extension root stays in
sync with the current files.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@gnome-extension/port-killer`@local/extension.js:
- Around line 201-228: The loop timer in _syncLoopTimer is being stopped too
early when _setCount transitions to 0, which freezes the scramble animation
before the SCRAMBLE_MS window finishes. Update the shouldRun logic in
_syncLoopTimer (and, if needed, the _setCount transition that sets
_scrambleUntil) so the timer stays active while the current time is still before
_scrambleUntil, even when this._count is 0. Keep using _loopTimerId, _loopFrame,
and _matrix.queue_repaint() so the scramble can settle smoothly into the idle
state instead of waiting for the next refresh.

In `@gnome-extension/port-killer`@local/styles.js:
- Around line 48-61: The Breathe animation in `breathe()` has a phase that does
not line up with its `frameCount`, so the loop jumps at wraparound. Update the
sine phase in `breathe(frame)` so one or more full cycles complete exactly over
the 24-frame animation used in `ANIMATIONS` (for example by deriving the
multiplier from `frameCount`), keeping the first and last frames visually
continuous.

---

Outside diff comments:
In `@src/setup.rs`:
- Around line 341-355: The `patch_waybar_style` migration branch is only
filtering lines containing `custom-port-killer`, which leaves orphaned property
lines and closing braces behind when replacing an old `port-killer-server.svg`
style block. Update the removal logic in `setup.rs` so it removes the entire
legacy `#custom-port-killer` rule(s) using brace-depth or another block-aware
approach before appending `WAYBAR_CSS`, and keep the early return for
`port-killer-matrix-sprite.svg` unchanged. Add a regression test around
`patch_waybar_style` that feeds in a realistic multi-line old stylesheet and
verifies the rewritten output is valid rather than only matching constants.

---

Nitpick comments:
In `@src/main.rs`:
- Around line 230-248: The empty branch in the listener display logic duplicates
the zero-padding rule by hardcoding "00" instead of using the same count
formatting used in the non-empty path. Update the `main` status text
construction so the `count` value is rendered consistently with
`format!("{count:02}")` in both branches, keeping the `listeners.is_empty()`
handling and tooltip/class selection unchanged.

In `@src/setup_gnome.rs`:
- Around line 5-9: The install_extension flow leaves behind stale extension
assets from older installs, specifically unused files under the icons directory.
Update install_extension in setup_gnome.rs to remove the old
icons/server-symbolic.svg path as part of the upgrade/install cleanup before or
after writing the new extension assets, so the extension root stays in sync with
the current files.

In `@src/setup.rs`:
- Around line 401-407: Add a migration test for patch_waybar_style that feeds it
a realistic old-style Waybar CSS block and asserts the migrated output is
correct. The current waybar_css_includes_matrix_animation test only checks
WAYBAR_CSS constants, so it does not exercise the migration branch in
patch_waybar_style. Add coverage around the patch_waybar_style function using an
old CSS sample that would reveal the orphaned-line issue and verify the
transformed CSS is preserved as expected.
🪄 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: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7b3aba9c-250f-48e6-9b9a-3aa4a48bca45

📥 Commits

Reviewing files that changed from the base of the PR and between 5131ea6 and bd3eb52.

⛔ Files ignored due to path filters (1)
  • assets/icons/port-killer-matrix-sprite.svg is excluded by !**/*.svg
📒 Files selected for processing (10)
  • examples/waybar-port-killer.jsonc
  • gnome-extension/port-killer@local/dot-matrix.js
  • gnome-extension/port-killer@local/extension.css
  • gnome-extension/port-killer@local/extension.js
  • gnome-extension/port-killer@local/metadata.json
  • gnome-extension/port-killer@local/styles.js
  • src/icon.rs
  • src/main.rs
  • src/setup.rs
  • src/setup_gnome.rs

Comment thread gnome-extension/port-killer@local/extension.js
Comment thread gnome-extension/port-killer@local/styles.js
@GimpyHand
GimpyHand merged commit dec928e into master Jul 2, 2026
1 check passed
@GimpyHand
GimpyHand deleted the animate-icon branch July 2, 2026 18:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant