Threaded comments

mixins/Comments.pixy

@@ -5,7 +5,7 @@ component Comments(parent arn.PostParent, user *arn.User)
 				p.no-data.mountable No comments have been written yet.
 			else
 				each post in parent.Posts()
-					Postable(post, user, "", "")
+					Postable(post, user, true, "", "")
 			
 			if user != nil
 				if arn.IsLocked(parent)

mixins/NewPostArea.pixy

@@ -1,6 +1,7 @@
 component NewPostArea(user *arn.User, placeholder string)
 	.post.mountable
-		.post-author
+		.post-parent
-			Avatar(user)
+			.post-author
-		
+				Avatar(user)
-		textarea#new-post.post-content(placeholder=placeholder + "...", aria-label=placeholder)
+			
+			textarea#new-post.post-content(placeholder=placeholder + "...", aria-label=placeholder)

mixins/Postable.pixy

@@ -1,55 +1,64 @@
-component Postable(post arn.Postable, user *arn.User, headerContent string, highlightAuthorID string)
+component Postable(post arn.Postable, user *arn.User, includeReplies bool, headerContent string, highlightAuthorID string)
-	.post.mountable(id=strings.ToLower(post.Type()) + "-" + fmt.Sprint(post.GetID()), data-highlight=post.Creator().ID == highlightAuthorID, data-pro=post.Creator().IsPro(), data-api="/api/" + strings.ToLower(post.Type()) + "/" + post.GetID())
+	.post.mountable(id=strings.ToLower(post.Type()) + "-" + fmt.Sprint(post.GetID()), data-pro=post.Creator().IsPro(), data-api="/api/" + strings.ToLower(post.Type()) + "/" + post.GetID())
-		.post-author
+		.post-parent
-			Avatar(post.Creator())
+			.post-author
+				Avatar(post.Creator())
 
-		.post-content
+			.post-content(data-highlight=post.Creator().ID == highlightAuthorID)
-			if headerContent != ""
+				if headerContent != ""
-				div!= headerContent
+					div!= headerContent
-			
-			div(id="render-" + post.GetID())!= post.HTML()
-
-			if user != nil && user.ID == post.Creator().ID
-				.post-edit-interface
-					if post.Type() == "Thread"
-						input.post-title-input.hidden(id="title-" + post.GetID(), value=post.TitleByUser(user), type="text", placeholder="Thread title")
-					textarea.post-text-input.hidden(id="source-" + post.GetID())= post.GetText()
-					.buttons.hidden(id="edit-toolbar-" + post.GetID())
-						a.button.post-save.action(data-action="savePost", data-trigger="click", data-id=post.GetID())
-							Icon("save")
-							span Save
-
-						a.button.post-cancel-edit.action(data-action="editPost", data-trigger="click", data-id=post.GetID())
-							Icon("close")
-							span Cancel
-			
-			.post-date.utc-date.no-tip(data-date=post.GetCreated())
-
-			.post-toolbar(id="toolbar-" + post.GetID())
-				.spacer
-				.post-likes.tip(id="likes-" + post.GetID(), aria-label=stringutils.Plural(post.CountLikes(), "like"))= "+" + strconv.Itoa(post.CountLikes())
-
-				if user != nil
-					if user.ID != post.Creator().ID
-						if post.LikedBy(user.ID)
-							a.post-tool.post-unlike.tip.action(id="unlike-" + post.GetID(), aria-label="Unlike", data-action="unlike", data-trigger="click")
-								Icon("thumbs-down")
-						else
-							a.post-tool.post-like.tip.action(id="like-" + post.GetID(), aria-label="Like", data-action="like", data-trigger="click")
-								Icon("thumbs-up")
-					
-					if user.Role == "admin"
-						a.post-tool.post-edit.tip(href=post.Link() + "/edit", aria-label="Edit")
-							Icon("edit")
-
-					if user.ID == post.Creator().ID
-						a.post-tool.post-edit.tip.action(data-action="editPost", data-trigger="click", data-id=post.GetID(), aria-label="Edit")
-							Icon("pencil")
-
-				if post.Type() != "Thread"
-					if user != nil && (user.Role == "admin" || user.Role == "editor")
-						a.post-tool.post-delete.tip.action(data-action="deletePost", data-trigger="click", data-id=post.GetID(), aria-label="Delete")
-							Icon("trash")
 				
