@signalk/app-dock 1.3.3 → 1.4.1

package/README.md

@@ -31,7 +31,7 @@ Open: `http://your-sk-server:3000/@signalk/app-dock/`
 
 ## Usage
 
-**Double-tap anywhere** on the screen to open the dock. Tap an app icon to switch. The dock auto-dismisses after selection, or tap the backdrop to close it. Double-click works the same way for mouse users.
+**Double-tap anywhere** on the screen to open the dock. Tap an app icon to switch. Tap the icon of the app already on screen to reload it, for example after the app was updated on the server. The dock auto-dismisses after selection, or tap the backdrop to close it. Double-click works the same way for mouse users.
 
 Tip: double-tapping a clickable element in the underlying webapp will activate that element once before the dock opens -- aim double-taps at non-interactive regions (maps, gauge backgrounds, empty space).
 
@@ -121,6 +121,10 @@ Visitors who are not admins reach the plugin's routes through `router.access()`,
 ## Development
 
 ```bash
+cd /path/to/app-dock
+npm install
+npm run build     # the server loads dist/ and serves public/; rebuild after a change
+
 cd ~/.signalk     # or a throwaway SK config dir for dev, e.g. ~/.signalk-app-dock
 npm link /path/to/app-dock
 ```
@@ -135,30 +139,37 @@ PORT=4000 npm start -- -c ~/.signalk-app-dock
 
 The repo ships three cooperating surfaces:
 
-- **`plugin/index.js`** -- CommonJS SK-server plugin. Registers the schema, seeds default apps on first run, exposes HTTP endpoints for the dock and config panel, and owns the `environment.mode` PUT handler.
-- **`public/dock.js` + `dock.css` + `index.html`** -- the dock UI itself. Plain JS, served as-is. **No build step**: edit and reload the browser.
-- **`src/configpanel/`** -- React 19 component exposed to the admin UI via Webpack Module Federation. Rebuild with `npm run build:config` after changes here; output lands in `public/remoteEntry.js` and companion chunks.
+- **`src/plugin/`** -- the SK-server plugin, an ES module compiled by `tsc` to `dist/plugin/`. Defines the configuration schema with TypeBox, seeds default apps on first run, exposes HTTP endpoints for the dock and config panel, and owns the `environment.mode` PUT handler.
+- **`src/dock/`** -- the dock UI (`index.html`, `dock.ts`, `dock.css`) and the standalone configurator (`config.html`, `config.ts`), built by Vite into `public/`, which the server serves at `/@signalk/app-dock/`. `src/dock/static/` holds the icons and the web manifest, copied as they are.
+- **`src/configpanel/`** -- React 19 component exposed to the admin UI via Module Federation (`@module-federation/vite`), built into `public/remoteEntry.js` and `public/configpanel/`. It uses the admin UI's own React, which signalk-server 2.27 and later expose.
+
+Everything is strict TypeScript. Vite only transpiles, so both Vite builds run the type checker (`vite-plugin-checker`) and fail on a type error. `public/` and `dist/` are build output and not committed; `npm run build` creates them.
 
 ### Scripts
 
-| Command                | Description                                                       |
-| ---------------------- | ----------------------------------------------------------------- |
-| `npm test`             | Run plugin tests (`node --test`)                                  |
-| `npm run format`       | Prettier + ESLint fix                                             |
-| `npm run lint`         | ESLint check                                                      |
-| `npm run build:config` | Rebuild the admin UI config panel (required after `src/` changes) |
+| Command                    | Description                                                       |
+| -------------------------- | ----------------------------------------------------------------- |
+| `npm run build`            | Build the plugin, the dock pages and the config panel             |
+| `npm run typecheck:config` | Type-check the Vite and ESLint configs                            |
+| `npm run build:server`     | Compile the plugin and its tests to `dist/`                       |
+| `npm run build:dock`       | Build the dock pages into `public/` (empties it first)            |
+| `npm run build:config`     | Build the admin UI config panel into `public/`                    |
+| `npm test`                 | Run the plugin tests (`node --test`) against `dist/`; build first |
+| `npm run format`           | Prettier + ESLint fix                                             |
+| `npm run format:check`     | Prettier check + ESLint, as CI runs them                          |
+| `npm run lint`             | ESLint check                                                      |
 
 ### Icon assets
 
