feat: differentiate okay/avoid preferences more

frontend/src/lib/components/FieldCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Field } from "$lib/api/entities";
 
-  import StatusIcon from "./StatusIcon.svelte";
+  import StatusLine from "./StatusLine.svelte";
 
   export let field: Field;
 </script>
@@ -10,7 +10,7 @@
   <h3>{field.name}</h3>
   <ul class="list-unstyled fs-5">
     {#each field.entries as entry}
-      <li><StatusIcon status={entry.status} /> {entry.value}</li>
+      <li><StatusLine status={entry.status}>{entry.value}</StatusLine></li>
     {/each}
   </ul>
 </div>

frontend/src/lib/components/PronounLink.svelte

@@ -26,7 +26,7 @@
 </script>
 
 {#if shouldLink}
-  <a href="/pronouns/{link}">{pronounText}</a>
+  <a class="text-reset" href="/pronouns/{link}">{pronounText}</a>
 {:else}
   {pronounText}
 {/if}

frontend/src/lib/components/StatusLine.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { WordStatus } from "$lib/api/entities";
+  import StatusIcon from "$lib/components/StatusIcon.svelte";
+
+  export let status: WordStatus;
+</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>
+{:else}
+  <StatusIcon {status} /> <slot />
+{/if}

frontend/src/routes/@[username]/+page.svelte

@@ -33,7 +33,8 @@
   import renderMarkdown from "$lib/api/markdown";
   import ReportButton from "./ReportButton.svelte";
   import ProfileLink from "./ProfileLink.svelte";
-    import { memberNameRegex } from "$lib/api/regex";
+  import { memberNameRegex } from "$lib/api/regex";
+  import StatusLine from "$lib/components/StatusLine.svelte";
 
   export let data: PageData;
 
@@ -146,7 +147,7 @@
           <h3>Names</h3>
           <ul class="list-unstyled fs-5">
             {#each data.names as name}
-              <li><StatusIcon status={name.status} /> {name.value}</li>
+              <li><StatusLine status={name.status}>{name.value}</StatusLine></li>
             {/each}
           </ul>
         </div>
@@ -156,10 +157,7 @@
           <h3>Pronouns</h3>
           <ul class="list-unstyled fs-5">
             {#each data.pronouns as pronouns}
-              <li>
+              <li><StatusLine status={pronouns.status}><PronounLink {pronouns} /></StatusLine></li>
-                <StatusIcon status={pronouns.status} />
-                <PronounLink {pronouns} />
-              </li>
             {/each}
           </ul>
         </div>

frontend/src/routes/@[username]/[memberName]/+page.svelte

@@ -12,6 +12,7 @@
   import renderMarkdown from "$lib/api/markdown";
   import ReportButton from "../ReportButton.svelte";
   import ProfileLink from "../ProfileLink.svelte";
+  import StatusLine from "$lib/components/StatusLine.svelte";
 
   export let data: PageData;
 
@@ -80,7 +81,7 @@
           <h3>Names</h3>
           <ul class="list-unstyled fs-5">
             {#each data.names as name}
-              <li><StatusIcon status={name.status} /> {name.value}</li>
+              <li><StatusLine status={name.status}>{name.value}</StatusLine></li>
             {/each}
           </ul>
         </div>
@@ -90,10 +91,7 @@
           <h3>Pronouns</h3>
           <ul class="list-unstyled fs-5">
             {#each data.pronouns as pronouns}
-              <li>
+              <li><StatusLine status={pronouns.status}><PronounLink {pronouns} /></StatusLine></li>
-                <StatusIcon status={pronouns.status} />
-                <PronounLink {pronouns} />
-              </li>
             {/each}
           </ul>
         </div>