Added image upload for groups

images/elements/no-group-image.svg

@@ -0,0 +1 @@
+<svg width="2048" height="1792" viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg"><path d="M657 896q-162 5-265 128h-134q-82 0-138-40.5t-56-118.5q0-353 124-353 6 0 43.5 21t97.5 42.5 119 21.5q67 0 133-23-5 37-5 66 0 139 81 256zm1071 637q0 120-73 189.5t-194 69.5h-874q-121 0-194-69.5t-73-189.5q0-53 3.5-103.5t14-109 26.5-108.5 43-97.5 62-81 85.5-53.5 111.5-20q10 0 43 21.5t73 48 107 48 135 21.5 135-21.5 107-48 73-48 43-21.5q61 0 111.5 20t85.5 53.5 62 81 43 97.5 26.5 108.5 14 109 3.5 103.5zm-1024-1277q0 106-75 181t-181 75-181-75-75-181 75-181 181-75 181 75 75 181zm704 384q0 159-112.5 271.5t-271.5 112.5-271.5-112.5-112.5-271.5 112.5-271.5 271.5-112.5 271.5 112.5 112.5 271.5zm576 225q0 78-56 118.5t-138 40.5h-134q-103-123-265-128 81-117 81-256 0-29-5-66 66 23 133 23 59 0 119-21.5t97.5-42.5 43.5-21q124 0 124 353zm-128-609q0 106-75 181t-181 75-181-75-75-181 75-181 181-75 181 75 75 181z"/></svg>

images/groups/.gitignore

@@ -0,0 +1,3 @@
+*
+!*/
+!.gitignore

images/groups/original/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

images/groups/small/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

pages/group/edit.go

@@ -17,7 +17,7 @@ func Edit(ctx *aero.Context) string {
 	user := utils.GetUser(ctx)
 
 	if err != nil {
-		return ctx.Error(http.StatusNotFound, "Track not found", err)
+		return ctx.Error(http.StatusNotFound, "Group not found", err)
 	}
 
 	var member *arn.GroupMember
@@ -26,13 +26,24 @@ func Edit(ctx *aero.Context) string {
 		member = group.FindMember(user.ID)
 	}
 
-	ctx.Data = &arn.OpenGraph{
-		Tags: map[string]string{
-			"og:title":     group.Name,
-			"og:url":       "https://" + ctx.App.Config.Domain + group.Link(),
-			"og:site_name": "notify.moe",
-		},
-	}
-
 	return ctx.HTML(components.GroupTabs(group, member, user) + editform.Render(group, "Edit group", user))
 }
+
+// EditImage renders the form to edit the group images.
+func EditImage(ctx *aero.Context) string {
+	id := ctx.Get("id")
+	group, err := arn.GetGroup(id)
+	user := utils.GetUser(ctx)
+
+	if err != nil {
+		return ctx.Error(http.StatusNotFound, "Group not found", err)
+	}
+
+	var member *arn.GroupMember
+
+	if user != nil {
+		member = group.FindMember(user.ID)
+	}
+
+	return ctx.HTML(components.EditGroupImage(group, member, user))
+}

pages/group/group.scarlet

@@ -1,20 +1,12 @@
 .group-view
-	horizontal-wrap
+	vertical
 	width 100%
 	max-width 900px
 	margin 0 auto
 
-< 1100px
-	.group-view
-		vertical
-
 .group-feed
 	flex 1
 
-.group-members
-	margin-bottom 0.5rem
-	justify-content flex-start
-
 .group-header
 	margin-bottom content-padding
 

pages/group/image.pixy

@@ -0,0 +1,15 @@
+component EditGroupImage(group *arn.Group, member *arn.GroupMember, user *arn.User)
+	GroupTabs(group, member, user)
+
+	.widget-form
+		h1.mountable Edit group image
+
+		.widget.mountable(data-api="/api/group/" + group.ID)
+			h3.widget-title
+				Icon("picture-o")
+				span Image
+			
+			InputFileUpload("group-image-input", "File", "image", "/api/upload/group/" + group.ID + "/image")
+
+			.group-image-container.mountable
+				img.group-image.group-image-input-preview.lazy(data-src=group.ImageLink("small"), data-webp="true", data-color=group.AverageColor(), alt="Group image")

pages/group/image.scarlet

@@ -0,0 +1,14 @@
+.group-image-container
+	vertical
+	align-items center
+
+.group-image
+	flex-shrink 0
+	width 70px
+	height 70px
+	margin-right 1rem
+	border-radius ui-element-border-radius
+	object-fit cover
+
+.group-image-input-preview
+	margin 0