-`public/app-icon.svg` has a transparent background: the artwork sits straight on whatever page shows it, so its colours have to read on light and dark backgrounds alike. Check a change on both before committing.
+`app-icon.svg` has a transparent background: the artwork sits straight on whatever page shows it, so its colours have to read on light and dark backgrounds alike. Check a change on both before committing.
 
 The 180-px apple-touch-icon needs an opaque background, because iOS fills transparency with black, and room for the corners iOS rounds off. Regenerate it from the SVG whenever that changes:
 
 ```bash
-rsvg-convert -w 132 -h 132 public/app-icon.svg | magick - -background '#0f172a' -gravity center -extent 180x180 -alpha remove -alpha off PNG24:public/app-icon-180.png
+rsvg-convert -w 132 -h 132 app-icon.svg | magick - -background '#0f172a' -gravity center -extent 180x180 -alpha remove -alpha off PNG24:src/dock/static/app-icon-180.png
 ```
 
-`public/app-icon-maskable.svg` is hand-authored: the same artwork on the same dark slate, scaled into Android's 80% safe zone. Update it by hand when the artwork changes.
+`src/dock/static/app-icon-maskable.svg` is hand-authored: the same artwork on the same dark slate, scaled into Android's 80% safe zone. Update it by hand when the artwork changes.
 
 ## License
 

package/app-icon.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="72" height="72">
+  <!-- Transparent background: the artwork is drawn straight on the canvas in
+       mid-tone colours that read on light and dark pages alike -->
+  <!-- Compass rose -->
+  <circle cx="36" cy="16" r="11" fill="none" stroke="#3b82f6" stroke-opacity="0.7" stroke-width="1.5"/>
+  <line x1="36" y1="3" x2="36" y2="7" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="23" y1="16" x2="27" y2="16" stroke="#3b82f6" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="45" y1="16" x2="49" y2="16" stroke="#3b82f6" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round"/>
+  <polygon points="36,8 33,16 36,14 39,16" fill="#ef4444"/>
+  <polygon points="36,24 33,16 36,18 39,16" fill="#64748b"/>
+  <!-- Dock pill -->
+  <rect x="3" y="44" width="66" height="22" rx="11" fill="#3b82f6" fill-opacity="0.15" stroke="#3b82f6" stroke-width="1.5"/>
+  <!-- Dock icons - 3 squares in the pill -->
+  <rect x="9" y="49" width="12" height="12" rx="3" fill="#3b82f6"/>
+  <rect x="30" y="49" width="12" height="12" rx="3" fill="#10b981"/>
+  <rect x="51" y="49" width="12" height="12" rx="3" fill="#f59e0b"/>
+  <!-- Middle icon magnified (popping up) -->
+  <rect x="27" y="29" width="18" height="18" rx="4.5" fill="#10b981"/>
+  <!-- Active dot under middle icon -->
+  <circle cx="36" cy="69.5" r="2" fill="#3b82f6"/>
+</svg>

package/dist/plugin/index.js

