Initial commit

frontend/src/components/PageIcon.jsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { api } from '../api.js';
+
+const ICONS_BASE = '/api/icons-files/';
+
+let _cache = null;
+let _promise = null;
+
+function getIcons() {
+  if (_cache) return Promise.resolve(_cache);
+  if (!_promise) {
+    _promise = api.get('/icons')
+      .then(rows => { _cache = {}; rows.forEach(r => { _cache[r.name] = r.filename; }); return _cache; })
+      .catch(() => { _cache = {}; return _cache; });
+  }
+  return _promise;
+}
+
+export default function PageIcon({ name, size = 40 }) {
+  const [filename, setFilename] = useState(() => _cache?.[name] ?? null);
+
+  useEffect(() => {
+    if (_cache) { setFilename(_cache[name] ?? null); return; }
+    getIcons().then(m => setFilename(m[name] ?? null));
+  }, [name]);
+
+  if (!filename) return null;
+  return (
+    <img
+      src={`${ICONS_BASE}${filename}`}
+      width={size}
+      height={size}
+      alt=""
+      aria-hidden="true"
+      style={{
+        display: 'inline',
+        verticalAlign: 'middle',
+        marginRight: 10,
+        objectFit: 'contain',
+        opacity: 0.85,
+      }}
+    />
+  );
+}