Skip to content

feat(ui): implement SVG outlines, nested require resolvers, sidebar PWA, and mismatch badges - #206

Merged
ceoloide merged 8 commits into
mainfrom
feature/ui-components
Jul 16, 2026
Merged

ceoloide merged 8 commits into
mainfrom
feature/ui-components

Conversation

@ceoloide

@ceoloide ceoloide commented Jul 16, 2026 •

Copy link
Copy Markdown
Owner

This PR implements user-facing UI enhancements, including native SVG outline parsing and uploading, dynamic nested require overrides inside worker modules, PWA installation prompts integrated directly into the Settings panel under a dedicated Offline group, and versioning/compatibility alerts.

Key Changes

1. SVG Outline Injections & svg_paths_to_outline Wrapping (#195)

  • Implemented native vector .svg parsing logic in src/utils/svgParser.ts.
  • Extracts SVG path definitions (d attributes) from uploaded vector files and dynamically wraps them in the project's native svg_paths_to_outline helper wrapper:
    const u = require('../utils');
    
    module.exports = (config, name, points, outlines, units) => {
        const paths = [
            "<path d data>"
        ];
        return u.svg_paths_to_outline(paths, config, name, points, outlines, units);
    };
  • Permits direct drag-and-drop loading of ZIP archives containing .svg outline files.

2. Custom Require Evaluation Overrides

  • Updated the custom require evaluator (src/utils/injectionEvaluator.ts) to dynamically resolve relative package requires like require('../../packages.json') or require('../../package.json').
  • Bypasses evaluation failures in custom templates that require package metadata from relative parent levels.

3. Settings PWA Installation Group (#172)

  • Added an "Offline" settings group to the Settings panel with a single "Offline App" option.
  • Provides a clean button interface to trigger app installation. Displays dynamic states:
    • Install App (available to install, triggers prompt).
    • Installing... (install choice is pending).
    • Installed (app is already running standalone or installed).
    • Unavailable (PWA installation unsupported by browser/OS, showing an inline warning description in warning color).
  • Removed the old install chips from both the Header and SideNavigation.

4. Warning Banners & Dialog Mismatch Badges (#173, #174)

  • Implemented floating warnings in Banners.tsx that notify users when custom outlines or templates are skipped due to active feature flags.
  • Enhanced the version compatibility check dialog (ShareVersionCompatibilityDialog.tsx) with status badges and warnings.

Closes #195
Closes #172
Closes #173
Closes #174

@ceoloide
ceoloide merged commit e28c42c into main Jul 16, 2026
2 checks passed
github-actions Bot pushed a commit that referenced this pull request Jul 16, 2026
This PR implements user-facing UI enhancements, including native SVG outline parsing and uploading, dynamic nested require overrides inside worker modules, PWA installation prompts integrated directly into the Settings panel under a dedicated Offline group, and versioning/compatibility alerts.

## Key Changes

### 1. SVG Outline Injections & svg_paths_to_outline Wrapping (#195)
- Implemented native vector `.svg` parsing logic in `src/utils/svgParser.ts`.
- Extracts SVG path definitions (`d` attributes) from uploaded vector files and dynamically wraps them in the project's native `svg_paths_to_outline` helper wrapper:
  ```javascript
  const u = require('../utils');

  module.exports = (config, name, points, outlines, units) => {
      const paths = [
          "<path d data>"
      ];
      return u.svg_paths_to_outline(paths, config, name, points, outlines, units);
  };
  ```
- Permits direct drag-and-drop loading of ZIP archives containing `.svg` outline files.

### 2. Custom Require Evaluation Overrides
- Updated the custom `require` evaluator (`src/utils/injectionEvaluator.ts`) to dynamically resolve relative package requires like `require('../../packages.json')` or `require('../../package.json')`.
- Bypasses evaluation failures in custom templates that require package metadata from relative parent levels.

### 3. Settings PWA Installation Group (#172)
- Added an **"Offline"** settings group to the Settings panel with a single **"Offline App"** option.
- Provides a clean button interface to trigger app installation. Displays dynamic states:
  - **Install App** (available to install, triggers prompt).
  - **Installing...** (install choice is pending).
  - **Installed** (app is already running standalone or installed).
  - **Unavailable** (PWA installation unsupported by browser/OS, showing an inline warning description in warning color).
- Removed the old install chips from both the Header and SideNavigation.

### 4. Warning Banners & Dialog Mismatch Badges (#173, #174)
- Implemented floating warnings in `Banners.tsx` that notify users when custom outlines or templates are skipped due to active feature flags.
- Enhanced the version compatibility check dialog (`ShareVersionCompatibilityDialog.tsx`) with status badges and warnings.

---

Closes #195
Closes #172
Closes #173
Closes #174
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

1 participant