@@ -0,0 +1,141 @@
+import { ConfigSchema } from './schema.js';
+const DEFAULT_APPS = [
+    {
+        enabled: true,
+        autostart: true,
+        url: '/@signalk/freeboard-sk/',
+        label: 'Freeboard-SK',
+        icon: '/@signalk/freeboard-sk/assets/icons/icon-72x72.png',
+        color: ''
+    },
+    {
+        enabled: true,
+        autostart: false,
+        url: '/@halos-org/skip/',
+        label: 'Skip',
+        icon: '/@halos-org/skip/assets/icon-72x72.png',
+        color: ''
+    },
+    {
+        enabled: true,
+        autostart: false,
+        url: '/admin/',
+        label: 'Settings',
+        icon: '/@signalk/app-dock/icon-settings.svg',
+        color: '#78788c'
+    }
+];
+export default function appDock(app) {
+    let pluginSettings = {};
+    let resolvedApps = [];
+    let running = false;
+    function resolveApps(settings) {
+        return (Array.isArray(settings.apps) ? settings.apps : [])
+            .filter((a) => a.enabled !== false)
+            .map((a) => ({
+            label: a.label || a.url,
+            url: a.url,
+            icon: a.icon || null,
+            color: a.color || null,
+            autostart: a.autostart || false
+        }));
+    }
+    // The configuration as saved, the one /config serves. While the plugin is
+    // not running, pluginSettings is empty (never started) or holds what the
+    // last start() got, which a later save may have replaced.
+    function savedSettings() {
+        return app.readPluginOptions().configuration || {};
+    }
+    function getWebapps() {
+        return (app.webapps || [])
+            .filter((w) => w.name !== '@signalk/app-dock' && w.name !== '@signalk/server-admin-ui')
+            .map((w) => ({
+            name: w.name,
+            label: w.signalk?.displayName || w.name,
+            url: `/${w.name}/`,
+            icon: w.signalk?.appIcon ? `/${w.name}/${w.signalk.appIcon.replace(/^\.\//, '')}` : null
+        }));
+    }
+    const plugin = {
+        id: 'signalk-app-dock',
+        name: 'App Dock',
+        start(config) {
+            let settings = config;
+            if (!Array.isArray(settings.apps)) {
+                const seeded = DEFAULT_APPS.map((a) => ({ ...a }));
+                const seededSettings = {
+                    showNightModeButton: true,
+                    showFullscreenButton: false,
+                    showExitButton: false,
+                    ...settings,
+                    apps: seeded
+                };
+                app.debug('App Dock: first run, seeding %d default apps', seeded.length);
+                app.savePluginOptions(seededSettings, (err) => {
+                    if (err)
+                        app.error('App Dock: failed to save default apps: ' + err.message);
+                    else
+                        app.debug('App Dock: saved default apps to config');
+                });
+                settings = seededSettings;
+            }
+            pluginSettings = settings;
+            if (settings.showNightModeButton) {
+                app.registerPutHandler('vessels.self', 'environment.mode', (_context, _path, value) => {
+                    if (value !== 'day' && value !== 'night') {
+                        return { state: 'COMPLETED', statusCode: 400, message: 'Invalid mode' };
+                    }
+                    app.handleMessage(plugin.id, {
+                        updates: [{ values: [{ path: 'environment.mode', value }] }]
+                    });
+                    return { state: 'COMPLETED', statusCode: 200 };
+                }, plugin.id);
+            }
+            resolvedApps = resolveApps(settings);
+            running = true;
+            app.debug('App Dock: resolved %d apps: %s', resolvedApps.length, resolvedApps.map((a) => a.label).join(', '));
+        },
+        stop() {
+            running = false;
+        },
+        registerWithRouter(router) {
+            // Routes registered on the router itself are admin-only. signalk-server
+            // 2.31 and later add router.access(), which opens a route to readonly or
+            // readwrite users; on older servers every route stays admin-only.
+            // PluginRouter declares access() unconditionally, so older servers are
+            // told apart at runtime.
+            const access = router.access;
+            const openTo = (level) => typeof access === 'function' ? access.call(router, level) : router;
+            openTo('readonly').get('/settings', (_req, res) => {
+                const settings = running ? pluginSettings : savedSettings();
+                res.json({
+                    ...settings,
+                    apps: running ? resolvedApps : resolveApps(settings)
+                });
+            });
+            router.get('/webapps', (_req, res) => {
+                res.json(getWebapps());
+            });
+            openTo('readonly').get('/mode', (_req, res) => {
+                const current = app.getSelfPath('environment.mode');
+                res.json({ value: current?.value || 'day' });
+            });
+            openTo('readwrite').post('/dismiss-tour', (_req, res) => {
+                // savePluginOptions replaces the whole saved configuration, so the
+                // update starts from a complete one.
+                const updated = { ...(running ? pluginSettings : savedSettings()), tourDismissed: true };
+                app.savePluginOptions(updated, (err) => {
+                    if (err) {
+                        app.error('App Dock: failed to save tourDismissed: ' + err.message);
+                        res.status(500).json({ error: err.message });
+                        return;
+                    }
+                    pluginSettings = updated;
+                    res.json({ tourDismissed: true });
+                });
+            });
+        },
+        schema: ConfigSchema
+    };
+    return plugin;
+}

package/dist/plugin/schema.js

