frontend for bookmark menu

app/__init__.py

@@ -211,6 +211,7 @@ def create_app():
     from app.routes.mod import bp as mod_bp
     from app.routes.posts import bp as posts_bp
     from app.routes.api import bp as api_bp
+    from app.routes.hyperapi import bp as hyperapi_bp
     app.register_blueprint(topics_bp)
     app.register_blueprint(threads_bp)
     app.register_blueprint(users_bp)
@@ -218,6 +219,7 @@ def create_app():
     app.register_blueprint(mod_bp)
     app.register_blueprint(posts_bp)
     app.register_blueprint(api_bp)
+    app.register_blueprint(hyperapi_bp)
 
     with app.app_context():
         from .schema import create as create_tables

app/lib/babycode.py

@@ -357,7 +357,7 @@ def tag_code(children, attr):
         else:
             code = input_code
 
-        button = f'<button type=button class="copy-code" data-s="copyCode">Copy</button>'
+        button = f'<button autocomplete=off disabled data-r="enhance" title="This feature requires JavaScript to be enabled." type=button class="copy-code" data-s="copyCode">Copy</button>'
         block = f'<fieldset data-r="copyCode" data-code="{input_code}" class="code-block-container plank minimal no-shadow secondary-bg"><legend>{language}</legend>{button}<pre><code>{code}</code></pre></fieldset>'
         return block
 

app/routes/hyperapi.py

@@ -0,0 +1,47 @@
+from flask import Blueprint, render_template, request, url_for
+from ..auth import get_active_user, is_logged_in, hard_login_required
+from ..models import BookmarkCollections
+from functools import wraps
+
+bp = Blueprint('hyperapi', __name__, url_prefix='/hyperapi/')
+
+def user_required(view_func):
+    @wraps(view_func)
+    def wrapper(*args, **kwargs):
+        if get_active_user().is_guest():
+            return '<span>Your account must be approved by a moderator before you may perform this action.</span>', 403
+        return view_func(*args, **kwargs)
+    return wrapper
+
+@bp.get('/bookmarks/dropdown/')
+@hard_login_required
+@user_required
+def get_bookmark_dropdown():
+    user = get_active_user()
+    concept_kind = request.args.get('concept_kind', 'thread')
+    try:
+        concept_id = int(request.args.get('concept_id', 0))
+    except ValueError:
+        return 'error', 400
+    is_thread = concept_kind == 'thread'
+    collections = BookmarkCollections.findall({'user_id': user.id})
+    in_collection = None
+    for collection in collections:
+        callable = collection.has_thread if is_thread else collection.has_post
+        if callable(concept_id):
+            in_collection = collection.id
+            break
+    submit_url = url_for('.bookmark_thread' if is_thread else '.bookmark_post')
+    return render_template('hyper/bookmark_dropdown.html', collections=collections, in_collection=in_collection, is_thread=is_thread, concept_id=concept_id, submit_url=submit_url)
+
+@bp.post('/bookmarks/thread/')
+@hard_login_required
+@user_required
+def bookmark_thread():
+    return '', 204
+
+@bp.post('/bookmarks/post/')
+@hard_login_required
+@user_required
+def bookmark_post():
+    return '', 204

app/templates/common/macros.html

@@ -112,7 +112,7 @@
   <span class="flex-last js-only" data-r="enhance babycodeEditorCharCount">stub: char count</span>
   </span>
   <input type="hidden" name="babycode_banned_tags" id="{{id}}-banned-tags" value="{{banned_tags | unique | list | tojson | forceescape}}">
-  <textarea name="babycode_content" id="{{id}}" class="babycode-editor" placeholder="{{placeholder}}" {{'required' if required else ''}} autocomplete="off" maxlength="5000" data-r="insertBabycode babycodePreviewInit babycodeEditorCharCountInit babycodeEditorQuote" data-listeners="input" data-s="babycodeEditorCharCount" data-banned-tags="{{banned_tags | unique | list | tojson | forceescape}}">{{ prefill }}</textarea>
+  <textarea name="babycode_content" id="{{id}}" class="babycode-editor" placeholder="{{placeholder}}" {{'required' if required else ''}} autocomplete="off" maxlength="5000" data-r="insertBabycode babycodePreviewInit babycodeEditorCharCountInit babycodeEditorQuote" data-listen="input" data-s="babycodeEditorCharCount" data-banned-tags="{{banned_tags | unique | list | tojson | forceescape}}">{{ prefill }}</textarea>
   {%- if banned_tags -%}
   <div>
     <span>Forbidden tags:</span>
