From 5ce0653292c00fd7b173efc8b0bebf03bb72d1e9 Mon Sep 17 00:00:00 2001
From: hono4kami <dgloaming@proton.me>
Date: Sat, 21 Dec 2024 22:04:13 +0700
Subject: [PATCH] feat: improve options

---
 app/templates/chat/chat_options.html          |  8 ++---
 app/templates/chat/conversation.html          |  2 +-
 app/templates/post/_post_full.html            |  2 +-
 app/templates/post/_post_reply_teaser.html    |  2 +-
 app/templates/post/post_options.html          | 34 +++++++++----------
 app/templates/post/post_reply_options.html    | 20 +++++------
 .../post/post_teaser/_utilities_bar.html      | 16 +++++++--
 7 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/app/templates/chat/chat_options.html b/app/templates/chat/chat_options.html
index 5e0e8c33..ab773be7 100644
--- a/app/templates/chat/chat_options.html
+++ b/app/templates/chat/chat_options.html
@@ -1,15 +1,15 @@
-<li class="dropdown-item"><a href="{{ url_for('chat.chat_delete', conversation_id=conversation.id) }}" class="no-underline confirm_first" rel="nofollow"><span class="fe fe-delete"></span>
+<li><a href="{{ url_for('chat.chat_delete', conversation_id=conversation.id) }}" class="dropdown-item no-underline confirm_first" rel="nofollow"><span class="fe fe-delete"></span>
     {{ _('Delete conversation') }}</a></li>
 {% for member in conversation.members %}
     {% if member.id != current_user.id %}
-        <li class="dropdown-item"><a href="{{ url_for('user.block_profile', actor=member.link()) }}" class="no-underline"><span class="fe fe-block"></span>
+        <li><a href="{{ url_for('user.block_profile', actor=member.link()) }}" class="dropdown-item no-underline"><span class="fe fe-block"></span>
             {{ _('Block @%(author_name)s', author_name=member.display_name()) }}</a></li>
     {% endif %}
 {% endfor %}
 {% for instance in conversation.instances() %}
-    <li class="dropdown-item"><a href="{{ url_for('chat.block_instance', instance_id=instance.id) }}" class="no-underline"><span class="fe fe-block"></span>
+    <li><a href="{{ url_for('chat.block_instance', instance_id=instance.id) }}" class="dropdown-item no-underline"><span class="fe fe-block"></span>
         {{ _("Block chats and posts from instance: %(name)s", name=instance.domain) }}</a></li>
 {% endfor %}
-<li class="dropdown-item"><a href="{{ url_for('chat.chat_report', conversation_id=conversation.id) }}" class="no-underline" rel="nofollow"><span class="fe fe-report"></span>
+<li><a href="{{ url_for('chat.chat_report', conversation_id=conversation.id) }}" class="dropdown-item no-underline" rel="nofollow"><span class="fe fe-report"></span>
         {{ _('Report to moderators') }}</a></li>
 <p class="p-2" style="max-width: 200px;">{{ _('If you are reporting abuse then do not delete the conversation - moderators will not be able to read it if you delete it.') }}</p>
diff --git a/app/templates/chat/conversation.html b/app/templates/chat/conversation.html
index f13f59c4..2e4337a0 100644
--- a/app/templates/chat/conversation.html
+++ b/app/templates/chat/conversation.html
@@ -80,7 +80,7 @@
                                     class="btn btn-outline-secondary">
                                     {{ _('Options') }}
                                 </a>
-                                <ul class="dropdown-menu">
+                                <ul class="dropdown-menu" style="max-width: 240px">
                                     <div 
                                         hx-get="{{ url_for('chat.chat_options', conversation_id=current_conversation) }}"
                                         hx-trigger="revealed"
diff --git a/app/templates/post/_post_full.html b/app/templates/post/_post_full.html
index 4618ebb1..2e791b9f 100644
--- a/app/templates/post/_post_full.html
+++ b/app/templates/post/_post_full.html
@@ -185,7 +185,7 @@
                 <a href="{{ url_for('post.post_options', post_id=post.id) }}"
                    data-bs-toggle="dropdown"
                    rel="nofollow"><span class="fe fe-options" title="Options"></span></a>
-                <ul class="dropdown-menu">
+                <ul class="dropdown-menu" style="width: 320px">
                     <div 
                         hx-get="{{ url_for('post.post_options', post_id=post.id) }}" 
                         hx-trigger="revealed"
