improve appearance of poke form

5 files changed, 48 insertions, 30 deletions

diff --git a/locale/en_GB.json b/locale/en_GB.json
index 001aad6..6095605 100644
--- a/locale/en_GB.json
+++ b/locale/en_GB.json
@@ -24,8 +24,7 @@
   "user.profile.notesHidden": "Notes hidden because you block this user",
   "user.profile.feed.rss": "RSS feed",
   "user.profile.feed.atom": "Atom feed",
-  "user.profile.poke": "Get this user's attention",
-  "user.profile.poke.verb.label": "Verb",
+  "user.profile.poke": "Poke this user",
   "user.profile.poke.verb.poke": "Poke",
   "user.profile.poke.verb.bite": "Bite",
   "user.profile.poke.verb.punch": "Punch",
@@ -35,8 +34,8 @@
   "user.profile.poke.verb.hug": "Hug",
   "user.profile.poke.verb.kiss": "Kiss",
   "user.profile.poke.verb.pet": "Pet",
-  "user.profile.poke.urgent.label": "Urgent",
   "user.profile.poke.action": "Send",
+  "user.profile.poke.urgent.action": "Send urgently",
   "user.profile.poke.success": "Sent!",
   "user.notes.placeholder": "This user hasn't posted anything yet.",
   "user.rss.description": "Public notes by %s",
diff --git a/routes/actor_profile_fragment.php b/routes/actor_profile_fragment.php
index 65f7a49..debead0 100644
--- a/routes/actor_profile_fragment.php
+++ b/routes/actor_profile_fragment.php
@@ -73,7 +73,11 @@ Router::getInstance()->mount('/fragment/actor/:id/poke', function (array $args)
     }
     $user->actor->poke($actor, PokeVerb::from($_POST['verb']), isset($_POST['urgent']));
 
-    render_template('actor/profile_poke_form', ['actor' => $actor, 'poked' => true]);
+    render_template('actor/profile_poke_form', [
+        'actor' => $actor,
+        'poked' => true,
+        'selectedVerb' => $_POST['verb']
+    ]);
 });
 
 Router::getInstance()->mount('/fragment/profile', function (array $args) {
diff --git a/static/form.css b/static/form.css
index 39f25cf..12e3ab3 100644
--- a/static/form.css
+++ b/static/form.css
@@ -161,15 +161,11 @@ form:not(.nopanel) {
   }
 
   &.pokeForm {
-    .column {
-      display: flex;
-      align-items: center;
-    }
-    label {
-      display: inline;
-      font-size: inherit;
-      color: inherit;
-      margin-right: var(--spacing-single);
+    border-start-start-radius: 0;
+    margin: 0;
+    padding: var(--spacing-single) var(--spacing-double);
+    .row:has(> .column) {
+      grid-auto-columns: max-content;
     }
   }
 
diff --git a/static/profile.css b/static/profile.css
index a46a9a3..3634b23 100644
--- a/static/profile.css
+++ b/static/profile.css
@@ -55,6 +55,19 @@
       gap: var(--spacing-double);
     }
   }
+
+  details > summary {
+    background: var(--clr-secondary);
+    color: var(--clr-foreground-on-secondary);
+    font-weight: bold;
+    cursor: pointer;
+    border-radius: var(--border-radius);
+    padding: var(--spacing-single) var(--spacing-double);
+    width: max-content;
+  }
+  details[open]:has(.pokeForm) > summary {
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+  }
 }
 
 form.fullProfile {
diff --git a/templates/actor/profile_poke_form.php b/templates/actor/profile_poke_form.php
index df511ef..28d89d3 100644
--- a/templates/actor/profile_poke_form.php
+++ b/templates/actor/profile_poke_form.php
@@ -1,25 +1,31 @@
-<?php /** @var \Digitigrade\Model\Actor $actor */ ?>
-<form class="nobackground pokeForm" hx-post="/fragment/actor/<?= $actor->id ?>/poke" hx-disabled-elt="find button"
-    hx-target="this" hx-swap="outerHTML">
+<?php
+/** @var \Digitigrade\Model\Actor $actor */
+/** @var ?string $selectedVerb */
+?>
+<form class="pokeForm" hx-post="/fragment/actor/<?= $actor->id ?>/poke" hx-disabled-elt="find button" hx-target="this"
+    hx-swap="outerHTML">
+    <div class="row">
+        <select id="pokeVerb-<?= $actor->id ?>" name="verb">
+            <?php foreach (['poke', 'bite', 'punch', 'kick', 'wave', 'yell', 'hug', 'kiss', 'pet'] as $verb): ?>
+                <option value="<?= $verb ?>" <?= ($selectedVerb ?? null) == $verb ? 'selected' : '' ?>>
+                    <?= __("user.profile.poke.verb.$verb") ?>
+                </option>
+            <?php endforeach; ?>
+        </select>
+    </div>
     <div class="row">
-        <div class="column">
-            <select id="pokeVerb-<?= $actor->id ?>" name="verb">
-                <?php foreach (['poke', 'bite', 'punch', 'kick', 'wave', 'yell', 'hug', 'kiss', 'pet'] as $verb): ?>
-                    <option value="<?= $verb ?>"><?= __("user.profile.poke.verb.$verb") ?></option>
-                <?php endforeach; ?>
-            </select>
-        </div>
-        <div class="column">
-            <label for="pokeUrgent-<?= $actor->id ?>"><?= __('user.profile.poke.urgent.label') ?></label>
-            <input type="checkbox" id="pokeUrgent-<?= $actor->id ?>" name="urgent">
-        </div>
         <div class="column">
             <button type="submit" class="primary"><?= __('user.profile.poke.action') ?></button>
         </div>
         <div class="column">
-            <?php if ($poked ?? false): ?>
-                <span class="temporaryIndicator"><?= __('user.profile.poke.success') ?></span>
-            <?php endif; ?>
+            <button type="submit" class="secondary" name="urgent" value="1">
+                <?= __('user.profile.poke.urgent.action') ?>
+            </button>
         </div>
     </div>
+    <div class="row">
+        <?php if ($poked ?? false): ?>
+            <span class="temporaryIndicator"><?= __('user.profile.poke.success') ?></span>
+        <?php endif; ?>
+    </div>
 </form>
\ No newline at end of file