@@ -186,12 +186,12 @@
       <a class="linkbutton" href="{{url_for('posts.edit', post_id=post.id, _anchor='babycode-content')}}">Edit</a>
       {%- endif -%}
       {%- if can_reply -%}
-      <button data-r="enhance" data-s="babycodeEditorQuote" disabled title="This feature requires JavaScript to be enabled." data-quote="{{post.original_markup}}" data-poster-name="{{ post.display_name if post.display_name else post.username }}">Quote</button>
+      <button autocomplete='off' data-r="enhance" data-s="babycodeEditorQuote" disabled title="This feature requires JavaScript to be enabled." data-quote="{{post.original_markup}}" data-poster-name="{{ post.display_name if post.display_name else post.username }}">Quote</button>
       {%- endif -%}
       {%- if can_delete -%}
       <a class="linkbutton critical" href="{{url_for('posts.delete', post_id=post.id)}}">Delete</a>
       {%- endif -%}
-      <button data-r="enhance" disabled title="This feature requires JavaScript to be enabled.">{{icn_bookmark(24)}}Bookmark&hellip;</button>
+      <button autocomplete='off' data-r="enhance" data-s="showBookmarkMenu" disabled title="This feature requires JavaScript to be enabled." data-concept-kind="post" data-concept-id="{{post.id}}">{{icn_bookmark(24)}}Bookmark&hellip;</button>
     </span>
     {%- endif -%}
   </div>
@@ -219,7 +219,7 @@
         <button data-r="enhance" type="button" disabled title="{{reactors_str}}" class="minimal {{'alt' if has_reacted else ''}}"><img src="/static/emoji/{{reaction.reaction_text}}.png">{{reaction.c}}</button>
         {%- endfor -%}
       </span>
-      {%- if is_logged_in() and allow_reacting -%}<button data-r="enhance" disabled title="This feature requires JavaScript to be enabled.">Add reaction</button>{%- endif -%}
+      {%- if is_logged_in() and allow_reacting -%}<button autocomplete='off' data-r="enhance" disabled title="This feature requires JavaScript to be enabled.">Add reaction</button>{%- endif -%}
     {%- elif is_editing -%}
       <input type="submit" value="Save">
       <a href="{{get_post_url(post.id, _anchor=true)}}" class="linkbutton warn">Cancel</a>

app/templates/hyper/bookmark_dropdown.html

@@ -0,0 +1,23 @@
+<form class="full-width" method="POST" action="{{submit_url}}" data-listen="submit" data-s="bookmarkMenuSubmit" data-r="bookmarkMenuSubmit">
+  <input type="hidden" name="concept_id" value="{{concept_id}}">
+  <div class="inline-group bookmark-menu-item">
+    <input data-s="bookmarkMenuResetSavedButton" autocomplete="off" type="radio" name="target_collection" id="collection-none" {{'checked' if in_collection==none else ''}} value="-1">
+    <label class="bookmark-menu-label" for="collection-none">
+      No collection
+      <small>Choose this option to remove this {{'thread' if is_thread else 'post'}} from your bookmarks.</small>
+    </label>
+  </div>
+  {%- for collection in collections -%}
+  <div class="inline-group bookmark-menu-item">
+    <input data-s="bookmarkMenuResetSavedButton" autocomplete="off" type="radio" name="target_collection" id="collection-{{collection.id}}" {{'checked' if in_collection==collection.id else ''}} value="{{collection.id}}">
+    {%- set tc = collection.get_threads_count() -%}
+    {%- set pc = collection.get_posts_count() -%}
+    <label class="bookmark-menu-label" for="collection-{{collection.id}}">
+      {{collection.name}}
+      <small>{{tc}} {{'thread' | pluralize(num=tc)}}, {{pc}} {{'post' | pluralize(num=pc)}}</small>
+    </label>
+  </div>
+  {%- endfor -%}
+  <input type="submit" value="Save" data-r="bookmarkMenuShowSavedButton bookmarkMenuResetSavedButton">
+  <span class="errors hidden" data-r="bookmarkMenuShowError bookmarkMenuHideError">Something went wrong. Try again later.</span>
+</form>

