Skip to content

Commit 30942bc

Browse files
author
devpossible
committed
Widget Refactor
1 parent 1ab6b4e commit 30942bc

File tree

107 files changed

+12149
-3530
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

107 files changed

+12149
-3530
lines changed

‎.claude/commands/ensure-panelvisualappeal.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
description: Validate and review panel visual appeal against layout and style requirements
3+
allowed-tools: Read, Glob, Grep, Bash
4+
---
5+
6+
# Ensure Panel Visual Appeal Command
7+
8+
Validate panel visual appeal for: $ARGUMENTS
9+
10+
## Workflow
11+
12+
### Step 1: Load Visual Appeal Rules
13+
14+
Read the visual appeal standards:
15+
```
16+
.claude/rules/panel-visual-appeal.md
17+
```
18+
19+
### Step 2: Parse Arguments
20+
21+
Arguments can be:
22+
- `<panel-id>` - Render and analyze the panel
23+
- `<screenshot-path>` - Analyze existing screenshot only
24+
- `<panel-id> <screenshot-path>` - Use provided screenshot for panel
25+
26+
### Step 3: Gather Assets
27+
28+
If panel ID provided:
29+
30+
1. **Build if needed:**
31+
```bash
32+
dotnet build src/LCDPossible.sln -c Release --verbosity quiet
33+
```
34+
35+
2. **Render the panel:**
36+
```bash
37+
dotnet run --project src/LCDPossible/LCDPossible.csproj -c Release -- test <panel-id> -w 2 --debug
38+
```
39+
40+
3. **Locate generated files:**
41+
- Screenshot: `~/[panel-id]-cyberpunk.jpg`
42+
- Debug HTML: `%TEMP%/[panel-id]-debug.html`
43+
44+
### Step 4: Visual Analysis
45+
46+
View the screenshot using the Read tool and evaluate against all 14 rules:
47+
48+
1. Container Filling
49+
2. Element Centering
50+
3. Color Contrast
51+
4. Container Boundaries
52+
5. Panel Utilization
53+
6. Typography Hierarchy
54+
7. Consistent Spacing
55+
8. Grid Alignment
56+
9. Truncation Handling
57+
10. Empty/No-Data States
58+
11. Visual Balance
59+
12. Color Semantics
60+
13. Icon/Symbol Proportionality
61+
14. Theme Compliance
62+
63+
### Step 5: HTML/CSS Analysis
64+
65+
If HTML available, search for:
66+
- Hardcoded colors (grep for `#[0-9a-fA-F]`, `rgb(`, `style=.*color`)
67+
- Grid spans (check col-span values match container needs)
68+
- Font sizes (ensure text-2xl+ for values)
69+
- Centering classes (flex, items-center, justify-center)
70+
71+
### Step 6: Generate Report
72+
73+
Output the report in this format:
74+
75+
```markdown
76+
# Panel Visual Appeal Report
77+
78+
**Panel ID:** [panel-id]
79+
**Theme:** cyberpunk
80+
**Resolution:** 1280x480
81+
**Date:** [date]
82+
83+
## Summary
84+
85+
| Rule | Status | Notes |
86+
|------|--------|-------|
87+
| 1. Container Filling | PASS/WARN/FAIL | |
88+
| ... | ... | ... |
89+
90+
**Overall Score:** X/14 PASS, Y WARN, Z FAIL
91+
92+
## Detailed Findings
93+
94+
[List issues and recommendations]
95+
96+
## Recommended Fixes
97+
98+
[Specific code changes if any issues found]
99+
```
100+
101+
### Step 7: Offer to Fix
102+
103+
If issues found, offer to make the fixes:
104+
- For code issues: Edit the panel source file
105+
- For CSS issues: Edit the WidgetPanel rendering methods
106+
107+
## Output
108+
109+
Report summarizing:
110+
- Pass/Warn/Fail status for all 14 rules
111+
- Specific issues found with locations
112+
- Recommended fixes with code examples

