(nouns) show convention in declension popup

assets/dark.scss

@@ -50,10 +50,12 @@ body[data-theme="dark"] {
     color: $light;
 
     --bs-border-color: rgba(66, 70, 73, 0.5);
+    --bs-primary-inverted: #{$primary};
 
     a { color: $primary-dark; }
     a:hover { color: lighten($primary-dark, 10%); }
     .text-primary { color: $primary-dark !important; }
+    .text-light { color: $dark !important; }
     .text-dark { color: $light !important; }
     .btn-primary { color: $light; }
     .btn-primary:hover { color: darken($white, 10%); }

assets/style.scss

@@ -100,6 +100,7 @@ body {
                     rgb(255,255,255)
             );
     min-height: 100vh;
+    --bs-primary-inverted: #{$primary-dark};
 }
 
 .container {
@@ -199,6 +200,10 @@ strike, .text-strike {
     text-decoration: line-through;
 }
 
+.text-primary-inverted {
+    color: var(--bs-primary-inverted) !important;
+}
+
 form[inert] {
     opacity: .5;
 }

components/nouns/NounsDeclension.vue

@@ -2,7 +2,7 @@
 import { loadNounsData } from '~/src/data.ts';
 import { capitalise } from '~/src/helpers.ts';
 import { getFirstDeclension, resolveArticles, resolveDeclensionByCase } from '~/src/nouns.ts';
-import type { NounConvention, Numerus, NounWord } from '~/src/nouns.ts';
+import type { Numerus, NounWord } from '~/src/nouns.ts';
 
 const props = withDefaults(defineProps<{
     word: NounWord;
@@ -15,12 +15,7 @@ const props = withDefaults(defineProps<{
 
 const nounsData = await loadNounsData();
 
-const nounConvention = computed((): WithKey<NounConvention> | undefined => {
-    if (props.word.convention === undefined || nounsData.conventions === undefined) {
-        return undefined;
-    }
-    return { ...nounsData.conventions[props.word.convention], key: props.word.convention };
-});
+const nounConvention = computed(() => getWithKey(nounsData.conventions, props.word.convention));
 
 const articles = computed(() => {
     if (nounConvention.value === undefined) {

components/nouns/NounsWordDisplay.vue

@@ -30,6 +30,8 @@ const abbrs = computed((): Record<string, string | null> => dissectedWord.value.
 const mainWord = computed((): NounWord => dissectedWord.value.mainWord);
 
 const declensionByCase = computed(() => resolveDeclensionByCase(mainWord.value, props.numerus, nounsData));
+
+const nounConvention = computed(() => getWithKey(nounsData.conventions, mainWord.value.convention));
 </script>
 
 <template>
@@ -39,6 +41,11 @@ const declensionByCase = computed(() => resolveDeclensionByCase(mainWord.value,
             {{ ' ' }}
         </template><Spelling :text="resolveFirstDeclension(mainWord, numerus, nounsData)" />
         <template v-if="declensionByCase" #content>
+            <template v-if="nounConvention">
+                <NuxtLink :to="nounConvention.key" class="text-primary-inverted">
+                    <Spelling :text="nounConvention.name" />
+                </NuxtLink>
+            </template>
             <NounsDeclension
                 v-if="config.nouns.declension?.enabled"
                 :word="mainWord"

utils/getWithKey.ts

@@ -0,0 +1,8 @@
+import type { WithKey } from '~/utils/withKey.ts';
+
+export default <T>(record: Record<string, T> | undefined, key: string | undefined): WithKey<T> | undefined => {
+    if (key === undefined || record?.[key] === undefined) {
+        return undefined;
+    }
+    return { ...record[key], key };
+};