From c69c777fc8596e0b83c2c045e662e0126bb5f9a4 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Wed, 10 May 2023 00:45:31 +0200
Subject: [PATCH 01/12] feat: GET /users/@me/flags, POST /users/@me/flags

---
 backend/db/flags.go                 | 226 ++++++++++++++++++++++++++++
 backend/routes/user/flags.go        | 121 +++++++++++++++
 backend/routes/user/routes.go       |   5 +
 backend/server/errors.go            |   5 +-
 scripts/migrate/017_pride_flags.sql |  24 +++
 5 files changed, 380 insertions(+), 1 deletion(-)
 create mode 100644 backend/db/flags.go
 create mode 100644 backend/routes/user/flags.go
 create mode 100644 scripts/migrate/017_pride_flags.sql

diff --git a/backend/db/flags.go b/backend/db/flags.go
new file mode 100644
index 0000000..cc2195a
--- /dev/null
+++ b/backend/db/flags.go
@@ -0,0 +1,226 @@
+package db
+
+import (
+	"bytes"
+	"context"
+	"crypto/sha256"
+	"encoding/base64"
+	"encoding/hex"
+	"io"
+	"strings"
+
+	"emperror.dev/errors"
+	"github.com/davidbyttow/govips/v2/vips"
+	"github.com/georgysavva/scany/v2/pgxscan"
+	"github.com/jackc/pgx/v5"
+	"github.com/minio/minio-go/v7"
+	"github.com/rs/xid"
+)
+
+type PrideFlag struct {
+	ID          xid.ID  `json:"id"`
+	UserID      xid.ID  `json:"-"`
+	Hash        string  `json:"hash"`
+	Name        string  `json:"name"`
+	Description *string `json:"description"`
+}
+
+type UserFlag struct {
+	ID     int64  `json:"-"`
+	UserID xid.ID `json:"-"`
+	FlagID xid.ID `json:"id"`
+
+	Hash        string  `json:"hash"`
+	Name        string  `json:"name"`
+	Description *string `json:"description"`
+}
+
+type MemberFlag struct {
+	ID       int64  `json:"-"`
+	MemberID xid.ID `json:"-"`
+	FlagID   xid.ID `json:"id"`
+
+	Hash        string  `json:"hash"`
+	Name        string  `json:"name"`
+	Description *string `json:"description"`
+}
+
+const (
+	MaxPrideFlags           = 100
+	MaxPrideFlagTitleLength = 100
+	MaxPrideFlagDescLength  = 200
+)
+
+func (db *DB) AccountFlags(ctx context.Context, userID xid.ID) (fs []PrideFlag, err error) {
+	sql, args, err := sq.Select("*").From("pride_flags").Where("user_id = ?", userID).OrderBy("id").ToSql()
+	if err != nil {
+		return nil, errors.Wrap(err, "building query")
+	}
+
+	err = pgxscan.Select(ctx, db, &fs, sql, args...)
+	if err != nil {
+		return nil, errors.Wrap(err, "executing query")
+	}
+	return NotNull(fs), nil
+}
+
+func (db *DB) UserFlags(ctx context.Context, userID xid.ID) (fs []UserFlag, err error) {
+	sql, args, err := sq.Select("u.id", "u.flag_id", "f.user_id", "f.hash", "f.name", "f.description").
+		From("user_flags AS u").
+		Where("u.user_id = $1").
+		Join("pride_flags AS f ON u.flag_id = f.id").
+		OrderBy("u.id ASC").
+		ToSql()
+	if err != nil {
+		return nil, errors.Wrap(err, "building query")
+	}
+
+	err = pgxscan.Select(ctx, db, &fs, sql, args...)
+	if err != nil {
+		return nil, errors.Wrap(err, "executing query")
+	}
+	return NotNull(fs), nil
+}
+
+func (db *DB) MemberFlags(ctx context.Context, userID xid.ID) (fs []MemberFlag, err error) {
+	sql, args, err := sq.Select("m.id", "m.flag_id", "m.member_id", "f.hash", "f.name", "f.description").
+		From("member_flags AS m").
+		Where("m.member_id = $1").
+		Join("pride_flags AS f ON m.flag_id = f.id").
+		OrderBy("m.id ASC").
+		ToSql()
+	if err != nil {
+		return nil, errors.Wrap(err, "building query")
+	}
+
+	err = pgxscan.Select(ctx, db, &fs, sql, args...)
+	if err != nil {
+		return nil, errors.Wrap(err, "executing query")
+	}
+	return NotNull(fs), nil
+}
+
+func (db *DB) CreateFlag(ctx context.Context, tx pgx.Tx, userID xid.ID, name, desc string) (f PrideFlag, err error) {
+	description := &desc
+	if desc == "" {
+		description = nil
+	}
+
+	sql, args, err := sq.Insert("pride_flags").
+		SetMap(map[string]any{
+			"id":          xid.New(),
+			"hash":        "",
+			"user_id":     userID.String(),
+			"name":        name,
+			"description": description,
+		}).Suffix("RETURNING *").ToSql()
+	if err != nil {
+		return f, errors.Wrap(err, "building query")
+	}
+
+	err = pgxscan.Get(ctx, tx, &f, sql, args...)
+	if err != nil {
+		return f, errors.Wrap(err, "executing query")
+	}
+	return f, nil
+}
+
+func (db *DB) EditFlag(ctx context.Context, tx pgx.Tx, flagID xid.ID, name, desc, hash *string) (f PrideFlag, err error) {
+	b := sq.Update("pride_flags").
+		Where("id = ?", flagID)
+	if name != nil {
+		b = b.Set("name", *name)
+	}
+	if desc != nil {
+		if *desc == "" {
+			b = b.Set("description", nil)
+		} else {
+			b = b.Set("description", *desc)
+		}
+	}
+	if hash != nil {
+		b = b.Set("hash", *hash)
+	}
+
+	sql, args, err := b.Suffix("RETURNING *").ToSql()
+	if err != nil {
+		return f, errors.Wrap(err, "building sql")
+	}
+
+	err = pgxscan.Get(ctx, tx, &f, sql, args...)
+	if err != nil {
+		return f, errors.Wrap(err, "executing query")
+	}
+	return f, nil
+}
+
+func (db *DB) WriteFlag(ctx context.Context, flagID xid.ID, flag *bytes.Buffer) (hash string, err error) {
+	hasher := sha256.New()
+	_, err = hasher.Write(flag.Bytes())
+	if err != nil {
+		return "", errors.Wrap(err, "hashing flag")
+	}
+	hash = hex.EncodeToString(hasher.Sum(nil))
+
+	_, err = db.minio.PutObject(ctx, db.minioBucket, "/flags/"+hash+".webp", flag, -1, minio.PutObjectOptions{
+		ContentType: "image/webp",
+	})
+	if err != nil {
+		return "", errors.Wrap(err, "uploading flag")
+	}
+
+	return hash, nil
+}
+
+func (db *DB) DeleteFlag(ctx context.Context, flagID xid.ID, hash string) error {
+	err := db.minio.RemoveObject(ctx, db.minioBucket, "/flags/"+flagID.String()+"/"+hash+".webp", minio.RemoveObjectOptions{})
+	if err != nil {
+		return errors.Wrap(err, "deleting flag")
+	}
+
+	return nil
+}
+
+func (db *DB) FlagObject(ctx context.Context, flagID xid.ID, hash string) (io.ReadCloser, error) {
+	obj, err := db.minio.GetObject(ctx, db.minioBucket, "/flags/"+flagID.String()+"/"+hash+".webp", minio.GetObjectOptions{})
+	if err != nil {
+		return nil, errors.Wrap(err, "getting object")
+	}
+	return obj, nil
+}
+
+// ConvertFlag parses a flag from a data URI, converts it to WebP, and returns the result.
+func (db *DB) ConvertFlag(data string) (webpOut *bytes.Buffer, err error) {
+	defer vips.ShutdownThread()
+
+	data = strings.TrimSpace(data)
+	if !strings.Contains(data, ",") || !strings.Contains(data, ":") || !strings.Contains(data, ";") {
+		return nil, ErrInvalidDataURI
+	}
+	split := strings.Split(data, ",")
+
+	rawData, err := base64.StdEncoding.DecodeString(split[1])
+	if err != nil {
+		return nil, errors.Wrap(err, "invalid base64 data")
+	}
+
+	image, err := vips.LoadImageFromBuffer(rawData, nil)
+	if err != nil {
+		return nil, errors.Wrap(err, "decoding image")
+	}
+
+	err = image.ThumbnailWithSize(256, 256, vips.InterestingNone, vips.SizeBoth)
+	if err != nil {
+		return nil, errors.Wrap(err, "resizing image")
+	}
+
+	webpExport := vips.NewWebpExportParams()
+	webpExport.Lossless = true
+	webpB, _, err := image.ExportWebp(webpExport)
+	if err != nil {
+		return nil, errors.Wrap(err, "exporting webp image")
+	}
+	webpOut = bytes.NewBuffer(webpB)
+
+	return webpOut, nil
+}
diff --git a/backend/routes/user/flags.go b/backend/routes/user/flags.go
new file mode 100644
index 0000000..2402137
--- /dev/null
+++ b/backend/routes/user/flags.go
@@ -0,0 +1,121 @@
+package user
+
+import (
+	"fmt"
+	"net/http"
+	"strings"
+
+	"codeberg.org/u1f320/pronouns.cc/backend/common"
+	"codeberg.org/u1f320/pronouns.cc/backend/db"
+	"codeberg.org/u1f320/pronouns.cc/backend/log"
+	"codeberg.org/u1f320/pronouns.cc/backend/server"
+	"emperror.dev/errors"
+	"github.com/go-chi/render"
+)
+
+func (s *Server) getUserFlags(w http.ResponseWriter, r *http.Request) error {
+	ctx := r.Context()
+	claims, _ := server.ClaimsFromContext(ctx)
+
+	flags, err := s.DB.AccountFlags(ctx, claims.UserID)
+	if err != nil {
+		return errors.Wrapf(err, "getting flags for account %v", claims.UserID)
+	}
+
+	render.JSON(w, r, flags)
+	return nil
+}
+
+type postUserFlagRequest struct {
+	Flag        string `json:"flag"`
+	Name        string `json:"name"`
+	Description string `json:"description"`
+}
+
+func (s *Server) postUserFlag(w http.ResponseWriter, r *http.Request) error {
+	ctx := r.Context()
+	claims, _ := server.ClaimsFromContext(ctx)
+
+	if !claims.TokenWrite {
+		return server.APIError{Code: server.ErrMissingPermissions, Details: "This token is read-only"}
+	}
+
+	flags, err := s.DB.AccountFlags(ctx, claims.UserID)
+	if err != nil {
+		return errors.Wrap(err, "getting current user flags")
+	}
+	if len(flags) >= db.MaxPrideFlags {
+		return server.APIError{
+			Code: server.ErrFlagLimitReached,
+		}
+	}
+
+	var req postUserFlagRequest
+	err = render.Decode(r, &req)
+	if err != nil {
+		return server.APIError{Code: server.ErrBadRequest}
+	}
+
+	// remove whitespace from all fields
+	req.Name = strings.TrimSpace(req.Name)
+	req.Description = strings.TrimSpace(req.Description)
+
+	if s := common.StringLength(&req.Name); s > db.MaxPrideFlagTitleLength {
+		return server.APIError{
+			Code:    server.ErrBadRequest,
+			Details: fmt.Sprintf("name too long, must be %v characters or less, is %v", db.MaxPrideFlagTitleLength, s),
+		}
+	}
+	if s := common.StringLength(&req.Description); s > db.MaxPrideFlagDescLength {
+		return server.APIError{
+			Code:    server.ErrBadRequest,
+			Details: fmt.Sprintf("description too long, must be %v characters or less, is %v", db.MaxPrideFlagDescLength, s),
+		}
+	}
+
+	tx, err := s.DB.Begin(ctx)
+	if err != nil {
+		return errors.Wrap(err, "starting transaction")
+	}
+	defer tx.Rollback(ctx)
+
+	flag, err := s.DB.CreateFlag(ctx, tx, claims.UserID, req.Name, req.Description)
+	if err != nil {
+		log.Errorf("creating flag: %v", err)
+		return errors.Wrap(err, "creating flag")
+	}
+
+	webp, err := s.DB.ConvertFlag(req.Flag)
+	if err != nil {
+		if err == db.ErrInvalidDataURI {
+			return server.APIError{Code: server.ErrBadRequest, Message: "invalid data URI"}
+		}
+		return errors.Wrap(err, "converting flag")
+	}
+
+	hash, err := s.DB.WriteFlag(ctx, flag.ID, webp)
+	if err != nil {
+		return errors.Wrap(err, "writing flag")
+	}
+
+	flag, err = s.DB.EditFlag(ctx, tx, flag.ID, nil, nil, &hash)
+	if err != nil {
+		return errors.Wrap(err, "setting hash for flag")
+	}
+
+	err = tx.Commit(ctx)
+	if err != nil {
+		return errors.Wrap(err, "committing transaction")
+	}
+
+	render.JSON(w, r, flag)
+	return nil
+}
+
+func (s *Server) patchUserFlag(w http.ResponseWriter, r *http.Request) error {
+	return nil
+}
+
+func (s *Server) deleteUserFlag(w http.ResponseWriter, r *http.Request) error {
+	return nil
+}
diff --git a/backend/routes/user/routes.go b/backend/routes/user/routes.go
index 974fa55..dbd943d 100644
--- a/backend/routes/user/routes.go
+++ b/backend/routes/user/routes.go
@@ -29,6 +29,11 @@ func Mount(srv *server.Server, r chi.Router) {
 
 			r.Get("/@me/export/start", server.WrapHandler(s.startExport))
 			r.Get("/@me/export", server.WrapHandler(s.getExport))
+
+			r.Get("/@me/flags", server.WrapHandler(s.getUserFlags))
+			r.Post("/@me/flags", server.WrapHandler(s.postUserFlag))
+			r.Patch("/@me/flags", server.WrapHandler(s.patchUserFlag))
+			r.Delete("/@me/flags", server.WrapHandler(s.deleteUserFlag))
 		})
 	})
 }
