From 461de12f548c553115ba1d2c616fd05bb4eff3b4 Mon Sep 17 00:00:00 2001
From: Louis Mollick <louismollick@gmail.com>
Date: Wed, 16 Oct 2024 23:59:02 -0400
Subject: [PATCH] fix: update compound word display

---
 src/app/_components/mangaPageView.tsx      |   4 +-
 src/app/_components/wordReadingCard.tsx    | 120 +++++++++++++++++++++
 src/app/_components/wordReadingContent.tsx |  84 ---------------
 src/types/ichiran.ts                       |   5 +-
 4 files changed, 125 insertions(+), 88 deletions(-)
 create mode 100644 src/app/_components/wordReadingCard.tsx
 delete mode 100644 src/app/_components/wordReadingContent.tsx

diff --git a/src/app/_components/mangaPageView.tsx b/src/app/_components/mangaPageView.tsx
index ce898e5..ad59402 100644
--- a/src/app/_components/mangaPageView.tsx
+++ b/src/app/_components/mangaPageView.tsx
@@ -18,7 +18,7 @@ import {
   DrawerTitle,
 } from "@/app/_components/ui/drawer";
 import { Tabs, TabsList, TabsTrigger } from "@/app/_components/ui/tabs";
-import WordReadingContent from "@/app/_components/wordReadingContent";
+import WordReadingCard from "@/app/_components/wordReadingCard";
 import useKeyPress from "@/app/_hooks/useKeyPress";
 import { cn } from "@/lib/ui/utils";
 import { getPageImagePath, getPageNextJsImagePath } from "@/lib/filepath/utils";
