From b1e267cb29d6a5e561079561f04ddbbeb569de20 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Thu, 30 Mar 2023 23:10:13 +0200
Subject: [PATCH] feat: differentiate okay/avoid preferences more

---
 frontend/src/lib/components/FieldCard.svelte       |  4 ++--
 frontend/src/lib/components/PronounLink.svelte     |  2 +-
 frontend/src/lib/components/StatusLine.svelte      | 14 ++++++++++++++
 frontend/src/routes/@[username]/+page.svelte       | 10 ++++------
 .../routes/@[username]/[memberName]/+page.svelte   |  8 +++-----
 5 files changed, 24 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/lib/components/StatusLine.svelte

diff --git a/frontend/src/lib/components/FieldCard.svelte b/frontend/src/lib/components/FieldCard.svelte
index a8af4d6..9d2a9f5 100644
--- a/frontend/src/lib/components/FieldCard.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/PronounLink.svelte b/frontend/src/lib/components/PronounLink.svelte
index 30431fe..317dc19 100644
--- a/frontend/src/lib/components/PronounLink.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/StatusLine.svelte b/frontend/src/lib/components/StatusLine.svelte
new file mode 100644
index 0000000..ada28f6
--- /dev/null
+++ b/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}
diff --git a/frontend/src/routes/@[username]/+page.svelte b/frontend/src/routes/@[username]/+page.svelte
index 0e9c5c4..5235b7d 100644
--- a/frontend/src/routes/@[username]/+page.svelte
+++ b/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>
-                <StatusIcon status={pronouns.status} />
-                <PronounLink {pronouns} />
-              </li>
+              <li><StatusLine status={pronouns.status}><PronounLink {pronouns} /></StatusLine></li>
             {/each}
           </ul>
         </div>
diff --git a/frontend/src/routes/@[username]/[memberName]/+page.svelte b/frontend/src/routes/@[username]/[memberName]/+page.svelte
index 388e086..f71fc5f 100644
--- a/frontend/src/routes/@[username]/[memberName]/+page.svelte
+++ b/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>
-                <StatusIcon status={pronouns.status} />
-                <PronounLink {pronouns} />
-              </li>
+              <li><StatusLine status={pronouns.status}><PronounLink {pronouns} /></StatusLine></li>
             {/each}
           </ul>
         </div>