From fd352fe7dc022edce762cc7aadc026a9aade13c7 Mon Sep 17 00:00:00 2001
From: Valentyne Stigloher <pixunil@posteo.eu>
Date: Fri, 9 May 2025 23:25:33 +0200
Subject: [PATCH] (refactor) use <NounsTableEntry> in polish noun pages

---
 components/nouns/NounsGenderLabel.vue |  15 ++-
 components/nouns/NounsItem.vue        |   9 +-
 locale/pl/nouns/dukatywy.vue          | 151 ++++++--------------------
 locale/pl/nouns/iksatywy.vue          | 151 ++++++--------------------
 locale/pl/nouns/osobatywy.vue         |  79 ++++----------
 src/injectionKeys.ts                  |   1 +
 6 files changed, 103 insertions(+), 303 deletions(-)

diff --git a/components/nouns/NounsGenderLabel.vue b/components/nouns/NounsGenderLabel.vue
index 020176850..e3fc5b674 100644
--- a/components/nouns/NounsGenderLabel.vue
+++ b/components/nouns/NounsGenderLabel.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { neutralGenderNameInjectionKey } from '~/src/injectionKeys.ts';
 import { iconNamesByGender, longIdentifierByGender } from '~/src/nouns.ts';
 import type { Gender } from '~/src/nouns.ts';
 
@@ -7,20 +8,30 @@ const props = defineProps<{
     concise?: boolean;
 }>();
 
+const { $translator: translator } = useNuxtApp();
+
+const neutralGenderName = inject(neutralGenderNameInjectionKey, undefined);
+
 const iconName = computed((): string => {
     return iconNamesByGender[props.gender];
 });
 const longIdentifier = computed((): string => {
     return longIdentifierByGender[props.gender];
 });
+const name = computed((): string => {
+    if (props.gender === 'neutr' && neutralGenderName !== undefined) {
+        return neutralGenderName;
+    }
+    return translator.translate(`nouns.${longIdentifier.value}`);
+});
 </script>
 
 <template>
-    <Tooltip v-if="concise" :text="$t(`nouns.${longIdentifier}`)">
+    <Tooltip v-if="concise" :text="name">
         <Icon :v="iconName" />
     </Tooltip>
     <div v-else class="text-nowrap">
         <Icon :v="iconName" />
-        <span><T>nouns.{{ longIdentifier }}</T></span>
+        <span>{{ name }}</span>
     </div>
 </template>
diff --git a/components/nouns/NounsItem.vue b/components/nouns/NounsItem.vue
index 25d91f0c7..bf8c2c141 100644
--- a/components/nouns/NounsItem.vue
+++ b/components/nouns/NounsItem.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { MinimalNoun } from '~/src/classes.ts';
+import type { Noun } from '~/src/classes.ts';
 import type { Gender } from '~/src/nouns.ts';
 
 defineProps<{
-    noun: MinimalNoun;
+    noun: Noun;
     gender: Gender;
     plural?: boolean;
 }>();
@@ -17,8 +17,9 @@ const config = useConfig();
             <Abbreviation v-slot="{ word }" :v="w">
                 <NounsDeclension
                     v-if="gender === 'neutr' && config.nouns.declension"
-                    :word="word"
-                    :plural="plural"
+                    :word
+                    :plural
+                    :template="noun.declension"
                     tooltip
                 />
                 <Spelling v-else :text="word" />
diff --git a/locale/pl/nouns/dukatywy.vue b/locale/pl/nouns/dukatywy.vue
index 09ed88630..7e64d8c59 100644
--- a/locale/pl/nouns/dukatywy.vue
+++ b/locale/pl/nouns/dukatywy.vue
@@ -8,7 +8,8 @@ import useConfig from '~/composables/useConfig.ts';
 import type { NounTemplatesData } from '~/locale/data.ts';
 import { Noun, NounDeclension, SourceLibrary } from '~/src/classes.ts';
 import type { NounRaw, Source } from '~/src/classes.ts';
