feat(frontend): show custom preferences

frontend/src/lib/components/FieldCard.svelte

@@ -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>

frontend/src/lib/components/StatusIcon.svelte

@@ -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.okay;
 
   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>

frontend/src/lib/components/StatusLine.svelte

@@ -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.okay;
+
+  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}