@@ -269,7 +269,7 @@ const MangaPageView = ({
             {wordReadings
               ?.filter(({ isPunctuation }) => !isPunctuation)
               .map((wordReading, idx) => (
-                <WordReadingContent
+                <WordReadingCard
                   key={`wordreading-${idx}`}
                   wordReading={wordReading}
                   onClick={() => {
diff --git a/src/app/_components/wordReadingCard.tsx b/src/app/_components/wordReadingCard.tsx
new file mode 100644
index 0000000..901fd42
--- /dev/null
+++ b/src/app/_components/wordReadingCard.tsx
@@ -0,0 +1,120 @@
+import React, { forwardRef } from "react";
+import type {
+  WordReadingForRender,
+  Conj,
+  Gloss,
+  WordReading,
+} from "@/types/ichiran";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/app/_components/ui/card";
+import { cn } from "@/lib/ui/utils";
+
+function WordGloss({
+  gloss,
+  className,
+  ...props
+}: { gloss?: Gloss[] } & React.HTMLAttributes<HTMLOListElement>) {
+  if (!gloss?.length) return;
+
+  return (
+    <ol className={cn("list-inside list-decimal", className)} {...props}>
+      {gloss.map((gloss, glossIdx) => (
+        <li key={glossIdx} className="mb-1">
+          <span className="mr-1 text-green-600">{gloss.pos}</span>
+          <span>{gloss.gloss}</span>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+function WordConj({ conj }: { conj?: Conj[] }) {
+  if (!conj?.length) return;
+
+  return (
+    <ol>
+      {conj.map((conj, conjIdx) => (
+        <li key={conjIdx}>
+          {!!conj.prop?.length &&
+            conj.prop.map((prop, propIdx) => (
+              <p key={propIdx} className="mb-1">
+                <span className="mr-1 text-green-600">[{prop.pos}]</span>
+                <span>{prop.type}</span>
+              </p>
+            ))}
+          {conj.reading && <p className="font-bold">{conj.reading}</p>}
+          <WordGloss gloss={conj.gloss} className="ml-3 mt-1" />
+          {conj.via?.length && (
+            <div className="ml-4">
+              via
+              <WordConj conj={conj.via} />
+            </div>
+          )}
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+function WordReadingContent({
+  wordReading,
+  showReading = true,
+}: {
+  wordReading: WordReading;
+  showReading?: boolean;
+}) {
+  return (
+    <>
+      {showReading && <p className="py-1 font-bold">{wordReading.reading}</p>}
+      {wordReading.compound?.length && (
+        <p className="my-1">
+          Compound word: {wordReading.compound.join(" + ")}
+        </p>
+      )}
+      {wordReading.components?.length && (
+        <ol>
+          {wordReading.components.map((comp, compIdx) => (
+            <WordReadingContent key={compIdx} wordReading={comp} />
+          ))}
+        </ol>
+      )}
+      {wordReading.suffix && (
+        <p className="ml-3 mt-1">Suffix: {wordReading.suffix}</p>
+      )}
+      <WordConj conj={wordReading.conj} />
+      <WordGloss gloss={wordReading.gloss} />
+    </>
+  );
+}
+
+type Props = {
+  wordReading: WordReadingForRender;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export default forwardRef<HTMLDivElement, Props>(function WordReadingCard(
+  { wordReading, className, ...props },
+  ref,
+) {
+  return (
+    <Card
+      ref={ref}
+      className={cn("max-h-96 select-text", className)}
+      {...props}
+    >
+      <CardHeader>
+        <CardTitle>{wordReading.reading}</CardTitle>
+        {wordReading.romaji && (
+          <CardDescription>{wordReading.romaji}</CardDescription>
+        )}
+      </CardHeader>
+      <CardContent className="max-h-[250px] overflow-y-scroll text-sm">
+        <WordReadingContent wordReading={wordReading} showReading={false} />
+      </CardContent>
+    </Card>
+  );
+});
diff --git a/src/app/_components/wordReadingContent.tsx b/src/app/_components/wordReadingContent.tsx
deleted file mode 100644
index d9cb2ee..0000000
--- a/src/app/_components/wordReadingContent.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { forwardRef } from "react";
-import type { WordReadingForRender } from "@/types/ichiran";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/app/_components/ui/card";
-import { cn } from "@/lib/ui/utils";
-
-type Props = {
-  wordReading: WordReadingForRender;
-} & React.HTMLAttributes<HTMLDivElement>;
-
-export default forwardRef<HTMLDivElement, Props>(function WordReadingContent(
-  { wordReading, className, ...props },
-  ref,
-) {
-  return (
-    <Card ref={ref} className={cn("select-text", className)} {...props}>
-      <CardHeader>
-        <CardTitle>{wordReading.reading}</CardTitle>
-        {wordReading.romaji && (
-          <CardDescription>{wordReading.romaji}</CardDescription>
-        )}
-      </CardHeader>
-      <CardContent className="max-h-[250px] overflow-y-scroll">
-        {wordReading.components?.length && (
-          <ol>
-            {wordReading.components.map(
-              (comp, compIdx) =>
-                !!comp.conj?.length && (
-                  <ol key={`comp-${compIdx}`}>
-                    {comp.conj.map((conj, conjIdx) => (
-                      <li key={`conj-${conjIdx}`}>
-                        <span>{conj.reading}</span>
-                        {!!conj.gloss?.length && (
-                          <ol>
-                            {conj.gloss.map((gloss, glossIdx) => (
-                              <li key={`conj-${conjIdx}-gloss-${glossIdx}`}>{`${
-                                glossIdx + 1
-                              }. ${gloss.pos} ${gloss.gloss}`}</li>
-                            ))}
-                          </ol>
-                        )}
-                      </li>
-                    ))}
-                  </ol>
-                ),
-            )}
-          </ol>
-        )}
-        {!!wordReading.conj?.length && (
-          <ol>
-            {wordReading.conj.map((conj, conjIdx) => (
-              <li key={`conj-${conjIdx}`}>
-                <div>{conj.reading}</div>
-                {!!conj.gloss?.length && (
-                  <ol>
-                    {conj.gloss.map((gloss, glossIdx) => (
-                      <li key={`conj-${conjIdx}-gloss-${glossIdx}`}>{`${
-                        glossIdx + 1
-                      }. ${gloss.pos} ${gloss.gloss}`}</li>
-                    ))}
-                  </ol>
-                )}
-              </li>
-            ))}
-          </ol>
-        )}
-        {!!wordReading.gloss?.length && (
-          <ol>
-            {wordReading.gloss.map((gloss, idx) => (
-              <li key={`gloss-${idx}`}>{`${idx + 1}. ${gloss.pos} ${
-                gloss.gloss
-              }`}</li>
-            ))}
-          </ol>
-        )}
-      </CardContent>
-    </Card>
-  );
-});
diff --git a/src/types/ichiran.ts b/src/types/ichiran.ts
index 19569de..b4d87e1 100644
--- a/src/types/ichiran.ts
+++ b/src/types/ichiran.ts
@@ -13,8 +13,8 @@ export type Word = [
 
 export type WordAlternatives =
   | {
-      alternative: WordReading[];
-    }
+    alternative: WordReading[];
+  }
   | WordReading;
 
 // Raw format we receive fromt Ichiran
@@ -49,6 +49,7 @@ export type Conj = {
   prop: Prop[];
   reading: string;
   gloss?: Gloss[];
+  via?: Conj[];
   readok: boolean;
 };