forked from mirrors/pronouns.cc
Merge pull request 'add custom name/label/pronoun preferences (closes #42)' (#51) from feature/custom-preferences into main
Reviewed-on: https://codeberg.org/u1f320/pronouns.cc/pulls/51
This commit is contained in:
commit
2a15c519f3
34 changed files with 2572 additions and 321 deletions
|
@ -40,13 +40,13 @@ func (w *WordStatus) UnmarshalJSON(src []byte) error {
|
|||
return nil
|
||||
}
|
||||
|
||||
func (w WordStatus) Valid(extra ...WordStatus) bool {
|
||||
func (w WordStatus) Valid(extra CustomPreferences) bool {
|
||||
if w == StatusFavourite || w == StatusOkay || w == StatusJokingly || w == StatusFriendsOnly || w == StatusAvoid {
|
||||
return true
|
||||
}
|
||||
|
||||
for i := range extra {
|
||||
if w == extra[i] {
|
||||
for k := range extra {
|
||||
if string(w) == k {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
@ -58,7 +58,7 @@ type FieldEntry struct {
|
|||
Status WordStatus `json:"status"`
|
||||
}
|
||||
|
||||
func (fe FieldEntry) Validate() string {
|
||||
func (fe FieldEntry) Validate(custom CustomPreferences) string {
|
||||
if fe.Value == "" {
|
||||
return "value cannot be empty"
|
||||
}
|
||||
|
@ -67,7 +67,7 @@ func (fe FieldEntry) Validate() string {
|
|||
return fmt.Sprintf("name must be %d characters or less, is %d", FieldEntryMaxLength, len([]rune(fe.Value)))
|
||||
}
|
||||
|
||||
if !fe.Status.Valid() {
|
||||
if !fe.Status.Valid(custom) {
|
||||
return "status is invalid"
|
||||
}
|
||||
|
||||
|
@ -80,7 +80,7 @@ type PronounEntry struct {
|
|||
Status WordStatus `json:"status"`
|
||||
}
|
||||
|
||||
func (p PronounEntry) Validate() string {
|
||||
func (p PronounEntry) Validate(custom CustomPreferences) string {
|
||||
if p.Pronouns == "" {
|
||||
return "pronouns cannot be empty"
|
||||
}
|
||||
|
@ -95,7 +95,7 @@ func (p PronounEntry) Validate() string {
|
|||
return fmt.Sprintf("pronouns must be %d characters or less, is %d", FieldEntryMaxLength, len([]rune(p.Pronouns)))
|
||||
}
|
||||
|
||||
if !p.Status.Valid() {
|
||||
if !p.Status.Valid(custom) {
|
||||
return "status is invalid"
|
||||
}
|
||||
|
||||
|
|
|
@ -24,7 +24,7 @@ type Field struct {
|
|||
}
|
||||
|
||||
// Validate validates this field. If it is invalid, a non-empty string is returned as error message.
|
||||
func (f Field) Validate() string {
|
||||
func (f Field) Validate(custom CustomPreferences) string {
|
||||
if f.Name == "" {
|
||||
return "name cannot be empty"
|
||||
}
|
||||
|
@ -42,7 +42,7 @@ func (f Field) Validate() string {
|
|||
return fmt.Sprintf("entries.%d: max length is %d characters, length is %d", i, FieldEntryMaxLength, length)
|
||||
}
|
||||
|
||||
if !entry.Status.Valid() {
|
||||
if !entry.Status.Valid(custom) {
|
||||
return fmt.Sprintf("entries.%d: status is invalid", i)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,9 +4,12 @@ import (
|
|||
"context"
|
||||
"crypto/sha256"
|
||||
"encoding/hex"
|
||||
"fmt"
|
||||
"regexp"
|
||||
"time"
|
||||
|
||||
"codeberg.org/u1f320/pronouns.cc/backend/common"
|
||||
"codeberg.org/u1f320/pronouns.cc/backend/icons"
|
||||
"emperror.dev/errors"
|
||||
"github.com/bwmarrin/discordgo"
|
||||
"github.com/georgysavva/scany/v2/pgxscan"
|
||||
|
@ -49,8 +52,47 @@ type User struct {
|
|||
DeletedAt *time.Time
|
||||
SelfDelete *bool
|
||||
DeleteReason *string
|
||||
|
||||
CustomPreferences CustomPreferences
|
||||
}
|
||||
|
||||
type CustomPreferences = map[string]CustomPreference
|
||||
|
||||
type CustomPreference struct {
|
||||
Icon string `json:"icon"`
|
||||
Tooltip string `json:"tooltip"`
|
||||
Size PreferenceSize `json:"size"`
|
||||
Muted bool `json:"muted"`
|
||||
Favourite bool `json:"favourite"`
|
||||
}
|
||||
|
||||
func (c CustomPreference) Validate() string {
|
||||
if !icons.IsValid(c.Icon) {
|
||||
return fmt.Sprintf("custom preference icon %q is invalid", c.Icon)
|
||||
}
|
||||
|
||||
if c.Tooltip == "" {
|
||||
return "custom preference tooltip is empty"
|
||||
}
|
||||
if common.StringLength(&c.Tooltip) > FieldEntryMaxLength {
|
||||
return fmt.Sprintf("custom preference tooltip is too long, max %d characters, is %d characters", FieldEntryMaxLength, common.StringLength(&c.Tooltip))
|
||||
}
|
||||
|
||||
if c.Size != PreferenceSizeLarge && c.Size != PreferenceSizeNormal && c.Size != PreferenceSizeSmall {
|
||||
return fmt.Sprintf("custom preference size %q is invalid", string(c.Size))
|
||||
}
|
||||
|
||||
return ""
|
||||
}
|
||||
|
||||
type PreferenceSize string
|
||||
|
||||
const (
|
||||
PreferenceSizeLarge PreferenceSize = "large"
|
||||
PreferenceSizeNormal PreferenceSize = "normal"
|
||||
PreferenceSizeSmall PreferenceSize = "small"
|
||||
)
|
||||
|
||||
func (u User) NumProviders() (numProviders int) {
|
||||
if u.Discord != nil {
|
||||
numProviders++
|
||||
|
@ -456,8 +498,9 @@ func (db *DB) UpdateUser(
|
|||
memberTitle *string, listPrivate *bool,
|
||||
links *[]string,
|
||||
avatar *string,
|
||||
customPreferences *CustomPreferences,
|
||||
) (u User, err error) {
|
||||
if displayName == nil && bio == nil && links == nil && avatar == nil && memberTitle == nil && listPrivate == nil {
|
||||
if displayName == nil && bio == nil && links == nil && avatar == nil && memberTitle == nil && listPrivate == nil && customPreferences == nil {
|
||||
sql, args, err := sq.Select("*").From("users").Where("id = ?", id).ToSql()
|
||||
if err != nil {
|
||||
return u, errors.Wrap(err, "building sql")
|
||||
|
@ -499,6 +542,9 @@ func (db *DB) UpdateUser(
|
|||
if listPrivate != nil {
|
||||
builder = builder.Set("list_private", *listPrivate)
|
||||
}
|
||||
if customPreferences != nil {
|
||||
builder = builder.Set("custom_preferences", *customPreferences)
|
||||
}
|
||||
|
||||
if avatar != nil {
|
||||
if *avatar == "" {
|
||||
|
|
1968
backend/icons/icons.go
Normal file
1968
backend/icons/icons.go
Normal file
File diff suppressed because it is too large
Load diff
|
@ -103,15 +103,15 @@ func (s *Server) createMember(w http.ResponseWriter, r *http.Request) (err error
|
|||
}
|
||||
}
|
||||
|
||||
if err := validateSlicePtr("name", &cmr.Names); err != nil {
|
||||
if err := validateSlicePtr("name", &cmr.Names, u.CustomPreferences); err != nil {
|
||||
return *err
|
||||
}
|
||||
|
||||
if err := validateSlicePtr("pronoun", &cmr.Pronouns); err != nil {
|
||||
if err := validateSlicePtr("pronoun", &cmr.Pronouns, u.CustomPreferences); err != nil {
|
||||
return *err
|
||||
}
|
||||
|
||||
if err := validateSlicePtr("field", &cmr.Fields); err != nil {
|
||||
if err := validateSlicePtr("field", &cmr.Fields, u.CustomPreferences); err != nil {
|
||||
return *err
|
||||
}
|
||||
|
||||
|
@ -186,12 +186,12 @@ func (s *Server) createMember(w http.ResponseWriter, r *http.Request) (err error
|
|||
}
|
||||
|
||||
type validator interface {
|
||||
Validate() string
|
||||
Validate(custom db.CustomPreferences) string
|
||||
}
|
||||
|
||||
// validateSlicePtr validates a slice of validators.
|
||||
// If the slice is nil, a nil error is returned (assuming that the field is not required)
|
||||
func validateSlicePtr[T validator](typ string, slice *[]T) *server.APIError {
|
||||
func validateSlicePtr[T validator](typ string, slice *[]T, custom db.CustomPreferences) *server.APIError {
|
||||
if slice == nil {
|
||||
return nil
|
||||
}
|
||||
|
@ -211,7 +211,7 @@ func validateSlicePtr[T validator](typ string, slice *[]T) *server.APIError {
|
|||
|
||||
// validate all fields
|
||||
for i, pronouns := range *slice {
|
||||
if s := pronouns.Validate(); s != "" {
|
||||
if s := pronouns.Validate(custom); s != "" {
|
||||
return &server.APIError{
|
||||
Code: server.ErrBadRequest,
|
||||
Details: fmt.Sprintf("%s %d: %s", typ, i+1, s),
|
||||
|
|
|
@ -46,6 +46,7 @@ func dbMemberToMember(u db.User, m db.Member, fields []db.Field, isOwnMember boo
|
|||
Username: u.Username,
|
||||
DisplayName: u.DisplayName,
|
||||
Avatar: u.Avatar,
|
||||
CustomPreferences: u.CustomPreferences,
|
||||
},
|
||||
}
|
||||
|
||||
|
@ -61,6 +62,7 @@ type PartialUser struct {
|
|||
Username string `json:"name"`
|
||||
DisplayName *string `json:"display_name"`
|
||||
Avatar *string `json:"avatar"`
|
||||
CustomPreferences db.CustomPreferences `json:"custom_preferences"`
|
||||
}
|
||||
|
||||
func (s *Server) getMember(w http.ResponseWriter, r *http.Request) error {
|
||||
|
|
|
@ -41,6 +41,11 @@ func (s *Server) patchMember(w http.ResponseWriter, r *http.Request) error {
|
|||
return server.APIError{Code: server.ErrMemberNotFound}
|
||||
}
|
||||
|
||||
u, err := s.DB.User(ctx, claims.UserID)
|
||||
if err != nil {
|
||||
return errors.Wrap(err, "getting user")
|
||||
}
|
||||
|
||||
m, err := s.DB.Member(ctx, id)
|
||||
if err != nil {
|
||||
if err == db.ErrMemberNotFound {
|
||||
|
@ -148,15 +153,15 @@ func (s *Server) patchMember(w http.ResponseWriter, r *http.Request) error {
|
|||
}
|
||||
}
|
||||
|
||||
if err := validateSlicePtr("name", req.Names); err != nil {
|
||||
if err := validateSlicePtr("name", req.Names, u.CustomPreferences); err != nil {
|
||||
return *err
|
||||
}
|
||||
|
||||
if err := validateSlicePtr("pronoun", req.Pronouns); err != nil {
|
||||
if err := validateSlicePtr("pronoun", req.Pronouns, u.CustomPreferences); err != nil {
|
||||
return *err
|
||||
}
|
||||
|
||||
if err := validateSlicePtr("field", req.Fields); err != nil {
|
||||
if err := validateSlicePtr("field", req.Fields, u.CustomPreferences); err != nil {
|
||||
return *err
|
||||
}
|
||||
|
||||
|
@ -271,11 +276,6 @@ func (s *Server) patchMember(w http.ResponseWriter, r *http.Request) error {
|
|||
return err
|
||||
}
|
||||
|
||||
u, err := s.DB.User(ctx, claims.UserID)
|
||||
if err != nil {
|
||||
return errors.Wrap(err, "getting user")
|
||||
}
|
||||
|
||||
// echo the updated member back on success
|
||||
render.JSON(w, r, dbMemberToMember(u, m, fields, true))
|
||||
return nil
|
||||
|
|
|
@ -23,6 +23,7 @@ type GetUserResponse struct {
|
|||
Pronouns []db.PronounEntry `json:"pronouns"`
|
||||
Members []PartialMember `json:"members"`
|
||||
Fields []db.Field `json:"fields"`
|
||||
CustomPreferences db.CustomPreferences `json:"custom_preferences"`
|
||||
}
|
||||
|
||||
type GetMeResponse struct {
|
||||
|
@ -69,6 +70,7 @@ func dbUserToResponse(u db.User, fields []db.Field, members []db.Member) GetUser
|
|||
Names: db.NotNull(u.Names),
|
||||
Pronouns: db.NotNull(u.Pronouns),
|
||||
Fields: db.NotNull(fields),
|
||||
CustomPreferences: u.CustomPreferences,
|
||||
}
|
||||
|
||||
resp.Members = make([]PartialMember, len(members))
|
||||
|
|
|
@ -10,6 +10,7 @@ import (
|
|||
"codeberg.org/u1f320/pronouns.cc/backend/server"
|
||||
"emperror.dev/errors"
|
||||
"github.com/go-chi/render"
|
||||
"github.com/google/uuid"
|
||||
)
|
||||
|
||||
type PatchUserRequest struct {
|
||||
|
@ -23,6 +24,7 @@ type PatchUserRequest struct {
|
|||
Fields *[]db.Field `json:"fields"`
|
||||
Avatar *string `json:"avatar"`
|
||||
ListPrivate *bool `json:"list_private"`
|
||||
CustomPreferences *db.CustomPreferences `json:"custom_preferences"`
|
||||
}
|
||||
|
||||
// patchUser parses a PatchUserRequest and updates the user with the given ID.
|
||||
|
@ -57,7 +59,8 @@ func (s *Server) patchUser(w http.ResponseWriter, r *http.Request) error {
|
|||
req.Fields == nil &&
|
||||
req.Names == nil &&
|
||||
req.Pronouns == nil &&
|
||||
req.Avatar == nil {
|
||||
req.Avatar == nil &&
|
||||
req.CustomPreferences == nil {
|
||||
return server.APIError{
|
||||
Code: server.ErrBadRequest,
|
||||
Details: "Data must not be empty",
|
||||
|
@ -103,18 +106,35 @@ func (s *Server) patchUser(w http.ResponseWriter, r *http.Request) error {
|
|||
}
|
||||
}
|
||||
|
||||
if err := validateSlicePtr("name", req.Names); err != nil {
|
||||
if err := validateSlicePtr("name", req.Names, u.CustomPreferences); err != nil {
|
||||
return *err
|
||||
}
|
||||
|
||||
if err := validateSlicePtr("pronoun", req.Pronouns); err != nil {
|
||||
if err := validateSlicePtr("pronoun", req.Pronouns, u.CustomPreferences); err != nil {
|
||||
return *err
|
||||
}
|
||||
|
||||
if err := validateSlicePtr("field", req.Fields); err != nil {
|
||||
if err := validateSlicePtr("field", req.Fields, u.CustomPreferences); err != nil {
|
||||
return *err
|
||||
}
|
||||
|
||||
// validate custom preferences
|
||||
if req.CustomPreferences != nil {
|
||||
if count := len(*req.CustomPreferences); count > db.MaxFields {
|
||||
return server.APIError{Code: server.ErrBadRequest, Details: fmt.Sprintf("Too many custom preferences (max %d, current %d)", db.MaxFields, count)}
|
||||
}
|
||||
|
||||
for k, v := range *req.CustomPreferences {
|
||||
_, err := uuid.Parse(k)
|
||||
if err != nil {
|
||||
return server.APIError{Code: server.ErrBadRequest, Details: "One or more custom preference IDs is not a UUID."}
|
||||
}
|
||||
if s := v.Validate(); s != "" {
|
||||
return server.APIError{Code: server.ErrBadRequest, Details: s}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update avatar
|
||||
var avatarHash *string = nil
|
||||
if req.Avatar != nil {
|
||||
|
@ -186,7 +206,7 @@ func (s *Server) patchUser(w http.ResponseWriter, r *http.Request) error {
|
|||
}
|
||||
}
|
||||
|
||||
u, err = s.DB.UpdateUser(ctx, tx, claims.UserID, req.DisplayName, req.Bio, req.MemberTitle, req.ListPrivate, req.Links, avatarHash)
|
||||
u, err = s.DB.UpdateUser(ctx, tx, claims.UserID, req.DisplayName, req.Bio, req.MemberTitle, req.ListPrivate, req.Links, avatarHash, req.CustomPreferences)
|
||||
if err != nil && errors.Cause(err) != db.ErrNothingToUpdate {
|
||||
log.Errorf("updating user: %v", err)
|
||||
return err
|
||||
|
@ -263,12 +283,12 @@ func (s *Server) patchUser(w http.ResponseWriter, r *http.Request) error {
|
|||
}
|
||||
|
||||
type validator interface {
|
||||
Validate() string
|
||||
Validate(custom db.CustomPreferences) string
|
||||
}
|
||||
|
||||
// validateSlicePtr validates a slice of validators.
|
||||
// If the slice is nil, a nil error is returned (assuming that the field is not required)
|
||||
func validateSlicePtr[T validator](typ string, slice *[]T) *server.APIError {
|
||||
func validateSlicePtr[T validator](typ string, slice *[]T, custom db.CustomPreferences) *server.APIError {
|
||||
if slice == nil {
|
||||
return nil
|
||||
}
|
||||
|
@ -288,7 +308,7 @@ func validateSlicePtr[T validator](typ string, slice *[]T) *server.APIError {
|
|||
|
||||
// validate all fields
|
||||
for i, pronouns := range *slice {
|
||||
if s := pronouns.Validate(); s != "" {
|
||||
if s := pronouns.Validate(custom); s != "" {
|
||||
return &server.APIError{
|
||||
Code: server.ErrBadRequest,
|
||||
Details: fmt.Sprintf("%s %d: %s", typ, i+1, s),
|
||||
|
|
44
frontend/icons.js
Normal file
44
frontend/icons.js
Normal file
|
@ -0,0 +1,44 @@
|
|||
// This script regenerates the list of icons for the frontend (frontend/src/icons.json)
|
||||
// and the backend (backend/icons/icons.go) from the currently installed version of Bootstrap Icons.
|
||||
// Run with `pnpm node icons.js` in the frontend directory.
|
||||
|
||||
import { writeFileSync } from "fs";
|
||||
import icons from "bootstrap-icons/font/bootstrap-icons.json" assert { type: "json" };
|
||||
|
||||
const keys = Object.keys(icons);
|
||||
|
||||
console.log(`Found ${keys.length} icons`);
|
||||
const output = JSON.stringify(keys);
|
||||
console.log(`Saving file as src/icons.ts`);
|
||||
|
||||
writeFileSync("src/icons.ts", `const icons = ${output};\nexport default icons;`);
|
||||
|
||||
const goCode1 = `// Generated code. DO NOT EDIT
|
||||
package icons
|
||||
|
||||
var icons = [...]string{
|
||||
`;
|
||||
|
||||
const goCode2 = `}
|
||||
|
||||
// IsValid returns true if the input is the name of a Bootstrap icon.
|
||||
func IsValid(name string) bool {
|
||||
for i := range icons {
|
||||
if icons[i] == name {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
`;
|
||||
|
||||
let goOutput = goCode1;
|
||||
|
||||
keys.forEach((element) => {
|
||||
goOutput += ` "${element}",\n`;
|
||||
});
|
||||
|
||||
goOutput += goCode2;
|
||||
|
||||
console.log("Writing Go code");
|
||||
writeFileSync("../backend/icons/icons.go", goOutput);
|
2
frontend/src/icons.ts
Normal file
2
frontend/src/icons.ts
Normal file
File diff suppressed because one or more lines are too long
48
frontend/src/lib/api/default_preferences.ts
Normal file
48
frontend/src/lib/api/default_preferences.ts
Normal file
|
@ -0,0 +1,48 @@
|
|||
import { type CustomPreferences, PreferenceSize } from "./entities";
|
||||
|
||||
const defaultPreferences: CustomPreferences = {
|
||||
favourite: {
|
||||
icon: "heart-fill",
|
||||
tooltip: "Favourite",
|
||||
size: PreferenceSize.Large,
|
||||
muted: false,
|
||||
favourite: true,
|
||||
},
|
||||
okay: {
|
||||
icon: "hand-thumbs-up",
|
||||
tooltip: "Okay",
|
||||
size: PreferenceSize.Normal,
|
||||
muted: false,
|
||||
favourite: false,
|
||||
},
|
||||
jokingly: {
|
||||
icon: "emoji-laughing",
|
||||
tooltip: "Jokingly",
|
||||
size: PreferenceSize.Normal,
|
||||
muted: false,
|
||||
favourite: false,
|
||||
},
|
||||
friends_only: {
|
||||
icon: "people",
|
||||
tooltip: "Friends only",
|
||||
size: PreferenceSize.Normal,
|
||||
muted: false,
|
||||
favourite: false,
|
||||
},
|
||||
avoid: {
|
||||
icon: "hand-thumbs-down",
|
||||
tooltip: "Avoid",
|
||||
size: PreferenceSize.Small,
|
||||
muted: true,
|
||||
favourite: false,
|
||||
},
|
||||
missing: {
|
||||
icon: "question-lg",
|
||||
tooltip: "Unknown (missing)",
|
||||
size: PreferenceSize.Normal,
|
||||
muted: false,
|
||||
favourite: false,
|
||||
},
|
||||
};
|
||||
|
||||
export default defaultPreferences;
|
|
@ -16,6 +16,25 @@ export interface User {
|
|||
pronouns: Pronoun[];
|
||||
members: PartialMember[];
|
||||
fields: Field[];
|
||||
custom_preferences: CustomPreferences;
|
||||
}
|
||||
|
||||
export interface CustomPreferences {
|
||||
[key: string]: CustomPreference;
|
||||
}
|
||||
|
||||
export interface CustomPreference {
|
||||
icon: string;
|
||||
tooltip: string;
|
||||
size: PreferenceSize;
|
||||
muted: boolean;
|
||||
favourite: boolean;
|
||||
}
|
||||
|
||||
export enum PreferenceSize {
|
||||
Large = "large",
|
||||
Normal = "normal",
|
||||
Small = "small",
|
||||
}
|
||||
|
||||
export interface MeUser extends User {
|
||||
|
@ -39,13 +58,13 @@ export interface Field {
|
|||
|
||||
export interface FieldEntry {
|
||||
value: string;
|
||||
status: WordStatus;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export interface Pronoun {
|
||||
pronouns: string;
|
||||
display_text: string | null;
|
||||
status: WordStatus;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export enum WordStatus {
|
||||
|
@ -80,6 +99,7 @@ export interface MemberPartialUser {
|
|||
name: string;
|
||||
display_name: string | null;
|
||||
avatar: string | null;
|
||||
custom_preferences: CustomPreferences;
|
||||
}
|
||||
|
||||
export interface Invite {
|
||||
|
|
|
@ -1,16 +1,17 @@
|
|||
<script lang="ts">
|
||||
import type { Field } from "$lib/api/entities";
|
||||
import type { CustomPreferences, Field } from "$lib/api/entities";
|
||||
|
||||
import StatusLine from "./StatusLine.svelte";
|
||||
|
||||
export let field: Field;
|
||||
export let preferences: CustomPreferences;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<h3>{field.name}</h3>
|
||||
<ul class="list-unstyled fs-5">
|
||||
{#each field.entries as entry}
|
||||
<li><StatusLine status={entry.status}>{entry.value}</StatusLine></li>
|
||||
<li><StatusLine {preferences} status={entry.status}>{entry.value}</StatusLine></li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
@ -4,8 +4,8 @@
|
|||
export let icon: string;
|
||||
export let color: "primary" | "secondary" | "success" | "danger";
|
||||
export let tooltip: string;
|
||||
export let active: boolean = false;
|
||||
export let disabled: boolean = false;
|
||||
export let active = false;
|
||||
export let disabled = false;
|
||||
export let type: string | undefined = undefined;
|
||||
export let id: string | undefined = undefined;
|
||||
|
||||
|
|
|
@ -1,53 +1,24 @@
|
|||
<script lang="ts">
|
||||
import { Icon, Tooltip } from "sveltestrap";
|
||||
|
||||
import { WordStatus } from "$lib/api/entities";
|
||||
import type { CustomPreference, CustomPreferences } from "$lib/api/entities";
|
||||
import defaultPreferences from "$lib/api/default_preferences";
|
||||
|
||||
export let status: WordStatus;
|
||||
export let preferences: CustomPreferences;
|
||||
export let status: string;
|
||||
export let className: string | null = null;
|
||||
|
||||
const iconFor = (wordStatus: WordStatus) => {
|
||||
switch (wordStatus) {
|
||||
case WordStatus.Favourite:
|
||||
return "heart-fill";
|
||||
case WordStatus.Okay:
|
||||
return "hand-thumbs-up";
|
||||
case WordStatus.Jokingly:
|
||||
return "emoji-laughing";
|
||||
case WordStatus.FriendsOnly:
|
||||
return "people";
|
||||
case WordStatus.Avoid:
|
||||
return "hand-thumbs-down";
|
||||
default:
|
||||
return "hand-thumbs-up";
|
||||
}
|
||||
};
|
||||
let mergedPreferences: CustomPreferences;
|
||||
$: mergedPreferences = Object.assign(defaultPreferences, preferences);
|
||||
|
||||
const textFor = (wordStatus: WordStatus) => {
|
||||
switch (wordStatus) {
|
||||
case WordStatus.Favourite:
|
||||
return "Favourite";
|
||||
case WordStatus.Okay:
|
||||
return "Okay";
|
||||
case WordStatus.Jokingly:
|
||||
return "Jokingly";
|
||||
case WordStatus.FriendsOnly:
|
||||
return "Friends only";
|
||||
case WordStatus.Avoid:
|
||||
return "Avoid";
|
||||
default:
|
||||
return "Okay";
|
||||
}
|
||||
};
|
||||
|
||||
let statusIcon: string;
|
||||
$: statusIcon = iconFor(status);
|
||||
|
||||
let statusText: string;
|
||||
$: statusText = textFor(status);
|
||||
let currentPreference: CustomPreference;
|
||||
$: currentPreference =
|
||||
status in mergedPreferences ? mergedPreferences[status] : defaultPreferences.missing;
|
||||
|
||||
let iconElement: HTMLElement;
|
||||
</script>
|
||||
|
||||
<span bind:this={iconElement} tabindex={0}><Icon name={statusIcon} class={className} /></span>
|
||||
<Tooltip target={iconElement} placement="top">{statusText}</Tooltip>
|
||||
<span bind:this={iconElement} tabindex={0}
|
||||
><Icon name={currentPreference.icon} class={className} /></span
|
||||
>
|
||||
<Tooltip target={iconElement} placement="top">{currentPreference.tooltip}</Tooltip>
|
||||
|
|
|
@ -1,14 +1,44 @@
|
|||
<script lang="ts">
|
||||
import { WordStatus } from "$lib/api/entities";
|
||||
import { PreferenceSize } from "$lib/api/entities";
|
||||
import StatusIcon from "$lib/components/StatusIcon.svelte";
|
||||
|
||||
export let status: WordStatus;
|
||||
import type { CustomPreference, CustomPreferences } from "$lib/api/entities";
|
||||
import defaultPreferences from "$lib/api/default_preferences";
|
||||
|
||||
export let preferences: CustomPreferences;
|
||||
export let status: string;
|
||||
|
||||
let mergedPreferences: CustomPreferences;
|
||||
$: mergedPreferences = Object.assign(defaultPreferences, preferences);
|
||||
|
||||
let currentPreference: CustomPreference;
|
||||
$: currentPreference =
|
||||
status in mergedPreferences ? mergedPreferences[status] : defaultPreferences.missing;
|
||||
|
||||
let classes: string;
|
||||
$: classes = setClasses(currentPreference);
|
||||
|
||||
const setClasses = (pref: CustomPreference) => {
|
||||
let classes = "";
|
||||
if (pref.muted) {
|
||||
classes += "text-muted ";
|
||||
}
|
||||
switch (pref.size) {
|
||||
case PreferenceSize.Large:
|
||||
classes += "fs-5";
|
||||
break;
|
||||
case PreferenceSize.Normal:
|
||||
break;
|
||||
case PreferenceSize.Small:
|
||||
classes += "fs-6";
|
||||
}
|
||||
|
||||
return classes.trim();
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if status === WordStatus.Favourite}
|
||||
<strong class="fs-5"><StatusIcon {status} /> <slot /></strong>
|
||||
{:else if status === WordStatus.Avoid}
|
||||
<span class="fs-6 text-muted"><StatusIcon {status} /> <slot /></span>
|
||||
{#if currentPreference.size === PreferenceSize.Large}
|
||||
<strong class={classes}><StatusIcon {preferences} {status} /> <slot /></strong>
|
||||
{:else}
|
||||
<StatusIcon {status} /> <slot />
|
||||
<span class={classes}><StatusIcon {preferences} {status} /> <slot /></span>
|
||||
{/if}
|
||||
|
|
|
@ -6,7 +6,7 @@ import type { MeUser } from "./api/entities";
|
|||
const initialUserValue = null;
|
||||
export const userStore = writable<MeUser | null>(initialUserValue);
|
||||
|
||||
let defaultThemeValue = "dark";
|
||||
const defaultThemeValue = "dark";
|
||||
const initialThemeValue = browser
|
||||
? window.localStorage.getItem("pronouns-theme") ?? defaultThemeValue
|
||||
: defaultThemeValue;
|
||||
|
|
|
@ -20,10 +20,12 @@
|
|||
MAX_MEMBERS,
|
||||
pronounDisplay,
|
||||
userAvatars,
|
||||
WordStatus,
|
||||
type APIError,
|
||||
type Member,
|
||||
type PartialMember,
|
||||
type CustomPreferences,
|
||||
type FieldEntry,
|
||||
type Pronoun,
|
||||
} from "$lib/api/entities";
|
||||
import { PUBLIC_BASE_URL } from "$env/static/public";
|
||||
import { apiFetchClient } from "$lib/api/fetch";
|
||||
|
@ -34,13 +36,14 @@
|
|||
import ProfileLink from "./ProfileLink.svelte";
|
||||
import { memberNameRegex } from "$lib/api/regex";
|
||||
import StatusLine from "$lib/components/StatusLine.svelte";
|
||||
import defaultPreferences from "$lib/api/default_preferences";
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
let bio: string | null;
|
||||
$: bio = renderMarkdown(data.bio);
|
||||
|
||||
let memberPage: number = 0;
|
||||
let memberPage = 0;
|
||||
let memberSlice: PartialMember[] = [];
|
||||
$: memberSlice = data.members.slice(memberPage * 20, (memberPage + 1) * 20);
|
||||
const totalPages = Math.ceil(data.members.length / 20);
|
||||
|
@ -84,8 +87,17 @@
|
|||
}
|
||||
};
|
||||
|
||||
const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite);
|
||||
const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
|
||||
let mergedPreferences: CustomPreferences;
|
||||
$: mergedPreferences = Object.assign(defaultPreferences, data.custom_preferences);
|
||||
|
||||
let favNames: FieldEntry[];
|
||||
$: favNames = data.names.filter(
|
||||
(entry) => (mergedPreferences[entry.status] || { favourite: false }).favourite,
|
||||
);
|
||||
let favPronouns: Pronoun[];
|
||||
$: favPronouns = data.pronouns.filter(
|
||||
(entry) => (mergedPreferences[entry.status] || { favourite: false }).favourite,
|
||||
);
|
||||
|
||||
let profileEmpty = false;
|
||||
$: profileEmpty =
|
||||
|
@ -146,7 +158,11 @@
|
|||
<h3>Names</h3>
|
||||
<ul class="list-unstyled fs-5">
|
||||
{#each data.names as name}
|
||||
<li><StatusLine status={name.status}>{name.value}</StatusLine></li>
|
||||
<li>
|
||||
<StatusLine preferences={data.custom_preferences} status={name.status}
|
||||
>{name.value}</StatusLine
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
@ -156,14 +172,18 @@
|
|||
<h3>Pronouns</h3>
|
||||
<ul class="list-unstyled fs-5">
|
||||
{#each data.pronouns as pronouns}
|
||||
<li><StatusLine status={pronouns.status}><PronounLink {pronouns} /></StatusLine></li>
|
||||
<li>
|
||||
<StatusLine preferences={data.custom_preferences} status={pronouns.status}
|
||||
><PronounLink {pronouns} /></StatusLine
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
{#each data.fields as field}
|
||||
<div class="col">
|
||||
<FieldCard {field} />
|
||||
<FieldCard preferences={data.custom_preferences} {field} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
@ -2,25 +2,40 @@
|
|||
import FieldCard from "$lib/components/FieldCard.svelte";
|
||||
|
||||
import type { PageData } from "./$types";
|
||||
import StatusIcon from "$lib/components/StatusIcon.svelte";
|
||||
import PronounLink from "$lib/components/PronounLink.svelte";
|
||||
import FallbackImage from "$lib/components/FallbackImage.svelte";
|
||||
import { Alert, Button, Icon } from "sveltestrap";
|
||||
import { memberAvatars, pronounDisplay, WordStatus } from "$lib/api/entities";
|
||||
import {
|
||||
memberAvatars,
|
||||
pronounDisplay,
|
||||
type CustomPreferences,
|
||||
type FieldEntry,
|
||||
type Pronoun,
|
||||
} from "$lib/api/entities";
|
||||
import { PUBLIC_BASE_URL } from "$env/static/public";
|
||||
import { userStore } from "$lib/store";
|
||||
import { renderMarkdown } from "$lib/utils";
|
||||
import ReportButton from "../ReportButton.svelte";
|
||||
import ProfileLink from "../ProfileLink.svelte";
|
||||
import StatusLine from "$lib/components/StatusLine.svelte";
|
||||
import defaultPreferences from "$lib/api/default_preferences";
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
let bio: string | null;
|
||||
$: bio = renderMarkdown(data.bio);
|
||||
|
||||
const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite);
|
||||
const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
|
||||
let mergedPreferences: CustomPreferences;
|
||||
$: mergedPreferences = Object.assign(defaultPreferences, data.user.custom_preferences);
|
||||
|
||||
let favNames: FieldEntry[];
|
||||
$: favNames = data.names.filter(
|
||||
(entry) => (mergedPreferences[entry.status] || { favourite: false }).favourite,
|
||||
);
|
||||
let favPronouns: Pronoun[];
|
||||
$: favPronouns = data.pronouns.filter(
|
||||
(entry) => (mergedPreferences[entry.status] || { favourite: false }).favourite,
|
||||
);
|
||||
|
||||
let profileEmpty = false;
|
||||
$: profileEmpty =
|
||||
|
@ -81,7 +96,11 @@
|
|||
<h3>Names</h3>
|
||||
<ul class="list-unstyled fs-5">
|
||||
{#each data.names as name}
|
||||
<li><StatusLine status={name.status}>{name.value}</StatusLine></li>
|
||||
<li>
|
||||
<StatusLine preferences={data.user.custom_preferences} status={name.status}
|
||||
>{name.value}</StatusLine
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
@ -91,14 +110,18 @@
|
|||
<h3>Pronouns</h3>
|
||||
<ul class="list-unstyled fs-5">
|
||||
{#each data.pronouns as pronouns}
|
||||
<li><StatusLine status={pronouns.status}><PronounLink {pronouns} /></StatusLine></li>
|
||||
<li>
|
||||
<StatusLine preferences={data.user.custom_preferences} status={pronouns.status}
|
||||
><PronounLink {pronouns} /></StatusLine
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
{#each data.fields as field}
|
||||
<div class="col">
|
||||
<FieldCard {field} />
|
||||
<FieldCard preferences={data.user.custom_preferences} {field} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
@ -1,19 +1,20 @@
|
|||
<script lang="ts">
|
||||
import { WordStatus, type Field } from "$lib/api/entities";
|
||||
import type { Field, CustomPreferences } from "$lib/api/entities";
|
||||
import IconButton from "$lib/components/IconButton.svelte";
|
||||
import { Button, Input, InputGroup } from "sveltestrap";
|
||||
import FieldEntry from "./FieldEntry.svelte";
|
||||
|
||||
export let field: Field;
|
||||
export let preferences: CustomPreferences;
|
||||
export let deleteField: () => void;
|
||||
export let moveField: (up: boolean) => void;
|
||||
|
||||
let newEntry: string = "";
|
||||
let newEntry = "";
|
||||
|
||||
const addEntry = (event: Event) => {
|
||||
event.preventDefault();
|
||||
|
||||
field.entries = [...field.entries, { value: newEntry, status: WordStatus.Okay }];
|
||||
field.entries = [...field.entries, { value: newEntry, status: "missing" }];
|
||||
newEntry = "";
|
||||
};
|
||||
|
||||
|
@ -57,6 +58,7 @@
|
|||
<FieldEntry
|
||||
bind:value={field.entries[index].value}
|
||||
bind:status={field.entries[index].status}
|
||||
{preferences}
|
||||
moveUp={() => moveEntry(index, true)}
|
||||
moveDown={() => moveEntry(index, false)}
|
||||
remove={() => removeEntry(index)}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { WordStatus } from "$lib/api/entities";
|
||||
import defaultPreferences from "$lib/api/default_preferences";
|
||||
import type { CustomPreference, CustomPreferences } from "$lib/api/entities";
|
||||
import IconButton from "$lib/components/IconButton.svelte";
|
||||
import {
|
||||
ButtonDropdown,
|
||||
|
@ -11,46 +12,23 @@
|
|||
} from "sveltestrap";
|
||||
|
||||
export let value: string;
|
||||
export let status: WordStatus;
|
||||
export let status: string;
|
||||
export let preferences: CustomPreferences;
|
||||
export let moveUp: () => void;
|
||||
export let moveDown: () => void;
|
||||
export let remove: () => void;
|
||||
|
||||
let buttonElement: HTMLElement;
|
||||
|
||||
const iconFor = (wordStatus: WordStatus) => {
|
||||
switch (wordStatus) {
|
||||
case WordStatus.Favourite:
|
||||
return "heart-fill";
|
||||
case WordStatus.Okay:
|
||||
return "hand-thumbs-up";
|
||||
case WordStatus.Jokingly:
|
||||
return "emoji-laughing";
|
||||
case WordStatus.FriendsOnly:
|
||||
return "people";
|
||||
case WordStatus.Avoid:
|
||||
return "hand-thumbs-down";
|
||||
default:
|
||||
return "hand-thumbs-up";
|
||||
}
|
||||
};
|
||||
let mergedPreferences: CustomPreferences;
|
||||
$: mergedPreferences = Object.assign(defaultPreferences, preferences);
|
||||
|
||||
const textFor = (wordStatus: WordStatus) => {
|
||||
switch (wordStatus) {
|
||||
case WordStatus.Favourite:
|
||||
return "Favourite";
|
||||
case WordStatus.Okay:
|
||||
return "Okay";
|
||||
case WordStatus.Jokingly:
|
||||
return "Jokingly";
|
||||
case WordStatus.FriendsOnly:
|
||||
return "Friends only";
|
||||
case WordStatus.Avoid:
|
||||
return "Avoid";
|
||||
default:
|
||||
return "Okay";
|
||||
}
|
||||
};
|
||||
let currentPreference: CustomPreference;
|
||||
$: currentPreference =
|
||||
status in mergedPreferences ? mergedPreferences[status] : defaultPreferences.missing;
|
||||
|
||||
let preferenceIds: string[];
|
||||
$: preferenceIds = Object.keys(mergedPreferences).filter((s) => s !== "missing");
|
||||
</script>
|
||||
|
||||
<div class="input-group m-1">
|
||||
|
@ -58,30 +36,17 @@
|
|||
<IconButton icon="chevron-down" color="secondary" tooltip="Move name down" click={moveDown} />
|
||||
<input type="text" class="form-control" bind:value />
|
||||
<ButtonDropdown>
|
||||
<Tooltip target={buttonElement} placement="top">{textFor(status)}</Tooltip>
|
||||
<Tooltip target={buttonElement} placement="top">{currentPreference.tooltip}</Tooltip>
|
||||
<DropdownToggle color="secondary" caret bind:inner={buttonElement}>
|
||||
<Icon name={iconFor(status)} />
|
||||
<Icon name={currentPreference.icon} />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu>
|
||||
<DropdownItem
|
||||
on:click={() => (status = WordStatus.Favourite)}
|
||||
active={status === WordStatus.Favourite}>Favourite</DropdownItem
|
||||
>
|
||||
<DropdownItem on:click={() => (status = WordStatus.Okay)} active={status === WordStatus.Okay}
|
||||
>Okay</DropdownItem
|
||||
>
|
||||
<DropdownItem
|
||||
on:click={() => (status = WordStatus.Jokingly)}
|
||||
active={status === WordStatus.Jokingly}>Jokingly</DropdownItem
|
||||
>
|
||||
<DropdownItem
|
||||
on:click={() => (status = WordStatus.FriendsOnly)}
|
||||
active={status === WordStatus.FriendsOnly}>Friends only</DropdownItem
|
||||
>
|
||||
<DropdownItem
|
||||
on:click={() => (status = WordStatus.Avoid)}
|
||||
active={status === WordStatus.Avoid}>Avoid</DropdownItem
|
||||
>
|
||||
{#each preferenceIds as id}
|
||||
<DropdownItem on:click={() => (status = id)} active={status === id}>
|
||||
<Icon name={mergedPreferences[id].icon} aria-hidden />
|
||||
{mergedPreferences[id].tooltip}
|
||||
</DropdownItem>
|
||||
{/each}
|
||||
</DropdownMenu>
|
||||
</ButtonDropdown>
|
||||
<IconButton color="danger" icon="trash3" tooltip="Remove name" click={remove} />
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<script lang="ts">
|
||||
import { WordStatus, type Pronoun, pronounDisplay } from "$lib/api/entities";
|
||||
import defaultPreferences from "$lib/api/default_preferences";
|
||||
import type { Pronoun, CustomPreference, CustomPreferences } from "$lib/api/entities";
|
||||
import IconButton from "$lib/components/IconButton.svelte";
|
||||
import {
|
||||
Button,
|
||||
ButtonDropdown,
|
||||
Collapse,
|
||||
DropdownItem,
|
||||
|
@ -15,6 +15,7 @@
|
|||
} from "sveltestrap";
|
||||
|
||||
export let pronoun: Pronoun;
|
||||
export let preferences: CustomPreferences;
|
||||
export let moveUp: () => void;
|
||||
export let moveDown: () => void;
|
||||
export let remove: () => void;
|
||||
|
@ -23,39 +24,17 @@
|
|||
let displayOpen = false;
|
||||
const toggleDisplay = () => (displayOpen = !displayOpen);
|
||||
|
||||
const iconFor = (wordStatus: WordStatus) => {
|
||||
switch (wordStatus) {
|
||||
case WordStatus.Favourite:
|
||||
return "heart-fill";
|
||||
case WordStatus.Okay:
|
||||
return "hand-thumbs-up";
|
||||
case WordStatus.Jokingly:
|
||||
return "emoji-laughing";
|
||||
case WordStatus.FriendsOnly:
|
||||
return "people";
|
||||
case WordStatus.Avoid:
|
||||
return "hand-thumbs-down";
|
||||
default:
|
||||
return "hand-thumbs-up";
|
||||
}
|
||||
};
|
||||
let mergedPreferences: CustomPreferences;
|
||||
$: mergedPreferences = Object.assign(defaultPreferences, preferences);
|
||||
|
||||
const textFor = (wordStatus: WordStatus) => {
|
||||
switch (wordStatus) {
|
||||
case WordStatus.Favourite:
|
||||
return "Favourite";
|
||||
case WordStatus.Okay:
|
||||
return "Okay";
|
||||
case WordStatus.Jokingly:
|
||||
return "Jokingly";
|
||||
case WordStatus.FriendsOnly:
|
||||
return "Friends only";
|
||||
case WordStatus.Avoid:
|
||||
return "Avoid";
|
||||
default:
|
||||
return "Okay";
|
||||
}
|
||||
};
|
||||
let currentPreference: CustomPreference;
|
||||
$: currentPreference =
|
||||
pronoun.status in mergedPreferences
|
||||
? mergedPreferences[pronoun.status]
|
||||
: defaultPreferences.missing;
|
||||
|
||||
let preferenceIds: string[];
|
||||
$: preferenceIds = Object.keys(mergedPreferences).filter((s) => s !== "missing");
|
||||
</script>
|
||||
|
||||
<div class="input-group m-1">
|
||||
|
@ -75,31 +54,17 @@
|
|||
click={toggleDisplay}
|
||||
/>
|
||||
<ButtonDropdown>
|
||||
<Tooltip target={buttonElement} placement="top">{textFor(pronoun.status)}</Tooltip>
|
||||
<Tooltip target={buttonElement} placement="top">{currentPreference.tooltip}</Tooltip>
|
||||
<DropdownToggle color="secondary" caret bind:inner={buttonElement}>
|
||||
<Icon name={iconFor(pronoun.status)} />
|
||||
<Icon name={currentPreference.icon} />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu>
|
||||
<DropdownItem
|
||||
on:click={() => (pronoun.status = WordStatus.Favourite)}
|
||||
active={pronoun.status === WordStatus.Favourite}>Favourite</DropdownItem
|
||||
>
|
||||
<DropdownItem
|
||||
on:click={() => (pronoun.status = WordStatus.Okay)}
|
||||
active={pronoun.status === WordStatus.Okay}>Okay</DropdownItem
|
||||
>
|
||||
<DropdownItem
|
||||
on:click={() => (pronoun.status = WordStatus.Jokingly)}
|
||||
active={pronoun.status === WordStatus.Jokingly}>Jokingly</DropdownItem
|
||||
>
|
||||
<DropdownItem
|
||||
on:click={() => (pronoun.status = WordStatus.FriendsOnly)}
|
||||
active={pronoun.status === WordStatus.FriendsOnly}>Friends only</DropdownItem
|
||||
>
|
||||
<DropdownItem
|
||||
on:click={() => (pronoun.status = WordStatus.Avoid)}
|
||||
active={pronoun.status === WordStatus.Avoid}>Avoid</DropdownItem
|
||||
>
|
||||
{#each preferenceIds as id}
|
||||
<DropdownItem on:click={() => (pronoun.status = id)} active={pronoun.status === id}>
|
||||
<Icon name={mergedPreferences[id].icon} aria-hidden />
|
||||
{mergedPreferences[id].tooltip}
|
||||
</DropdownItem>
|
||||
{/each}
|
||||
</DropdownMenu>
|
||||
</ButtonDropdown>
|
||||
<IconButton color="danger" icon="trash3" tooltip="Remove pronouns" click={remove} />
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { WordStatus } from "$lib/api/entities";
|
||||
import defaultPreferences from "$lib/api/default_preferences";
|
||||
import type { CustomPreference, CustomPreferences } from "$lib/api/entities";
|
||||
import IconButton from "$lib/components/IconButton.svelte";
|
||||
import {
|
||||
ButtonDropdown,
|
||||
|
@ -11,46 +12,23 @@
|
|||
} from "sveltestrap";
|
||||
|
||||
export let value: string;
|
||||
export let status: WordStatus;
|
||||
export let status: string;
|
||||
export let preferences: CustomPreferences;
|
||||
export let moveUp: () => void;
|
||||
export let moveDown: () => void;
|
||||
export let remove: () => void;
|
||||
|
||||
let buttonElement: HTMLElement;
|
||||
|
||||
const iconFor = (wordStatus: WordStatus) => {
|
||||
switch (wordStatus) {
|
||||
case WordStatus.Favourite:
|
||||
return "heart-fill";
|
||||
case WordStatus.Okay:
|
||||
return "hand-thumbs-up";
|
||||
case WordStatus.Jokingly:
|
||||
return "emoji-laughing";
|
||||
case WordStatus.FriendsOnly:
|
||||
return "people";
|
||||
case WordStatus.Avoid:
|
||||
return "hand-thumbs-down";
|
||||
default:
|
||||
return "hand-thumbs-up";
|
||||
}
|
||||
};
|
||||
let mergedPreferences: CustomPreferences;
|
||||
$: mergedPreferences = Object.assign(defaultPreferences, preferences);
|
||||
|
||||
const textFor = (wordStatus: WordStatus) => {
|
||||
switch (wordStatus) {
|
||||
case WordStatus.Favourite:
|
||||
return "Favourite";
|
||||
case WordStatus.Okay:
|
||||
return "Okay";
|
||||
case WordStatus.Jokingly:
|
||||
return "Jokingly";
|
||||
case WordStatus.FriendsOnly:
|
||||
return "Friends only";
|
||||
case WordStatus.Avoid:
|
||||
return "Avoid";
|
||||
default:
|
||||
return "Okay";
|
||||
}
|
||||
};
|
||||
let currentPreference: CustomPreference;
|
||||
$: currentPreference =
|
||||
status in mergedPreferences ? mergedPreferences[status] : defaultPreferences.missing;
|
||||
|
||||
let preferenceIds: string[];
|
||||
$: preferenceIds = Object.keys(mergedPreferences).filter((s) => s !== "missing");
|
||||
</script>
|
||||
|
||||
<div class="input-group m-1">
|
||||
|
@ -58,30 +36,17 @@
|
|||
<IconButton icon="chevron-down" color="secondary" tooltip="Move entry down" click={moveDown} />
|
||||
<input type="text" class="form-control" bind:value />
|
||||
<ButtonDropdown>
|
||||
<Tooltip target={buttonElement} placement="top">{textFor(status)}</Tooltip>
|
||||
<Tooltip target={buttonElement} placement="top">{currentPreference.tooltip}</Tooltip>
|
||||
<DropdownToggle color="secondary" caret bind:inner={buttonElement}>
|
||||
<Icon name={iconFor(status)} />
|
||||
<Icon name={currentPreference.icon} />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu>
|
||||
<DropdownItem
|
||||
on:click={() => (status = WordStatus.Favourite)}
|
||||
active={status === WordStatus.Favourite}>Favourite</DropdownItem
|
||||
>
|
||||
<DropdownItem on:click={() => (status = WordStatus.Okay)} active={status === WordStatus.Okay}
|
||||
>Okay</DropdownItem
|
||||
>
|
||||
<DropdownItem
|
||||
on:click={() => (status = WordStatus.Jokingly)}
|
||||
active={status === WordStatus.Jokingly}>Jokingly</DropdownItem
|
||||
>
|
||||
<DropdownItem
|
||||
on:click={() => (status = WordStatus.FriendsOnly)}
|
||||
active={status === WordStatus.FriendsOnly}>Friends only</DropdownItem
|
||||
>
|
||||
<DropdownItem
|
||||
on:click={() => (status = WordStatus.Avoid)}
|
||||
active={status === WordStatus.Avoid}>Avoid</DropdownItem
|
||||
>
|
||||
{#each preferenceIds as id}
|
||||
<DropdownItem on:click={() => (status = id)} active={status === id}>
|
||||
<Icon name={mergedPreferences[id].icon} aria-hidden />
|
||||
{mergedPreferences[id].tooltip}
|
||||
</DropdownItem>
|
||||
{/each}
|
||||
</DropdownMenu>
|
||||
</ButtonDropdown>
|
||||
<IconButton color="danger" icon="trash3" tooltip="Remove entry" click={remove} />
|
||||
|
|
|
@ -153,8 +153,7 @@
|
|||
if (list[0].size > MAX_AVATAR_BYTES) {
|
||||
addToast({
|
||||
header: "Avatar too large",
|
||||
body:
|
||||
`This avatar is too large, please resize it (maximum is ${prettyBytes(
|
||||
body: `This avatar is too large, please resize it (maximum is ${prettyBytes(
|
||||
MAX_AVATAR_BYTES,
|
||||
)}, the file you tried to upload is ${prettyBytes(list[0].size)})`,
|
||||
});
|
||||
|
@ -440,6 +439,7 @@
|
|||
<EditableName
|
||||
bind:value={names[index].value}
|
||||
bind:status={names[index].status}
|
||||
preferences={data.user.custom_preferences}
|
||||
moveUp={() => moveName(index, true)}
|
||||
moveDown={() => moveName(index, false)}
|
||||
remove={() => removeName(index)}
|
||||
|
@ -479,6 +479,7 @@
|
|||
{#each pronouns as _, index}
|
||||
<EditablePronouns
|
||||
bind:pronoun={pronouns[index]}
|
||||
preferences={data.user.custom_preferences}
|
||||
moveUp={() => movePronoun(index, true)}
|
||||
moveDown={() => movePronoun(index, false)}
|
||||
remove={() => removePronoun(index)}
|
||||
|
@ -520,6 +521,7 @@
|
|||
{#each fields as _, index}
|
||||
<EditableField
|
||||
bind:field={fields[index]}
|
||||
preferences={data.user.custom_preferences}
|
||||
deleteField={() => removeField(index)}
|
||||
moveField={(up) => moveField(index, up)}
|
||||
/>
|
||||
|
|
|
@ -8,6 +8,8 @@
|
|||
type FieldEntry,
|
||||
type MeUser,
|
||||
type Pronoun,
|
||||
PreferenceSize,
|
||||
type CustomPreferences,
|
||||
} from "$lib/api/entities";
|
||||
import FallbackImage from "$lib/components/FallbackImage.svelte";
|
||||
import { userStore } from "$lib/store";
|
||||
|
@ -37,6 +39,7 @@
|
|||
import { charCount, renderMarkdown } from "$lib/utils";
|
||||
import MarkdownHelp from "../MarkdownHelp.svelte";
|
||||
import prettyBytes from "pretty-bytes";
|
||||
import CustomPreference from "./CustomPreference.svelte";
|
||||
|
||||
const MAX_AVATAR_BYTES = 1_000_000;
|
||||
|
||||
|
@ -52,6 +55,7 @@
|
|||
let pronouns: Pronoun[] = window.structuredClone(data.user.pronouns);
|
||||
let fields: Field[] = window.structuredClone(data.user.fields);
|
||||
let list_private = data.user.list_private;
|
||||
let custom_preferences = window.structuredClone(data.user.custom_preferences);
|
||||
|
||||
let avatar: string | null;
|
||||
let avatar_files: FileList | null;
|
||||
|
@ -60,6 +64,9 @@
|
|||
let newPronouns = "";
|
||||
let newLink = "";
|
||||
|
||||
let preferenceIds: string[];
|
||||
$: preferenceIds = Object.keys(custom_preferences);
|
||||
|
||||
let modified = false;
|
||||
|
||||
$: modified = isModified(
|
||||
|
@ -73,6 +80,7 @@
|
|||
avatar,
|
||||
member_title,
|
||||
list_private,
|
||||
custom_preferences,
|
||||
);
|
||||
$: getAvatar(avatar_files).then((b64) => (avatar = b64));
|
||||
|
||||
|
@ -87,6 +95,7 @@
|
|||
avatar: string | null,
|
||||
member_title: string,
|
||||
list_private: boolean,
|
||||
custom_preferences: CustomPreferences,
|
||||
) => {
|
||||
if (bio !== (user.bio || "")) return true;
|
||||
if (display_name !== (user.display_name || "")) return true;
|
||||
|
@ -95,6 +104,7 @@
|
|||
if (!fieldsEqual(fields, user.fields)) 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;
|
||||
if (avatar !== null) return true;
|
||||
if (list_private !== user.list_private) return true;
|
||||
|
||||
|
@ -136,6 +146,21 @@
|
|||
return arr1.every((_, i) => arr1[i] === arr2[i]);
|
||||
};
|
||||
|
||||
const customPreferencesEqual = (obj1: CustomPreferences, obj2: CustomPreferences) => {
|
||||
return Object.keys(obj1)
|
||||
.map((key) => {
|
||||
if (!(key in obj2)) return false;
|
||||
return (
|
||||
obj1[key].icon === obj2[key].icon &&
|
||||
obj1[key].tooltip === obj2[key].tooltip &&
|
||||
obj1[key].favourite === obj2[key].favourite &&
|
||||
obj1[key].muted === obj2[key].muted &&
|
||||
obj1[key].size === obj2[key].size
|
||||
);
|
||||
})
|
||||
.every((entry) => entry);
|
||||
};
|
||||
|
||||
const getAvatar = async (list: FileList | null) => {
|
||||
if (!list || list.length === 0) return null;
|
||||
if (list[0].size > MAX_AVATAR_BYTES) {
|
||||
|
@ -226,6 +251,19 @@
|
|||
newLink = "";
|
||||
};
|
||||
|
||||
const addPreference = () => {
|
||||
const id = crypto.randomUUID();
|
||||
|
||||
custom_preferences[id] = {
|
||||
icon: "question",
|
||||
tooltip: "New preference",
|
||||
size: PreferenceSize.Normal,
|
||||
muted: false,
|
||||
favourite: false,
|
||||
};
|
||||
custom_preferences = custom_preferences;
|
||||
};
|
||||
|
||||
const removeName = (index: number) => {
|
||||
names.splice(index, 1);
|
||||
names = [...names];
|
||||
|
@ -246,6 +284,11 @@
|
|||
fields = [...fields];
|
||||
};
|
||||
|
||||
const removePreference = (id: string) => {
|
||||
delete custom_preferences[id];
|
||||
custom_preferences = custom_preferences;
|
||||
};
|
||||
|
||||
const updateUser = async () => {
|
||||
const toastId = addToast({
|
||||
header: "Saving changes",
|
||||
|
@ -264,6 +307,7 @@
|
|||
fields,
|
||||
member_title,
|
||||
list_private,
|
||||
custom_preferences,
|
||||
});
|
||||
|
||||
data.user = resp;
|
||||
|
@ -367,6 +411,7 @@
|
|||
<EditableName
|
||||
bind:value={names[index].value}
|
||||
bind:status={names[index].status}
|
||||
preferences={data.user.custom_preferences}
|
||||
moveUp={() => moveName(index, true)}
|
||||
moveDown={() => moveName(index, false)}
|
||||
remove={() => removeName(index)}
|
||||
|
@ -447,6 +492,7 @@
|
|||
{#each fields as _, index}
|
||||
<EditableField
|
||||
bind:field={fields[index]}
|
||||
preferences={data.user.custom_preferences}
|
||||
deleteField={() => removeField(index)}
|
||||
moveField={(up) => moveField(index, up)}
|
||||
/>
|
||||
|
@ -478,7 +524,7 @@
|
|||
</form>
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane tabId="other" tab="Other">
|
||||
<TabPane tabId="other" tab="Preferences & other">
|
||||
<div class="row mt-3">
|
||||
<div class="col-md">
|
||||
<FormGroup floating label={'"Members" header text'}>
|
||||
|
@ -510,5 +556,18 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>
|
||||
Preferences <Button on:click={addPreference} color="success"
|
||||
><Icon name="plus" aria-hidden /> Add new</Button
|
||||
>
|
||||
</h3>
|
||||
{#each preferenceIds as id}
|
||||
<CustomPreference
|
||||
bind:preference={custom_preferences[id]}
|
||||
remove={() => removePreference(id)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</TabPane>
|
||||
</TabContent>
|
||||
|
|
91
frontend/src/routes/edit/profile/CustomPreference.svelte
Normal file
91
frontend/src/routes/edit/profile/CustomPreference.svelte
Normal file
|
@ -0,0 +1,91 @@
|
|||
<script lang="ts">
|
||||
import { PreferenceSize, type CustomPreference } from "$lib/api/entities";
|
||||
import IconButton from "$lib/components/IconButton.svelte";
|
||||
import {
|
||||
ButtonDropdown,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
DropdownToggle,
|
||||
Icon,
|
||||
Input,
|
||||
InputGroup,
|
||||
Tooltip,
|
||||
} from "sveltestrap";
|
||||
import icons from "../../../icons";
|
||||
|
||||
export let preference: CustomPreference;
|
||||
export let remove: () => void;
|
||||
|
||||
let iconButton: HTMLElement;
|
||||
let sizeButton: HTMLElement;
|
||||
|
||||
const toggleMuted = () => (preference.muted = !preference.muted);
|
||||
const toggleFavourite = () => (preference.favourite = !preference.favourite);
|
||||
|
||||
let searchBox = "";
|
||||
let filteredIcons: string[] = [];
|
||||
$: filteredIcons = searchBox
|
||||
? icons
|
||||
.filter((icon) => icon.startsWith(searchBox))
|
||||
.sort()
|
||||
.slice(0, 15)
|
||||
: [];
|
||||
</script>
|
||||
|
||||
<InputGroup class="m-1">
|
||||
<ButtonDropdown>
|
||||
<Tooltip target={iconButton} placement="top">Change icon</Tooltip>
|
||||
<DropdownToggle color="secondary" caret bind:inner={iconButton}>
|
||||
<Icon name={preference.icon} alt="Current icon" />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu>
|
||||
<p class="px-2">
|
||||
<Input type="text" placeholder="Search for icons" bind:value={searchBox} />
|
||||
</p>
|
||||
<DropdownItem divider />
|
||||
{#each filteredIcons as icon}
|
||||
<DropdownItem active={preference.icon === icon} on:click={() => (preference.icon = icon)}
|
||||
><Icon name={icon} alt="Icon: {icon}" /> {icon}</DropdownItem
|
||||
>
|
||||
{:else}
|
||||
<p class="px-2">Start typing to filter</p>
|
||||
{/each}
|
||||
</DropdownMenu>
|
||||
</ButtonDropdown>
|
||||
<input type="text" class="form-control" bind:value={preference.tooltip} />
|
||||
<Tooltip target={sizeButton} placement="top">Change text size</Tooltip>
|
||||
<ButtonDropdown>
|
||||
<DropdownToggle color="secondary" caret bind:inner={sizeButton}>
|
||||
<Icon name="type" alt="Text size" />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu>
|
||||
<DropdownItem
|
||||
active={preference.size === PreferenceSize.Large}
|
||||
on:click={() => (preference.size = PreferenceSize.Large)}>Large</DropdownItem
|
||||
>
|
||||
<DropdownItem
|
||||
active={preference.size === PreferenceSize.Normal}
|
||||
on:click={() => (preference.size = PreferenceSize.Normal)}>Medium</DropdownItem
|
||||
>
|
||||
<DropdownItem
|
||||
active={preference.size === PreferenceSize.Small}
|
||||
on:click={() => (preference.size = PreferenceSize.Small)}>Small</DropdownItem
|
||||
>
|
||||
</DropdownMenu>
|
||||
</ButtonDropdown>
|
||||
<IconButton
|
||||
color="secondary"
|
||||
icon={preference.favourite ? "star-fill" : "star"}
|
||||
click={toggleFavourite}
|
||||
active={preference.favourite}
|
||||
tooltip="Treat like favourite"
|
||||
/>
|
||||
<IconButton
|
||||
color="secondary"
|
||||
icon="fonts"
|
||||
click={toggleMuted}
|
||||
active={preference.muted}
|
||||
tooltip="Show as muted text"
|
||||
/>
|
||||
<IconButton color="danger" icon="trash3" tooltip="Remove preference" click={remove} />
|
||||
</InputGroup>
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
let theme: string;
|
||||
let currentUser: MeUser | null;
|
||||
let showMenu: boolean = false;
|
||||
let showMenu = false;
|
||||
|
||||
let isAdmin = false;
|
||||
let numReports = 0;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import type { Report } from "$lib/api/entities";
|
||||
import { DateTime } from "luxon";
|
||||
import { Button, Card, CardBody, CardFooter, CardHeader } from "sveltestrap";
|
||||
import { Card, CardBody, CardFooter, CardHeader } from "sveltestrap";
|
||||
|
||||
export let report: Report;
|
||||
</script>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import type { APIError } from "$lib/api/entities";
|
||||
import { apiFetchClient, fastFetchClient } from "$lib/api/fetch";
|
||||
import { apiFetchClient } from "$lib/api/fetch";
|
||||
import { DateTime } from "luxon";
|
||||
import {
|
||||
Button,
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import type { APIError } from "$lib/api/entities";
|
||||
import { apiFetchClient, fastFetchClient } from "$lib/api/fetch";
|
||||
import { fastFetchClient } from "$lib/api/fetch";
|
||||
import ErrorAlert from "$lib/components/ErrorAlert.svelte";
|
||||
import { addToast } from "$lib/toast";
|
||||
import { DateTime } from "luxon";
|
||||
|
|
2
go.mod
2
go.mod
|
@ -15,6 +15,7 @@ require (
|
|||
github.com/go-chi/render v1.0.2
|
||||
github.com/gobwas/glob v0.2.3
|
||||
github.com/golang-jwt/jwt/v4 v4.5.0
|
||||
github.com/google/uuid v1.3.0
|
||||
github.com/jackc/pgx/v5 v5.3.1
|
||||
github.com/joho/godotenv v1.5.1
|
||||
github.com/mediocregopher/radix/v4 v4.1.2
|
||||
|
@ -40,7 +41,6 @@ require (
|
|||
github.com/golang/groupcache v0.0.0-20200121045136-8c9f03a8e57e // indirect
|
||||
github.com/golang/protobuf v1.5.3 // indirect
|
||||
github.com/google/s2a-go v0.1.0 // indirect
|
||||
github.com/google/uuid v1.3.0 // indirect
|
||||
github.com/googleapis/enterprise-certificate-proxy v0.2.3 // indirect
|
||||
github.com/gorilla/websocket v1.5.0 // indirect
|
||||
github.com/jackc/pgpassfile v1.0.0 // indirect
|
||||
|
|
5
scripts/migrate/015_custom_preferences.sql
Normal file
5
scripts/migrate/015_custom_preferences.sql
Normal file
|
@ -0,0 +1,5 @@
|
|||
-- +migrate Up
|
||||
|
||||
-- 2023-04-19: Add custom preferences
|
||||
|
||||
alter table users add column custom_preferences jsonb not null default '{}';
|
|
@ -48,7 +48,7 @@ func run(c *cli.Context) error {
|
|||
return err
|
||||
}
|
||||
|
||||
_, err = pg.UpdateUser(ctx, tx, u.ID, ptr("testing"), ptr("This is a bio!"), nil, ptr(false), &[]string{"https://pronouns.cc"}, nil)
|
||||
_, err = pg.UpdateUser(ctx, tx, u.ID, ptr("testing"), ptr("This is a bio!"), nil, ptr(false), &[]string{"https://pronouns.cc"}, nil, nil)
|
||||
if err != nil {
|
||||
fmt.Println("error setting user info:", err)
|
||||
return err
|
||||
|
|
Loading…
Reference in a new issue