Extended with favicon

apps/spa/esbuild.config.js

@@ -0,0 +1,11 @@
+const copyStaticFiles = require('esbuild-copy-static-files');
+
+module.exports = function (config) {
+  config.plugins.push(
+    copyStaticFiles({
+      src: './static',
+      dest: config.outdir,
+    }),
+  );
+  return config;
+};

apps/spa/package.json

@@ -38,6 +38,7 @@
     "@types/react-dom": "^18",
     "@types/react-router": "^5",
     "@types/react-router-dom": "^5",
+    "esbuild-copy-static-files": "0.1.0",
     "piral-cli": "1.5.6",
     "piral-cli-esbuild": "latest",
     "typescript": "latest"

apps/spa/src/index.tsx

@@ -11,6 +11,7 @@ import { getCurrentUser } from './auth';
 
 const root = createRoot(document.querySelector('#app'));
 const user = getCurrentUser();
+const autoUpdate = process.env.DEBUG_PILET === 'on';
 
 if (!user) {
   root.render(<SelectUser />);
@@ -23,12 +24,13 @@ if (!user) {
     },
     plugins: [
       ...createStandardApi(),
-      createUpdateApi({
-        listen: checkPeriodically({
-          period: 10 * 1000,
+      autoUpdate &&
+        createUpdateApi({
+          listen: checkPeriodically({
+            period: 10 * 1000,
+          }),
         }),
-      }),
-    ],
+    ].filter(Boolean),
     requestPilets() {
       return fetch(`${feedUrl}?role=${user.role}&target=spa`)
         .then((res) => res.json())

apps/spa/static/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

mfs/profile/src/Profile.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { ExtensionComponentProps } from 'spa-app';
+
+interface ProfileData {
+  user: any;
+  logout: any;
+}
+
+const Profile: React.FC<ExtensionComponentProps<ProfileData>> = ({ params }) => {
+  const { user, logout } = params;
+  const exit = (e: React.SyntheticEvent) => {
+    e.preventDefault();
+    logout();
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row', gap: '0.5rem' }}>
+      <img src={user.icon} width="24" height="24" />
+      <span>{user.name}</span>
+      <a href="#" onClick={exit}>
+        🚪
+      </a>
+    </div>
+  );
+};
+
+export default Profile;

mfs/profile/src/index.tsx

@@ -1,3 +1,6 @@
-import { PiletApi } from 'spa-app';
+import type { PiletApi } from 'spa-app';
+import Profile from './Profile';
 
-export function setup(api: PiletApi) {}
+export function setup(api: PiletApi) {
+  api.registerExtension('user-profile-menu', Profile);
+}