From c7b02f02ad0a7e2888f2d7d3599719e59bbd1ee2 Mon Sep 17 00:00:00 2001
From: Nathan Reiner <nathan@nathanreiner.xyz>
Date: Thu, 13 Nov 2025 14:56:02 +0100
Subject: frontend: design prototype

---
 static/icons/192.png     | Bin 0 -> 3608 bytes
 static/icons/512.png     | Bin 0 -> 10138 bytes
 static/icons/add.js      |   3 +++
 static/icons/calendar.js |   3 +++
 static/icons/check.js    |   3 +++
 static/icons/close.js    |   3 +++
 static/icons/edit.js     |   3 +++
 static/icons/home.js     |   4 ++++
 static/icons/icon.svg    |  51 +++++++++++++++++++++++++++++++++++++++++++++++
 static/icons/index.js    |  31 ++++++++++++++++++++++++++++
 static/icons/search.js   |   3 +++
 static/icons/settings.js |   3 +++
 static/icons/shuffle.js  |   4 ++++
 13 files changed, 111 insertions(+)
 create mode 100644 static/icons/192.png
 create mode 100644 static/icons/512.png
 create mode 100644 static/icons/add.js
 create mode 100644 static/icons/calendar.js
 create mode 100644 static/icons/check.js
 create mode 100644 static/icons/close.js
 create mode 100644 static/icons/edit.js
 create mode 100644 static/icons/home.js
 create mode 100644 static/icons/icon.svg
 create mode 100644 static/icons/index.js
 create mode 100644 static/icons/search.js
 create mode 100644 static/icons/settings.js
 create mode 100644 static/icons/shuffle.js

(limited to 'static/icons')

diff --git a/static/icons/192.png b/static/icons/192.png
new file mode 100644
index 0000000..802e580
Binary files /dev/null and b/static/icons/192.png differ
diff --git a/static/icons/512.png b/static/icons/512.png
new file mode 100644
index 0000000..3a3ceed
Binary files /dev/null and b/static/icons/512.png differ
diff --git a/static/icons/add.js b/static/icons/add.js
new file mode 100644
index 0000000..12650a8
--- /dev/null
+++ b/static/icons/add.js
@@ -0,0 +1,3 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
+  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>
+</svg>`;
diff --git a/static/icons/calendar.js b/static/icons/calendar.js
new file mode 100644
index 0000000..9d9b2ec
--- /dev/null
+++ b/static/icons/calendar.js
@@ -0,0 +1,3 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-week-fill" viewBox="0 0 16 16">
+  <path d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2M9.5 7h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5m3 0h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5M2 10.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5"/>
+</svg>`;
diff --git a/static/icons/check.js b/static/icons/check.js
new file mode 100644
index 0000000..dfc2763
--- /dev/null
+++ b/static/icons/check.js
@@ -0,0 +1,3 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
+  <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/>
+</svg>`
diff --git a/static/icons/close.js b/static/icons/close.js
new file mode 100644
index 0000000..8c96dbd
--- /dev/null
+++ b/static/icons/close.js
@@ -0,0 +1,3 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
+  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+</svg>`;
diff --git a/static/icons/edit.js b/static/icons/edit.js
new file mode 100644
index 0000000..e13bb8a
--- /dev/null
+++ b/static/icons/edit.js
@@ -0,0 +1,3 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pen-fill" viewBox="0 0 16 16">
+  <path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001"/>
+</svg>`;
diff --git a/static/icons/home.js b/static/icons/home.js
new file mode 100644
index 0000000..a6b4886
--- /dev/null
+++ b/static/icons/home.js
@@ -0,0 +1,4 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
+  <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z"/>
+  <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z"/>
+</svg>`;
diff --git a/static/icons/icon.svg b/static/icons/icon.svg
new file mode 100644
index 0000000..87b8771
--- /dev/null
+++ b/static/icons/icon.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1"
+   inkscape:export-filename="192.png"
+   inkscape:export-xdpi="36"
+   inkscape:export-ydpi="36"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   sodipodi:docname="icon.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="1.1960048"
+     inkscape:cx="267.55745"
+     inkscape:cy="277.59085"
+     inkscape:window-width="1914"
+     inkscape:window-height="1054"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <circle
+       style="fill:#000000;stroke-width:3.04152;stroke-linecap:round;stroke-linejoin:round"
+       id="path1"
+       cx="256"
+       cy="256"
+       r="227.42381" />
+  </g>
+</svg>
diff --git a/static/icons/index.js b/static/icons/index.js
new file mode 100644
index 0000000..08ab7ea
--- /dev/null
+++ b/static/icons/index.js
@@ -0,0 +1,31 @@
+import * as sfw from 'sfw';
+const { I } = sfw.element.native;
+
+const icons = [
+	'settings',
+	'shuffle',
+	'calendar',
+	'search',
+	'close',
+	'home',
+	'add',
+	'edit',
+	'check',
+];
+
+const target = {
+	icons: await Promise.all(
+		icons.map(async v => [v, await import(`./${v}.js`)])
+	).then(r => r.reduce((obj, [v, m]) => (obj[v] = m, obj), {})),
+};
+
+const handler = {
+	get(target, prop, receiver) {
+		return I.new({
+			innerHTML: target.icons[prop]?.default ?? '?',
+			className: 'icon',
+		});
+	}
+};
+
+export default new Proxy(target, handler);
diff --git a/static/icons/search.js b/static/icons/search.js
new file mode 100644
index 0000000..a35ff2a
--- /dev/null
+++ b/static/icons/search.js
@@ -0,0 +1,3 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
+  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+</svg>`;
diff --git a/static/icons/settings.js b/static/icons/settings.js
new file mode 100644
index 0000000..258c8f8
--- /dev/null
+++ b/static/icons/settings.js
@@ -0,0 +1,3 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
+  <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+</svg>`;
diff --git a/static/icons/shuffle.js b/static/icons/shuffle.js
new file mode 100644
index 0000000..d538fd8
--- /dev/null
+++ b/static/icons/shuffle.js
@@ -0,0 +1,4 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shuffle" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M0 3.5A.5.5 0 0 1 .5 3H1c2.202 0 3.827 1.24 4.874 2.418.49.552.865 1.102 1.126 1.532.26-.43.636-.98 1.126-1.532C9.173 4.24 10.798 3 13 3v1c-1.798 0-3.173 1.01-4.126 2.082A9.6 9.6 0 0 0 7.556 8a9.6 9.6 0 0 0 1.317 1.918C9.828 10.99 11.204 12 13 12v1c-2.202 0-3.827-1.24-4.874-2.418A10.6 10.6 0 0 1 7 9.05c-.26.43-.636.98-1.126 1.532C4.827 11.76 3.202 13 1 13H.5a.5.5 0 0 1 0-1H1c1.798 0 3.173-1.01 4.126-2.082A9.6 9.6 0 0 0 6.444 8a9.6 9.6 0 0 0-1.317-1.918C4.172 5.01 2.796 4 1 4H.5a.5.5 0 0 1-.5-.5"/>
+  <path d="M13 5.466V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192m0 9v-3.932a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192"/>
+</svg>`;
-- 
cgit v1.2.3-70-g09d2