diff --git a/app/templates/post/_post_reply_teaser.html b/app/templates/post/_post_reply_teaser.html
index 59594cc7..536d68aa 100644
--- a/app/templates/post/_post_reply_teaser.html
+++ b/app/templates/post/_post_reply_teaser.html
@@ -102,7 +102,7 @@
                         aria-label="{{ _('Comment options') }}">
                         <span class="fe fe-options" title="Options"> </span>
                     </a>
-                    <ul class="dropdown-menu">
+                    <ul class="dropdown-menu" style="width: 320px">
                         <div 
                             hx-get="{{ url_for('post.post_reply_options', post_id=post_reply.post.id, comment_id=post_reply.id) }}"
                             hx-trigger="revealed"
diff --git a/app/templates/post/post_options.html b/app/templates/post/post_options.html
index a3edfa81..1f15110d 100644
--- a/app/templates/post/post_options.html
+++ b/app/templates/post/post_options.html
@@ -1,62 +1,62 @@
 {% if current_user.is_authenticated -%}
     {% if post.user_id == current_user.id -%}
-        <li class="dropdown-item"><a href="{{ url_for('post.post_edit', post_id=post.id) }}" class="no-underline" rel="nofollow"><span class="fe fe-edit"></span>
+        <li><a href="{{ url_for('post.post_edit', post_id=post.id) }}" style="white-space: normal" class="dropdown-item no-underline" rel="nofollow"><span class="fe fe-edit"></span>
             {{ _('Edit') }}</a></li>
     {% endif -%}
     {% if post.user_id == current_user.id or post.community.is_moderator() or post.community.is_owner() or current_user.is_admin() -%}
         {% if post.deleted -%}
-            <li class="dropdown-item"><a href="{{ url_for('post.post_restore', post_id=post.id) }}" class="no-underline confirm_first" rel="nofollow"><span class="fe fe-arrow-up"></span>
+            <li><a href="{{ url_for('post.post_restore', post_id=post.id) }}" style="white-space: normal" class="dropdown-item no-underline confirm_first" rel="nofollow"><span class="fe fe-arrow-up"></span>
                 {{ _('Restore') }}</a></li>
-            <li class="dropdown-item"><a href="{{ url_for('post.post_purge', post_id=post.id) }}" class="no-underline confirm_first" rel="nofollow"><span class="fe fe-delete red"></span>
+            <li><a href="{{ url_for('post.post_purge', post_id=post.id) }}" style="white-space: normal" class="dropdown-item no-underline confirm_first" rel="nofollow"><span class="fe fe-delete red"></span>
                 {{ _('Purge') }}</a></li>
         {% else -%}
-            <li class="dropdown-item"><a href="{{ url_for('post.post_delete', post_id=post.id) }}" class="no-underline confirm_first" rel="nofollow"><span class="fe fe-delete"></span>
+            <li><a href="{{ url_for('post.post_delete', post_id=post.id) }}" style="white-space: normal" class="dropdown-item no-underline confirm_first" rel="nofollow"><span class="fe fe-delete"></span>
                 {{ _('Delete') }}</a></li>
         {% endif -%}
     {% endif -%}
     {% if existing_bookmark -%}
-        <li class="dropdown-item"><a href="{{ url_for('post.post_remove_bookmark', post_id=post.id) }}" class="no-underline" rel="nofollow"><span class="fe fe-bookmark"></span>
+        <li><a href="{{ url_for('post.post_remove_bookmark', post_id=post.id) }}" style="white-space: normal" class="dropdown-item no-underline" rel="nofollow"><span class="fe fe-bookmark"></span>
                 {{ _('Remove bookmark') }}</a></li>
     {% else -%}
-        <li class="dropdown-item"><a href="{{ url_for('post.post_bookmark', post_id=post.id) }}" class="no-underline" rel="nofollow"><span class="fe fe-bookmark"></span>
+        <li><a href="{{ url_for('post.post_bookmark', post_id=post.id) }}" style="white-space: normal" class="dropdown-item no-underline" rel="nofollow"><span class="fe fe-bookmark"></span>
                 {{ _('Bookmark') }}</a></li>
     {% endif -%}
     {% if post.user_id == current_user.id and not post.mea_culpa -%}