app/templates/threads/thread.html

@@ -29,7 +29,7 @@
     <input type="hidden" name="last_post_id" value="{{last_post.id}}">
     <input type="submit" value="{{'Subscribe' if not get_active_user().is_subscribed(thread.id) else 'Unsubscribe'}}">
   </form>
-  <button data-r="enhance" disabled title="This feature requires JavaScript to be enabled.">{{icn_bookmark(24)}}Bookmark&hellip;</button>
+  <button disabled autocomplete='off' data-r="enhance" data-s="showBookmarkMenu" title="This feature requires JavaScript to be enabled." data-concept-kind="thread" data-concept-id="{{thread.id}}">{{icn_bookmark(24)}}Bookmark&hellip;</button>
   {%- endif -%}
   <a href="{{url_for('threads.feed', thread_id=thread.id)}}" class="linkbutton rss">Subscribe via RSS</a>
 </fieldset>
@@ -82,6 +82,15 @@
     <button>Stop updates</button>
   </span>
 </div>
+{%- if is_logged_in() -%}
+<div id="bookmark-popover" data-r="showBookmarkMenu" class="plank even" popover>
+  <div class="bookmark-menu-header">
+    <span>Bookmark collections</span>
+    <a href="{{url_for('users.bookmarks', username=get_active_user().username)}}">View bookmarks</a>
+  </div>
+  <div class="bookmark-menu-inner" data-r="fillBookmarkMenu">Loading&hellip;</div>
+</div>
+{%- endif -%}
 {%- if is_logged_in() and get_active_user().can_post_to_thread_or_topic(thread) -%}
 <form action="{{url_for('threads.reply', thread_id=thread.id)}}" method="POST" class="plank post-edit-form" data-listen="submit" data-r="clearThreadDraft" data-s="clearThreadDraft">
   <h2 class="info">Reply to "{{thread.title}}"</h2>

app/templates/users/log_in.html

@@ -15,7 +15,7 @@ Welcome back! No account yet? <a href="{{url_for('users.sign_up')}}">Sign up</a>
   <input type="text" id="username" name="username" autocomplete="username" required>
   <label for="password">Password</label>
   <input type="password" id="password" name="password" autocomplete="current-password" required>
-  <span><input type="checkbox" name="remember" id="remember"> <label for="remember">Remember me</label></span>
+  <div class="inline-group"><input type="checkbox" name="remember" id="remember"> <label for="remember">Remember me</label></div>
   <input type="submit" value="Log in">
 </form>
 {%- endblock -%}

app/templates/users/settings.html

@@ -48,10 +48,10 @@
     <input type="text" name="display_name" id="display-name" value="{{user.display_name}}" placeholder="Same as username" pattern="(?:[\w!#$%^*\(\)\-_=+\[\]\{\}\|;:,.?\s]{3,50})?" title="Optional. 3-50 characters, no @, no <>, no &." maxlength="50" autocomplete=off>
     <label for="status">Status</label>
     <input type="text" name="status" id="status" maxlength="100" value="{{user.status}}" placeholder="Will be shown under your username on posts. Max. 100 characters." autocomplete="off">
-    <span>
+    <div class="inline-group">
       <input type="checkbox" id="subscribe-by-default" name="subscribe_by_default" {{'' if session['dont_subscribe_by_default'] else 'checked'}} autocomplete="off">
       <label for="subscribe-by-default">Automatically subscribe to thread when responding</label>
-    </span>
+    </div>
     <input type="submit" value="Save">
   </form>
 </fieldset>