pages/group/info.pixy

@@ -13,6 +13,14 @@ component GroupInfo(group *arn.Group, member *arn.GroupMember, user *arn.User)
 				h3.mountable Rules
 				.group-rules.mountable!= markdown.Render(group.Rules)
 
+		if len(group.Tags) > 0
+			.group-info-section
+				h3.mountable Tags
+
+				.tags.group-tags.mountable
+					each tag in group.Tags
+						.tag= tag
+		
 		.group-info-section
 			h3.mountable Founder
 			.user-avatars.group-founder.mountable

pages/group/info.scarlet

@@ -1,2 +1,5 @@
 .group-info-section
 	margin-bottom content-padding
+
+.group-founder
+	justify-content flex-start !important

pages/group/members.pixy

@@ -9,4 +9,4 @@ component GroupMembers(group *arn.Group, member *arn.GroupMember, user *arn.User
 	.buttons
 		button.mountable
 			Icon("user-plus")
-			span= fmt.Sprintf("Join %s", group.Name)
+			span= fmt.Sprintf(`Join "%s"`, group.Name)

pages/group/members.scarlet

@@ -0,0 +1,2 @@
+.group-members
+	margin-bottom content-padding

pages/group/tabs.pixy

@@ -6,3 +6,4 @@ component GroupTabs(group *arn.Group, member *arn.GroupMember, user *arn.User)
 
 		if member != nil && member.Role == "founder"
 			Tab("Edit", "pencil", group.Link() + "/edit")
+			Tab("Edit image", "image", group.Link() + "/edit/image")

pages/groups/groups.pixy

@@ -18,7 +18,7 @@ component Groups(groups []*arn.Group, groupsPerPage int, user *arn.User)
 	#load-more-target.groups
 		each group in groups
 			a.group.mountable(href=group.Link())
-				img.group-image.lazy(data-src=group.ImageURL(), alt=group.Name)
+				img.group-image.lazy(data-src=group.ImageLink("small"), data-webp="true", data-color=group.AverageColor(), alt=group.Name)
 				
 				.group-info
 					h3.group-name= group.Name

pages/groups/groups.scarlet

@@ -4,8 +4,11 @@ const group-padding-x = 0.75rem
 .groups
 	display grid
 	grid-gap content-padding-half
-	// grid-template-columns repeat(auto-fill, min(100%, 520px))
+
-	// justify-content center
+> 600px
+	.groups
+		grid-template-columns repeat(auto-fit, 520px)
+		justify-content center
 
 .group
 	horizontal
@@ -21,21 +24,18 @@ const group-padding-x = 0.75rem
 		background-color theme-black
 		text-shadow none
 
-.group-image
-	width 70px
-	height 70px
-	margin-right 1rem
-	border-radius ui-element-border-radius
-
 .group-info
 	vertical
+	overflow hidden
 
 .group-name
-	horizontal
+	// horizontal
-	align-items center
+	// align-items center
+	clip-long-text
 
 .group-tagline
 	opacity 0.6
+	clip-long-text
 
 .group-member-count
 	position absolute

pages/index/grouproutes/grouproutes.go

@@ -14,4 +14,5 @@ func Register(l *layout.Layout) {
 	l.Page("/group/:id/info", group.Info)
 	l.Page("/group/:id/members", group.Members)
 	l.Page("/group/:id/edit", group.Edit)
+	l.Page("/group/:id/edit/image", group.EditImage)
 }

pages/inventory/inventory.scarlet

@@ -3,7 +3,7 @@ const inventory-slot-size = 64px
 .inventory
 	display grid
 	grid-gap 0.25rem
-	grid-template-columns repeat(auto-fit, inventory-slot-size)
+	grid-template-columns repeat(auto-fill, inventory-slot-size)
 	grid-auto-rows inventory-slot-size
 	justify-content center
 	width 100%

scripts/AnimeNotifier.ts

@@ -819,7 +819,7 @@ export default class AnimeNotifier {
 			let extension = ""
 
 			// Replace URL with WebP if supported
-			if(this.webpEnabled && element.dataset.webp === "true") {
+			if(this.webpEnabled && element.dataset.webp === "true" && !dataSrc.endsWith(".svg")) {
 				let queryPos = dataSrc.lastIndexOf("?")
 
 				if(queryPos !== -1) {