-        <li class="dropdown-item"><a href="{{ url_for('post.post_mea_culpa', post_id=post.id) }}" class="no-underline"><span class="fe fe-mea-culpa"></span>
+        <li><a href="{{ url_for('post.post_mea_culpa', post_id=post.id) }}" style="white-space: normal" class="dropdown-item no-underline"><span class="fe fe-mea-culpa"></span>
             {{ _("I made a mistake with this post and have changed my mind about the topic") }}</a></li>
     {% endif -%}
     {% if post.user_id != current_user.id -%}
         {% if post.type == POST_TYPE_LINK and post.author.bot and (post.cross_posts is none or len(post.cross_posts) == 0) -%}
-            <li class="dropdown-item"><a class="no-underline" aria-label="{{ _('Cross-post') }}" href="{{ url_for('post.post_cross_post', post_id=post.id) }}"><span class="fe fe-cross-post"></span>
+            <li><a class="dropdown-item no-underline" style="white-space: normal" aria-label="{{ _('Cross-post') }}" href="{{ url_for('post.post_cross_post', post_id=post.id) }}"><span class="fe fe-cross-post"></span>
             {{ _('Cross-post to another community') }}</a></li>
         {% endif -%}
-        <li class="dropdown-item"><a href="{{ url_for('post.post_block_user', post_id=post.id) }}" class="no-underline"><span class="fe fe-block"></span>
+        <li><a href="{{ url_for('post.post_block_user', post_id=post.id) }}" style="white-space: normal" class="dropdown-item no-underline"><span class="fe fe-block"></span>
             {{ _('Block post author @%(author_name)s', author_name=post.author.user_name) }}</a></li>
-        <li class="dropdown-item"><a href="{{ url_for('post.post_block_community', post_id=post.id) }}" class="no-underline"><span class="fe fe-block"></span>
+        <li><a href="{{ url_for('post.post_block_community', post_id=post.id) }}" style="white-space: normal" class="dropdown-item no-underline"><span class="fe fe-block"></span>
             {{ _('Block community %(community_name)s', community_name=post.community.display_name()) }}</a></li>
         {% if post.community.is_moderator() or current_user.is_admin() -%}
-            <li class="dropdown-item"><a href="{{ url_for('community.community_ban_user', community_id=post.community.id, user_id=post.author.id) }}" class="no-underline"><span class="fe fe-block red"></span>
+            <li><a href="{{ url_for('community.community_ban_user', community_id=post.community.id, user_id=post.author.id) }}" style="white-space: normal" class="dropdown-item no-underline"><span class="fe fe-block red"></span>
                 {{ _('Ban post author @%(author_name)s from %(community_name)s', author_name=post.author.user_name, community_name=post.community.title) }}</a></li>
         {% endif -%}
         {% if post.domain_id -%}
-        <li class="dropdown-item"><a href="{{ url_for('post.post_block_domain', post_id=post.id) }}" class="no-underline"><span class="fe fe-block"></span>
+        <li><a href="{{ url_for('post.post_block_domain', post_id=post.id) }}" style="white-space: normal" class="dropdown-item no-underline"><span class="fe fe-block"></span>
             {{ _('Block domain %(domain)s', domain=post.domain.name) }}</a></li>
         {% endif -%}
         {% if post.instance_id and post.instance_id != 1 -%}
-        <li class="dropdown-item"><a href="{{ url_for('post.post_block_instance', post_id=post.id) }}" class="no-underline"><span class="fe fe-block"></span>
+        <li><a href="{{ url_for('post.post_block_instance', post_id=post.id) }}" style="white-space: normal" class="dropdown-item no-underline"><span class="fe fe-block"></span>
             {{ _("Hide every post from author's instance: %(name)s", name=post.instance.domain) }}</a></li>
         {% endif -%}
     {% endif -%}
 {% endif -%}
 {% if post.ap_id -%}
-    <li class="dropdown-item"><a href="{{ post.ap_id }}" rel="nofollow" class="no-underline"><span class="fe fe-external"></span>
+    <li><a href="{{ post.ap_id }}" style="white-space: normal" rel="nofollow" class="dropdown-item no-underline"><span class="fe fe-external"></span>
         {{ _('View original on %(domain)s', domain=post.instance.domain) }}</a></li>
 {% endif -%}
-<li class="dropdown-item"><a href="{{ url_for('post.post_report', post_id=post.id) }}" class="no-underline" rel="nofollow"><span class="fe fe-report"></span>
+<li><a href="{{ url_for('post.post_report', post_id=post.id) }}" style="white-space: normal" class="dropdown-item no-underline" rel="nofollow"><span class="fe fe-report"></span>
         {{ _('Report to moderators') }}</a></li>
 {% if current_user.is_authenticated and (current_user.is_admin() or current_user.is_staff()) -%}