@@ -0,0 +1,58 @@
+import { Type } from 'typebox';
+// One definition is both the admin UI's configuration form (a TypeBox schema
+// is JSON Schema at runtime) and the TypeScript type of the saved
+// configuration. Every field is optional: a configuration saved by an older
+// release, or by hand, may lack any of them.
+export const AppEntrySchema = Type.Object({
+    enabled: Type.Optional(Type.Boolean({ title: 'Enabled', default: true })),
+    autostart: Type.Optional(Type.Boolean({
+        title: 'Autostart',
+        description: 'Load this app automatically when the dock page opens',
+        default: false
+    })),
+    url: Type.String({ title: 'URL' }),
+    label: Type.Optional(Type.String({ title: 'Label override' })),
+    icon: Type.Optional(Type.String({ title: 'Icon override', description: 'Emoji or image path' })),
+    color: Type.Optional(Type.String({ title: 'Background color' }))
+});
+export const ConfigSchema = Type.Object({
+    position: Type.Optional(Type.Enum(['bottom', 'top', 'left', 'right'], { type: 'string', title: 'Dock position', default: 'bottom' })),
+    iframeMode: Type.Optional(Type.Enum(['keep-alive', 'destroy'], {
+        type: 'string',
+        title: 'iFrame lifecycle',
+        description: 'keep-alive: load once and hide/show (faster switching, more RAM). ' +
+            'destroy: reload on every switch (slower, minimal RAM).',
+        default: 'keep-alive'
+    })),
+    iconSize: Type.Optional(Type.Number({ title: 'Icon size (px)', default: 56 })),
+    magnification: Type.Optional(Type.Boolean({ title: 'Enable dock magnification effect', default: true })),
+    magnificationScale: Type.Optional(Type.Number({ title: 'Magnification scale (1.0 = none, 2.5 = maximum)', default: 1.7 })),
+    showNightModeButton: Type.Optional(Type.Boolean({
+        title: 'Show night/day mode toggle',
+        description: 'Adds a sun/moon button to the dock that toggles environment.mode',
+        default: true
+    })),
+    showFullscreenButton: Type.Optional(Type.Boolean({
+        title: 'Show fullscreen toggle',
+        description: 'Adds a button to the dock that toggles browser fullscreen. ' +
+            'Hidden automatically when the Fullscreen API is not available (e.g. iPadOS Safari — use Add to Home Screen instead).',
+        default: false
+    })),
+    showExitButton: Type.Optional(Type.Boolean({
+        title: 'Show exit button',
+        description: 'Adds an X button to the dock that returns to Signal K admin UI',
+        default: false
+    })),
+    tourDismissed: Type.Optional(Type.Boolean({
+        title: 'Welcome tour dismissed',
+        description: 'Set automatically when a user clicks "Don\'t show again" in the welcome tour. Uncheck to show the tour again on all devices.',
+        default: false
+    })),
+    apps: Type.Optional(Type.Array(AppEntrySchema, {
+        title: 'Dock Apps',
+        description: 'Installed webapps are added here automatically. Reorder, disable, or override labels/icons as needed.',
+        default: []
+    }))
+}, {
+    description: 'Open /@signalk/app-dock/config.html for the visual configurator with discover button and drag-to-reorder.'
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalk/app-dock",
-  "version": "1.3.3",
+  "version": "1.4.1",
   "description": "macOS-style configurable app dock for switching between SignalK webapps on touch screens",
   "repository": {
     "url": "https://github.com/SignalK/app-dock"
@@ -21,33 +21,51 @@
       "./docs/screenshots/3_app-dock_config.png"
     ]
   },
-  "main": "plugin/index.js",
+  "type": "module",
+  "main": "dist/plugin/index.js",
   "files": [
-    "plugin/",
+    "app-icon.svg",
+    "dist/plugin/",
     "public/",
     "docs/screenshots/"
   ],
   "scripts": {
-    "build:config": "webpack",
-    "prepublishOnly": "webpack",
-    "format": "prettier --write '**/*.{js,json,md,css,html}' && eslint --fix .",
+    "build": "npm run build:server && npm run build:dock && npm run build:config",
+    "build:server": "tsc",
+    "build:dock": "vite build --config vite.dock.config.ts",
+    "build:config": "vite build --config vite.configpanel.config.ts",
+    "prepublishOnly": "npm run build",
+    "format": "prettier --write . && eslint --fix .",
     "lint": "eslint .",
-    "test": "node --test test/plugin.test.js"
+    "format:check": "prettier --check . && eslint .",
+    "test": "node --test \"dist/test/**/*.test.js\""
   },
   "author": "Dirk Wahrheit <dirkwahrheit@gmail.com>",
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=18"
+    "node": ">=22"
+  },
+  "dependencies": {
+    "typebox": "^1.3.37"
   },
   "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/preset-react": "^7.28.5",
-    "babel-loader": "^10.1.1",
+    "@eslint/js": "^10.0.1",
+    "@module-federation/vite": "^1.23.5",
+    "@signalk/server-api": "^2.33.0",
+    "@types/express": "^5.0.6",
+    "@types/node": "^22.19.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
     "eslint": "^10.1.0",
     "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.13.0",
+    "jiti": "^2.7.0",
     "prettier": "^3.8.1",
-    "react": "^19.2.4",
-    "webpack": "^5.105.4",
-    "webpack-cli": "^7.0.2"
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.71.2",
+    "vite": "^8.3.4",
+    "vite-plugin-checker": "^0.14.5"
   }
 }