-import { gendersWithNumerus } from '~/src/nouns.ts';
+import { neutralGenderNameInjectionKey } from '~/src/injectionKeys.ts';
+import { availableGenders, gendersWithNumerus } from '~/src/nouns.ts';
 
 const dukajDeclension = new NounDeclension({
     M: 'u',
@@ -68,6 +69,8 @@ useSimpleHead({
     description: translator.translate('nouns.dukajNouns.info')[0],
 }, translator);
 
+provide(neutralGenderNameInjectionKey, translator.translate('nouns.dukajNouns.label'));
+
 const dukajNouns = [
     new Noun(config, {
         id: 'astronauta',
@@ -247,65 +250,22 @@ onMounted(async () => {
                     <T>nouns.examples</T>
                 </h4>
             </summary>
-            <div class="border-top table-responsive">
-                <table class="table table-striped table-hover table-fixed-3">
-                    <thead>
-                        <tr>
-                            <th class="text-nowrap">
-                                <Icon v="mars" />
-                                <T>nouns.masculine</T>
-                            </th>
-                            <th class="text-nowrap">
-                                <Icon v="venus" />
-                                <T>nouns.feminine</T>
-                            </th>
-                            <th class="text-nowrap">
-                                <Icon v="neuter" />
-                                <T>nouns.dukajNouns.label</T>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="noun in dukajNouns" :key="noun.id">
-                            <td>
-                                <ul class="list-singular ps-0">
-                                    <li v-for="w in noun.masc">
-                                        {{ w }}
-                                    </li>
-                                </ul>
-                                <ul class="list-plural ps-0">
-                                    <li v-for="w in noun.mascPl">
-                                        {{ w }}
-                                    </li>
-                                </ul>
-                            </td>
-                            <td>
-                                <ul class="list-singular ps-0">
-                                    <li v-for="w in noun.fem">
-                                        {{ w }}
-                                    </li>
-                                </ul>
-                                <ul class="list-plural ps-0">
-                                    <li v-for="w in noun.femPl">
-                                        {{ w }}
-                                    </li>
-                                </ul>
-                            </td>
-                            <td>
-                                <ul class="list-singular ps-0">
-                                    <li v-for="w in noun.neutr">
-                                        <NounsDeclension :word="w" :template="noun.declension" />
-                                    </li>
-                                </ul>
-                                <ul class="list-plural ps-0">
-                                    <li v-for="w in noun.neutrPl">
-                                        <NounsDeclension :word="w" plural :singular-options="noun.neutr" :template="noun.declension" />
-                                    </li>
-                                </ul>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
+            <div class="border-top table-responsive nouns-table">
+                <div class="container">
+                    <div class="row-header p-2 d-grid gap-2 border-top">
+                        <div v-for="gender of availableGenders(config)" :key="gender" class="d-none d-md-block bold">
+                            <NounsGenderLabel :gender />
+                        </div>
+                    </div>
+                    <div></div>
+                    <div
+                        v-for="noun of dukajNouns"
+                        :key="noun.id"
+                        class="row-content p-2 d-grid gap-2 border-top"
+                    >
+                        <NounsTableEntry :noun />
+                    </div>
+                </div>
             </div>
         </details>
 
@@ -347,65 +307,18 @@ onMounted(async () => {
                 <div class="form-group">
                     <input v-model="generatorWord" class="form-control" placeholder="Wpisz rzeczownik w rodzaju męskim liczby pojedynczej">
                 </div>
-                <div v-if="generatorResult" class="table-responsive">
-                    <table class="table table-fixed-3">
-                        <thead>
-                            <tr>
-                                <th class="text-nowrap">
-                                    <Icon v="mars" />
-                                    <T>nouns.masculine</T>
-                                </th>
-                                <th class="text-nowrap">
-                                    <Icon v="venus" />
-                                    <T>nouns.feminine</T>
-                                </th>
-                                <th class="text-nowrap">
-                                    <Icon v="neuter" />
-                                    <T>nouns.dukajNouns.label</T>
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <ul class="list-singular ps-0">
-                                        <li v-for="w in generatorResult.masc">
-                                            {{ w }}
-                                        </li>
-                                    </ul>
-                                    <ul class="list-plural ps-0">
-                                        <li v-for="w in generatorResult.mascPl">
-                                            {{ w }}
-                                        </li>
-                                    </ul>
-                                </td>
-                                <td>
-                                    <ul class="list-singular ps-0">
-                                        <li v-for="w in generatorResult.fem">
-                                            {{ w }}
-                                        </li>
-                                    </ul>
-                                    <ul class="list-plural ps-0">
-                                        <li v-for="w in generatorResult.femPl">
-                                            {{ w }}
-                                        </li>
-                                    </ul>
-                                </td>
-                                <td>
-                                    <ul class="list-singular ps-0">
-                                        <li v-for="w in generatorResult.neutr">
-                                            <NounsDeclension :word="w" :template="generatorResult.declension" />
-                                        </li>
-                                    </ul>
-                                    <ul class="list-plural ps-0">
-                                        <li v-for="w in generatorResult.neutrPl">
-                                            <NounsDeclension :word="w" :template="generatorResult.declension" plural />
-                                        </li>
-                                    </ul>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
+                <div v-if="generatorResult" class="table-responsive nouns-table">
+                    <div class="container">
+                        <div class="row-header p-2 d-grid gap-2 border-top">
+                            <div v-for="gender of availableGenders(config)" :key="gender" class="d-none d-md-block bold">
+                                <NounsGenderLabel :gender />
+                            </div>
+                        </div>
+                        <div></div>
+                        <div class="row-content p-2 d-grid gap-2 border-top">
+                            <NounsTableEntry :noun="generatorResult" />
+                        </div>
+                    </div>
                 </div>
                 <div v-else class="alert alert-warning">
                     <p class="mb-0">
diff --git a/locale/pl/nouns/iksatywy.vue b/locale/pl/nouns/iksatywy.vue
index a307feef8..9da8fc7d5 100644
--- a/locale/pl/nouns/iksatywy.vue
+++ b/locale/pl/nouns/iksatywy.vue
@@ -8,7 +8,8 @@ import useConfig from '~/composables/useConfig.ts';
 import type { NounTemplatesData } from '~/locale/data.ts';
 import { Noun, NounDeclension, SourceLibrary } from '~/src/classes.ts';
 import type { NounRaw, Source } from '~/src/classes.ts';
-import { gendersWithNumerus } from '~/src/nouns.ts';
+import { neutralGenderNameInjectionKey } from '~/src/injectionKeys.ts';
+import { availableGenders, gendersWithNumerus } from '~/src/nouns.ts';
 
 const xDeclension = new NounDeclension({
     M: 'x',
@@ -53,6 +54,8 @@ useSimpleHead({
     description: translator.translate('nouns.xNouns.info')[0],
 }, translator);
 
+provide(neutralGenderNameInjectionKey, translator.translate('nouns.xNouns.label'));
+
 const xNouns = [
     new Noun(config, {
         id: 'astronauta',
@@ -203,65 +206,22 @@ onMounted(async () => {
                     <T>nouns.examples</T>
                 </h4>
             </summary>
-            <div class="border-top table-responsive">
-                <table class="table table-striped table-hover table-fixed-3">
-                    <thead>
-                        <tr>
-                            <th class="text-nowrap">
-                                <Icon v="mars" />
-                                <T>nouns.masculine</T>
-                            </th>
-                            <th class="text-nowrap">
-                                <Icon v="venus" />
-                                <T>nouns.feminine</T>
-                            </th>
-                            <th class="text-nowrap">
-                                <Icon v="neuter" />
-                                <T>nouns.xNouns.label</T>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="noun in xNouns" :key="noun.id">
-                            <td>
-                                <ul class="list-singular ps-0">
-                                    <li v-for="w in noun.masc">
-                                        {{ w }}
-                                    </li>
-                                </ul>
-                                <ul class="list-plural ps-0">
-                                    <li v-for="w in noun.mascPl">
-                                        {{ w }}
-                                    </li>
-                                </ul>
-                            </td>
-                            <td>
-                                <ul class="list-singular ps-0">
-                                    <li v-for="w in noun.fem">
-                                        {{ w }}
-                                    </li>
-                                </ul>
-                                <ul class="list-plural ps-0">
-                                    <li v-for="w in noun.femPl">
-                                        {{ w }}
-                                    </li>
-                                </ul>
-                            </td>
-                            <td>
-                                <ul class="list-singular ps-0">
-                                    <li v-for="w in noun.neutr">
-                                        <NounsDeclension :word="w" :template="noun.declension" />
-                                    </li>
-                                </ul>
-                                <ul class="list-plural ps-0">
-                                    <li v-for="w in noun.neutrPl">
-                                        <NounsDeclension :word="w" plural :singular-options="noun.neutr" :template="noun.declension" />
-                                    </li>
-                                </ul>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
+            <div class="border-top table-responsive nouns-table">
+                <div class="container">
+                    <div class="row-header p-2 d-grid gap-2 border-top">
+                        <div v-for="gender of availableGenders(config)" :key="gender" class="d-none d-md-block bold">
+                            <NounsGenderLabel :gender />
+                        </div>
+                    </div>
+                    <div></div>
+                    <div
+                        v-for="noun of xNouns"
+                        :key="noun.id"
+                        class="row-content p-2 d-grid gap-2 border-top"
+                    >
+                        <NounsTableEntry :noun />
+                    </div>
+                </div>
             </div>
         </details>
 
@@ -303,65 +263,18 @@ onMounted(async () => {
                 <div class="form-group">
                     <input v-model="generatorWord" class="form-control" placeholder="Wpisz rzeczownik w rodzaju męskim liczby pojedynczej">
                 </div>
-                <div v-if="generatorResult" class="table-responsive">
-                    <table class="table table-fixed-3">
-                        <thead>
-                            <tr>
-                                <th class="text-nowrap">
-                                    <Icon v="mars" />
-                                    <T>nouns.masculine</T>
-                                </th>
-                                <th class="text-nowrap">
-                                    <Icon v="venus" />
-                                    <T>nouns.feminine</T>
-                                </th>
-                                <th class="text-nowrap">
-                                    <Icon v="neuter" />
-                                    <T>nouns.xNouns.label</T>
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <ul class="list-singular ps-0">
-                                        <li v-for="w in generatorResult.masc">
-                                            {{ w }}
-                                        </li>
-                                    </ul>
-                                    <ul class="list-plural ps-0">
-                                        <li v-for="w in generatorResult.mascPl">
-                                            {{ w }}
-                                        </li>
-                                    </ul>
-                                </td>
-                                <td>
-                                    <ul class="list-singular ps-0">
-                                        <li v-for="w in generatorResult.fem">
-                                            {{ w }}
-                                        </li>
-                                    </ul>
-                                    <ul class="list-plural ps-0">
-                                        <li v-for="w in generatorResult.femPl">
-                                            {{ w }}
-                                        </li>
-                                    </ul>
-                                </td>
-                                <td>
-                                    <ul class="list-singular ps-0">
-                                        <li v-for="w in generatorResult.neutr">
-                                            <NounsDeclension :word="w" :template="generatorResult.declension" />
-                                        </li>
-                                    </ul>
-                                    <ul class="list-plural ps-0">
-                                        <li v-for="w in generatorResult.neutrPl">
-                                            <NounsDeclension :word="w" :template="generatorResult.declension" plural />
-                                        </li>
-                                    </ul>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
+                <div v-if="generatorResult" class="table-responsive nouns-table">
+                    <div class="container">
+                        <div class="row-header p-2 d-grid gap-2 border-top">
+                            <div v-for="gender of availableGenders(config)" :key="gender" class="d-none d-md-block bold">
+                                <NounsGenderLabel :gender />
+                            </div>
+                        </div>
+                        <div></div>
+                        <div class="row-content p-2 d-grid gap-2 border-top">
+                            <NounsTableEntry :noun="generatorResult" />
+                        </div>
+                    </div>
                 </div>
                 <div v-else class="alert alert-warning">
                     <p class="mb-0">
diff --git a/locale/pl/nouns/osobatywy.vue b/locale/pl/nouns/osobatywy.vue
index a7abd2d71..c7a5b4cbf 100644
--- a/locale/pl/nouns/osobatywy.vue
+++ b/locale/pl/nouns/osobatywy.vue
@@ -6,6 +6,8 @@ import NounsNav from './NounsNav.vue';
 import useConfig from '~/composables/useConfig.ts';
 import { Noun, SourceLibrary } from '~/src/classes.ts';
 import type { Source } from '~/src/classes.ts';
+import { neutralGenderNameInjectionKey } from '~/src/injectionKeys.ts';
+import { availableGenders } from '~/src/nouns.ts';
 
 const { $translator: translator } = useNuxtApp();
 useSimpleHead({
@@ -15,6 +17,8 @@ useSimpleHead({
 
 const config = useConfig();
 
+provide(neutralGenderNameInjectionKey, translator.translate('nouns.personNouns.label'));
+
 const personNouns = [
     new Noun(config, {
         id: 'kandydat',
@@ -98,65 +102,22 @@ onMounted(async () => {
                     <T>nouns.examples</T>
                 </h4>
             </summary>
-            <div class="border-top table-responsive">
-                <table class="table table-striped table-hover table-fixed-3">
-                    <thead>
-                        <tr>
-                            <th class="text-nowrap">
-                                <Icon v="mars" />
-                                <T>nouns.masculine</T>
-                            </th>
-                            <th class="text-nowrap">
-                                <Icon v="venus" />
-                                <T>nouns.feminine</T>
-                            </th>
-                            <th class="text-nowrap">
-                                <Icon v="neuter" />
-                                <T>nouns.personNouns.label</T>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="noun in personNouns" :key="noun.id">
-                            <td>
-                                <ul class="list-singular ps-0">
-                                    <li v-for="w in noun.masc">
-                                        {{ w }}
-                                    </li>
-                                </ul>
-                                <ul class="list-plural ps-0">
-                                    <li v-for="w in noun.mascPl">
-                                        {{ w }}
-                                    </li>
-                                </ul>
-                            </td>
-                            <td>
-                                <ul class="list-singular ps-0">
-                                    <li v-for="w in noun.fem">
-                                        {{ w }}
-                                    </li>
-                                </ul>
-                                <ul class="list-plural ps-0">
-                                    <li v-for="w in noun.femPl">
-                                        {{ w }}
-                                    </li>
-                                </ul>
-                            </td>
-                            <td>
-                                <ul class="list-singular ps-0">
-                                    <li v-for="w in noun.neutr">
-                                        {{ w }}
-                                    </li>
-                                </ul>
-                                <ul class="list-plural ps-0">
-                                    <li v-for="w in noun.neutrPl">
-                                        {{ w }}
-                                    </li>
-                                </ul>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
+            <div class="border-top table-responsive nouns-table">
+                <div class="container">
+                    <div class="row-header p-2 d-grid gap-2 border-top">
+                        <div v-for="gender of availableGenders(config)" :key="gender" class="d-none d-md-block bold">
+                            <NounsGenderLabel :gender />
+                        </div>
+                    </div>
+                    <div></div>
+                    <div
+                        v-for="noun of personNouns"
+                        :key="noun.id"
+                        class="row-content p-2 d-grid gap-2 border-top"
+                    >
+                        <NounsTableEntry :noun />
+                    </div>
+                </div>
             </div>
         </details>
 
diff --git a/src/injectionKeys.ts b/src/injectionKeys.ts
index 7609a002d..d3100e406 100644
--- a/src/injectionKeys.ts
+++ b/src/injectionKeys.ts
@@ -9,5 +9,6 @@ export const changeSourceInjectionKey = Symbol() as InjectionKey<{
     remove: (source: Source) => void;
     edit: (source: Source) => void;
 }>;
+export const neutralGenderNameInjectionKey = Symbol() as InjectionKey<string>;
 
 export const adminStorageRefreshInjectionKey = Symbol() as InjectionKey<() => Promise<void>>;