-    <li class="dropdown-item"><a href="{{ url_for('post.post_view_voting_activity', post_id=post.id) }}" class="no-underline" rel="nofollow"><span class="fe fe-sticky-left"></span>
+    <li><a href="{{ url_for('post.post_view_voting_activity', post_id=post.id) }}" style="white-space: normal" class="dropdown-item no-underline" rel="nofollow"><span class="fe fe-sticky-left"></span>
                 {{ _('View Voting Activity') }}</a></li>
-    <li class="dropdown-item"><a href="{{ url_for('post.post_fixup_from_remote', post_id=post.id) }}" class="no-underline" rel="nofollow"><span class="fe fe-sticky-right"></span>
+    <li><a href="{{ url_for('post.post_fixup_from_remote', post_id=post.id) }}" style="white-space: normal" class="dropdown-item no-underline" rel="nofollow"><span class="fe fe-sticky-right"></span>
                 {{ _('Fixup from remote') }}</a></li>
 {% endif -%}
diff --git a/app/templates/post/post_reply_options.html b/app/templates/post/post_reply_options.html
index e591e1cf..a8061a2b 100644
--- a/app/templates/post/post_reply_options.html
+++ b/app/templates/post/post_reply_options.html
@@ -1,42 +1,42 @@
 {% if current_user.is_authenticated -%}
     {% if post_reply.user_id == current_user.id -%}
-        <li class="dropdown-item"><a href="{{ url_for('post.post_reply_edit', post_id=post.id, comment_id=post_reply.id) }}" class="no-underline" rel="nofollow"><span class="fe fe-edit"></span>
+        <li><a href="{{ url_for('post.post_reply_edit', post_id=post.id, comment_id=post_reply.id) }}" class="dropdown-item no-underline" rel="nofollow"><span class="fe fe-edit"></span>
             {{ _('Edit') }}</a></li>
     {% endif -%}
     {% if post_reply.user_id == current_user.id or post.community.is_moderator() or post.community.is_owner() or current_user.is_admin() -%}
         {% if post_reply.deleted -%}
-            <li class="dropdown-item"><a href="{{ url_for('post.post_reply_restore', post_id=post.id, comment_id=post_reply.id) }}" class="no-underline confirm_first" rel="nofollow"><span class="fe fe-arrow-up"></span>
+            <li><a href="{{ url_for('post.post_reply_restore', post_id=post.id, comment_id=post_reply.id) }}" class="dropdown-item no-underline confirm_first" rel="nofollow"><span class="fe fe-arrow-up"></span>
                 {{ _('Restore') }}</a></li>
             {% if not post_reply.has_replies() -%}
                 {% if post.community.is_moderator() or current_user.is_admin() or (post_reply.user_id == current_user.id and post_reply.deleted_by == post_reply.user_id) -%}
-                    <li class="dropdown-item"><a href="{{ url_for('post.post_reply_purge', post_id=post.id, comment_id=post_reply.id) }}" class="no-underline confirm_first" rel="nofollow"><span class="fe fe-delete red"></span>
+                    <li><a href="{{ url_for('post.post_reply_purge', post_id=post.id, comment_id=post_reply.id) }}" class="dropdown-item no-underline confirm_first" rel="nofollow"><span class="fe fe-delete red"></span>
                     {{ _('Purge') }}</a></li>
                 {% endif -%}
             {% endif -%}
         {% else -%}
-            <li class="dropdown-item"><a href="{{ url_for('post.post_reply_delete', post_id=post.id, comment_id=post_reply.id) }}" class="no-underline confirm_first" rel="nofollow"><span class="fe fe-delete"></span>
+            <li><a href="{{ url_for('post.post_reply_delete', post_id=post.id, comment_id=post_reply.id) }}" class="dropdown-item no-underline confirm_first" rel="nofollow"><span class="fe fe-delete"></span>
                 {{ _('Delete') }}</a></li>
         {% endif -%}
     {% endif -%}
     {% if existing_bookmark -%}