‎.claude/rules/no-remote-assets.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# No Remote Assets Rule
2+
3+
**All core assets must be local.** No CDN, remote URLs, or external dependencies at runtime.
4+
5+
## Applies To
6+
7+
- `src/LCDPossible.Sdk/html_assets/` - All web assets for panel rendering
8+
- HTML templates used in panels
9+
- Any embedded resources
10+
11+
## Prohibited
12+
13+
| Type | Examples |
14+
|------|----------|
15+
| CSS imports | `@import url('https://...')` |
16+
| Stylesheets | `<link href="https://...">` |
17+
| Scripts | `<script src="https://...">` |
18+
| Fonts | Google Fonts, Adobe Fonts, any `@font-face` with remote URLs |
19+
| Images | Remote image URLs in CSS or HTML |
20+
| Any fetch | Runtime requests to external services |
21+
22+
## Required
23+
24+
1. **Download and bundle** all third-party CSS/JS libraries locally
25+
2. **Use system font stacks** instead of web fonts:
26+
27+
```css
28+
/* Sans-serif */
29+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
30+
31+
/* Monospace */
32+
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
33+
```
34+
35+
3. **Embed or bundle** any required icons/images as local files or data URIs
36+
37+
## Rationale
38+
39+
1. **Offline operation** - LCD displays may not have internet access
40+
2. **Consistent rendering** - No network latency or failures
41+
3. **Privacy** - No external requests from the display system
42+
4. **Reliability** - CDNs can go down or change URLs
43+
5. **Performance** - No DNS lookups or connection overhead

‎.claude/rules/panel-naming.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# Panel Naming Convention
2+
3+
## Panel ID Guidelines
4+
5+
Panel IDs (`PanelId` property) should describe the panel's **content**, not its implementation.
6+
7+
### Do NOT use generic terms:
8+
- `widget` (e.g., ~~cpu-widget~~, ~~network-widget~~)
9+
- `panel` (e.g., ~~cpu-panel~~, ~~info-panel~~)
10+
- `card` (e.g., ~~stat-card~~, ~~data-card~~)
11+
- `display` (e.g., ~~cpu-display~~)
12+
- `view` (e.g., ~~cpu-view~~)
13+
14+
### DO use content-descriptive names:
15+
16+
| Good | Bad |
17+
|------|-----|
18+
| `cpu-info` | `cpu-widget` |
19+
| `cpu-usage` | `cpu-panel` |
20+
| `cpu-usage-graphic` | `cpu-usage-widget` |
21+
| `network-status` | `network-widget` |
22+
| `ram-usage-text` | `ram-panel` |
23+
| `system-thermal` | `thermal-widget` |
24+
25+
### Naming Pattern
26+
27+
```
28+
{subject}-{content-type}[-{variant}]
29+
```
30+
31+
- **subject**: What the panel shows (cpu, gpu, ram, network, system, proxmox)
32+
- **content-type**: Type of information (info, usage, status, thermal, summary)
33+
- **variant** (optional): Presentation style (text, graphic, list)
34+
35+
### Variant Suffix Must Match Content
36+
37+
The variant suffix indicates what visual elements the panel contains. **Content must match the suffix:**
38+
39+
| Suffix | Allowed Content | NOT Allowed |
40+
|--------|-----------------|-------------|
41+
| `-text` | Text only (stat cards, labels, values) | Gauges, charts, progress arcs, sparklines |
42+
| `-graphic` | Text + graphical elements (gauges, charts, bars, donuts) | N/A - anything allowed |
43+
| `-info` | General information, typically text-focused | N/A - flexible |
44+
45+
**Violation example:** `cpu-usage-text` panel containing a gauge arc - the "-text" suffix promises text-only but delivers graphics.
46+
47+
**Why this matters:**
48+
- Users selecting "-text" variants expect minimal visual complexity
49+
- Consistent naming helps users predict panel appearance
50+
- Enables filtering panels by visual style
51+
52+
### Examples
53+
54+
```csharp
55+
// Good - describes content
56+
public override string PanelId => "cpu-info";
57+
public override string PanelId => "cpu-usage-graphic";
58+
public override string PanelId => "network-status";
59+
public override string PanelId => "system-thermal-graphic";
60+
61+
// Bad - uses generic terms
62+
public override string PanelId => "cpu-widget"; // Don't use 'widget'
63+
public override string PanelId => "network-panel"; // Don't use 'panel'
64+
```
65+
66+
### Rationale
67+
68+
1. **User-facing**: Panel IDs appear in CLI commands and config files
69+
2. **Self-documenting**: `cpu-usage-graphic` tells you what to expect
70+
3. **Consistent**: Matches existing panels (cpu-info, ram-usage-text, etc.)
71+
4. **Searchable**: Users can find panels by content type

0 commit comments

Comments
 (0)