From 112bea65198cc72fc59778033287599abf7effd6 Mon Sep 17 00:00:00 2001
From: Priec <filippriec@gmail.com>
Date: Wed, 12 Aug 2026 13:55:26 +0200
Subject: [PATCH] select global/perprofile table

---
 web/src/pages/add_table/ui.rs                | 12 ++++++
 web/templates/pages/add_table/add_table.html |  2 +-
 web/templates/pages/add_table/builder.html   | 41 +++++++++++++++-----
 3 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/web/src/pages/add_table/ui.rs b/web/src/pages/add_table/ui.rs
index 7657d5b6..4abc639c 100644
--- a/web/src/pages/add_table/ui.rs
+++ b/web/src/pages/add_table/ui.rs
@@ -119,6 +119,18 @@ mod tests {
         assert!(html.contains(r#"<option value="EUR">"#));
     }
 
+    #[test]
+    fn the_scope_picker_explains_profile_and_shared_tables() {
+        let html = render_builder(&page());
+
+        assert!(html.contains("Where should this table be available?"));
+        assert!(html.contains(r#"name="global" value="false""#));
+        assert!(html.contains(r#"name="global" value="true""#));
+        assert!(html.contains("Which profile?"));
+        assert!(html.contains("Only the selected profile can use this table."));
+        assert!(html.contains("Every profile can use this shared table."));
+    }
+
     /// Every type the server accepts has to be reachable from the picker, or
     /// the web UI silently offers less than the backend does.
     #[test]
diff --git a/web/templates/pages/add_table/add_table.html b/web/templates/pages/add_table/add_table.html
index d733003a..2057fe92 100644
--- a/web/templates/pages/add_table/add_table.html
+++ b/web/templates/pages/add_table/add_table.html
@@ -4,7 +4,7 @@
 {% block title %}Add table{% endblock %}
 {% block eyebrow %}Table definition{% endblock %}
 {% block heading %}Add table{% endblock %}
-{% block lead %}<p>Build the table one column at a time. After creation, its table-definition workspace opens so you can assign the initial role permissions.</p>{% endblock %}
+{% block lead %}<p>Choose whether the table belongs to one profile or is available to all profiles, then add its columns. After creation, you can assign the initial role permissions.</p>{% endblock %}
 
 {% block form %}
 {#
diff --git a/web/templates/pages/add_table/builder.html b/web/templates/pages/add_table/builder.html
index b7c6855a..30392822 100644
--- a/web/templates/pages/add_table/builder.html
+++ b/web/templates/pages/add_table/builder.html
@@ -22,18 +22,41 @@
 {%- if let Some(message) = page.error %}{% call dialog::error("Could not continue", message) %}{% endcall %}{% endif -%}
 
 <section class="builder-section">
-  <h2>Table</h2>
+  <h2>Table details</h2>
   <div class="form-grid">
-    <label>Scope
-      <span><input type="checkbox" name="global" value="true"
-             {% if page.draft.global %}checked{% endif %}
-             hx-post="/admin/tables/builder" hx-trigger="change"
-             hx-include="#table-form" hx-target="#builder" hx-swap="innerHTML"
-             hx-vals='{"action": "refresh"}'> Shared across profiles</span>
-    </label>
+    {# Penguin UI custom radio, adapted from radio/custom-radio.html with this form's values and htmx behaviour. #}
+    <fieldset class="col-span-full m-0 border-0 p-0">
+      <legend class="mb-2 text-xs text-on-surface">Where should this table be available?</legend>
+      <div class="grid grid-cols-1 gap-2">
+      <label class="relative flex items-center gap-3 rounded-radius border border-outline bg-surface-alt px-3 py-2.5 text-on-surface transition-colors has-checked:border-primary has-checked:bg-primary/5 has-checked:text-on-surface-strong has-focus:outline-2 has-focus:outline-offset-2 has-focus:outline-primary">
+        <input id="scope-profile" type="radio" name="global" value="false" class="peer sr-only"
+               aria-describedby="scope-profile-description"
+               {% if !page.draft.global %}checked{% endif %}
+               hx-post="/admin/tables/builder" hx-trigger="change"
+               hx-include="#table-form" hx-target="#builder" hx-swap="innerHTML"
+               hx-vals='{"action": "refresh"}'>
+        <svg aria-hidden="true" viewBox="0 0 16 16" fill="currentColor" class="invisible size-5 shrink-0 peer-checked:visible">
+          <path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path>
+        </svg>
+        <span class="flex flex-col"><strong class="text-sm font-medium">One profile</strong><small id="scope-profile-description">Only the selected profile can use this table.</small></span>
+      </label>
+      <label class="relative flex items-center gap-3 rounded-radius border border-outline bg-surface-alt px-3 py-2.5 text-on-surface transition-colors has-checked:border-primary has-checked:bg-primary/5 has-checked:text-on-surface-strong has-focus:outline-2 has-focus:outline-offset-2 has-focus:outline-primary">
+        <input id="scope-global" type="radio" name="global" value="true" class="peer sr-only"
+               aria-describedby="scope-global-description"
+               {% if page.draft.global %}checked{% endif %}
+               hx-post="/admin/tables/builder" hx-trigger="change"
+               hx-include="#table-form" hx-target="#builder" hx-swap="innerHTML"
+               hx-vals='{"action": "refresh"}'>
+        <svg aria-hidden="true" viewBox="0 0 16 16" fill="currentColor" class="invisible size-5 shrink-0 peer-checked:visible">
+          <path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path>
+        </svg>
+        <span class="flex flex-col"><strong class="text-sm font-medium">All profiles</strong><small id="scope-global-description">Every profile can use this shared table.</small></span>
+      </label>
+      </div>
+    </fieldset>
 
     {% if !page.draft.global %}
-    <label>Profile
+    <label>Which profile?
       <select name="profile_name" hx-post="/admin/tables/builder" hx-trigger="change"
               hx-include="#table-form" hx-target="#builder" hx-swap="innerHTML"
               hx-vals='{"action": "refresh"}'>