-        <li class="dropdown-item"><a href="{{ url_for('post.post_reply_remove_bookmark', post_id=post.id, comment_id=post_reply.id) }}" class="no-underline" rel="nofollow"><span class="fe fe-bookmark"></span>
+        <li><a href="{{ url_for('post.post_reply_remove_bookmark', post_id=post.id, comment_id=post_reply.id) }}" class="dropdown-item no-underline" rel="nofollow"><span class="fe fe-bookmark"></span>
                 {{ _('Remove bookmark') }}</a></li>
     {% else -%}
-    <li class="dropdown-item"><a href="{{ url_for('post.post_reply_bookmark', post_id=post.id, comment_id=post_reply.id) }}" class="no-underline" rel="nofollow"><span class="fe fe-bookmark"></span>
+    <li><a href="{{ url_for('post.post_reply_bookmark', post_id=post.id, comment_id=post_reply.id) }}" class="dropdown-item no-underline" rel="nofollow"><span class="fe fe-bookmark"></span>
                 {{ _('Bookmark') }}</a></li>
     {% endif -%}
     {% if post_reply.user_id != current_user.id -%}
-        <li class="dropdown-item"><a href="{{ url_for('post.post_reply_block_user', post_id=post.id, comment_id=post_reply.id) }}" class="no-underline"><span class="fe fe-block"></span>
+        <li><a href="{{ url_for('post.post_reply_block_user', post_id=post.id, comment_id=post_reply.id) }}" class="dropdown-item no-underline"><span class="fe fe-block"></span>
             {{ _('Block author @%(author_name)s', author_name=post_reply.author.user_name) }}</a></li>
         {% if post_reply.instance_id and post_reply.instance_id != 1 -%}
-        <li class="dropdown-item"><a href="{{ url_for('post.post_reply_block_instance', post_id=post.id, comment_id=post_reply.id) }}" class="no-underline"><span class="fe fe-block"></span>
+        <li><a href="{{ url_for('post.post_reply_block_instance', post_id=post.id, comment_id=post_reply.id) }}" class="dropdown-item no-underline"><span class="fe fe-block"></span>
             {{ _("Hide every post from author's instance: %(name)s", name=post_reply.instance.domain) }}</a></li>
         {% endif -%}
     {% endif -%}
     {% if current_user.is_authenticated and (current_user.is_admin() or current_user.is_staff()) -%}
-    <li class="dropdown-item"><a href="{{ url_for('post.post_reply_view_voting_activity', comment_id=post_reply.id) }}" class="no-underline" rel="nofollow"><span class="fe fe-sticky-left"></span>
+    <li><a href="{{ url_for('post.post_reply_view_voting_activity', comment_id=post_reply.id) }}" class="dropdown-item no-underline" rel="nofollow"><span class="fe fe-sticky-left"></span>
                 {{ _('View Voting Activity') }}</a></li>
     {% endif -%}
 {% endif -%}
- <li class="dropdown-item"><a href="{{ url_for('post.post_reply_report', post_id=post.id, comment_id=post_reply.id) }}" rel="nofollow" class="no-underline"><span class="fe fe-report"></span>
+ <li><a href="{{ url_for('post.post_reply_report', post_id=post.id, comment_id=post_reply.id) }}" rel="nofollow" class="dropdown-item no-underline"><span class="fe fe-report"></span>
         {{ _('Report to moderators') }}</a></li>
diff --git a/app/templates/post/post_teaser/_utilities_bar.html b/app/templates/post/post_teaser/_utilities_bar.html
index dec5cab3..0dcd85aa 100644
--- a/app/templates/post/post_teaser/_utilities_bar.html
+++ b/app/templates/post/post_teaser/_utilities_bar.html
@@ -20,6 +20,18 @@
             </div>
         {% endif -%}
         <div class="post_options_link">
-          <a href="{{ url_for('post.post_options', post_id=post.id) }}" rel="nofollow" aria-label="{{ _('Options') }}"><span class="fe fe-options" title="Options"> </span></a>
-        </div>
+            <div class="dropdown">
+                <a href="{{ url_for('post.post_options', post_id=post.id) }}"
+                   data-bs-toggle="dropdown"
+                   rel="nofollow"><span class="fe fe-options" title="Options"></span></a>
+                <ul class="dropdown-menu" style="width: 320px">
+                    <div 
+                        hx-get="{{ url_for('post.post_options', post_id=post.id) }}" 
+                        hx-trigger="revealed"
+                        hx-target="this"
+                        hx-swap="outerHTML"
+                    ></div>
+                </ul>
+            </div>
     </div>
+</div>