fixed inline rename

src/tinyweb/handlers/subscriptions.py

@@ -152,6 +152,11 @@ def handle_subscriptions(msg=""):
             _sync_threads.pop(sub_id, None)
             _sync_starts.pop(sub_id, None)
 
+    edit_script = """<script>
+function startEdit(id){var d=document,i=d.getElementById("nick-input-"+id);i.dataset.original=i.value;d.getElementById("name-display-"+id).style.display="none";d.getElementById("name-pencil-"+id).style.display="none";d.getElementById("name-edit-"+id).style.display="inline"}
+function cancelEdit(id){var d=document,i=d.getElementById("nick-input-"+id);i.value=i.dataset.original;d.getElementById("name-display-"+id).style.display="inline";d.getElementById("name-pencil-"+id).style.display="inline";d.getElementById("name-edit-"+id).style.display="none"}
+</script>"""
+
     cards = ""
     for s in subs:
         sub_id = s["id"]
@@ -181,13 +186,21 @@ def handle_subscriptions(msg=""):
 
         cards += (
             f'<div style="border:1px solid #ddd;border-radius:4px;padding:0.9rem 1rem;margin-bottom:0.75rem">'
-            f'<div style="margin-bottom:0.4rem"><b>{esc(s["nickname"] or s["name"] or "unknown")}</b></div>'
+            f'<div style="margin-bottom:0.4rem;display:flex;align-items:center;gap:0.3rem">'
-            f'<div><small>{esc(s["dest_hash"])}</small></div>'
+            f'<b id="name-display-{sub_id}">{esc(s["nickname"] or s["name"] or "unknown")}</b>'
-            f'<form method="post" action="/subscriptions/nickname/{sub_id}" style="margin-top:0.3rem">'
+            f'<span id="name-edit-{sub_id}" style="display:none">'
+            f'<form method="post" action="/subscriptions/nickname/{sub_id}" style="display:inline;margin:0" id="nick-form-{sub_id}">'
             f'{_csrf_field()}'
-            f'<input name="nickname" value="{esc(s["nickname"] or "")}" size="20" placeholder="nickname" style="font-size:0.85rem">'
+            f'<input id="nick-input-{sub_id}" name="nickname" value="{esc(s["nickname"] or s["name"] or "")}" size="15" style="font-size:0.85rem" onkeydown="if(event.key===\'Enter\'){{event.preventDefault();document.getElementById(\'confirm-{sub_id}\').click()}}">'
-            f' <button style="font-size:0.85rem">rename</button>'
             f'</form>'
+            f'<span style="display:inline-block;width:0.3rem"></span>'
+            f'<button id="confirm-{sub_id}" onclick="document.getElementById(\'nick-form-{sub_id}\').submit()" style="font-size:0.85rem;padding:0 0.3em;cursor:pointer">&#10003;</button>'
+            f'<span style="display:inline-block;width:0.4rem"></span>'
+            f'<button onclick="cancelEdit({sub_id})" style="font-size:0.85rem;padding:0 0.3em;cursor:pointer">&#10007;</button>'
+            f'</span>'
+            f'<a href="#" onclick="startEdit({sub_id});return false" id="name-pencil-{sub_id}" style="text-decoration:none;font-size:0.9rem">rename</a>'
+            f'</div>'
+            f'<div><small>{esc(s["dest_hash"])}</small></div>'
             f'<div style="margin-top:0.4rem;font-size:0.85rem;color:#606060">last sync: {esc(last)}</div>'
             f'{status_html}'
             f'<div style="display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;margin-top:0.7rem">'
@@ -222,6 +235,7 @@ def handle_subscriptions(msg=""):
         f'</form>'
         f'<p><small>or <a href="/subscriptions/add">subscribe to an instance</a></small></p>'
         f'<p>{msg}</p>'
+        f'{edit_script}'
         f'<hr>{listing}'
         f'<br><a href="/">back</a>',
         head_html=head_html,