pr feedback nits #16

arches_lingo/src/arches_lingo/components/schemes/SchemeBox.vue

@@ -1,29 +1,38 @@
 <script setup lang="ts">
+import { inject } from "vue";
+import { getDescriptors } from "@/arches_vue_utils/utils.ts";
+import { systemLanguageKey } from "@/arches_lingo/constants.ts";
 import { routeNames } from "@/arches_lingo/routes.ts";
 
-// TODO: Shift into types.ts
-interface Scheme {
-    resourceinstanceid: string;
-    descriptors: {
-        [key: string]: {
-            name: string;
-            description: string;
-        };
-    };
-}
+import type { Language } from "@/arches_vue_utils/types";
+import type { SchemeDescriptor } from "@/arches_lingo/types";
+
+const systemLanguage = inject(systemLanguageKey) as Language;
 
-const { scheme } = defineProps<{ scheme: Scheme }>();
+const { scheme } = defineProps<{ scheme: SchemeDescriptor }>();
 const schemeURL = {
     name: routeNames.scheme,
     params: { id: scheme.resourceinstanceid },
 };
+const [schemeName, schemeDescription] = getDescriptors(
+    scheme.descriptors,
+    systemLanguage.code,
+);
 </script>
 
 <template>
-    <div>
-        <RouterLink :to="schemeURL">
-            <p>{{ scheme.descriptors.en.name }}</p>
-        </RouterLink>
-        <p>{{ scheme.descriptors.en.description }}</p>
-    </div>
+    <RouterLink
+        :to="schemeURL"
+        style="text-align: center"
+    >
+        <p>{{ schemeName }}</p>
+        <p>{{ schemeDescription }}</p>
+    </RouterLink>
 </template>
+
+<style scoped>
+a {
+    text-decoration: none;
+    color: var(--p-text-color);
+}
+</style>

arches_lingo/src/arches_lingo/components/schemes/SchemeBoxes.vue

@@ -16,7 +16,12 @@ const schemes = await fetchSchemes();
             "
         >
             <!-- Create New Scheme -->
-            <li class="scheme-card">Placeholder for creating new scheme</li>
+            <li
+                class="scheme-card"
+                style="text-align: center"
+            >
+                Placeholder for creating new scheme
+            </li>
             <!-- Existing Schemes -->
             <li
                 v-for="scheme in schemes"
@@ -31,9 +36,9 @@ const schemes = await fetchSchemes();
 
 <style scoped>
 .scheme-card {
-    margin: 1rem;
+    margin: 0.5rem;
     padding: 1rem;
-    border: 1px solid var(--p-menubar-border-color);
+    border: 0.0625rem solid var(--p-menubar-border-color);
     min-width: 300px;
     display: flex;
     flex-direction: column;

arches_lingo/src/arches_lingo/pages/SchemeList.vue

@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import ProgressSpinner from "primevue/progressspinner";
 import SchemeBoxes from "@/arches_lingo/components/schemes/SchemeBoxes.vue";
 </script>
 
 <template>
     <Suspense>
         <SchemeBoxes />
-        <template #fallback>
-            <ProgressSpinner />
-        </template>
     </Suspense>
 </template>

arches_lingo/src/arches_lingo/types.ts

@@ -66,6 +66,16 @@ export interface SchemeNamespace {
 
 export type DataComponentMode = "edit" | "view";
 
+export interface SchemeDescriptor {
+    resourceinstanceid: string;
+    descriptors: {
+        [key: string]: {
+            name: string;
+            description: string;
+        };
+    };
+}
+
 export interface NodeAndParentInstruction {
     node: TreeNode;
     shouldHideSiblings: boolean;