-				a.post-tool.post-permalink.tip(href=post.Link(), aria-label="Link")
+				div(id="render-" + post.GetID())!= post.HTML()
-					Icon("link")
+
+				if user != nil && user.ID == post.Creator().ID
+					.post-edit-interface
+						if post.Type() == "Thread"
+							input.post-title-input.hidden(id="title-" + post.GetID(), value=post.TitleByUser(user), type="text", placeholder="Thread title")
+						textarea.post-text-input.hidden(id="source-" + post.GetID())= post.GetText()
+						.buttons.hidden(id="edit-toolbar-" + post.GetID())
+							a.button.post-save.action(data-action="savePost", data-trigger="click", data-id=post.GetID())
+								Icon("save")
+								span Save
+
+							a.button.post-cancel-edit.action(data-action="editPost", data-trigger="click", data-id=post.GetID())
+								Icon("close")
+								span Cancel
+				
+				.post-date.utc-date.no-tip(data-date=post.GetCreated())
+
+				.post-toolbar(id="toolbar-" + post.GetID())
+					.spacer
+					.post-likes.tip(id="likes-" + post.GetID(), aria-label=stringutils.Plural(post.CountLikes(), "like"))= "+" + strconv.Itoa(post.CountLikes())
+
+					if user != nil
+						if user.ID != post.Creator().ID
+							if post.LikedBy(user.ID)
+								a.post-tool.post-unlike.tip.action(id="unlike-" + post.GetID(), aria-label="Unlike", data-action="unlike", data-trigger="click")
+									Icon("thumbs-down")
+							else
+								a.post-tool.post-like.tip.action(id="like-" + post.GetID(), aria-label="Like", data-action="like", data-trigger="click")
+									Icon("thumbs-up")
+						
+						//- if user.Role == "admin"
+						//- 	a.post-tool.post-edit.tip(href=post.Link() + "/edit", aria-label="Edit")
+						//- 		Icon("edit")
+						
+						a.post-tool.post-reply.tip.action(id="reply-" + post.GetID(), aria-label="Reply", data-action="reply", data-trigger="click")
+							Icon("reply")
+
+						if user.ID == post.Creator().ID
+							a.post-tool.post-edit.tip.action(data-action="editPost", data-trigger="click", data-id=post.GetID(), aria-label="Edit")
+								Icon("pencil")
+
+					if post.Type() != "Thread"
+						if user != nil && (user.Role == "admin" || user.Role == "editor")
+							a.post-tool.post-delete.tip.action(data-action="deletePost", data-trigger="click", data-id=post.GetID(), aria-label="Delete")
+								Icon("trash")
+					
+					a.post-tool.post-permalink.tip(href=post.Link(), aria-label="Link")
+						Icon("link")
+
+		.replies
+			if includeReplies
+				each reply in post.Posts()
+					Postable(reply, user, true, "", highlightAuthorID)

mixins/PostableList.pixy

@@ -2,4 +2,4 @@ component PostableList(postables []arn.Postable, user *arn.User)
 	.thread
 		.posts
 			each post in postables
-				Postable(post, user, "", "")
+				Postable(post, user, false, "", "")

pages/activity/activity.pixy

@@ -8,6 +8,6 @@ component ActivityFeed(entries []*arn.EditLogEntry, user *arn.User)
 
 component ActivityPost(post arn.Postable, user *arn.User)
 	if post.Parent() != nil
-		Postable(post, user, fmt.Sprintf(`<p class="activity-header"><a href="%s">%s</a></p>`, post.Parent().Link(), html.EscapeString(post.Parent().TitleByUser(user))), "")
+		Postable(post, user, false, fmt.Sprintf(`<p class="activity-header"><a href="%s">%s</a></p>`, post.Parent().Link(), html.EscapeString(post.Parent().TitleByUser(user))), "")
 	else
-		Postable(post, user, fmt.Sprintf(`<p class="activity-header"><a href="%s">%s</a></p>`, post.Link(), html.EscapeString(post.TitleByUser(user))), "")
+		Postable(post, user, false, fmt.Sprintf(`<p class="activity-header"><a href="%s">%s</a></p>`, post.Link(), html.EscapeString(post.TitleByUser(user))), "")

pages/post/newpostarea.go

@@ -0,0 +1,13 @@
+package post
+
+import (
+	"github.com/aerogo/aero"
+	"github.com/animenotifier/notify.moe/components"
+	"github.com/animenotifier/notify.moe/utils"
+)
+
+// NewPostArea renders a new post area.
+func NewPostArea(ctx *aero.Context) string {
+	user := utils.GetUser(ctx)
+	return ctx.HTML(components.NewPostArea(user, "Reply"))
+}

pages/post/post.go

