From 9895fa1bbabc9213391e380753ca72404f80aa18 Mon Sep 17 00:00:00 2001 From: justcool393 Date: Thu, 9 Mar 2023 06:59:56 -0600 Subject: [PATCH] comments.html: refactor so that something can be sanely changed in it the comments.html template (along with submission.html) has numerous undesirable properties which i will describe now. unless you are very familiar with the codebase, it can be extremely difficult to grok. this is pretty insane as there is nothing fundamentally complex about the goal of comments.html: return a component that shows a username and info, reports if any, comment content, and actions a user can take. this behemeoth was initially 886 lines in the old version of this codebase, and this is with awards and a lot of other cruft removed. anyway, the maintainability of this file is about on par with some legacy application that keels over and dies if you sneeze vaguely in its direction. the nicest thing i can say about it is that it isn't currently crashing. anyway some of the problems include: * large, splittable components, are not split into separate files. this makes it incredibly difficult to find or make changes across the template and makes it nearly impossible to find or change a specific thing. this is most easily exemplified in the modals, which should by all accounts be separate templates, just inlined into comments.html. * the nesting is oftentimes incorrect. inexplicably, probably out of laziness from when the code was first written, things will end up fully left aligned, while multiple layers deep into a nesting context. if an if statement or an endif is changed, it is *incredibly* difficult to figure out where the error was. you can't trust the nesting. * multiple repeated checks for things that are always true. this is probably a symptom of the above two problems but it's very noticeable once you fix the nesting. for example there is a block near the very top of the actions bar which checks for parent_submission which effectively checks "is this in a post" (this commit won't complain about parent_submission checks but i do have opinions on those). all of the action buttons further down the chain also check for parent_submission, or even check inconsistently (by using if c.post) within this context this is a completely unnecessary check in this context. while it is potentially useful (and in fact because #251 requires we dismantle the assumption a little bit) to have these checks now, the fact that they were initially added shows that when the code was all initial written, there was little care into thinking about comment state. * mobile actions are duplicated and duplicated inline. i actually do find it probably pretty hard to support this normally given the codebase's DOM so whatever, duplicate the things, *but* if we're going to do that, inlining it into the middle of an incredibly long template is really difficult to comprehend as a design decision. ...anyway yeah this PR intends to fix these problems and enable work to be done on #251. this is a "perfect is the enemy of good" commit. it doesn't change much fundamental and is not intended to erase the sins of the original file, but at least make it maintainable. this also fixes a minor bug with #473 where the GIF modal was left in by accident. --- files/assets/js/gif_modal.js | 85 -- files/classes/comment.py | 96 ++- files/templates/comments.html | 728 ++---------------- .../component/comment/actions_desktop.html | 88 +++ .../component/comment/actions_mobile.html | 71 ++ .../comment/actions_mobile_admin.html | 45 ++ .../component/comment/editbox_comment.html | 27 + .../component/comment/replybox_comment.html | 29 + .../component/comment/replybox_message.html | 20 + .../templates/component/comment/reports.html | 14 + .../component/comment/user_info.html | 60 ++ .../component/comment/usernote_header.html | 43 ++ .../component/comment/view_more_button.html | 9 + .../component/comment/voting_desktop.html | 28 + .../component/comment/voting_mobile.html | 28 + .../component/modal/delete_comment.html | 22 + .../component/modal/report_comment.html | 29 + files/templates/gif_modal.html | 29 - files/templates/settings_profile.html | 6 - files/templates/submit.html | 8 +- 20 files changed, 665 insertions(+), 800 deletions(-) delete mode 100644 files/assets/js/gif_modal.js create mode 100644 files/templates/component/comment/actions_desktop.html create mode 100644 files/templates/component/comment/actions_mobile.html create mode 100644 files/templates/component/comment/actions_mobile_admin.html create mode 100644 files/templates/component/comment/editbox_comment.html create mode 100644 files/templates/component/comment/replybox_comment.html create mode 100644 files/templates/component/comment/replybox_message.html create mode 100644 files/templates/component/comment/reports.html create mode 100644 files/templates/component/comment/user_info.html create mode 100644 files/templates/component/comment/usernote_header.html create mode 100644 files/templates/component/comment/view_more_button.html create mode 100644 files/templates/component/comment/voting_desktop.html create mode 100644 files/templates/component/comment/voting_mobile.html create mode 100644 files/templates/component/modal/delete_comment.html create mode 100644 files/templates/component/modal/report_comment.html delete mode 100644 files/templates/gif_modal.html diff --git a/files/assets/js/gif_modal.js b/files/assets/js/gif_modal.js deleted file mode 100644 index 94746bf09..000000000 --- a/files/assets/js/gif_modal.js +++ /dev/null @@ -1,85 +0,0 @@ -let commentFormID; - -function commentForm(form) { - commentFormID = form; -}; - -async function getGif(searchTerm) { - - if (searchTerm !== undefined) { - document.getElementById('gifSearch').value = searchTerm; - } - else { - document.getElementById('gifSearch').value = null; - } - - var loadGIFs = document.getElementById('gifs-load-more'); - - var noGIFs = document.getElementById('no-gifs-found'); - - var container = document.getElementById('GIFs'); - - var backBtn = document.getElementById('gifs-back-btn'); - - var cancelBtn = document.getElementById('gifs-cancel-btn'); - - container.innerHTML = ''; - - if (searchTerm == undefined) { - container.innerHTML = '
Agree
Laugh
Confused
Sad
Happy
Awesome
Yes
No
Love
Please
Scared
Angry
Awkward
Cringe
OMG
Why
Gross
Meh
' - - backBtn.innerHTML = null; - - cancelBtn.innerHTML = null; - - noGIFs.innerHTML = null; - - loadGIFs.innerHTML = null; - } - else { - backBtn.innerHTML = ''; - - cancelBtn.innerHTML = ''; - - let response = await fetch("/giphy?searchTerm=" + searchTerm + "&limit=48"); - let data = await response.json() - var max = data.data?.length === undefined ? 0 : data.data.length - 1 - data = data.data - var gifURL = []; - - if (max <= 0) { - noGIFs.innerHTML = '

Aw shucks. No GIFs found...

'; - container.innerHTML = null; - loadGIFs.innerHTML = null; - } - else { - for (var i = 0; i < 48; i++) { - gifURL[i] = "https://media.giphy.com/media/" + data[i].id + "/giphy.webp"; - if (data[i].username==''){ - container.innerHTML += ('
'); - } - else { - container.innerHTML += ('
'); - } - noGIFs.innerHTML = null; - loadGIFs.innerHTML = '

Thou've reached the end of the list!

'; - } - } - } -} - -function insertGIF(url,form) { - - // https://github.com/themotte/rDrama/issues/139 - // when MULTIMEDIA_EMBEDDING_ENABLED == False, we want to insert an anchor, NOT an img - //var gif = "\n\n![](" + url +")"; - var gif = '\n\n[' + url + '](' + url + ')'; - - var commentBox = document.getElementById(form); - - var old = commentBox.value; - - commentBox.value = old + gif; - - if (typeof checkForRequired === "function") checkForRequired(); -} diff --git a/files/classes/comment.py b/files/classes/comment.py index 5ff6716e2..e1f4a8e2c 100644 --- a/files/classes/comment.py +++ b/files/classes/comment.py @@ -1,6 +1,7 @@ from os import environ import re import time +from typing import Optional from urllib.parse import urlencode, urlparse, parse_qs from flask import * from sqlalchemy import * @@ -88,7 +89,7 @@ class Comment(Base): @property @lazy - def top_comment(self): + def top_comment(self) -> Optional["Comment"]: return g.db.query(Comment).filter_by(id=self.top_comment_id).one_or_none() @lazy @@ -379,20 +380,99 @@ class Comment(Base): @lazy def collapse_for_user(self, v, path): if v and self.author_id == v.id: return False - if path == '/admin/removed/comments': return False - if self.over_18 and not (v and v.over_18) and not (self.post and self.post.over_18): return True - if self.is_banned: return True - if v and v.filter_words and self.body and any(x in self.body for x in v.filter_words): return True - return False @property @lazy - def is_op(self): return self.author_id==self.post.author_id + def is_op(self): + return self.author_id == self.post.author_id + + @property + @lazy + def is_comment(self) -> bool: + ''' + Returns whether this is an actual comment (i.e. not a private message) + ''' + return bool(self.parent_submission) + + @property + @lazy + def is_message(self) -> bool: + ''' + Returns whether this is a private message or modmail + ''' + return not self.is_comment + + @property + @lazy + def is_strict_message(self) -> bool: + ''' + Returns whether this is a private message or modmail + but is not a notification + ''' + return self.is_message and not self.is_notification + + @property + @lazy + def is_modmail(self) -> bool: + ''' + Returns whether this is a modmail message + ''' + if not self.is_message: return False + if self.sentto == MODMAIL_ID: return True + + top_comment: Optional["Comment"] = self.top_comment + return bool(top_comment.sentto == MODMAIL_ID) + + @property + @lazy + def is_notification(self) -> bool: + ''' + Returns whether this is a notification + ''' + return self.is_message and not self.sentto + + @lazy + def header_msg(self, v, is_notification_page:bool, reply_count:int) -> str: + if self.post: + post_html:str = f"{self.post.realtitle(v)}" + if v: + if v.id == self.author_id and reply_count: + text = f"Comment {'Replies' if reply_count != 1 else 'Reply'}" + elif v.id == self.post.author_id and self.level == 1: + text = "Post Reply" + elif self.parent_submission in v.subscribed_idlist(): + text = "Subscribed Thread" + else: + text = "Username Mention" + if is_notification_page: + return f"{text}: {post_html}" + return post_html + elif self.author_id in {AUTOJANNY_ID, NOTIFICATIONS_ID}: + return "Notification" + elif self.sentto == MODMAIL_ID: + return "Sent to admins" + else: + return f"Sent to @{self.senttouser.username}" + + @lazy + def voted_display(self, v) -> int: + ''' + Returns data used to modify how to show the vote buttons. + + :returns: A number between `-2` and `1`. `-2` is returned if `v` is + `None`. `1` is returned if the user is the comment author. + Otherwise, a value of `-1` (downvote),` 0` (no vote or no data), or `1` + (upvote) is returned. + ''' + if not v: return -2 + if v.id == self.author_id: return 1 + return getattr(self, 'voted', 0) @lazy - def active_flags(self, v): return len(self.flags(v)) + def active_flags(self, v): + return len(self.flags(v)) diff --git a/files/templates/comments.html b/files/templates/comments.html index b0d7a839a..fa1dcc7b3 100644 --- a/files/templates/comments.html +++ b/files/templates/comments.html @@ -1,52 +1,9 @@ -{% if not ajax %} - {% if comment_info and not request.full_path.endswith('#context') %} - - {% endif %} - - - - {% include 'usernote.html' %} -{% endif %} +{%- include "component/comment/usernote_header.html" -%} {# "level" represents the nested level in this call; always starts at 1 #} {# this is distinct from "comment.level", which is the global depth of this comment #} {% macro single_comment(c, level) %} - {% if should_hide_score or c.should_hide_score %} {% set ups="" %} {% set downs="" %} @@ -57,13 +14,9 @@ {% set score=c.score %} {% endif %} -{% if v and (v.shadowbanned or v.admin_level > 1) %} - {% set replies=c.replies_ignoring_shadowbans %} -{% else %} - {% set replies=c.replies(v) %} -{% endif %} +{%- set replies = c.replies(v) -%} -{% if (c.is_banned or c.deleted_utc or c.is_blocking) and not (v and v.admin_level > 1) and not (v and v.id==c.author_id) %} +{% if (c.is_banned or c.deleted_utc or c.is_blocking) and not (v and v.admin_level >= 2) and not (v and v.id==c.author_id) %}
@@ -106,56 +59,21 @@
- {% else %} -{% if v %} - {% set voted=c.voted %} - {% if not voted and v.id == c.author_id %} - {% set voted=1 %} - {% endif %} -{% else %} - {% set voted=-2 %} -{% endif %} +{%- set voted = c.vote_display(v) -%} {% if standalone and level==1 %}
{% if c.post and c.post.over_18 %}+18{% endif %} + {{c.header_msg(v, is_notification_page, replies | length) | safe}} - {% if c.post %} - {% if c.author_id==v.id and replies and is_notification_page%} - Comment {{'Replies' if (replies | length)>1 else 'Reply'}}: {{c.post.realtitle(v) | safe}} - {% elif c.post.author_id==v.id and c.level == 1 and is_notification_page%} - Post Reply: {{c.post.realtitle(v) | safe}} - {% elif is_notification_page and c.parent_submission in v.subscribed_idlist() %} - Subscribed Thread: {{c.post.realtitle(v) | safe}} - {% elif is_notification_page %} - Username Mention: {{c.post.realtitle(v) | safe}} - {% else %} - {{c.post.realtitle(v) | safe}} - {% endif %} - - {% if c.post.sub %} - in /h/{{c.post.sub}} - {% endif %} - {% elif c.author_id==NOTIFICATIONS_ID or c.author_id==AUTOJANNY_ID %} - Notification - {% else %} - {% if c.sentto == MODMAIL_ID %} - Sent to admins - {% else %} - Sent to @{{c.senttouser.username}} - {% endif %} - {% endif %} - + {{c.header_msg(v, is_notification_page, replies | length) | safe}} +
{% endif %} -{% if not standalone and c.parent_comment and c.parent_comment.sentto %} - {% set isreply = True %} -{% else %} - {% set isreply = False %} -{% endif %} +{% set isreply = not standalone and c.parent_comment and c.parent_comment.sentto %}
{% if not isreply %} @@ -164,89 +82,12 @@
{% endif %} -
- - {% if c.ghost %} - 👻 - {% else %} - {% if c.author.verified %} - {% endif %} - {% if not should_hide_username %} - {{c.author_name}} - {% endif %} - {% if v and v.admin_level > 1 %} - U - {% endif %} - {% if c.author.customtitle and not should_hide_username -%} -   {{c.author.customtitle | safe}} - {%- endif %} - {% endif %} - - {% if FEATURES['AWARDS'] %} - {% for a in c.awards|reverse %} - - {% endfor %} - {% endif %} - - {% if c.post %} - {% set sub = c.post.sub %} - {% if sub and c.author.exiled_from(sub) %} - - {% endif %} - {% endif %} - - {% if c.bannedfor %} - - {% endif %} - {% if v and c.filter_state == 'reported' and v.can_manage_reports() %}{{c.active_flags(v)}} Reports{% endif %} - {% if c.over_18 %}+18{% endif %} - {% if v and v.admin_level > 1 and c.author.shadowbanned %}{% endif %} - {% if c.is_pinned %} - - {% endif %} - {% if c.distinguish_level and not c.ghost %}{% endif %} - {% if c.is_op %}{% endif %} - {% if c.is_bot %}{% endif %} - {% if c.is_blocking %}{% endif %} - {% if c.is_blocked %}{% endif %} - - {% if c.parent_comment_id and not standalone and level != 1 %}{{c.parent_comment.author_name}}{% endif %} - - {% if c.notif_utc %} -  {{c.age_string}} - {% elif c.created_utc %} -  {{c.age_string}} - {% endif %} - - {% if c.edited_utc %} - · Edited {{c.edited_string}} - {% endif %} -
+ {%- include 'component/comment/user_info.html' -%}
-
- - - {% if v and c.filter_state == 'reported' and v.can_manage_reports() %} -
- Reports: - Approve - Approve and Ignore - Remove - 

-				
    
-					{% for f in c.flags(v) %}
-						
  • {{f.user.username}}{% if f.reason %}: {{f.realreason(v) | safe}}{% endif %}
    • 
-					{% endfor %}
-				

-			

-			{% endif %}
-
-			{% if c.is_banned and c.ban_reason %}
+			{%- include 'component/comment/reports.html'-%}
+			{% if c.is_banned and c.ban_reason %} {# TODO: shouldn't be visible. See #359 #}
 				
removed by @{{c.ban_reason}}

 			{% endif %}
 
@@ -254,469 +95,86 @@
 				{{c.realbody(v) | safe}}
 			

 			{% if c.parent_submission %}
-				{% if v and v.id==c.author_id %}
-				
-				{% endif %}
+				{%- include 'component/comment/editbox_comment.html' -%}
 				

 					

 						

 							
    
-								
  • 
-									{% if v and v.admin_level > 1 %}
-										
-											
-										
-									{% endif %}
-								
    • 
-																
+								{% if v and v.admin_level >= 2 %}
+									
  • 
+										 
+									
    • 
+								{% endif %}
 								{% if v %}
 									
 								{% endif %}
 								
 								
  • 
-									
-										
-									
+									 
 								
    • 
-					
-								{% if v and request.path.startswith('/@') and v.admin_level < 2 %}
-									
  • 
-										{% if voted==1 %}
-											
-										{% endif %}
-								
-										{{score}}
-								
-										{% if voted==-1 %}
-											
-										{% endif %}
-									
    • 
-								{% elif v %}
-									
  • 
-								
-										
-										
-								
-										{{score}}
-								
-										
-										
-								
-									
    • 
-								{% else %}
-									
  • 
-										
-											
-										
-								
-										{{score}}
-								
-										
-											
-										
-									
    • 
-								{% endif %}
-								

-							

-						

-					
-
-
-
-
-
-
-
-
-
-					
  • 
-						{% if v and request.path.startswith('/@') and v.admin_level < 2%}
-							{% if voted==1 %}
-								
-							{% endif %}
-						{% elif v %}
-						
-							
-						
-						{% else %}
-							
-						
-						{% endif %}
-						
-						
-						
-						{% if v and request.path.startswith('/@') and v.admin_level < 2 %}
-							{% if voted==-1 %}
-								
  • 
-							{% endif %}
-						{% elif v %}
-							
-						
-						{% else %}
-						
-							
-						
-						{% endif %}
-						
-						{% if v and v.admin_level >= 2 %}Votes{% endif %}
-						
-						Context
-
-						
-
-						{% if v %}
-							
-
-							
-
-							
-							
-							
-						{% endif %}
-
-						{% if c.parent_submission %}
-							{% if v and c.author_id == v.id %}
-								
-								
-								
-
-								
-							{% elif v and c.body %}
-								
-							{% endif %}
-						{% endif %}
-
-						{% if v and v.admin_level > 1 and c.filter_state == 'filtered' %}
-							
-							
-						{% endif %}
-
-						{% if v %}
-							
-							
      
-								{% if v.admin_level and v.id==c.author_id %}
-									
-									
-								{% endif %}
-
-								{% if v.id != c.author_id and not c.ghost %}
-									Unblock user
-									Block user
-								{% endif %}
-
-								{% if c.post %}
-									{% set url = "" %}
-									{% if v.admin_level > 1 %}
-										{% set url = "sticky_comment" %}
-									{% elif v.id == c.post.author_id %}
-										{% set url = "pin_comment" %}
-									{% elif c.post.sub and v.mods(c.post.sub) %}
-										{% set url = "mod_pin" %}
-									{% endif %}
-
-									{% if url != "" %}
-										
-										
-									{% endif %}
-								{% endif %}
-
-
-								{% if v.admin_level > 1 %}
-									{% if "/reported/" in request.path %}
-										
-										
-									{% else %}
-										
-										
-									{% endif %}
-								{% endif %}
-
-								{% if c.post %}
-									{% set sub = c.post.sub %}
-									{% if sub and v.mods(sub) and not c.author.mods(sub) %}
-										
-										
-									{% endif %}
-								{% endif %}
-
-								{% if c.parent_submission and (c.author_id==v.id or v.admin_level > 1) %}
-									
-									
-								{% endif %}
-
-								{% if v.admin_level > 1 and v.id != c.author_id %}
-									
-									
-								{% endif %}
-
-								{% if v.admin_level > 1 and c.oauth_app %}
-									API App
-								{% endif %}
+								{%- include 'component/comment/voting_mobile.html' -%}
 							
    
-						{% endif %}
+						

+					

+
+					
 				
 				{% endif %}
-			
-
-		{% if v and v.id != c.author_id and c.body %}
-			 
-		{% endif %}
-
-
-		

-			
-		

-
-
-	{% if render_replies %} 
-		{% if level <= RENDER_DEPTH_LIMIT - 1 or request.path == '/notifications' %}
-			

-				{% for reply in replies %}
-					{{single_comment(reply, level=level+1)}}
-				{% endfor %}
-			

-		{% elif replies %}
-			

-				
-				More comments 
-			

-		{% endif %}
-
-		{% if request.path == '/notifications' and c.level == 1 and c.sentto and not c.parent_submission and c.author_id not in (NOTIFICATIONS_ID, AUTOJANNY_ID) %}
-			Reply
-			

-				
-			

-		{% endif %}
+
+				{% if v and v.id != c.author_id and c.body %}
+					 
+				{% endif %}
+
+				{%- include 'component/comment/replybox_comment.html' -%}
+
+			{% if render_replies %} 
+				{% if level <= RENDER_DEPTH_LIMIT - 1 or request.path == '/notifications' %}
+					

+						{% for reply in replies %}
+							{{single_comment(reply, level=level+1)}}
+						{% endfor %}
+					

+				{% elif replies %}
+					

+						
+						More comments 
+					

+				{% endif %}
+
+			{% if request.path == '/notifications' and c.level == 1 and c.sentto and not c.parent_submission and c.author_id not in (NOTIFICATIONS_ID, AUTOJANNY_ID) %}
+				{%- include 'components/comment/replybox_message.html' -%}
+			{% endif %}
 	{% else %}
-	

+		

 	{% endif %}
 	
 
+{%- include 'component/comment/actions_mobile.html' -%}
 
-
-
-
-
-
-
-
-{% if v and v.admin_level > 1 %}
-	
+{% if v and v.admin_level >= 2 %}
+	{%- include 'component/comment/actions_mobile_admin.html' -%}
 {% endif %}
 
 
-
 {% endif %}
-
 {% endmacro %}
 
 {% for comment in comments %}
-
 	{% if parent_level %}
-	{% set parent_level = parent_level | int %}
+		{% set parent_level = parent_level | int %}
 	{% else %}
-	{% set parent_level = 0 %}
+		{% set parent_level = 0 %}
 	{% endif %}
-
-	{{ single_comment(comment, level = parent_level + 1) }}
-
+	{{single_comment(comment, level = parent_level + 1)}}
 {% endfor %}
 
-{% if offset %}
+{% if offset %} {# view more button #}
 	{% if p %}
 		{% set pid = p.id %}
 	{% endif %}
@@ -728,69 +186,11 @@
 
 {% if not ajax %}
 	{% if v %}
-		{% include "gif_modal.html" %}
-		{% if v.admin_level > 1 %}
+		{% if v.admin_level >= 2 %}
 			{% include "ban_modal.html" %}
 		{% endif %}
-
-
-
-		
+		{%- include 'component/modal/delete_comment.html' -%}
+		{%- include 'component/modal/report_comment.html' -%}
 	{% endif %}
 
 	{% if v %}
@@ -805,9 +205,9 @@
 
 	
 
-	{% if v and v.admin_level > 1 %}
+	{% if v and v.admin_level >= 2 %}
 		
-		{% if v.admin_level > 1 %}
+		{% if v.admin_level >= 2 %}
 			
 		{% endif %}
 	{% endif %}
@@ -881,5 +281,3 @@
 		}
 	
 {% endif %}
-
-
diff --git a/files/templates/component/comment/actions_desktop.html b/files/templates/component/comment/actions_desktop.html
new file mode 100644
index 000000000..fe2aa5741
--- /dev/null
+++ b/files/templates/component/comment/actions_desktop.html
@@ -0,0 +1,88 @@
+{% if v and v.admin_level >= 2 %}
+Votes
+{% endif %}
+Context
+
+{% if v %}
+
+
+
+
+{% endif %}
+{% if c.parent_submission %}
+{% if v and c.author_id == v.id %}
+    
+    
+    
+{% elif v and c.body %}
+    
+{% endif %}
+{% endif %}
+
+{% if v and v.admin_level >= 2 and c.filter_state == 'filtered' %}
+
+
+{% endif %}
+
+{% if v %}
+
+
+{% endif %}
diff --git a/files/templates/component/comment/actions_mobile.html b/files/templates/component/comment/actions_mobile.html
new file mode 100644
index 000000000..4944dec2c
--- /dev/null
+++ b/files/templates/component/comment/actions_mobile.html
@@ -0,0 +1,71 @@
+
diff --git a/files/templates/component/comment/actions_mobile_admin.html b/files/templates/component/comment/actions_mobile_admin.html
new file mode 100644
index 000000000..568bfc8d8
--- /dev/null
+++ b/files/templates/component/comment/actions_mobile_admin.html
@@ -0,0 +1,45 @@
+
diff --git a/files/templates/component/comment/editbox_comment.html b/files/templates/component/comment/editbox_comment.html
new file mode 100644
index 000000000..b983e10dc
--- /dev/null
+++ b/files/templates/component/comment/editbox_comment.html
@@ -0,0 +1,27 @@
+{% if v and v.id==c.author_id %}
+	
+{% endif %}
diff --git a/files/templates/component/comment/replybox_comment.html b/files/templates/component/comment/replybox_comment.html
new file mode 100644
index 000000000..d88dd0a0e
--- /dev/null
+++ b/files/templates/component/comment/replybox_comment.html
@@ -0,0 +1,29 @@
+

+    
+

diff --git a/files/templates/component/comment/replybox_message.html b/files/templates/component/comment/replybox_message.html
new file mode 100644
index 000000000..191388d32
--- /dev/null
+++ b/files/templates/component/comment/replybox_message.html
@@ -0,0 +1,20 @@
+Reply
+

+    
+

diff --git a/files/templates/component/comment/reports.html b/files/templates/component/comment/reports.html
new file mode 100644
index 000000000..56e82d4cb
--- /dev/null
+++ b/files/templates/component/comment/reports.html
@@ -0,0 +1,14 @@
+{%- if v and c.filter_state == 'reported' and v.can_manage_reports() -%}
+	

+	     Reports:
+		Approve
+		Approve and Ignore
+		Remove
+		

+		
+	

+{%- endif -%}
diff --git a/files/templates/component/comment/user_info.html b/files/templates/component/comment/user_info.html
new file mode 100644
index 000000000..5b2449ed2
--- /dev/null
+++ b/files/templates/component/comment/user_info.html
@@ -0,0 +1,60 @@
+

+    {% if c.ghost %}
+        👻
+    {% else %}
+        {% if c.author.verified %}
+        {% endif %}
+        {% if not should_hide_username %}
+            {{c.author_name}}
+        {% endif %}
+        {% if v and v.admin_level >= 2 %}
+        U
+        {% endif %}
+        {% if c.author.customtitle and not should_hide_username -%}
+              {{c.author.customtitle | safe}}
+        {%- endif %}
+    {% endif %}
+
+    {% if FEATURES['AWARDS'] %}
+        {% for a in c.awards|reverse %}
+            
+        {% endfor %}
+    {% endif %}
+
+    {% if c.post %}
+        {% set sub = c.post.sub %}
+        {% if sub and c.author.exiled_from(sub) %}
+            
+        {% endif %}
+    {% endif %}
+
+    {% if c.bannedfor %}
+        
+    {% endif %}
+    {% if v and c.filter_state == 'reported' and v.can_manage_reports() %}{{c.active_flags(v)}} Reports{% endif %}
+    {% if c.over_18 %}+18{% endif %}
+    {% if v and v.admin_level >= 2 and c.author.shadowbanned %}{% endif %}
+    {% if c.is_pinned %}
+        
+    {% endif %}
+    {% if c.distinguish_level and not c.ghost %}{% endif %}
+    {% if c.is_op %}{% endif %}
+    {% if c.is_bot %}{% endif %}
+    {% if c.is_blocking %}{% endif %}
+    {% if c.is_blocked %}{% endif %}
+
+    {% if c.parent_comment_id and not standalone and level != 1 %}{{c.parent_comment.author_name}}{% endif %}
+
+    {% if c.notif_utc %}
+         {{c.age_string}}
+    {% elif c.created_utc %}
+         {{c.age_string}}
+    {% endif %}
+    
+    {% if c.edited_utc %}
+    · Edited {{c.edited_string}}
+    {% endif %}
+

diff --git a/files/templates/component/comment/usernote_header.html b/files/templates/component/comment/usernote_header.html
new file mode 100644
index 000000000..60f6a0e25
--- /dev/null
+++ b/files/templates/component/comment/usernote_header.html
@@ -0,0 +1,43 @@
+{% if not ajax %}
+	{% if comment_info and not request.full_path.endswith('#context') %}
+		
+	{% endif %}
+
+	
+
+  {% include 'usernote.html' %}
+{% endif %}
diff --git a/files/templates/component/comment/view_more_button.html b/files/templates/component/comment/view_more_button.html
new file mode 100644
index 000000000..00f298b0c
--- /dev/null
+++ b/files/templates/component/comment/view_more_button.html
@@ -0,0 +1,9 @@
+{% if offset %}
+	{% if p %}
+		{% set pid = p.id %}
+	{% endif %}
+	

+		

+		
+	

+{% endif %}
diff --git a/files/templates/component/comment/voting_desktop.html b/files/templates/component/comment/voting_desktop.html
new file mode 100644
index 000000000..e3edc5eea
--- /dev/null
+++ b/files/templates/component/comment/voting_desktop.html
@@ -0,0 +1,28 @@
+{# upvote #}
+{%- if v and request.path.startswith('/@') and v.admin_level < 2 -%}
+	{% if voted==1 %}
+		
+	{% endif %}
+{% elif v %}
+	
+{% else %}
+	
+{% endif %}
+
+{# score #}
+
+
+{# downvote #}
+{%- if v and request.path.startswith('/@') and v.admin_level < 2 -%}
+	{% if voted == -1 %}
+		
  • 
+	{% endif %}
+{%- elif environ.get('DISABLE_DOWNVOTES') == '1' -%}
+    {# downvotes not allowed, nop #}
+{%- elif v -%}
+							
+{%- else -%}
+	
+{%- endif %}
diff --git a/files/templates/component/comment/voting_mobile.html b/files/templates/component/comment/voting_mobile.html
new file mode 100644
index 000000000..eaab1f431
--- /dev/null
+++ b/files/templates/component/comment/voting_mobile.html
@@ -0,0 +1,28 @@
+{% if v and request.path.startswith('/@') and v.admin_level < 2 %} {# only admins can vote on user pages #}
+	
  • 
+		{% if voted==1 %}
+			
+		{% endif %}
+
+		{{score}}
+		{% if voted==-1 %}
+			
+		{% endif %}
+	
    • 
+{% elif v %}
+	
  • 
+		
+		{{score}}
+		
+	
    • 
+{% else %}
+	
  • 
+		
+			
+		
+		{{score}}
+		
+			
+		
+
    • 
+{% endif %}
diff --git a/files/templates/component/modal/delete_comment.html b/files/templates/component/modal/delete_comment.html
new file mode 100644
index 000000000..56510e32e
--- /dev/null
+++ b/files/templates/component/modal/delete_comment.html
@@ -0,0 +1,22 @@
+
diff --git a/files/templates/component/modal/report_comment.html b/files/templates/component/modal/report_comment.html
new file mode 100644
index 000000000..0d64a4d04
--- /dev/null
+++ b/files/templates/component/modal/report_comment.html
@@ -0,0 +1,29 @@
+
diff --git a/files/templates/gif_modal.html b/files/templates/gif_modal.html
deleted file mode 100644
index 43efffdeb..000000000
--- a/files/templates/gif_modal.html
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-
diff --git a/files/templates/settings_profile.html b/files/templates/settings_profile.html
index bfe98536d..259587ab6 100644
--- a/files/templates/settings_profile.html
+++ b/files/templates/settings_profile.html
@@ -467,11 +467,5 @@
 
 
 
-
-
 
-
-{% include "gif_modal.html" %}
-
 {% endblock %}
-
diff --git a/files/templates/submit.html b/files/templates/submit.html
index dc28fe5af..94873d86e 100644
--- a/files/templates/submit.html
+++ b/files/templates/submit.html
@@ -105,9 +105,7 @@
 												
 												
 												 
-												
-												 
-																
+