add bookmark button to thread and posts in thread view

app/templates/common/macros.html

@@ -1,4 +1,4 @@
-{% from 'common/icons.html' import icn_image, icn_spoiler, icn_info, icn_lock, icn_warn, icn_error %}
+{% from 'common/icons.html' import icn_image, icn_spoiler, icn_info, icn_lock, icn_warn, icn_error, icn_bookmark %}
 {% macro pager(current_page, page_count) %}
 {% set left_start = [1, current_page - 5] | max %}
 {% set right_end = [page_count, current_page + 5] | min %}
@@ -100,7 +100,7 @@
 </form>
 {% endmacro %}
 
-{% macro full_post(post, render_sig = True, is_latest = False, editing = False, active_user = None, no_reply = false, Reactions = none, show_thread_title = false) %}
+{% macro full_post(post, render_sig = True, is_latest = False, editing = False, active_user = None, no_reply = false, Reactions = none, show_thread_title = false, show_bookmark = false) %}
 {% set postclass = "post" %}
 {% if editing %}
   {% set postclass = postclass + " editing" %}
@@ -134,7 +134,7 @@
         {% endif %}
       </i></a>
       </span>
-      <span>
+      <span class="thread-actions">
         {% set show_edit = false %}
         {% if active_user %}
           {% set show_edit = (active_user.id | string) == (post['user_id'] | string) and (not post['thread_is_locked'] or active_user.is_mod()) and not no_reply %}
@@ -172,6 +172,10 @@
         {% if show_delete %}
           <button class="critical post-delete-button" value="{{ post['id'] }}">Delete</button>
         {% endif %}
+
+        {% if show_bookmark %}
+          <button type="button" class="contain-svg inline icon">{{ icn_bookmark(20) }}Bookmark</button>
+        {% endif %}
       </span>
     </div>
     <div class="post-content">

app/templates/threads/thread.html

@@ -1,12 +1,15 @@
 {% from 'common/macros.html' import pager, babycode_editor_form, full_post %}
+{% from 'common/icons.html' import icn_bookmark %}
 {% extends "base.html" %}
 {% block title %}{{ thread.title }}{% endblock %}
 {% block content %}
 {% set can_post = false %}
 {% set can_lock = false %}
 {% set can_subscribe = false %}
+{% set can_bookmark = false %}
 {% if active_user %}
   {% set can_subscribe = true %}
+  {% set can_bookmark = not active_user.is_guest() %}
   {% set can_post = (not thread.is_locked and not active_user.is_guest()) or active_user.is_mod() %}
   {% set can_lock = ((active_user.id | int) == (thread.user_id | int)) or active_user.is_mod() %}
 {% endif %}
@@ -18,7 +21,7 @@
       &bullet; <i>stickied, so it's probably important</i>
     {% endif %}
     </span>
-    <div>
+    <div class="thread-actions">
       {% if can_subscribe %}
         <form class="modform" action="{{ url_for('threads.subscribe', slug=thread.slug) }}" method="post">
           <input type='hidden' name='last_visible_post' value='{{posts[-1].id}}'>
@@ -26,6 +29,9 @@
           <input type='submit' value='{{ 'Unsubscribe' if is_subscribed else 'Subscribe' }}'>
         </form>
       {% endif %}
+      {% if can_bookmark %}
+        <button type="button" class="contain-svg inline icon">{{ icn_bookmark(20) }}Bookmark</button>
+      {% endif %}
       {% if can_lock %}
         <form class="modform" action="{{ url_for("threads.lock", slug=thread.slug) }}" method="post">
           <input type=hidden name='target_op' value="{{ (not thread.is_locked) | int }}">
@@ -50,7 +56,7 @@
     </div>
   </nav>
   {% for post in posts %}
-    {{ full_post(post = post, active_user = active_user, is_latest = loop.index == (posts | length), Reactions = Reactions) }}
+    {{ full_post(post = post, active_user = active_user, is_latest = loop.index == (posts | length), Reactions = Reactions, show_bookmark = can_bookmark) }}
   {% endfor %}
 </main>
 

app/templates/topics/topic.html

@@ -53,7 +53,7 @@
           </span>
           <span>
             {% if active_user and not active_user.is_guest() -%}
-            <button class="thread-info-bookmark-button contain-svg icon" type="button">{{ icn_bookmark() }}Bookmark</button>
+            <button class="thread-info-bookmark-button contain-svg icon" type="button">{{ icn_bookmark(20) }}Bookmark</button>
             {%- endif %}
           </span>
         </span>

data/static/css/style.css

@@ -99,6 +99,12 @@ a:visited {
   font-weight: bold;
 }
 
+.thread-actions {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
 .post {
   display: grid;
   grid-template-columns: 200px 1fr;
@@ -891,6 +897,9 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   justify-content: center;
   flex-direction: column;
 }
+.contain-svg.inline {
+  display: inline-flex;
+}
 
 .post-img-container {
   display: flex;

data/static/css/theme-otomotone.css

@@ -99,6 +99,12 @@ a:visited {
   font-weight: bold;
 }
 
+.thread-actions {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
 .post {
   display: grid;
   grid-template-columns: 200px 1fr;
@@ -891,6 +897,9 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   justify-content: center;
   flex-direction: column;
 }
+.contain-svg.inline {
+  display: inline-flex;
+}
 
 .post-img-container {
   display: flex;

data/static/css/theme-peachy.css

@@ -99,6 +99,12 @@ a:visited {
   font-weight: bold;
 }
 
+.thread-actions {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
 .post {
   display: grid;
   grid-template-columns: 200px 1fr;
@@ -891,6 +897,9 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   justify-content: center;
   flex-direction: column;
 }
+.contain-svg.inline {
+  display: inline-flex;
+}
 
 .post-img-container {
   display: flex;

sass/_default.scss

@@ -213,6 +213,13 @@ $thread_title_size: 1.5rem !default;
   font-weight: bold;
 }
 
+$thread_actions_gap: $SMALL_PADDING !default;
+.thread-actions {
+  display: flex;
+  align-items: center;
+  gap: $thread_actions_gap;
+}
+
 $post_usercard_width: 200px !default;
 $post_border: 2px outset $DARK_2 !default;
 .post {
@@ -747,6 +754,10 @@ $thread_locked_background: none !default;
   align-items: center;
   justify-content: center;
   flex-direction: column;
+
+  &.inline {
+    display: inline-flex;
+  }
 }
 
 $post_img_container_gap: $SMALL_PADDING !default;