feat(frontend): show custom preferences

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>