Added more info for scans of covers

src/components/Library/ScanSetCover.tsx

@@ -1,5 +1,8 @@
+import Chip from "components/Chip";
 import Img, { getAssetURL, ImageQuality } from "components/Img";
 import LanguageSwitcher from "components/LanguageSwitcher";
+import RecorderChip from "components/RecorderChip";
+import ToolTip from "components/ToolTip";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import {
   GetLibraryItemScansQuery,
@@ -7,7 +10,7 @@ import {
 } from "graphql/generated";
 import { useRouter } from "next/router";
 import { AppStaticProps } from "queries/getAppStaticProps";
-import { getPreferredLanguage } from "queries/helpers";
+import { getPreferredLanguage, getStatusDescription } from "queries/helpers";
 import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
 
 interface Props {
@@ -69,13 +72,13 @@ export default function ScanSetCover(props: Props): JSX.Element {
 
   const coverImages: UploadImageFragment[] = [];
   if (selectedScan?.obi_belt?.full?.data?.attributes)
-  coverImages.push(selectedScan.obi_belt?.full?.data?.attributes);
+    coverImages.push(selectedScan.obi_belt?.full?.data?.attributes);
   if (selectedScan?.obi_belt?.inside_full?.data?.attributes)
-  coverImages.push(selectedScan.obi_belt?.inside_full?.data?.attributes);
+    coverImages.push(selectedScan.obi_belt?.inside_full?.data?.attributes);
   if (selectedScan?.dust_jacket?.full?.data?.attributes)
-  coverImages.push(selectedScan.dust_jacket?.full?.data?.attributes);
+    coverImages.push(selectedScan.dust_jacket?.full?.data?.attributes);
   if (selectedScan?.dust_jacket?.inside_full?.data?.attributes)
-  coverImages.push(selectedScan.dust_jacket?.inside_full?.data?.attributes);
+    coverImages.push(selectedScan.dust_jacket?.inside_full?.data?.attributes);
   if (selectedScan?.cover?.full?.data?.attributes)
     coverImages.push(selectedScan.cover?.full?.data?.attributes);
   if (selectedScan?.cover?.inside_full?.data?.attributes)
@@ -87,7 +90,16 @@ export default function ScanSetCover(props: Props): JSX.Element {
         {selectedScan && (
           <div>
             <div className="flex flex-row flex-wrap place-items-center gap-6 text-base pt-10 first-of-type:pt-0">
-              <h2 className="text-2xl">{"Cover"}</h2>
+              <h2 id={"cover"} className="text-2xl">
+                {"Cover"}
+              </h2>
+
+              <Chip>
+                {selectedScan.language?.data?.attributes?.code ===
+                selectedScan.source_language?.data?.attributes?.code
+                  ? "Scan"
+                  : "Scanlation"}
+              </Chip>
             </div>
 
             <div className="flex flex-row flex-wrap gap-4 pb-6 place-items-center">
@@ -97,6 +109,74 @@ export default function ScanSetCover(props: Props): JSX.Element {
                 localesIndex={selectedScanIndex}
                 setLocalesIndex={setSelectedScanIndex}
               />
+
+              <div className="grid place-items-center place-content-center">
+                <p className="font-headers">{langui.status}:</p>
+                <ToolTip
+                  content={getStatusDescription(selectedScan.status, langui)}
+                  maxWidth={"20rem"}
+                >
+                  <Chip>{selectedScan.status}</Chip>
+                </ToolTip>
+              </div>
+
+              {selectedScan.scanners && selectedScan.scanners.data.length > 0 && (
+                <div>
+                  <p className="font-headers">{"Scanners"}:</p>
+                  <div className="grid place-items-center place-content-center gap-2">
+                    {selectedScan.scanners.data.map((scanner) => (
+                      <>
+                        {scanner.attributes && (
+                          <RecorderChip
+                            key={scanner.id}
+                            langui={langui}
+                            recorder={scanner.attributes}
+                          />
+                        )}
+                      </>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {selectedScan.cleaners && selectedScan.cleaners.data.length > 0 && (
+                <div>
+                  <p className="font-headers">{"Cleaners"}:</p>
+                  <div className="grid place-items-center place-content-center gap-2">
+                    {selectedScan.cleaners.data.map((cleaner) => (
+                      <>
+                        {cleaner.attributes && (
+                          <RecorderChip
+                            key={cleaner.id}
+                            langui={langui}
+                            recorder={cleaner.attributes}
+                          />
+                        )}
+                      </>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {selectedScan.typesetters &&
+                selectedScan.typesetters.data.length > 0 && (
+                  <div>
+                    <p className="font-headers">{"Typesetters"}:</p>
+                    <div className="grid place-items-center place-content-center gap-2">
+                      {selectedScan.typesetters.data.map((typesetter) => (
+                        <>
+                          {typesetter.attributes && (
+                            <RecorderChip
+                              key={typesetter.id}
+                              langui={langui}
+                              recorder={typesetter.attributes}
+                            />
+                          )}
+                        </>
+                      ))}
+                    </div>
+                  </div>
+                )}
             </div>
 
             <div className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0">

src/graphql/operations/getLibraryItemScans.graphql

@@ -7,6 +7,45 @@ query getLibraryItemScans($slug: String, $language_code: String) {
         title
         subtitle
         images {
+          status
+          language {
+            data {
+              attributes {
+                code
+              }
+            }
+          }
+          source_language {
+            data {
+              attributes {
+                code
+              }
+            }
+          }
+          scanners {
+            data {
+              id
+              attributes {
+                ...recorderChip
+              }
+            }
+          }
+          cleaners {
+            data {
+              id
+              attributes {
+                ...recorderChip
+              }
+            }
+          }
+          typesetters {
+            data {
+              id
+              attributes {
+                ...recorderChip
+              }
+            }
+          }
           cover {
             full {
               data {
@@ -55,13 +94,6 @@ query getLibraryItemScans($slug: String, $language_code: String) {
               }
             }
           }
-          language {
-            data {
-              attributes {
-                code
-              }
-            }
-          }
         }
         thumbnail {
           data {

src/pages/library/[slug]/index.tsx

@@ -68,6 +68,16 @@ export default function LibrarySlug(props: Props): JSX.Element {
   const [lightboxImages, setLightboxImages] = useState([""]);
   const [lightboxIndex, setLightboxIndex] = useState(0);
 
+  let displayOpenScans = false;
+  if (item?.contents?.data)
+    for (const content of item.contents.data) {
+      if (
+        content.attributes?.scan_set &&
+        content.attributes.scan_set.length > 0
+      )
+        displayOpenScans = true;
+    }
+
   const subPanel = (
     <SubPanel>
       <ReturnButton
@@ -201,10 +211,10 @@ export default function LibrarySlug(props: Props): JSX.Element {
                   "relation-set")
             ) && (
               <>
-                {item?.urls && item?.urls?.length ? (
+                {item?.urls && item.urls.length ? (
                   <div className="flex flex-row place-items-center gap-3">
                     <p>Available at</p>
-                    {item?.urls?.map((url) => (
+                    {item.urls.map((url) => (
                       <>
                         {url?.url && (
                           <Button
@@ -428,7 +438,12 @@ export default function LibrarySlug(props: Props): JSX.Element {
 
         {item?.contents && item.contents.data.length > 0 && (
           <div id="contents" className="w-full grid place-items-center gap-8">
-            <h2 className="text-2xl">{langui.contents}</h2>
+            <h2 className="text-2xl -mb-6">{langui.contents}</h2>
+            {displayOpenScans && (
+              <Button href={`/library/${item.slug}/scans`}>
+                {langui.view_scans}
+              </Button>
+            )}
             <div className="grid gap-4 w-full">
               {item.contents.data.map((content) => (
                 <ContentTOCLine