diff --git a/backend/server/errors.go b/backend/server/errors.go
index 18bec03..deb901b 100644
--- a/backend/server/errors.go
+++ b/backend/server/errors.go
@@ -102,6 +102,7 @@ const (
 	// User-related error codes
 	ErrUserNotFound      = 2001
 	ErrMemberListPrivate = 2002
+	ErrFlagLimitReached  = 2003
 
 	// Member-related error codes
 	ErrMemberNotFound     = 3001
@@ -145,7 +146,8 @@ var errCodeMessages = map[int]string{
 	ErrInvalidCaptcha:      "Invalid or missing captcha response",
 
 	ErrUserNotFound:      "User not found",
-	ErrMemberListPrivate: "This user's member list is private.",
+	ErrMemberListPrivate: "This user's member list is private",
+	ErrFlagLimitReached:  "Maximum number of pride flags reached",
 
 	ErrMemberNotFound:     "Member not found",
 	ErrMemberLimitReached: "Member limit reached",
@@ -187,6 +189,7 @@ var errCodeStatuses = map[int]int{
 
 	ErrUserNotFound:      http.StatusNotFound,
 	ErrMemberListPrivate: http.StatusForbidden,
+	ErrFlagLimitReached:  http.StatusBadRequest,
 
 	ErrMemberNotFound:     http.StatusNotFound,
 	ErrMemberLimitReached: http.StatusBadRequest,
diff --git a/scripts/migrate/017_pride_flags.sql b/scripts/migrate/017_pride_flags.sql
new file mode 100644
index 0000000..9c9b622
--- /dev/null
+++ b/scripts/migrate/017_pride_flags.sql
@@ -0,0 +1,24 @@
+-- +migrate Up
+
+-- 2023-05-09: Add pride flags
+-- Hashes are a separate table so we can deduplicate flags.
+
+create table pride_flags (
+    id          text primary key,
+    user_id     text not null references users (id) on delete cascade,
+    hash        text not null,
+    name        text not null,
+    description text
+);
+
+create table user_flags (
+    id          bigint generated by default as identity primary key,
+    user_id     text not null references users (id) on delete cascade,
+    flag_id     text not null references pride_flags (id) on delete cascade
+);
+
+create table member_flags (
+    id          bigint generated by default as identity primary key,
+    member_id   text not null references members (id) on delete cascade,
+    flag_id     text not null references pride_flags (id) on delete cascade
+);

From 1b78462f50f663e05d9b0c2bb7a5c450ac9eae8f Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Thu, 25 May 2023 13:40:15 +0200
Subject: [PATCH 02/12] feat: add flags to PATCH /users/@me

---
 backend/db/db.go                       |  5 ++
 backend/db/flags.go                    | 74 +++++++++++++++++++++++--
 backend/db/member.go                   |  4 +-
 backend/db/user.go                     |  4 +-
 backend/routes/member/create_member.go |  2 +-
 backend/routes/member/get_member.go    | 18 +++++--
 backend/routes/member/patch_member.go  |  2 +-
 backend/routes/user/get_user.go        | 75 +++++++++++---------------
 backend/routes/user/patch_user.go      | 27 +++++++++-
 9 files changed, 153 insertions(+), 58 deletions(-)

diff --git a/backend/db/db.go b/backend/db/db.go
index 620e498..75ededf 100644
--- a/backend/db/db.go
+++ b/backend/db/db.go
@@ -22,6 +22,11 @@ var sq = squirrel.StatementBuilder.PlaceholderFormat(squirrel.Dollar)
 
 const ErrNothingToUpdate = errors.Sentinel("nothing to update")
 
+const (
+	uniqueViolation     = "23505"
+	foreignKeyViolation = "23503"
+)
+
 type Execer interface {
 	Exec(ctx context.Context, sql string, arguments ...interface{}) (commandTag pgconn.CommandTag, err error)
 }
diff --git a/backend/db/flags.go b/backend/db/flags.go
index cc2195a..15e11fb 100644
--- a/backend/db/flags.go
+++ b/backend/db/flags.go
@@ -9,10 +9,12 @@ import (
 	"io"
 	"strings"
 
+	"codeberg.org/u1f320/pronouns.cc/backend/log"
 	"emperror.dev/errors"
 	"github.com/davidbyttow/govips/v2/vips"
 	"github.com/georgysavva/scany/v2/pgxscan"
 	"github.com/jackc/pgx/v5"
+	"github.com/jackc/pgx/v5/pgconn"
 	"github.com/minio/minio-go/v7"
 	"github.com/rs/xid"
 )
@@ -51,6 +53,10 @@ const (
 	MaxPrideFlagDescLength  = 200
 )
 
+const (
+	ErrInvalidFlagID = errors.Sentinel("invalid flag ID")
+)
+
 func (db *DB) AccountFlags(ctx context.Context, userID xid.ID) (fs []PrideFlag, err error) {
 	sql, args, err := sq.Select("*").From("pride_flags").Where("user_id = ?", userID).OrderBy("id").ToSql()
 	if err != nil {
@@ -67,7 +73,7 @@ func (db *DB) AccountFlags(ctx context.Context, userID xid.ID) (fs []PrideFlag,
 func (db *DB) UserFlags(ctx context.Context, userID xid.ID) (fs []UserFlag, err error) {
 	sql, args, err := sq.Select("u.id", "u.flag_id", "f.user_id", "f.hash", "f.name", "f.description").
 		From("user_flags AS u").
-		Where("u.user_id = $1").
+		Where("u.user_id = $1", userID).
 		Join("pride_flags AS f ON u.flag_id = f.id").
 		OrderBy("u.id ASC").
 		ToSql()
@@ -82,10 +88,10 @@ func (db *DB) UserFlags(ctx context.Context, userID xid.ID) (fs []UserFlag, err
 	return NotNull(fs), nil
 }
 
-func (db *DB) MemberFlags(ctx context.Context, userID xid.ID) (fs []MemberFlag, err error) {
+func (db *DB) MemberFlags(ctx context.Context, memberID xid.ID) (fs []MemberFlag, err error) {
 	sql, args, err := sq.Select("m.id", "m.flag_id", "m.member_id", "f.hash", "f.name", "f.description").
 		From("member_flags AS m").
-		Where("m.member_id = $1").
+		Where("m.member_id = $1", memberID).
 		Join("pride_flags AS f ON m.flag_id = f.id").
 		OrderBy("m.id ASC").
 		ToSql()
@@ -100,6 +106,68 @@ func (db *DB) MemberFlags(ctx context.Context, userID xid.ID) (fs []MemberFlag,
 	return NotNull(fs), nil
 }
 
+func (db *DB) SetUserFlags(ctx context.Context, tx pgx.Tx, userID xid.ID, flags []xid.ID) (err error) {
+	sql, args, err := sq.Delete("user_flags").Where("user_id = ?", userID).ToSql()
+	if err != nil {
+		return errors.Wrap(err, "building sql")
+	}
+
+	_, err = tx.Exec(ctx, sql, args...)
+	if err != nil {
+		return errors.Wrap(err, "deleting existing flags")
+	}
+
+	n, err := tx.CopyFrom(ctx, pgx.Identifier{"user_flags"}, []string{"user_id", "flag_id"},
+		pgx.CopyFromSlice(len(flags), func(i int) ([]any, error) {
+			return []any{userID, flags[i]}, nil
+		}))
+	if err != nil {
+		pge := &pgconn.PgError{}
+		if errors.As(err, &pge) {
+			if pge.Code == foreignKeyViolation {
+				return ErrInvalidFlagID
+			}
+		}
+
+		return errors.Wrap(err, "copying new flags")
+	}
+	if n > 0 {
+		log.Debugf("set %v flags for user %v", n, userID)
+	}
+	return nil
+}
+
+func (db *DB) SetMemberFlags(ctx context.Context, tx pgx.Tx, memberID xid.ID, flags []xid.ID) (err error) {
+	sql, args, err := sq.Delete("member_flags").Where("member_id = ?", memberID).ToSql()
+	if err != nil {
+		return errors.Wrap(err, "building sql")
+	}
+
+	_, err = tx.Exec(ctx, sql, args...)
+	if err != nil {
+		return errors.Wrap(err, "deleting existing flags")
+	}
+
+	n, err := tx.CopyFrom(ctx, pgx.Identifier{"member_flags"}, []string{"member_id", "flag_id"},
+		pgx.CopyFromSlice(len(flags), func(i int) ([]any, error) {
+			return []any{memberID, flags[i]}, nil
+		}))
+	if err != nil {
+		pge := &pgconn.PgError{}
+		if errors.As(err, &pge) {
+			if pge.Code == foreignKeyViolation {
+				return ErrInvalidFlagID
+			}
+		}
+
+		return errors.Wrap(err, "copying new flags")
+	}
+	if n > 0 {
+		log.Debugf("set %v flags for member %v", n, memberID)
+	}
+	return nil
+}
+
 func (db *DB) CreateFlag(ctx context.Context, tx pgx.Tx, userID xid.ID, name, desc string) (f PrideFlag, err error) {
 	description := &desc
 	if desc == "" {
diff --git a/backend/db/member.go b/backend/db/member.go
index 2cb377a..43682c5 100644
--- a/backend/db/member.go
+++ b/backend/db/member.go
@@ -116,7 +116,7 @@ func (db *DB) CreateMember(
 		pge := &pgconn.PgError{}
 		if errors.As(err, &pge) {
 			// unique constraint violation
-			if pge.Code == "23505" {
+			if pge.Code == uniqueViolation {
 				return m, ErrMemberNameInUse
 			}
 		}
@@ -223,7 +223,7 @@ func (db *DB) UpdateMember(
 	if err != nil {
 		pge := &pgconn.PgError{}
 		if errors.As(err, &pge) {
-			if pge.Code == "23505" {
+			if pge.Code == uniqueViolation {
 				return m, ErrMemberNameInUse
 			}
 		}
diff --git a/backend/db/user.go b/backend/db/user.go
index 63b8173..0370088 100644
--- a/backend/db/user.go
+++ b/backend/db/user.go
@@ -171,7 +171,7 @@ func (db *DB) CreateUser(ctx context.Context, tx pgx.Tx, username string) (u Use
 		pge := &pgconn.PgError{}
 		if errors.As(err, &pge) {
 			// unique constraint violation
-			if pge.Code == "23505" {
+			if pge.Code == uniqueViolation {
 				return u, ErrUsernameTaken
 			}
 		}
@@ -494,7 +494,7 @@ func (db *DB) UpdateUsername(ctx context.Context, tx pgx.Tx, id xid.ID, newName
 		pge := &pgconn.PgError{}
 		if errors.As(err, &pge) {
 			// unique constraint violation
-			if pge.Code == "23505" {
+			if pge.Code == uniqueViolation {
 				return ErrUsernameTaken
 			}
 		}
diff --git a/backend/routes/member/create_member.go b/backend/routes/member/create_member.go
index 1156674..b2d4198 100644
--- a/backend/routes/member/create_member.go
+++ b/backend/routes/member/create_member.go
@@ -188,7 +188,7 @@ func (s *Server) createMember(w http.ResponseWriter, r *http.Request) (err error
 		return errors.Wrap(err, "committing transaction")
 	}
 
-	render.JSON(w, r, dbMemberToMember(u, m, cmr.Fields, true))
+	render.JSON(w, r, dbMemberToMember(u, m, cmr.Fields, nil, true))
 	return nil
 }
 
diff --git a/backend/routes/member/get_member.go b/backend/routes/member/get_member.go
index c109b7f..d92aa63 100644
--- a/backend/routes/member/get_member.go
+++ b/backend/routes/member/get_member.go
@@ -23,13 +23,14 @@ type GetMemberResponse struct {
 	Names    []db.FieldEntry   `json:"names"`
 	Pronouns []db.PronounEntry `json:"pronouns"`
 	Fields   []db.Field        `json:"fields"`
+	Flags    []db.MemberFlag   `json:"flags"`
 
 	User PartialUser `json:"user"`
 
 	Unlisted *bool `json:"unlisted,omitempty"`
 }
 
-func dbMemberToMember(u db.User, m db.Member, fields []db.Field, isOwnMember bool) GetMemberResponse {
+func dbMemberToMember(u db.User, m db.Member, fields []db.Field, flags []db.MemberFlag, isOwnMember bool) GetMemberResponse {
 	r := GetMemberResponse{
 		ID:          m.ID,
 		Name:        m.Name,
@@ -41,6 +42,7 @@ func dbMemberToMember(u db.User, m db.Member, fields []db.Field, isOwnMember boo
 		Names:    db.NotNull(m.Names),
 		Pronouns: db.NotNull(m.Pronouns),
 		Fields:   db.NotNull(fields),
+		Flags:    flags,
 
 		User: PartialUser{
 			ID:                u.ID,
@@ -102,7 +104,12 @@ func (s *Server) getMember(w http.ResponseWriter, r *http.Request) error {
 		return err
 	}
 
-	render.JSON(w, r, dbMemberToMember(u, m, fields, isOwnMember))
+	flags, err := s.DB.MemberFlags(ctx, m.ID)
+	if err != nil {
+		return err
+	}
+
+	render.JSON(w, r, dbMemberToMember(u, m, fields, flags, isOwnMember))
 	return nil
 }
 
@@ -137,7 +144,12 @@ func (s *Server) getUserMember(w http.ResponseWriter, r *http.Request) error {
 		return err
 	}
 
-	render.JSON(w, r, dbMemberToMember(u, m, fields, isOwnMember))
+	flags, err := s.DB.MemberFlags(ctx, m.ID)
+	if err != nil {
+		return err
+	}
+
+	render.JSON(w, r, dbMemberToMember(u, m, fields, flags, isOwnMember))
 	return nil
 }
 
diff --git a/backend/routes/member/patch_member.go b/backend/routes/member/patch_member.go
index a6d0881..8e1d7af 100644
--- a/backend/routes/member/patch_member.go
+++ b/backend/routes/member/patch_member.go
@@ -284,6 +284,6 @@ func (s *Server) patchMember(w http.ResponseWriter, r *http.Request) error {
 	}
 
 	// echo the updated member back on success
-	render.JSON(w, r, dbMemberToMember(u, m, fields, true))
+	render.JSON(w, r, dbMemberToMember(u, m, fields, nil, true))
 	return nil
 }
diff --git a/backend/routes/user/get_user.go b/backend/routes/user/get_user.go
index 2466e2e..c04f48d 100644
--- a/backend/routes/user/get_user.go
+++ b/backend/routes/user/get_user.go
@@ -25,6 +25,7 @@ type GetUserResponse struct {
 	Members           []PartialMember      `json:"members"`
 	Fields            []db.Field           `json:"fields"`
 	CustomPreferences db.CustomPreferences `json:"custom_preferences"`
+	Flags             []db.UserFlag        `json:"flags"`
 }
 
 type GetMeResponse struct {
@@ -61,7 +62,7 @@ type PartialMember struct {
 	Pronouns    []db.PronounEntry `json:"pronouns"`
 }
 
-func dbUserToResponse(u db.User, fields []db.Field, members []db.Member) GetUserResponse {
+func dbUserToResponse(u db.User, fields []db.Field, members []db.Member, flags []db.UserFlag) GetUserResponse {
 	resp := GetUserResponse{
 		ID:                u.ID,
 		Username:          u.Username,
@@ -74,6 +75,7 @@ func dbUserToResponse(u db.User, fields []db.Field, members []db.Member) GetUser
 		Pronouns:          db.NotNull(u.Pronouns),
 		Fields:            db.NotNull(fields),
 		CustomPreferences: u.CustomPreferences,
+		Flags:             flags,
 	}
 
 	resp.Members = make([]PartialMember, len(members))
@@ -93,56 +95,29 @@ func dbUserToResponse(u db.User, fields []db.Field, members []db.Member) GetUser
 	return resp
 }
 
-func (s *Server) getUser(w http.ResponseWriter, r *http.Request) error {
+func (s *Server) getUser(w http.ResponseWriter, r *http.Request) (err error) {
 	ctx := r.Context()
 
 	userRef := chi.URLParamFromCtx(ctx, "userRef")
 
+	var u db.User
 	if id, err := xid.FromString(userRef); err == nil {
-		u, err := s.DB.User(ctx, id)
-		if err == nil {
-			if u.DeletedAt != nil {
-				return server.APIError{Code: server.ErrUserNotFound}
-			}
-
-			isSelf := false
-			if claims, ok := server.ClaimsFromContext(ctx); ok && claims.UserID == u.ID {
-				isSelf = true
-			}
-
-			fields, err := s.DB.UserFields(ctx, u.ID)
-			if err != nil {
-				log.Errorf("Error getting user fields: %v", err)
-				return err
-			}
-
-			var members []db.Member
-			if !u.ListPrivate || isSelf {
-				members, err = s.DB.UserMembers(ctx, u.ID, isSelf)
-				if err != nil {
-					log.Errorf("Error getting user members: %v", err)
-					return err
-				}
-			}
-
-			render.JSON(w, r, dbUserToResponse(u, fields, members))
-			return nil
-		} else if err != db.ErrUserNotFound {
-			log.Errorf("Error getting user by ID: %v", err)
-			return err
+		u, err = s.DB.User(ctx, id)
+		if err != nil {
+			log.Errorf("getting user by ID: %v", err)
 		}
-		// otherwise, we fall back to checking usernames
 	}
 
-	u, err := s.DB.Username(ctx, userRef)
-	if err == db.ErrUserNotFound {
-		return server.APIError{
-			Code: server.ErrUserNotFound,
+	if u.ID.IsNil() {
+		u, err = s.DB.Username(ctx, userRef)
+		if err == db.ErrUserNotFound {
+			return server.APIError{
+				Code: server.ErrUserNotFound,
+			}
+		} else if err != nil {
+			log.Errorf("Error getting user by username: %v", err)
+			return err
 		}
-
-	} else if err != nil {
-		log.Errorf("Error getting user by username: %v", err)
-		return err
 	}
 
 	if u.DeletedAt != nil {
@@ -160,6 +135,12 @@ func (s *Server) getUser(w http.ResponseWriter, r *http.Request) error {
 		return err
 	}
 
+	flags, err := s.DB.UserFlags(ctx, u.ID)
+	if err != nil {
+		log.Errorf("getting user flags: %v", err)
+		return err
+	}
+
 	var members []db.Member
 	if !u.ListPrivate || isSelf {
 		members, err = s.DB.UserMembers(ctx, u.ID, isSelf)
@@ -169,7 +150,7 @@ func (s *Server) getUser(w http.ResponseWriter, r *http.Request) error {
 		}
 	}
 
-	render.JSON(w, r, dbUserToResponse(u, fields, members))
+	render.JSON(w, r, dbUserToResponse(u, fields, members, flags))
 	return nil
 }
 
@@ -195,8 +176,14 @@ func (s *Server) getMeUser(w http.ResponseWriter, r *http.Request) error {
 		return err
 	}
 
+	flags, err := s.DB.UserFlags(ctx, u.ID)
+	if err != nil {
+		log.Errorf("getting user flags: %v", err)
+		return err
+	}
+
 	render.JSON(w, r, GetMeResponse{
-		GetUserResponse:   dbUserToResponse(u, fields, members),
+		GetUserResponse:   dbUserToResponse(u, fields, members, flags),
 		CreatedAt:         u.ID.Time(),
 		MaxInvites:        u.MaxInvites,
 		IsAdmin:           u.IsAdmin,
diff --git a/backend/routes/user/patch_user.go b/backend/routes/user/patch_user.go
index ab07a58..3b015bb 100644
--- a/backend/routes/user/patch_user.go
+++ b/backend/routes/user/patch_user.go
@@ -11,6 +11,7 @@ import (
 	"emperror.dev/errors"
 	"github.com/go-chi/render"
 	"github.com/google/uuid"
+	"github.com/rs/xid"
 )
 
 type PatchUserRequest struct {
@@ -25,6 +26,7 @@ type PatchUserRequest struct {
 	Avatar            *string               `json:"avatar"`
 	ListPrivate       *bool                 `json:"list_private"`
 	CustomPreferences *db.CustomPreferences `json:"custom_preferences"`
+	Flags             *[]xid.ID             `json:"flags"`
 }
 
 // patchUser parses a PatchUserRequest and updates the user with the given ID.
@@ -60,7 +62,8 @@ func (s *Server) patchUser(w http.ResponseWriter, r *http.Request) error {
 		req.Names == nil &&
 		req.Pronouns == nil &&
 		req.Avatar == nil &&
-		req.CustomPreferences == nil {
+		req.CustomPreferences == nil &&
+		req.Flags == nil {
 		return server.APIError{
 			Code:    server.ErrBadRequest,
 			Details: "Data must not be empty",
@@ -252,6 +255,19 @@ func (s *Server) patchUser(w http.ResponseWriter, r *http.Request) error {
 		}
 	}
 
+	// update flags
+	if req.Flags != nil {
+		err = s.DB.SetUserFlags(ctx, tx, claims.UserID, *req.Flags)
+		if err != nil {
+			if err == db.ErrInvalidFlagID {
+				return server.APIError{Code: server.ErrBadRequest, Details: "One or more flag IDs are unknown"}
+			}
+
+			log.Errorf("updating flags for user %v: %v", claims.UserID, err)
+			return err
+		}
+	}
+
 	// update last active time
 	err = s.DB.UpdateActiveTime(ctx, tx, claims.UserID)
 	if err != nil {
@@ -274,9 +290,16 @@ func (s *Server) patchUser(w http.ResponseWriter, r *http.Request) error {
 		}
 	}
 
+	// get flags to return (we need to return full flag objects, not the array of IDs in the request body)
+	flags, err := s.DB.UserFlags(ctx, u.ID)
+	if err != nil {
+		log.Errorf("getting user flags: %v", err)
+		return err
+	}
+
 	// echo the updated user back on success
 	render.JSON(w, r, GetMeResponse{
-		GetUserResponse:   dbUserToResponse(u, fields, nil),
+		GetUserResponse:   dbUserToResponse(u, fields, nil, flags),
 		MaxInvites:        u.MaxInvites,
 		IsAdmin:           u.IsAdmin,
 		ListPrivate:       u.ListPrivate,

From ea2ae94742451fac0e3a7d39a3f18f873b30aaac Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Thu, 25 May 2023 15:21:50 +0200
Subject: [PATCH 03/12] feat: add flags to PATCH /members/{id}

---
 backend/routes/member/patch_member.go | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/backend/routes/member/patch_member.go b/backend/routes/member/patch_member.go
index 8e1d7af..d4545eb 100644
--- a/backend/routes/member/patch_member.go
+++ b/backend/routes/member/patch_member.go
@@ -25,6 +25,7 @@ type PatchMemberRequest struct {
 	Fields      *[]db.Field        `json:"fields"`
 	Avatar      *string            `json:"avatar"`
 	Unlisted    *bool              `json:"unlisted"`
+	Flags       *[]xid.ID          `json:"flags"`
 }
 
 func (s *Server) patchMember(w http.ResponseWriter, r *http.Request) error {
@@ -74,7 +75,8 @@ func (s *Server) patchMember(w http.ResponseWriter, r *http.Request) error {
 		req.Fields == nil &&
 		req.Names == nil &&
 		req.Pronouns == nil &&
-		req.Avatar == nil {
+		req.Avatar == nil &&
+		req.Flags == nil {
 		return server.APIError{
 			Code:    server.ErrBadRequest,
 			Details: "Data must not be empty",
@@ -270,6 +272,19 @@ func (s *Server) patchMember(w http.ResponseWriter, r *http.Request) error {
 		}
 	}
 
+	// update flags
+	if req.Flags != nil {
+		err = s.DB.SetMemberFlags(ctx, tx, m.ID, *req.Flags)
+		if err != nil {
+			if err == db.ErrInvalidFlagID {
+				return server.APIError{Code: server.ErrBadRequest, Details: "One or more flag IDs are unknown"}
+			}
+
+			log.Errorf("updating flags for member %v: %v", m.ID, err)
+			return err
+		}
+	}
+
 	// update last active time
 	err = s.DB.UpdateActiveTime(ctx, tx, claims.UserID)
 	if err != nil {
@@ -283,7 +298,14 @@ func (s *Server) patchMember(w http.ResponseWriter, r *http.Request) error {
 		return err
 	}
 
+	// get flags to return (we need to return full flag objects, not the array of IDs in the request body)
+	flags, err := s.DB.MemberFlags(ctx, m.ID)
+	if err != nil {
+		log.Errorf("getting user flags: %v", err)
+		return err
+	}
+
 	// echo the updated member back on success
-	render.JSON(w, r, dbMemberToMember(u, m, fields, nil, true))
+	render.JSON(w, r, dbMemberToMember(u, m, fields, flags, true))
 	return nil
 }

From 1360a524880e0b70d6ca35cb93f16b664d97ded7 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Fri, 26 May 2023 15:22:27 +0200
Subject: [PATCH 04/12] add PATCH /users/@me/flags/{id}

---
 backend/db/flags.go           |  2 +-
 backend/routes/user/flags.go  | 86 +++++++++++++++++++++++++++++++++++
 backend/routes/user/routes.go |  2 +-
 3 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/backend/db/flags.go b/backend/db/flags.go
index 15e11fb..1393a5a 100644
--- a/backend/db/flags.go
+++ b/backend/db/flags.go
@@ -50,7 +50,7 @@ type MemberFlag struct {
 const (
 	MaxPrideFlags           = 100
 	MaxPrideFlagTitleLength = 100
-	MaxPrideFlagDescLength  = 200
+	MaxPrideFlagDescLength  = 500
 )
 
 const (
diff --git a/backend/routes/user/flags.go b/backend/routes/user/flags.go
index 2402137..2ad6ebd 100644
--- a/backend/routes/user/flags.go
+++ b/backend/routes/user/flags.go
@@ -10,7 +10,9 @@ import (
 	"codeberg.org/u1f320/pronouns.cc/backend/log"
 	"codeberg.org/u1f320/pronouns.cc/backend/server"
 	"emperror.dev/errors"
+	"github.com/go-chi/chi/v5"
 	"github.com/go-chi/render"
+	"github.com/rs/xid"
 )
 
 func (s *Server) getUserFlags(w http.ResponseWriter, r *http.Request) error {
@@ -112,7 +114,91 @@ func (s *Server) postUserFlag(w http.ResponseWriter, r *http.Request) error {
 	return nil
 }
 
+type patchUserFlagRequest struct {
+	Name        *string `json:"name"`
+	Description *string `json:"description"`
+}
+
 func (s *Server) patchUserFlag(w http.ResponseWriter, r *http.Request) error {
+	ctx := r.Context()
+	claims, _ := server.ClaimsFromContext(ctx)
+
+	if !claims.TokenWrite {
+		return server.APIError{Code: server.ErrMissingPermissions, Details: "This token is read-only"}
+	}
+
+	flagID, err := xid.FromString(chi.URLParam(r, "flagID"))
+	if err != nil {
+		return server.APIError{Code: server.ErrNotFound, Details: "Invalid flag ID"}
+	}
+
+	flags, err := s.DB.AccountFlags(ctx, claims.UserID)
+	if err != nil {
+		return errors.Wrap(err, "getting current user flags")
+	}
+	if len(flags) >= db.MaxPrideFlags {
+		return server.APIError{
+			Code: server.ErrFlagLimitReached,
+		}
+	}
+	var found bool
+	for _, flag := range flags {
+		if flag.ID == flagID {
+			found = true
+			break
+		}
+	}
+	if !found {
+		return server.APIError{Code: server.ErrNotFound, Details: "No flag with that ID found"}
+	}
+
+	var req patchUserFlagRequest
+	err = render.Decode(r, &req)
+	if err != nil {
+		return server.APIError{Code: server.ErrBadRequest}
+	}
+
+	if req.Name != nil {
+		*req.Name = strings.TrimSpace(*req.Name)
+	}
+	if req.Description != nil {
+		*req.Description = strings.TrimSpace(*req.Description)
+	}
+
+	if req.Name == nil && req.Description == nil {
+		return server.APIError{Code: server.ErrBadRequest, Details: "Request cannot be empty"}
+	}
+
+	if s := common.StringLength(req.Name); s > db.MaxPrideFlagTitleLength {
+		return server.APIError{
+			Code:    server.ErrBadRequest,
+			Details: fmt.Sprintf("name too long, must be %v characters or less, is %v", db.MaxPrideFlagTitleLength, s),
+		}
+	}
+	if s := common.StringLength(req.Description); s > db.MaxPrideFlagDescLength {
+		return server.APIError{
+			Code:    server.ErrBadRequest,
+			Details: fmt.Sprintf("description too long, must be %v characters or less, is %v", db.MaxPrideFlagDescLength, s),
+		}
+	}
+
+	tx, err := s.DB.Begin(ctx)
+	if err != nil {
+		return errors.Wrap(err, "beginning transaction")
+	}
+	defer tx.Rollback(ctx)
+
+	flag, err := s.DB.EditFlag(ctx, tx, flagID, req.Name, req.Description, nil)
+	if err != nil {
+		return errors.Wrap(err, "updating flag")
+	}
+
+	err = tx.Commit(ctx)
+	if err != nil {
+		return errors.Wrap(err, "committing transaction")
+	}
+
+	render.JSON(w, r, flag)
 	return nil
 }
 
diff --git a/backend/routes/user/routes.go b/backend/routes/user/routes.go
index dbd943d..c5998f1 100644
--- a/backend/routes/user/routes.go
+++ b/backend/routes/user/routes.go
@@ -32,7 +32,7 @@ func Mount(srv *server.Server, r chi.Router) {
 
 			r.Get("/@me/flags", server.WrapHandler(s.getUserFlags))
 			r.Post("/@me/flags", server.WrapHandler(s.postUserFlag))
-			r.Patch("/@me/flags", server.WrapHandler(s.patchUserFlag))
+			r.Patch("/@me/flags/{flagID}", server.WrapHandler(s.patchUserFlag))
 			r.Delete("/@me/flags", server.WrapHandler(s.deleteUserFlag))
 		})
 	})

From a4698e179a4696f06c4e92dc018dc36ba1ba20bb Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Sun, 28 May 2023 16:19:42 +0200
Subject: [PATCH 05/12] feat: add DELETE /users/@me/flags/{id}

---
 backend/db/flags.go           | 30 +++++++++++++++++++++++++++++-
 backend/routes/user/flags.go  | 30 ++++++++++++++++++++++++++++++
 backend/routes/user/routes.go |  2 +-
 3 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/backend/db/flags.go b/backend/db/flags.go
index 1393a5a..6f3458b 100644
--- a/backend/db/flags.go
+++ b/backend/db/flags.go
@@ -55,6 +55,7 @@ const (
 
 const (
 	ErrInvalidFlagID = errors.Sentinel("invalid flag ID")
+	ErrFlagNotFound  = errors.Sentinel("flag not found")
 )
 
 func (db *DB) AccountFlags(ctx context.Context, userID xid.ID) (fs []PrideFlag, err error) {
@@ -70,6 +71,23 @@ func (db *DB) AccountFlags(ctx context.Context, userID xid.ID) (fs []PrideFlag,
 	return NotNull(fs), nil
 }
 
+func (db *DB) UserFlag(ctx context.Context, flagID xid.ID) (f PrideFlag, err error) {
+	sql, args, err := sq.Select("*").From("pride_flags").Where("id = ?", flagID).ToSql()
+	if err != nil {
+		return f, errors.Wrap(err, "building query")
+	}
+
+	err = pgxscan.Get(ctx, db, &f, sql, args...)
+	if err != nil {
+		if errors.Cause(err) == pgx.ErrNoRows {
+			return f, ErrFlagNotFound
+		}
+
+		return f, errors.Wrap(err, "executing query")
+	}
+	return f, nil
+}
+
 func (db *DB) UserFlags(ctx context.Context, userID xid.ID) (fs []UserFlag, err error) {
 	sql, args, err := sq.Select("u.id", "u.flag_id", "f.user_id", "f.hash", "f.name", "f.description").
 		From("user_flags AS u").
@@ -241,7 +259,17 @@ func (db *DB) WriteFlag(ctx context.Context, flagID xid.ID, flag *bytes.Buffer)
 }
 
 func (db *DB) DeleteFlag(ctx context.Context, flagID xid.ID, hash string) error {
-	err := db.minio.RemoveObject(ctx, db.minioBucket, "/flags/"+flagID.String()+"/"+hash+".webp", minio.RemoveObjectOptions{})
+	sql, args, err := sq.Delete("pride_flags").Where("id = ?", flagID).ToSql()
+	if err != nil {
+		return errors.Wrap(err, "building sql")
+	}
+
+	_, err = db.Exec(ctx, sql, args...)
+	if err != nil {
+		return errors.Wrap(err, "executing query")
+	}
+
+	err = db.minio.RemoveObject(ctx, db.minioBucket, "/flags/"+flagID.String()+"/"+hash+".webp", minio.RemoveObjectOptions{})
 	if err != nil {
 		return errors.Wrap(err, "deleting flag")
 	}
diff --git a/backend/routes/user/flags.go b/backend/routes/user/flags.go
index 2ad6ebd..77654f3 100644
--- a/backend/routes/user/flags.go
+++ b/backend/routes/user/flags.go
@@ -203,5 +203,35 @@ func (s *Server) patchUserFlag(w http.ResponseWriter, r *http.Request) error {
 }
 
 func (s *Server) deleteUserFlag(w http.ResponseWriter, r *http.Request) error {
+	ctx := r.Context()
+	claims, _ := server.ClaimsFromContext(ctx)
+
+	if !claims.TokenWrite {
+		return server.APIError{Code: server.ErrMissingPermissions, Details: "This token is read-only"}
+	}
+
+	flagID, err := xid.FromString(chi.URLParam(r, "flagID"))
+	if err != nil {
+		return server.APIError{Code: server.ErrNotFound, Details: "Invalid flag ID"}
+	}
+
+	flag, err := s.DB.UserFlag(ctx, flagID)
+	if err != nil {
+		if err == db.ErrFlagNotFound {
+			return server.APIError{Code: server.ErrNotFound, Details: "Flag not found"}
+		}
+
+		return errors.Wrap(err, "getting flag object")
+	}
+	if flag.UserID != claims.UserID {
+		return server.APIError{Code: server.ErrNotFound, Details: "Flag not found"}
+	}
+
+	err = s.DB.DeleteFlag(ctx, flag.ID, flag.Hash)
+	if err != nil {
+		return errors.Wrap(err, "deleting flag")
+	}
+
+	render.NoContent(w, r)
 	return nil
 }
diff --git a/backend/routes/user/routes.go b/backend/routes/user/routes.go
index c5998f1..fd6e9a2 100644
--- a/backend/routes/user/routes.go
+++ b/backend/routes/user/routes.go
@@ -33,7 +33,7 @@ func Mount(srv *server.Server, r chi.Router) {
 			r.Get("/@me/flags", server.WrapHandler(s.getUserFlags))
 			r.Post("/@me/flags", server.WrapHandler(s.postUserFlag))
 			r.Patch("/@me/flags/{flagID}", server.WrapHandler(s.patchUserFlag))
-			r.Delete("/@me/flags", server.WrapHandler(s.deleteUserFlag))
+			r.Delete("/@me/flags/{flagID}", server.WrapHandler(s.deleteUserFlag))
 		})
 	})
 }

From 8b03521382b16eb247c4805eaad25beb61e5526a Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Mon, 29 May 2023 00:18:02 +0200
Subject: [PATCH 06/12] feat: add list/upload flag UI

---
 backend/db/avatars.go                         |   1 +
 backend/db/flags.go                           |   8 +-
 backend/routes/user/flags.go                  |   2 +
 frontend/src/lib/api/entities.ts              |   9 +
 frontend/src/routes/settings/+layout.svelte   |  19 +-
 frontend/src/routes/settings/+page.svelte     |   5 +-
 .../src/routes/settings/flags/+page.svelte    | 164 ++++++++++++++++++
 frontend/src/routes/settings/flags/+page.ts   |   7 +
 .../src/routes/settings/flags/Flag.svelte     |  20 +++
 .../routes/settings/flags/unknown_flag.png    | Bin 0 -> 4840 bytes
 10 files changed, 223 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/routes/settings/flags/+page.svelte
 create mode 100644 frontend/src/routes/settings/flags/+page.ts
 create mode 100644 frontend/src/routes/settings/flags/Flag.svelte
 create mode 100644 frontend/src/routes/settings/flags/unknown_flag.png

diff --git a/backend/db/avatars.go b/backend/db/avatars.go
index f35ef26..e59c682 100644
--- a/backend/db/avatars.go
+++ b/backend/db/avatars.go
@@ -19,6 +19,7 @@ import (
 
 const ErrInvalidDataURI = errors.Sentinel("invalid data URI")
 const ErrInvalidContentType = errors.Sentinel("invalid avatar content type")
+const ErrFileTooLarge = errors.Sentinel("file to be converted exceeds maximum size")
 
 // ConvertAvatar parses an avatar from a data URI, converts it to WebP and JPEG, and returns the results.
 func (db *DB) ConvertAvatar(data string) (
diff --git a/backend/db/flags.go b/backend/db/flags.go
index 6f3458b..94e70ea 100644
--- a/backend/db/flags.go
+++ b/backend/db/flags.go
@@ -59,7 +59,7 @@ const (
 )
 
 func (db *DB) AccountFlags(ctx context.Context, userID xid.ID) (fs []PrideFlag, err error) {
-	sql, args, err := sq.Select("*").From("pride_flags").Where("user_id = ?", userID).OrderBy("id").ToSql()
+	sql, args, err := sq.Select("*").From("pride_flags").Where("user_id = ?", userID).OrderBy("lower(name)").ToSql()
 	if err != nil {
 		return nil, errors.Wrap(err, "building query")
 	}
@@ -285,6 +285,8 @@ func (db *DB) FlagObject(ctx context.Context, flagID xid.ID, hash string) (io.Re
 	return obj, nil
 }
 
+const MaxFlagInputSize = 512_000
+
 // ConvertFlag parses a flag from a data URI, converts it to WebP, and returns the result.
 func (db *DB) ConvertFlag(data string) (webpOut *bytes.Buffer, err error) {
 	defer vips.ShutdownThread()
@@ -300,6 +302,10 @@ func (db *DB) ConvertFlag(data string) (webpOut *bytes.Buffer, err error) {
 		return nil, errors.Wrap(err, "invalid base64 data")
 	}
 
+	if len(rawData) > MaxFlagInputSize {
+		return nil, ErrFileTooLarge
+	}
+
 	image, err := vips.LoadImageFromBuffer(rawData, nil)
 	if err != nil {
 		return nil, errors.Wrap(err, "decoding image")
diff --git a/backend/routes/user/flags.go b/backend/routes/user/flags.go
index 77654f3..60219b9 100644
--- a/backend/routes/user/flags.go
+++ b/backend/routes/user/flags.go
@@ -91,6 +91,8 @@ func (s *Server) postUserFlag(w http.ResponseWriter, r *http.Request) error {
 	if err != nil {
 		if err == db.ErrInvalidDataURI {
 			return server.APIError{Code: server.ErrBadRequest, Message: "invalid data URI"}
+		} else if err == db.ErrFileTooLarge {
+			return server.APIError{Code: server.ErrBadRequest, Message: "data URI exceeds 512 KB"}
 		}
 		return errors.Wrap(err, "converting flag")
 	}
diff --git a/frontend/src/lib/api/entities.ts b/frontend/src/lib/api/entities.ts
index acb2767..df2ad47 100644
--- a/frontend/src/lib/api/entities.ts
+++ b/frontend/src/lib/api/entities.ts
@@ -96,6 +96,13 @@ export interface MemberPartialUser {
   custom_preferences: CustomPreferences;
 }
 
+export interface PrideFlag {
+  id: string;
+  hash: string;
+  name: string;
+  description: string | null;
+}
+
 export interface Invite {
   code: string;
   created: string;
@@ -192,6 +199,8 @@ export const memberAvatars = (member: Member | PartialMember) => {
   ];
 };
 
+export const flagURL = ({ hash }: PrideFlag) => `${PUBLIC_MEDIA_URL}/flags/${hash}.webp`;
+
 export const defaultAvatars = [
   `${PUBLIC_BASE_URL}/default/512.webp`,
   `${PUBLIC_BASE_URL}/default/512.jpg`,
diff --git a/frontend/src/routes/settings/+layout.svelte b/frontend/src/routes/settings/+layout.svelte
index 785c43b..4e66453 100644
--- a/frontend/src/routes/settings/+layout.svelte
+++ b/frontend/src/routes/settings/+layout.svelte
@@ -42,20 +42,13 @@
 
 <div class="grid">
   <div class="row">
-    <div class="col-md-3 m-3">
+    <div class="col-md-3 p-3">
       <h1>Settings</h1>
 
       <ListGroup>
         <ListGroupItem tag="a" active={$page.url.pathname === "/settings"} href="/settings">
           Your profile
         </ListGroupItem>
-        <ListGroupItem
-          tag="a"
-          active={$page.url.pathname === "/settings/auth"}
-          href="/settings/auth"
-        >
-          Authentication
-        </ListGroupItem>
         {#if hasHiddenMembers}
           <ListGroupItem
             tag="a"
@@ -65,6 +58,14 @@
             Hidden members
           </ListGroupItem>
         {/if}
+        <ListGroupItem
+          tag="a"
+          active={$page.url.pathname === "/settings/flags"}
+          href="/settings/flags">Flags</ListGroupItem
+        >
+      </ListGroup>
+      <br />
+      <ListGroup>
         {#if data.invitesEnabled}
           <ListGroupItem
             tag="a"
@@ -101,7 +102,7 @@
         <ListGroupItem tag="button" on:click={toggle}>Log out</ListGroupItem>
       </ListGroup>
     </div>
-    <div class="col-md m-3">
+    <div class="col-md p-3">
       <slot />
     </div>
   </div>
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index 0b9e229..c28872e 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -155,8 +155,9 @@
       {/if}
     </div>
     <div class="col-lg-4">
-      <FallbackImage width={200} urls={userAvatars(data.user)} alt="Your avatar" />
-      <p>
+      <p class="text-center">
+        <FallbackImage width={200} urls={userAvatars(data.user)} alt="Your avatar" />
+        <br />
         To change your avatar, go to <a href="/edit/profile">edit profile</a>.
       </p>
     </div>
diff --git a/frontend/src/routes/settings/flags/+page.svelte b/frontend/src/routes/settings/flags/+page.svelte
new file mode 100644
index 0000000..01e1dfa
--- /dev/null
+++ b/frontend/src/routes/settings/flags/+page.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+  import type { APIError, PrideFlag } from "$lib/api/entities";
+  import { Button, Icon, Input, Modal, ModalBody, ModalFooter, ModalHeader } from "sveltestrap";
+  import type { PageData } from "./$types";
+  import Flag from "./Flag.svelte";
+  import prettyBytes from "pretty-bytes";
+  import { addToast } from "$lib/toast";
+  import { encode } from "base64-arraybuffer";
+  import unknownFlag from "./unknown_flag.png";
+  import { apiFetchClient } from "$lib/api/fetch";
+  import ErrorAlert from "$lib/components/ErrorAlert.svelte";
+
+  const MAX_FLAG_BYTES = 500_000;
+
+  export let data: PageData;
+
+  let search = "";
+  let error: APIError | null = null;
+
+  let filtered: PrideFlag[];
+  $: filtered = search
+    ? data.flags.filter((flag) =>
+        flag.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()),
+      )
+    : data.flags;
+
+  // NEW FLAG UPLOADING CODE
+  let modalOpen = false;
+  const toggleModal = () => (modalOpen = !modalOpen);
+  let canUpload: boolean;
+  $: canUpload = !!(newFlag && newName);
+
+  let newFlag: string | null;
+  let flagFiles: FileList | null;
+  $: getFlag(flagFiles).then((b64) => (newFlag = b64));
+
+  let newName = "";
+  let newDescription = "";
+
+  const getFlag = async (list: FileList | null) => {
+    if (!list || list.length === 0) return null;
+    if (list[0].size > MAX_FLAG_BYTES) {
+      addToast({
+        header: "Flag too large",
+        body: `This flag file is too large, please resize it (maximum is ${prettyBytes(
+          MAX_FLAG_BYTES,
+        )}, the file you tried to upload is ${prettyBytes(list[0].size)})`,
+      });
+      return null;
+    }
+
+    const buffer = await list[0].arrayBuffer();
+    const base64 = encode(buffer);
+
+    const uri = `data:${list[0].type};base64,${base64}`;
+
+    return uri;
+  };
+
+  const uploadFlag = async () => {
+    try {
+      const resp = await apiFetchClient<PrideFlag>("/users/@me/flags", "POST", {
+        flag: newFlag,
+        name: newName,
+        description: newDescription || null,
+      });
+
+      error = null;
+      data.flags.push(resp);
+      data.flags.sort((a, b) => a.name.localeCompare(b.name));
+      data.flags = [...data.flags];
+
+      // reset flag
+      newFlag = null;
+      newName = "";
+      newDescription = "";
+
+      addToast({ header: "Uploaded flag", body: "Successfully uploaded flag!" });
+      toggleModal();
+    } catch (e) {
+      error = e as APIError;
+    }
+  };
+</script>
+
+<h1>Pride flags ({data.flags.length})</h1>
+
+<p>
+  You can upload pride flags to use on your profiles here. Flags you upload here will <em>not</em> automatically
+  show up on your profile.
+</p>
+
+<div class="input-group">
+  <Input placeholder="Filter flags" bind:value={search} disabled={data.flags.length === 0} />
+  <Button color="success" on:click={toggleModal}>
+    <Icon name="upload" aria-hidden /> Upload flag
+  </Button>
+</div>
+
+<div class="p-2">
+  {#each filtered as flag}
+    <Flag {flag} />
+  {:else}
+    {#if data.flags.length === 0}
+      You haven't uploaded any flags yet, press the button above to do so.
+    {:else}
+      There are no flags matching your search <strong>{search}</strong>
+    {/if}
+  {/each}
+</div>
+
+<Modal isOpen={modalOpen} toggle={toggleModal}>
+  <ModalHeader toggle={toggleModal}>Upload flag</ModalHeader>
+  <ModalBody>
+    {#if error}
+      <ErrorAlert {error} />
+    {/if}
+    <div class="d-flex align-items-center">
+      <img src={newFlag || unknownFlag} alt="New flag" class="flag m-1" />
+      <input
+        class="form-control"
+        id="flag-file"
+        type="file"
+        bind:files={flagFiles}
+        accept="image/png, image/jpeg, image/gif, image/webp, image/svg+xml"
+      />
+    </div>
+    <p class="text-muted mt-2">
+      <Icon name="info-circle-fill" aria-hidden /> Only PNG, JPEG, GIF, and WebP images can be uploaded
+      as flags. The file cannot be larger than 512 kilobytes.
+    </p>
+    <p>
+      <label for="newName" class="form-label">Name</label>
+      <Input id="newName" bind:value={newName} />
+    </p>
+    <p class="text-muted">
+      <Icon name="info-circle-fill" aria-hidden /> This name will be shown beside the flag.
+    </p>
+    <p>
+      <label for="description" class="form-label">Description</label>
+      <textarea id="description" class="form-control" bind:value={newDescription} />
+    </p>
+    <p class="text-muted">
+      <Icon name="info-circle-fill" aria-hidden /> This text will be used as the alt text of the flag
+      image, and will also be shown on hover. Optional, but <strong>strongly recommended</strong> as
+      it improves accessibility.
+    </p>
+  </ModalBody>
+  <ModalFooter>
+    <Button disabled={!canUpload} color="success" on:click={() => uploadFlag()}>Upload flag</Button>
+  </ModalFooter>
+</Modal>
+
+<style>
+  .flag {
+    height: 2rem;
+    max-width: 200px;
+    border-radius: 3px;
+  }
+
+  textarea {
+    height: 100px;
+  }
+</style>
diff --git a/frontend/src/routes/settings/flags/+page.ts b/frontend/src/routes/settings/flags/+page.ts
new file mode 100644
index 0000000..daac959
--- /dev/null
+++ b/frontend/src/routes/settings/flags/+page.ts
@@ -0,0 +1,7 @@
+import { apiFetchClient } from "$lib/api/fetch";
+import type { PrideFlag } from "$lib/api/entities";
+
+export const load = async () => {
+  const data = await apiFetchClient<PrideFlag[]>("/users/@me/flags");
+  return { flags: data };
+};
diff --git a/frontend/src/routes/settings/flags/Flag.svelte b/frontend/src/routes/settings/flags/Flag.svelte
new file mode 100644
index 0000000..3ed78e3
--- /dev/null
+++ b/frontend/src/routes/settings/flags/Flag.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { flagURL, type PrideFlag } from "$lib/api/entities";
+  import { Button } from "sveltestrap";
+
+  export let flag: PrideFlag;
+</script>
+
+<Button outline class="m-1">
+  <img class="flag" src={flagURL(flag)} alt={flag.description ?? flag.name} />
+  {flag.name}
+</Button>
+
+<style>
+  .flag {
+    height: 2rem;
+    max-width: 200px;
+    border-radius: 3px;
+    margin-left: -5px;
+  }
+</style>
diff --git a/frontend/src/routes/settings/flags/unknown_flag.png b/frontend/src/routes/settings/flags/unknown_flag.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c73038c0653bc32bc825a383933d0ad00e89f7b
GIT binary patch
literal 4840
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

literal 0
HcmV?d00001


From 67d275f15bf08ab84bbeb8ad74b24d98a53b862c Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Mon, 29 May 2023 01:27:17 +0200
Subject: [PATCH 07/12] feat: add editing and deleting flags

---
 .../src/routes/settings/flags/+page.svelte    | 34 ++++++---
 .../src/routes/settings/flags/Flag.svelte     | 70 ++++++++++++++++++-
 2 files changed, 92 insertions(+), 12 deletions(-)

diff --git a/frontend/src/routes/settings/flags/+page.svelte b/frontend/src/routes/settings/flags/+page.svelte
index 01e1dfa..f808aa1 100644
--- a/frontend/src/routes/settings/flags/+page.svelte
+++ b/frontend/src/routes/settings/flags/+page.svelte
@@ -7,7 +7,7 @@
   import { addToast } from "$lib/toast";
   import { encode } from "base64-arraybuffer";
   import unknownFlag from "./unknown_flag.png";
-  import { apiFetchClient } from "$lib/api/fetch";
+  import { apiFetchClient, fastFetchClient } from "$lib/api/fetch";
   import ErrorAlert from "$lib/components/ErrorAlert.svelte";
 
   const MAX_FLAG_BYTES = 500_000;
@@ -18,11 +18,13 @@
   let error: APIError | null = null;
 
   let filtered: PrideFlag[];
-  $: filtered = search
-    ? data.flags.filter((flag) =>
-        flag.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()),
-      )
-    : data.flags;
+  $: filtered = filterFlags(search, data.flags);
+
+  const filterFlags = (search: string, flags: PrideFlag[]) => {
+    return search
+      ? flags.filter((flag) => flag.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
+      : flags;
+  };
 
   // NEW FLAG UPLOADING CODE
   let modalOpen = false;
@@ -81,6 +83,20 @@
       error = e as APIError;
     }
   };
+
+  // DELETE FLAG CODE
+  const deleteFlag = async (id: string) => {
+    try {
+      await fastFetchClient(`/users/@me/flags/${id}`, "DELETE");
+
+      error = null;
+
+      addToast({ header: "Deleted flag", body: "Successfully deleted flag!" });
+      data.flags = data.flags.filter((entry) => entry.id !== id);
+    } catch (e) {
+      error = e as APIError;
+    }
+  };
 </script>
 
 <h1>Pride flags ({data.flags.length})</h1>
@@ -98,13 +114,13 @@
 </div>
 
 <div class="p-2">
-  {#each filtered as flag}
-    <Flag {flag} />
+  {#each filtered as flag (flag.id)}
+    <Flag bind:flag {deleteFlag} />
   {:else}
     {#if data.flags.length === 0}
       You haven't uploaded any flags yet, press the button above to do so.
     {:else}
-      There are no flags matching your search <strong>{search}</strong>
+      There are no flags matching your search <strong>{search}</strong>.
     {/if}
   {/each}
 </div>
diff --git a/frontend/src/routes/settings/flags/Flag.svelte b/frontend/src/routes/settings/flags/Flag.svelte
index 3ed78e3..eab228f 100644
--- a/frontend/src/routes/settings/flags/Flag.svelte
+++ b/frontend/src/routes/settings/flags/Flag.svelte
@@ -1,15 +1,75 @@
 <script lang="ts">
-  import { flagURL, type PrideFlag } from "$lib/api/entities";
-  import { Button } from "sveltestrap";
+  import { flagURL, type APIError, type PrideFlag } from "$lib/api/entities";
+  import { apiFetchClient } from "$lib/api/fetch";
+  import { addToast } from "$lib/toast";
+  import { Button, Input, Modal, ModalBody, ModalFooter, ModalHeader } from "sveltestrap";
 
   export let flag: PrideFlag;
+  export let deleteFlag: (id: string) => Promise<void>;
+
+  let error: APIError | null = null;
+
+  let modalOpen = false;
+  const toggleModal = () => (modalOpen = !modalOpen);
+
+  let deleteModalOpen = false;
+  const toggleDeleteModal = () => (deleteModalOpen = !deleteModalOpen);
+
+  let name = flag.name;
+  let description = flag.description;
+
+  const updateFlag = async () => {
+    try {
+      const resp = await apiFetchClient<PrideFlag>(`/users/@me/flags/${flag.id}`, "PATCH", {
+        name,
+        description: description || null,
+      });
+
+      error = null;
+      flag = resp;
+
+      addToast({ header: "Updated flag", body: "Successfully updated flag!" });
+      toggleModal();
+    } catch (e) {
+      error = e as APIError;
+    }
+  };
 </script>
 
-<Button outline class="m-1">
+<Button outline class="m-1" on:click={toggleModal}>
   <img class="flag" src={flagURL(flag)} alt={flag.description ?? flag.name} />
   {flag.name}
 </Button>
 
+<Modal isOpen={modalOpen} toggle={toggleModal}>
+  <ModalHeader toggle={toggleModal}>Edit {flag.name} flag</ModalHeader>
+  <ModalBody>
+    <p>
+      <label for="name" class="form-label">Name</label>
+      <Input id="name" bind:value={name} />
+    </p>
+    <p>
+      <label for="description" class="form-label">Description</label>
+      <textarea id="description" class="form-control" bind:value={description} />
+    </p>
+  </ModalBody>
+  <ModalFooter>
+    <Button color="danger" on:click={toggleDeleteModal}>Delete flag</Button>
+    <Button disabled={!name} color="success" on:click={() => updateFlag()}>Edit flag</Button>
+  </ModalFooter>
+</Modal>
+
+<Modal isOpen={deleteModalOpen} toggle={toggleDeleteModal}>
+  <ModalHeader toggle={toggleDeleteModal}>Delete {flag.name} flag</ModalHeader>
+  <ModalBody>
+    Are you sure you want to delete the {flag.name} flag? <strong>This cannot be undone!</strong>
+  </ModalBody>
+  <ModalFooter>
+    <Button color="danger" on:click={() => deleteFlag(flag.id)}>Delete flag</Button>
+    <Button color="secondary" on:click={toggleDeleteModal}>Cancel</Button>
+  </ModalFooter>
+</Modal>
+
 <style>
   .flag {
     height: 2rem;
@@ -17,4 +77,8 @@
     border-radius: 3px;
     margin-left: -5px;
   }
+
+  textarea {
+    height: 100px;
+  }
 </style>

From 21cce9c5af90750529940f487c12830ac46a923b Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Mon, 29 May 2023 02:19:00 +0200
Subject: [PATCH 08/12] fix: don't delete flag *objects* because flags can
 share hashes

---
 backend/db/flags.go | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/backend/db/flags.go b/backend/db/flags.go
index 94e70ea..e722d16 100644
--- a/backend/db/flags.go
+++ b/backend/db/flags.go
@@ -268,12 +268,6 @@ func (db *DB) DeleteFlag(ctx context.Context, flagID xid.ID, hash string) error
 	if err != nil {
 		return errors.Wrap(err, "executing query")
 	}
-
-	err = db.minio.RemoveObject(ctx, db.minioBucket, "/flags/"+flagID.String()+"/"+hash+".webp", minio.RemoveObjectOptions{})
-	if err != nil {
-		return errors.Wrap(err, "deleting flag")
-	}
-
 	return nil
 }
 

From 4ebc5d50036b77e31e2e97a00e6f6eec223cd581 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Mon, 29 May 2023 02:50:38 +0200
Subject: [PATCH 09/12] feat: add flags to edit profile page

---
 frontend/src/lib/api/entities.ts              |   2 +
 frontend/src/routes/edit/FlagButton.svelte    |  26 +++++
 frontend/src/routes/edit/profile/+page.svelte | 110 ++++++++++++++++++
 frontend/src/routes/edit/profile/+page.ts     |   4 +-
 4 files changed, 141 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/routes/edit/FlagButton.svelte

diff --git a/frontend/src/lib/api/entities.ts b/frontend/src/lib/api/entities.ts
index df2ad47..37bcd87 100644
--- a/frontend/src/lib/api/entities.ts
+++ b/frontend/src/lib/api/entities.ts
@@ -17,6 +17,7 @@ export interface User {
   pronouns: Pronoun[];
   members: PartialMember[];
   fields: Field[];
+  flags: PrideFlag[];
   custom_preferences: CustomPreferences;
 }
 
@@ -83,6 +84,7 @@ export interface PartialMember {
 
 export interface Member extends PartialMember {
   fields: Field[];
+  flags: PrideFlag[];
 
   user: MemberPartialUser;
   unlisted?: boolean;
diff --git a/frontend/src/routes/edit/FlagButton.svelte b/frontend/src/routes/edit/FlagButton.svelte
new file mode 100644
index 0000000..19c8fbd
--- /dev/null
+++ b/frontend/src/routes/edit/FlagButton.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { flagURL, type PrideFlag } from "$lib/api/entities";
+  import { Button, Tooltip } from "sveltestrap";
+
+  export let flag: PrideFlag;
+  export let tooltip: string;
+  let className: string | null | undefined = undefined;
+  export { className as class };
+
+  let elem: HTMLElement;
+</script>
+
+<Tooltip target={elem} placement="top">{tooltip}</Tooltip>
+<Button bind:inner={elem} class={className} on:click color="secondary" outline>
+  <img class="flag" src={flagURL(flag)} alt={flag.description ?? flag.name} />
+  {flag.name}
+</Button>
+
+<style>
+  .flag {
+    height: 1.5rem;
+    max-width: 200px;
+    border-radius: 3px;
+    margin-left: -5px;
+  }
+</style>
diff --git a/frontend/src/routes/edit/profile/+page.svelte b/frontend/src/routes/edit/profile/+page.svelte
index b6fda9f..f2ee796 100644
--- a/frontend/src/routes/edit/profile/+page.svelte
+++ b/frontend/src/routes/edit/profile/+page.svelte
@@ -9,6 +9,7 @@
     type Pronoun,
     PreferenceSize,
     type CustomPreferences,
+    type PrideFlag,
   } from "$lib/api/entities";
   import FallbackImage from "$lib/components/FallbackImage.svelte";
   import { userStore } from "$lib/store";
@@ -39,6 +40,7 @@
   import MarkdownHelp from "../MarkdownHelp.svelte";
   import prettyBytes from "pretty-bytes";
   import CustomPreference from "./CustomPreference.svelte";
+  import FlagButton from "../FlagButton.svelte";
 
   const MAX_AVATAR_BYTES = 1_000_000;
 
@@ -53,6 +55,7 @@
   let names: FieldEntry[] = window.structuredClone(data.user.names);
   let pronouns: Pronoun[] = window.structuredClone(data.user.pronouns);
   let fields: Field[] = window.structuredClone(data.user.fields);
+  let flags: PrideFlag[] = window.structuredClone(data.user.flags);
   let list_private = data.user.list_private;
   let custom_preferences = window.structuredClone(data.user.custom_preferences);
 
@@ -63,6 +66,18 @@
   let newPronouns = "";
   let newLink = "";
 
+  let flagSearch = "";
+  let filteredFlags: PrideFlag[];
+  $: filteredFlags = filterFlags(flagSearch, data.flags);
+
+  const filterFlags = (search: string, flags: PrideFlag[]) => {
+    return (
+      search
+        ? flags.filter((flag) => flag.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
+        : flags
+    ).slice(0, 25);
+  };
+
   let preferenceIds: string[];
   $: preferenceIds = Object.keys(custom_preferences);
 
@@ -76,6 +91,7 @@
     names,
     pronouns,
     fields,
+    flags,
     avatar,
     member_title,
     list_private,
@@ -91,6 +107,7 @@
     names: FieldEntry[],
     pronouns: Pronoun[],
     fields: Field[],
+    flags: PrideFlag[],
     avatar: string | null,
     member_title: string,
     list_private: boolean,
@@ -101,6 +118,7 @@
     if (member_title !== (user.member_title || "")) return true;
     if (!linksEqual(links, user.links)) return true;
     if (!fieldsEqual(fields, user.fields)) return true;
+    if (!flagsEqual(flags, user.flags)) return true;
     if (!namesEqual(names, user.names)) return true;
     if (!pronounsEqual(pronouns, user.pronouns)) return true;
     if (!customPreferencesEqual(custom_preferences, user.custom_preferences)) return true;
@@ -145,6 +163,11 @@
     return arr1.every((_, i) => arr1[i] === arr2[i]);
   };
 
+  const flagsEqual = (arr1: PrideFlag[], arr2: PrideFlag[]) => {
+    if (arr1.length !== arr2.length) return false;
+    return arr1.every((_, i) => arr1[i].id === arr2[i].id);
+  };
+
   const customPreferencesEqual = (obj1: CustomPreferences, obj2: CustomPreferences) => {
     if (Object.keys(obj2).some((key) => !(key in obj1))) return false;
 
@@ -227,6 +250,26 @@
     links[newIndex] = temp;
   };
 
+  const moveFlag = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == flags.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = flags[index];
+    flags[index] = flags[newIndex];
+    flags[newIndex] = temp;
+  };
+
+  const addFlag = (flag: PrideFlag) => {
+    flags = [...flags, flag];
+  };
+
+  const removeFlag = (index: number) => {
+    flags.splice(index, 1);
+    flags = [...flags];
+  };
+
   const addName = (event: Event) => {
     event.preventDefault();
 
@@ -317,6 +360,7 @@
         member_title,
         list_private,
         custom_preferences,
+        flags: flags.map((flag) => flag.id),
       });
 
       data.user = resp;
@@ -516,6 +560,72 @@
       </Button>
     </div>
   </TabPane>
+  <TabPane tabId="flags" tab="Flags">
+    <div class="mt-3">
+      {#each flags as _, index}
+        <ButtonGroup class="m-1">
+          <IconButton
+            icon="chevron-left"
+            color="secondary"
+            tooltip="Move flag to the left"
+            click={() => moveFlag(index, true)}
+          />
+          <IconButton
+            icon="chevron-right"
+            color="secondary"
+            tooltip="Move flag to the right"
+            click={() => moveFlag(index, false)}
+          />
+          <FlagButton
+            flag={flags[index]}
+            tooltip="Remove this flag from your profile"
+            on:click={() => removeFlag(index)}
+          />
+        </ButtonGroup>
+      {/each}
+    </div>
+    <hr />
+    <div class="row">
+      <div class="col-md">
+        <Input
+          placeholder="Filter flags"
+          bind:value={flagSearch}
+          disabled={data.flags.length === 0}
+        />
+        <div class="p-2">
+          {#each filteredFlags as flag (flag.id)}
+            <FlagButton
+              {flag}
+              tooltip="Add this flag to your profile"
+              on:click={() => addFlag(flag)}
+            />
+          {:else}
+            {#if data.flags.length === 0}
+              You haven't uploaded any flags yet.
+            {:else}
+              There are no flags matching your search <strong>{flagSearch}</strong>.
+            {/if}
+          {/each}
+        </div>
+      </div>
+      <div class="col-md">
+        <Alert color="secondary" fade={false}>
+          {#if data.flags.length === 0}
+            <p><strong>Why can't I see any flags?</strong></p>
+            <p>
+              There are thousands of pride flags, and it would be impossible to bundle all of them
+              by default. Many labels also have multiple different flags that are favoured by
+              different people. Because of this, there are no flags available by default--instead,
+              you can upload flags in your <a href="/settings/flags">settings</a>. Your main profile
+              and your member profiles can all have different flags.
+            </p>
+          {:else}
+            To upload and delete flags, go to your <a href="/settings/flags">settings</a>.
+          {/if}
+        </Alert>
+      </div>
+    </div>
+  </TabPane>
   <TabPane tabId="links" tab="Links">
     <div class="mt-3">
       {#each links as _, index}
diff --git a/frontend/src/routes/edit/profile/+page.ts b/frontend/src/routes/edit/profile/+page.ts
index 1054016..894eb83 100644
--- a/frontend/src/routes/edit/profile/+page.ts
+++ b/frontend/src/routes/edit/profile/+page.ts
@@ -1,4 +1,4 @@
-import type { APIError, MeUser, PronounsJson } from "$lib/api/entities";
+import type { PrideFlag, APIError, MeUser, PronounsJson } from "$lib/api/entities";
 import { apiFetchClient } from "$lib/api/fetch";
 import { error } from "@sveltejs/kit";
 
@@ -10,10 +10,12 @@ export const ssr = false;
 export const load = async () => {
   try {
     const user = await apiFetchClient<MeUser>(`/users/@me`);
+    const flags = await apiFetchClient<PrideFlag[]>("/users/@me/flags");
 
     return {
       user,
       pronouns: pronouns.autocomplete,
+      flags,
     };
   } catch (e) {
     throw error((e as APIError).code, (e as APIError).message);

From 8f1d1fc87cfbaa129c995f12965c31749dabb4a0 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Mon, 29 May 2023 02:56:31 +0200
Subject: [PATCH 10/12] feat: add flags to edit member page

---
 .../src/routes/edit/member/[id]/+page.svelte  | 110 ++++++++++++++++++
 frontend/src/routes/edit/member/[id]/+page.ts |   4 +-
 2 files changed, 113 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/edit/member/[id]/+page.svelte b/frontend/src/routes/edit/member/[id]/+page.svelte
index 34fc26d..7ba9080 100644
--- a/frontend/src/routes/edit/member/[id]/+page.svelte
+++ b/frontend/src/routes/edit/member/[id]/+page.svelte
@@ -8,6 +8,7 @@
     type FieldEntry,
     type Member,
     type Pronoun,
+    type PrideFlag,
   } from "$lib/api/entities";
   import FallbackImage from "$lib/components/FallbackImage.svelte";
   import {
@@ -40,6 +41,7 @@
   import { memberNameRegex } from "$lib/api/regex";
   import { charCount, renderMarkdown } from "$lib/utils";
   import MarkdownHelp from "../../MarkdownHelp.svelte";
+  import FlagButton from "../../FlagButton.svelte";
 
   const MAX_AVATAR_BYTES = 1_000_000;
 
@@ -59,6 +61,7 @@
   let names: FieldEntry[] = window.structuredClone(data.member.names);
   let pronouns: Pronoun[] = window.structuredClone(data.member.pronouns);
   let fields: Field[] = window.structuredClone(data.member.fields);
+  let flags: PrideFlag[] = window.structuredClone(data.member.flags);
   let unlisted: boolean = data.member.unlisted || false;
 
   let memberNameValid = true;
@@ -71,6 +74,18 @@
   let newPronouns = "";
   let newLink = "";
 
+  let flagSearch = "";
+  let filteredFlags: PrideFlag[];
+  $: filteredFlags = filterFlags(flagSearch, data.flags);
+
+  const filterFlags = (search: string, flags: PrideFlag[]) => {
+    return (
+      search
+        ? flags.filter((flag) => flag.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
+        : flags
+    ).slice(0, 25);
+  };
+
   let modified = false;
 
   $: modified = isModified(
@@ -82,6 +97,7 @@
     names,
     pronouns,
     fields,
+    flags,
     avatar,
     unlisted,
   );
@@ -96,6 +112,7 @@
     names: FieldEntry[],
     pronouns: Pronoun[],
     fields: Field[],
+    flags: PrideFlag[],
     avatar: string | null,
     unlisted: boolean,
   ) => {
@@ -104,6 +121,7 @@
     if (display_name !== member.display_name) return true;
     if (!linksEqual(links, member.links)) return true;
     if (!fieldsEqual(fields, member.fields)) return true;
+    if (!flagsEqual(flags, member.flags)) return true;
     if (!namesEqual(names, member.names)) return true;
     if (!pronounsEqual(pronouns, member.pronouns)) return true;
     if (avatar !== null) return true;
@@ -147,6 +165,11 @@
     return arr1.every((_, i) => arr1[i] === arr2[i]);
   };
 
+  const flagsEqual = (arr1: PrideFlag[], arr2: PrideFlag[]) => {
+    if (arr1.length !== arr2.length) return false;
+    return arr1.every((_, i) => arr1[i].id === arr2[i].id);
+  };
+
   const getAvatar = async (list: FileList | null) => {
     if (!list || list.length === 0) return null;
     if (list[0].size > MAX_AVATAR_BYTES) {
@@ -211,6 +234,26 @@
     links[newIndex] = temp;
   };
 
+  const moveFlag = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == flags.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = flags[index];
+    flags[index] = flags[newIndex];
+    flags[newIndex] = temp;
+  };
+
+  const addFlag = (flag: PrideFlag) => {
+    flags = [...flags, flag];
+  };
+
+  const removeFlag = (index: number) => {
+    flags.splice(index, 1);
+    flags = [...flags];
+  };
+
   const addName = (event: Event) => {
     event.preventDefault();
 
@@ -281,6 +324,7 @@
         names,
         pronouns,
         fields,
+        flags: flags.map((flag) => flag.id),
         unlisted,
       });
 
@@ -541,6 +585,72 @@
       </Button>
     </div>
   </TabPane>
+  <TabPane tabId="flags" tab="Flags">
+    <div class="mt-3">
+      {#each flags as _, index}
+        <ButtonGroup class="m-1">
+          <IconButton
+            icon="chevron-left"
+            color="secondary"
+            tooltip="Move flag to the left"
+            click={() => moveFlag(index, true)}
+          />
+          <IconButton
+            icon="chevron-right"
+            color="secondary"
+            tooltip="Move flag to the right"
+            click={() => moveFlag(index, false)}
+          />
+          <FlagButton
+            flag={flags[index]}
+            tooltip="Remove this flag from your profile"
+            on:click={() => removeFlag(index)}
+          />
+        </ButtonGroup>
+      {/each}
+    </div>
+    <hr />
+    <div class="row">
+      <div class="col-md">
+        <Input
+          placeholder="Filter flags"
+          bind:value={flagSearch}
+          disabled={data.flags.length === 0}
+        />
+        <div class="p-2">
+          {#each filteredFlags as flag (flag.id)}
+            <FlagButton
+              {flag}
+              tooltip="Add this flag to your profile"
+              on:click={() => addFlag(flag)}
+            />
+          {:else}
+            {#if data.flags.length === 0}
+              You haven't uploaded any flags yet.
+            {:else}
+              There are no flags matching your search <strong>{flagSearch}</strong>.
+            {/if}
+          {/each}
+        </div>
+      </div>
+      <div class="col-md">
+        <Alert color="secondary" fade={false}>
+          {#if data.flags.length === 0}
+            <p><strong>Why can't I see any flags?</strong></p>
+            <p>
+              There are thousands of pride flags, and it would be impossible to bundle all of them
+              by default. Many labels also have multiple different flags that are favoured by
+              different people. Because of this, there are no flags available by default--instead,
+              you can upload flags in your <a href="/settings/flags">settings</a>. Your main profile
+              and your member profiles can all have different flags.
+            </p>
+          {:else}
+            To upload and delete flags, go to your <a href="/settings/flags">settings</a>.
+          {/if}
+        </Alert>
+      </div>
+    </div>
+  </TabPane>
   <TabPane tabId="links" tab="Links">
     <div class="mt-3">
       {#each links as _, index}
diff --git a/frontend/src/routes/edit/member/[id]/+page.ts b/frontend/src/routes/edit/member/[id]/+page.ts
index b695c60..a84b94d 100644
--- a/frontend/src/routes/edit/member/[id]/+page.ts
+++ b/frontend/src/routes/edit/member/[id]/+page.ts
@@ -1,4 +1,4 @@
-import type { MeUser, APIError, Member, PronounsJson } from "$lib/api/entities";
+import type { PrideFlag, MeUser, APIError, Member, PronounsJson } from "$lib/api/entities";
 import { apiFetchClient } from "$lib/api/fetch";
 import { error } from "@sveltejs/kit";
 
@@ -11,11 +11,13 @@ export const load = async ({ params }) => {
   try {
     const user = await apiFetchClient<MeUser>(`/users/@me`);
     const member = await apiFetchClient<Member>(`/members/${params.id}`);
+    const flags = await apiFetchClient<PrideFlag[]>("/users/@me/flags");
 
     return {
       user,
       member,
       pronouns: pronouns.autocomplete,
+      flags,
     };
   } catch (e) {
     throw error((e as APIError).code, (e as APIError).message);

From c28df5fc7fb7c92a5c790cdc64bdbbaef6b8bf06 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Mon, 29 May 2023 02:59:15 +0200
Subject: [PATCH 11/12] fix: enforce maximum number of flags on profile

---
 backend/routes/member/patch_member.go | 10 ++++++++++
 backend/routes/user/patch_user.go     | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/backend/routes/member/patch_member.go b/backend/routes/member/patch_member.go
index d4545eb..7e3409d 100644
--- a/backend/routes/member/patch_member.go
+++ b/backend/routes/member/patch_member.go
@@ -155,6 +155,16 @@ func (s *Server) patchMember(w http.ResponseWriter, r *http.Request) error {
 		}
 	}
 
+	// validate flag length
+	if req.Flags != nil {
+		if len(*req.Flags) > db.MaxPrideFlags {
+			return server.APIError{
+				Code:    server.ErrBadRequest,
+				Details: fmt.Sprintf("Too many flags (max %d, current %d)", len(*req.Flags), db.MaxPrideFlags),
+			}
+		}
+	}
+
 	if err := validateSlicePtr("name", req.Names, u.CustomPreferences); err != nil {
 		return *err
 	}
diff --git a/backend/routes/user/patch_user.go b/backend/routes/user/patch_user.go
index 3b015bb..19ab3e1 100644
--- a/backend/routes/user/patch_user.go
+++ b/backend/routes/user/patch_user.go
@@ -109,6 +109,16 @@ func (s *Server) patchUser(w http.ResponseWriter, r *http.Request) error {
 		}
 	}
 
+	// validate flag length
+	if req.Flags != nil {
+		if len(*req.Flags) > db.MaxPrideFlags {
+			return server.APIError{
+				Code:    server.ErrBadRequest,
+				Details: fmt.Sprintf("Too many flags (max %d, current %d)", len(*req.Flags), db.MaxPrideFlags),
+			}
+		}
+	}
+
 	// validate custom preferences
 	if req.CustomPreferences != nil {
 		if count := len(*req.CustomPreferences); count > db.MaxFields {

From 5b954778cf3625d741cb19fba86fe88b788891f8 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Mon, 29 May 2023 03:26:20 +0200
Subject: [PATCH 12/12] feat: add flags to profile pages

---
 frontend/src/routes/@[username]/+page.svelte  | 21 +++++++++++++++---
 .../src/routes/@[username]/ProfileFlag.svelte | 22 +++++++++++++++++++
 .../@[username]/[memberName]/+page.svelte     | 15 +++++++++++++
 3 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/routes/@[username]/ProfileFlag.svelte

diff --git a/frontend/src/routes/@[username]/+page.svelte b/frontend/src/routes/@[username]/+page.svelte
index 3bb8704..edb9aae 100644
--- a/frontend/src/routes/@[username]/+page.svelte
+++ b/frontend/src/routes/@[username]/+page.svelte
@@ -40,6 +40,7 @@
   import StatusLine from "$lib/components/StatusLine.svelte";
   import defaultPreferences from "$lib/api/default_preferences";
   import { addToast } from "$lib/toast";
+  import ProfileFlag from "./ProfileFlag.svelte";
 
   export let data: PageData;
 
@@ -117,16 +118,16 @@
 
   onMount(async () => {
     if ($userStore && $userStore.id === data.id) {
-      console.log("User is current user, fetching members")
+      console.log("User is current user, fetching members");
       try {
         const members = await apiFetchClient<PartialMember[]>("/users/@me/members");
         data.members = members;
       } catch (e) {
         // If it fails, we fail silently but log to console anyway
-        console.error("Fetching members:", e)
+        console.error("Fetching members:", e);
       }
     }
-  })
+  });
 </script>
 
 <div class="container">
@@ -140,6 +141,13 @@
     <div class="row">
       <div class="col-md-4 text-center">
         <FallbackImage width={200} urls={userAvatars(data)} alt="Avatar for @{data.name}" />
+        {#if data.flags && data.bio}
+          <div class="d-flex flex-wrap m-4">
+            {#each data.flags as flag}
+              <ProfileFlag {flag} />
+            {/each}
+          </div>
+        {/if}
       </div>
       <div class="col-md">
         {#if data.display_name}
@@ -174,6 +182,13 @@
         </div>
       {/if}
     </div>
+    {#if data.flags && !data.bio}
+      <div class="d-flex flex-wrap m-4">
+        {#each data.flags as flag}
+          <ProfileFlag {flag} />
+        {/each}
+      </div>
+    {/if}
     <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
       {#if data.names.length > 0}
         <div class="col-md">
diff --git a/frontend/src/routes/@[username]/ProfileFlag.svelte b/frontend/src/routes/@[username]/ProfileFlag.svelte
new file mode 100644
index 0000000..3ef4c63
--- /dev/null
+++ b/frontend/src/routes/@[username]/ProfileFlag.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { flagURL, type PrideFlag } from "$lib/api/entities";
+  import { Tooltip } from "sveltestrap";
+
+  export let flag: PrideFlag;
+
+  let elem: HTMLElement;
+</script>
+
+<span class="mx-2 my-1">
+  <Tooltip target={elem} aria-hidden placement="top">{flag.description ?? flag.name}</Tooltip>
+  <img bind:this={elem} class="flag" src={flagURL(flag)} alt={flag.description ?? flag.name} />
+  {flag.name}
+</span>
+
+<style>
+  .flag {
+    height: 1.5rem;
+    max-width: 200px;
+    border-radius: 3px;
+  }
+</style>
diff --git a/frontend/src/routes/@[username]/[memberName]/+page.svelte b/frontend/src/routes/@[username]/[memberName]/+page.svelte
index 99146cb..b281905 100644
--- a/frontend/src/routes/@[username]/[memberName]/+page.svelte
+++ b/frontend/src/routes/@[username]/[memberName]/+page.svelte
@@ -20,6 +20,7 @@
   import StatusLine from "$lib/components/StatusLine.svelte";
   import defaultPreferences from "$lib/api/default_preferences";
   import { addToast } from "$lib/toast";
+  import ProfileFlag from "../ProfileFlag.svelte";
 
   export let data: PageData;
 
@@ -69,6 +70,13 @@
     <div class="row">
       <div class="col-md-4 text-center">
         <FallbackImage width={200} urls={memberAvatars(data)} alt="Avatar for @{data.name}" />
+        {#if data.flags && data.bio}
+          <div class="d-flex flex-wrap m-4">
+            {#each data.flags as flag}
+              <ProfileFlag {flag} />
+            {/each}
+          </div>
+        {/if}
       </div>
       <div class="col-md">
         <h2>{data.display_name ?? data.name}</h2>
@@ -97,6 +105,13 @@
         </div>
       {/if}
     </div>
+    {#if data.flags && !data.bio}
+      <div class="d-flex flex-wrap m-4">
+        {#each data.flags as flag}
+          <ProfileFlag {flag} />
+        {/each}
+      </div>
+    {/if}
     <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
       {#if data.names.length > 0}
         <div class="col-md">