From 4ef5b67707d05af0f3099ac05fd2e9fc75da563b Mon Sep 17 00:00:00 2001
From: Chris Burgess <chris@giantrobot.co.nz>
Date: Sat, 21 Dec 2024 07:36:09 +1300
Subject: [PATCH] feat: #55 Do not autohide contains marker

---
 views/index.liquid | 47 ++++++++++++++--------------------------------
 1 file changed, 14 insertions(+), 33 deletions(-)

diff --git a/views/index.liquid b/views/index.liquid
index 733f8c1..95b8d57 100644
--- a/views/index.liquid
+++ b/views/index.liquid
@@ -58,56 +58,37 @@
                         name="blueskyToken" id="blueskyToken" required class="input input-bordered w-full" />
                 </div>
 
-                <p class="mb-4">
-                    Which posts for this account should be relayed from Mastodon to BlueSky?
-                </p>
-
                 <div class="space-y-2">
+                    <p class="mb-4 mt-4">
+                        Which Toots for this account should be relayed from Mastodon to BlueSky?
+                    </p>
                     <label class="flex items-center">
                         <input type="radio" name="relayCriteria" value="all" class="radio radio-primary mr-2" {% if relayCriteria == 'all' %}checked{% endif %}/>
                         <span>All posts</span>
                     </label>
-
                     <label class="flex items-center">
                         <input type="radio" name="relayCriteria" value="favedBySelf" class="radio radio-primary mr-2" {% if relayCriteria == 'favedBySelf' %}checked{% endif %}/>
                         <span>Posts which the user ⭐'d</span>
                     </label>
-
                     <label class="flex items-center">
-                        <input type="radio" name="relayCriteria" value="containsMarker" class="radio radio-primary mr-2" data-hashtag-dependent="true" {% if relayCriteria == 'containsMarker' %}checked{% endif %}/>
+                        <input type="radio" name="relayCriteria" value="containsMarker" class="radio radio-primary mr-2" {% if relayCriteria == 'containsMarker' %}checked{% endif %}/>
                         <span>Posts which include the marker below</span>
                     </label>
-
                     <label class="flex items-center">
-                        <input type="radio" name="relayCriteria" value="notContainsMarker" class="radio radio-primary mr-2" data-hashtag-dependent="true" {% if relayCriteria == 'notContainsMarker' %}checked{% endif %}/>
+                        <input type="radio" name="relayCriteria" value="notContainsMarker" class="radio radio-primary mr-2" {% if relayCriteria == 'notContainsMarker' %}checked{% endif %}/>
                         <span>Posts which do not include the marker below</span>
                     </label>
+                    <div class="form-control mt-4">
+                        <label class="label">
+                            <span class="label-text">Marker for relay</span>
+                        </label>
+                        <p class="text-sm text-gray-400 mb-2">
+                            This text can be any string contained in the toot, for example '#xp' (for crosspost) or 'cc:bluesky'.
+                        </p>
+                        <input type="text" name="relayMarker" placeholder="Enter a marker, eg: #xp" class="input input-bordered w-full" id="relayMarker" value="{{ relayMarker }}"/>
+                    </div>
                 </div>
 
-                <div id="hashtag-container" class="form-control mt-4">
-                    <label class="label">
-                        <span class="label-text">Marker for relay</span>
-                    </label>
-                    <p class="text-sm text-gray-400 mb-2">
-                        This text can be any string contained in the toot, for example '#xp' (for crosspost) or 'cc:bluesky'.
-                    </p>
-                    <input type="text" name="relayMarker" placeholder="Enter a marker, eg: #xp" class="input input-bordered w-full" id="relayMarker" value="{{ relayMarker }}"/>
-                </div>
-
-<script>
-// I'm sure this doesn't really live here, but it works for a demo.
-document.addEventListener('DOMContentLoaded', () => {
-    const hashtagInput = document.getElementById('relayMarker');
-    const radioButtons = document.querySelectorAll('input[name="relayCriteria"]');
-    const toggleHashtagInput = () => {
-        const selectedRadio = document.querySelector('input[name="relayCriteria"]:checked');
-        hashtagInput.disabled = !selectedRadio?.hasAttribute('data-hashtag-dependent');
-    };
-    toggleHashtagInput();
-    radioButtons.forEach(radio => radio.addEventListener('change', toggleHashtagInput));
-});
-</script>
-
                 <div class="card-actions justify-end mt-4">
                     <input class="btn btn-outline btn-success" type="submit" value="Update!" />
                 </div>