@@ -14,8 +14,6 @@ func Get(ctx *aero.Context) string {
 	id := ctx.Get("id")
 	user := utils.GetUser(ctx)
 	post, err := arn.GetPost(id)
-	// a := 0
-	// a++
 
 	if err != nil {
 		return ctx.Error(http.StatusNotFound, "Post not found", err)

pages/post/post.pixy

@@ -1,7 +1,7 @@
 component Post(post *arn.Post, user *arn.User)
 	.thread
 		.posts
-			Postable(post, user, "", "")
+			Postable(post, user, true, "", "")
 
 			.side-note-container.mountable
 				a.side-note(href=post.Parent().Link())= post.Parent().TitleByUser(user)

pages/thread/thread.go

@@ -21,11 +21,5 @@ func Get(ctx *aero.Context) string {
 		return ctx.Error(http.StatusNotFound, "Thread not found", err)
 	}
 
-	// Fetch posts
+	return ctx.HTML(components.Thread(thread, user))
-	posts := thread.Posts()
-
-	// Sort posts
-	arn.SortPostsLatestLast(posts)
-
-	return ctx.HTML(components.Thread(thread, posts, user))
 }

pages/thread/thread.pixy

@@ -1,12 +1,9 @@
-component Thread(thread *arn.Thread, posts []*arn.Post, user *arn.User)
+component Thread(thread *arn.Thread, user *arn.User)
 	h1.thread-title= thread.Title
 
 	#thread.thread(data-id=thread.ID)
 		.posts
-			Postable(thread, user, "", thread.Creator().ID)
+			Postable(thread, user, true, "", thread.Creator().ID)
-
-			each post in posts
-				Postable(post, user, "", thread.Creator().ID)
 			
 			//- Reply
 			if user != nil

pages/thread/thread.scarlet

@@ -14,18 +14,23 @@
 	.post-author
 		margin-bottom 0.25rem
 
+.post-content
 	[data-highlight="true"]
-		.post-content
+		border 2px solid post-highlight-color
-			border 2px solid post-highlight-color
 
-	// [data-pro="true"]
+.post-parent
-	// 	.post-content
+	vertical
-	// 		border 2px solid pro-color
+
+.replies
+	margin-top 0.75rem
+	margin-left content-padding
 
 > 600px
 	.post
-		horizontal
+		margin-bottom 0
-		margin-bottom 0.75rem
 
 		.post-author
-			margin-bottom 0
+			margin-bottom 0
+
+	.post-parent
+		horizontal

scripts/Actions/Forum.ts

@@ -91,6 +91,11 @@ export function createThread(arn: AnimeNotifier) {
 	.catch(err => arn.statusMessage.showError(err))
 }
 
+// Reply to a post
+export function reply(arn: AnimeNotifier, element: HTMLElement) {
+
+}
+
 // Lock thread
 export function lockThread(arn: AnimeNotifier, element: HTMLButtonElement) {
 	setThreadLock(arn, element, true)

styles/forum.scarlet

@@ -95,7 +95,8 @@ post-content-padding-y = 0.75rem
 
 .post-tool
 	opacity 0.7
-	&:hover
+
+	:hover
 		cursor pointer
 		opacity 1
 
@@ -134,135 +135,4 @@ post-content-padding-y = 0.75rem
 	white-space nowrap
 	opacity 0
 	transform translateX(100%)
-	default-transition
+	default-transition
-
-// Old
-
-// #posts
-// 	display flex
-// 	flex-flow column
-// 	flex 1
-// 	max-width 100%
-
-// .post
-// 	display flex
-// 	flex-flow column
-// 	margin 0.5rem 0
-
-// 	[data-highlight="true"]
-// 		.post-content
-// 			border 2px solid post-highlight-color
-
-// .post-author
-// 	text-align center
-// 	flex-grow 0
-// 	display flex
-// 	flex-flow row
-// 	justify-content center
-// 	margin-bottom -3px
-
-// 	img
-// 		margin 0 !important
-
-// #post-input,
-// .post-input
-// 	width 100%
-// 	min-height 150px
-// 	margin 0.5rem 0
-
-// .post-submit
-// 	margin-top 0.5rem
-// 	max-width 200px
-// 	align-items flex-end
-
-// .post-toolbar
-// 	display flex
-// 	flex-flow row
-// 	opacity 0
-// 	default-transition
-// 	position absolute
-// 	bottom 3px
-// 	right 0
-
-// .post-save
-// 	float right
-// 	:hover
-// 		cursor pointer
-
-// .post-input-toolbar
-// 	display flex
-// 	flex-flow row
-
-// .post-tool
-// 	opacity 0.7
-// 	:hover
-// 		cursor pointer
-// 		opacity 1
-
-// .post-likes
-// 	opacity 0.4
-// 	margin-right 0.4em
-// 	:before
-// 		content "+"
-
-// .post-permalink
-// 	color blue !important
-
-// .post-delete
-// 	color rgb(255, 32, 12) !important
-
-// .post-like
-// 	color green !important
-
-// .post-unlike
-// 	color rgb(255, 32, 12) !important
-
-// .post-content
-// 	ui-element
-// 	text-align left
-// 	flex-grow 1
-// 	padding 0.4rem 1rem
-// 	margin-left 0.3rem
-// 	border-radius ui-element-border-radius
-// 	position relative
-
-// 	:hover
-// 		.post-toolbar
-// 			opacity 1
-
-// 	h1
-// 		font-size 1.5rem
-// 		line-height 2em
-
-// 	h2
-// 		font-size 1.3rem
-// 		line-height 2em
-// 		font-weight normal
-
-// 	h3
-// 		font-size 1.1rem
-// 		line-height 2em
-// 		font-weight normal
-
-// .hidden
-// 	display none
-
-// .thread
-// 	display flex
-// 	flex-flow column
-// 	align-items center
-
-// .thread-title
-// 	width auto
-
-// .posts
-// 	width 100%
-// 	max-width 830px
-
-// > 500px
-// 	.post
-// 		flex-flow row
-// 		justify-content center
-
-// 	.post-author
-// 		//