From ae5e37c002793446d41d536820128a0d08b81854 Mon Sep 17 00:00:00 2001
From: DrMint <thomas.barillot@etu.u-bordeaux.fr>
Date: Sun, 6 Mar 2022 01:21:43 +0100
Subject: [PATCH 01/17] Create node.js.yml

---
 .github/workflows/node.js.yml | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 .github/workflows/node.js.yml

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
new file mode 100644
index 0000000..57e68ee
--- /dev/null
+++ b/.github/workflows/node.js.yml
@@ -0,0 +1,30 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x, 16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build --if-present
-- 
2.40.1


From e4def9268a8be59cbc497a395066927b61bf1269 Mon Sep 17 00:00:00 2001
From: DrMint <thomas.barillot@etu.u-bordeaux.fr>
Date: Sun, 6 Mar 2022 01:37:16 +0100
Subject: [PATCH 02/17] Update node.js.yml

---
 .github/workflows/node.js.yml | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index 57e68ee..40abb72 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [16.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -26,5 +26,11 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
+      env:
+        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+        NEXT_PUBLIC_URL_CMS: ${{ secrets.NEXT_PUBLIC_URL_CMS }}
+        NEXT_PUBLIC_URL_IMG: ${{ secrets.NEXT_PUBLIC_URL_IMG }}
+        NEXT_PUBLIC_URL_SELF: ${{ secrets.NEXT_PUBLIC_URL_SELF }}
+        URL_GRAPHQL: ${{ secrets.URL_GRAPHQL }}
     - run: npm ci
     - run: npm run build --if-present
-- 
2.40.1


From d502655dff2d1af0cee95c33d722df20b8ee24ae Mon Sep 17 00:00:00 2001
From: DrMint <thomas.barillot@etu.u-bordeaux.fr>
Date: Sun, 6 Mar 2022 02:01:49 +0100
Subject: [PATCH 03/17] Update node.js.yml

---
 .github/workflows/node.js.yml | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index 40abb72..4260864 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -26,11 +26,19 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
+    - name: Create .env.local file
       env:
         ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
         NEXT_PUBLIC_URL_CMS: ${{ secrets.NEXT_PUBLIC_URL_CMS }}
         NEXT_PUBLIC_URL_IMG: ${{ secrets.NEXT_PUBLIC_URL_IMG }}
         NEXT_PUBLIC_URL_SELF: ${{ secrets.NEXT_PUBLIC_URL_SELF }}
         URL_GRAPHQL: ${{ secrets.URL_GRAPHQL }}
+      run: |
+        touch .env.local
+        echo ACCESS_TOKEN=${{ secrets.ACCESS_TOKEN }} >> .env.local
+        echo NEXT_PUBLIC_URL_CMS=${{ secrets.NEXT_PUBLIC_URL_CMS }} >> .env.local
+        echo NEXT_PUBLIC_URL_IMG=${{ secrets.NEXT_PUBLIC_URL_IMG }} >> .env.local
+        echo NEXT_PUBLIC_URL_SELF=${{ secrets.NEXT_PUBLIC_URL_SELF }} >> .env.local
+        echo URL_GRAPHQL=${{ secrets.URL_GRAPHQL }} >> .env.local
     - run: npm ci
     - run: npm run build --if-present
-- 
2.40.1


From 29faaf8051581b165dd1c85ef20f5dbd031d7cf8 Mon Sep 17 00:00:00 2001
From: DrMint <thomas.barillot@etu.u-bordeaux.fr>
Date: Sun, 6 Mar 2022 02:04:36 +0100
Subject: [PATCH 04/17] Update node.js.yml

---
 .github/workflows/node.js.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index 4260864..cfe1ff6 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -40,5 +40,6 @@ jobs:
         echo NEXT_PUBLIC_URL_IMG=${{ secrets.NEXT_PUBLIC_URL_IMG }} >> .env.local
         echo NEXT_PUBLIC_URL_SELF=${{ secrets.NEXT_PUBLIC_URL_SELF }} >> .env.local
         echo URL_GRAPHQL=${{ secrets.URL_GRAPHQL }} >> .env.local
+        cat .env.local
     - run: npm ci
     - run: npm run build --if-present
-- 
2.40.1


From 9ecabfc2f3c93dfbf72e797bb46c04e687d4d6fe Mon Sep 17 00:00:00 2001
From: DrMint <thomas.barillot@etu.u-bordeaux.fr>
Date: Sun, 6 Mar 2022 02:08:16 +0100
Subject: [PATCH 05/17] Update node.js.yml

---
 .github/workflows/node.js.yml | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index cfe1ff6..2e4dbe1 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -26,20 +26,11 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
-    - name: Create .env.local file
+    - run: npm ci
+    - run: npm run build --if-present
       env:
         ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
         NEXT_PUBLIC_URL_CMS: ${{ secrets.NEXT_PUBLIC_URL_CMS }}
         NEXT_PUBLIC_URL_IMG: ${{ secrets.NEXT_PUBLIC_URL_IMG }}
         NEXT_PUBLIC_URL_SELF: ${{ secrets.NEXT_PUBLIC_URL_SELF }}
         URL_GRAPHQL: ${{ secrets.URL_GRAPHQL }}
-      run: |
-        touch .env.local
-        echo ACCESS_TOKEN=${{ secrets.ACCESS_TOKEN }} >> .env.local
-        echo NEXT_PUBLIC_URL_CMS=${{ secrets.NEXT_PUBLIC_URL_CMS }} >> .env.local
-        echo NEXT_PUBLIC_URL_IMG=${{ secrets.NEXT_PUBLIC_URL_IMG }} >> .env.local
-        echo NEXT_PUBLIC_URL_SELF=${{ secrets.NEXT_PUBLIC_URL_SELF }} >> .env.local
-        echo URL_GRAPHQL=${{ secrets.URL_GRAPHQL }} >> .env.local
-        cat .env.local
-    - run: npm ci
-    - run: npm run build --if-present
-- 
2.40.1


From b95278ddbee48197fabf5fde0c85a584b1310646 Mon Sep 17 00:00:00 2001
From: DrMint <thomas.barillot@etu.u-bordeaux.fr>
Date: Sun, 6 Mar 2022 02:23:52 +0100
Subject: [PATCH 06/17] Update README.md

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 6b245ca..c3bec14 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # Accords-library.com
 
+[![Node.js CI](https://github.com/Accords-Library/accords-library.com/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/Accords-Library/accords-library.com/actions/workflows/node.js.yml)
+
 ## Technologies
 
 #### [Back](https://github.com/Accords-Library/strapi.accords-library.com)
-- 
2.40.1


From 46dab30ebede78bb105a0506d57202a5cf53d8bd Mon Sep 17 00:00:00 2001
From: DrMint <thomas.barillot@etu.u-bordeaux.fr>
Date: Sun, 6 Mar 2022 04:49:51 +0100
Subject: [PATCH 07/17] Update node.js.yml

---
 .github/workflows/node.js.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index 2e4dbe1..a7f6d4e 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -4,8 +4,8 @@
 name: Node.js CI
 
 on:
-  push:
-    branches: [ main ]
+#  push:
+#    branches: [ main ]
   pull_request:
     branches: [ main ]
 
-- 
2.40.1


From aba8d373d56c514804d709e6e4fccd5761f94abd Mon Sep 17 00:00:00 2001
From: DrMint <thomas.barillot@etu.u-bordeaux.fr>
Date: Fri, 11 Mar 2022 01:08:33 +0100
Subject: [PATCH 08/17] Update node.js.yml

---
 .github/workflows/node.js.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index a7f6d4e..a5242e0 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -27,6 +27,7 @@ jobs:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
     - run: npm ci
+    - run: npm run lint
     - run: npm run build --if-present
       env:
         ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
-- 
2.40.1


From f89dbb36e9bf764f39bdca510520a362571621b9 Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Sat, 12 Mar 2022 18:00:19 +0100
Subject: [PATCH 09/17] Headers now generates copiable anchor links

---
 src/components/Markdown/Markdawn.tsx | 24 ++++++++++++++++++++++++
 src/components/Markdown/TOC.tsx      | 11 +++++++----
 src/pages/contents/[slug]/read.tsx   |  1 +
 src/tailwind.css                     |  2 +-
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx
index 6414a1e..54feaf5 100644
--- a/src/components/Markdown/Markdawn.tsx
+++ b/src/components/Markdown/Markdawn.tsx
@@ -21,6 +21,30 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
         options={{
           slugify: slugify,
           overrides: {
+            h2: {
+              component: (props: { id: string; children: React.ReactNode }) => {
+                return (
+                  <div className="flex flex-row place-items-center place-content-center gap-3 hover:[--anchor-opacity:100] [--anchor-opacity:0]">
+                    <h2 id={props.id}>{props.children}</h2>
+                    <abbr title="Copy anchor link">
+                      <span
+                        className="material-icons opacity-[var(--anchor-opacity)] transition-all hover:text-dark cursor-pointer"
+                        onClick={() => {
+                          navigator.clipboard.writeText(
+                            process.env.NEXT_PUBLIC_URL_SELF +
+                              window.location.pathname +
+                              "#" +
+                              props.id
+                          );
+                        }}
+                      >
+                        link
+                      </span>
+                    </abbr>
+                  </div>
+                );
+              },
+            },
             Sep: {
               component: () => {
                 return <div className="my-24"></div>;
diff --git a/src/components/Markdown/TOC.tsx b/src/components/Markdown/TOC.tsx
index ff0c15f..b963ee1 100644
--- a/src/components/Markdown/TOC.tsx
+++ b/src/components/Markdown/TOC.tsx
@@ -1,20 +1,23 @@
+import { NextRouter } from "next/router";
 import { slugify } from "queries/helpers";
 import { preprocessMarkDawn } from "./Markdawn";
 
 type TOCProps = {
   text: string;
   title?: string;
+  router: NextRouter;
 };
 
 export default function TOC(props: TOCProps): JSX.Element {
-  const toc = getTocFromMarkdawn(preprocessMarkDawn(props.text), props.title);
+  const { router, text, title } = props;
+  const toc = getTocFromMarkdawn(preprocessMarkDawn(text), title);
 
   return (
     <div>
       <h3 className="text-xl">Table of content</h3>
       <ol className="text-left">
         <li className="my-2 overflow-x-hidden w-full text-ellipsis whitespace-nowrap">
-          <a className="" href={`#${toc.slug}`}>
+          <a className="" onClick={() => router.replace(`#${toc.slug}`)}>
             {<abbr title={toc.title}>{toc.title}</abbr>}
           </a>
         </li>
@@ -25,7 +28,7 @@ export default function TOC(props: TOCProps): JSX.Element {
               className="my-2 overflow-x-hidden w-full text-ellipsis whitespace-nowrap"
             >
               <span className="text-dark">{`${h2Index + 1}. `}</span>
-              <a href={`#${h2.slug}`}>
+              <a onClick={() => router.replace(`#${h2.slug}`)}>
                 {<abbr title={h2.title}>{h2.title}</abbr>}
               </a>
             </li>
@@ -38,7 +41,7 @@ export default function TOC(props: TOCProps): JSX.Element {
                   <span className="text-dark">{`${h2Index + 1}.${
                     h3Index + 1
                   }. `}</span>
-                  <a href={`#${h3.slug}`}>
+                  <a onClick={() => router.replace(`#${h3.slug}`)}>
                     {<abbr title={h3.title}>{h3.title}</abbr>}
                   </a>
                 </li>
diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx
index 622bc39..68cf596 100644
--- a/src/pages/contents/[slug]/read.tsx
+++ b/src/pages/contents/[slug]/read.tsx
@@ -148,6 +148,7 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
           <HorizontalLine />
           <TOC
             text={content.text_set[0].text}
+            router={router}
             title={
               content.titles.length > 0
                 ? prettyinlineTitle(
diff --git a/src/tailwind.css b/src/tailwind.css
index a17a243..7f30142 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -17,7 +17,7 @@
   }
 
   a {
-    @apply transition-colors underline-offset-2 decoration-dotted underline decoration-dark hover:text-dark;
+    @apply transition-colors underline-offset-2 decoration-dotted underline decoration-dark hover:text-dark cursor-pointer;
   }
 
   *::selection {
-- 
2.40.1


From f4217a597c22989fb4b7c13be6029296aca03b5f Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Sat, 12 Mar 2022 18:12:02 +0100
Subject: [PATCH 10/17] Removed react-tooltip

---
 package-lock.json                             | 47 +++--------------
 package.json                                  |  1 -
 src/components/AppLayout.tsx                  | 17 +------
 src/components/Chip.tsx                       | 15 +-----
 .../Chronology/ChronologyItemComponent.tsx    | 18 +------
 src/components/PanelComponents/NavOption.tsx  | 13 -----
 src/components/Panels/MainPanel.tsx           | 13 ++---
 src/components/RecorderChip.tsx               | 44 +---------------
 src/pages/contents/[slug]/read.tsx            | 51 ++-----------------
 src/pages/wiki/chronology.tsx                 | 11 ----
 src/queries/helpers.ts                        | 28 ++++------
 11 files changed, 29 insertions(+), 229 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3c95d9e..6ef716e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,6 @@
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "react-swipeable": "^6.2.0",
-        "react-tooltip": "^4.2.21",
         "turndown": "^7.1.1"
       },
       "devDependencies": {
@@ -2960,6 +2959,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -3035,7 +3035,8 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
     },
     "node_modules/react-swipeable": {
       "version": "6.2.0",
@@ -3045,22 +3046,6 @@
         "react": "^16.8.3 || ^17"
       }
     },
-    "node_modules/react-tooltip": {
-      "version": "4.2.21",
-      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz",
-      "integrity": "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==",
-      "dependencies": {
-        "prop-types": "^15.7.2",
-        "uuid": "^7.0.3"
-      },
-      "engines": {
-        "npm": ">=6.13"
-      },
-      "peerDependencies": {
-        "react": ">=16.0.0",
-        "react-dom": ">=16.0.0"
-      }
-    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -3555,14 +3540,6 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
-    "node_modules/uuid": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
-      "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -5740,6 +5717,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -5786,7 +5764,8 @@
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
     },
     "react-swipeable": {
       "version": "6.2.0",
@@ -5794,15 +5773,6 @@
       "integrity": "sha512-nWQ8dEM8e/uswZLSIkXUsAnQmnX4MTcryOHBQIQYRMJFDpgDBSiVbKsz/BZVCIScF4NtJh16oyxwaNOepR6xSw==",
       "requires": {}
     },
-    "react-tooltip": {
-      "version": "4.2.21",
-      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz",
-      "integrity": "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==",
-      "requires": {
-        "prop-types": "^15.7.2",
-        "uuid": "^7.0.3"
-      }
-    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -6143,11 +6113,6 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
-    "uuid": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
-      "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
-    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
diff --git a/package.json b/package.json
index 661ba85..f46c44f 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-swipeable": "^6.2.0",
-    "react-tooltip": "^4.2.21",
     "turndown": "^7.1.1"
   },
   "devDependencies": {
diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index 51eab74..5806fe2 100644
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -7,9 +7,8 @@ import Head from "next/head";
 import { useSwipeable } from "react-swipeable";
 import { useRouter } from "next/router";
 import Button from "components/Button";
-import { getOgImage, OgImage, prettyLanguage } from "queries/helpers";
+import { getOgImage, OgImage } from "queries/helpers";
 import { useMediaCoarse, useMediaMobile } from "hooks/useMediaQuery";
-import ReactTooltip from "react-tooltip";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { ImageQuality } from "./Img";
 import Popup from "./Popup";
@@ -25,7 +24,6 @@ interface AppLayoutProps extends AppStaticProps {
   navTitle: string;
   thumbnail?: StrapiImage;
   description?: string;
-  extra?: React.ReactNode;
 }
 
 export default function AppLayout(props: AppLayoutProps): JSX.Element {
@@ -413,20 +411,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
             </div>
           </div>
         </Popup>
-
-        <ReactTooltip
-          id="MainPanelTooltip"
-          place="right"
-          type="light"
-          effect="solid"
-          delayShow={300}
-          delayHide={100}
-          disable={!appLayout.mainPanelReduced || isMobile || isCoarse}
-          className="drop-shadow-shade-xl !opacity-100 !bg-light !rounded-lg after:!border-r-light text-left !text-black"
-        />
       </div>
-
-      {props.extra}
     </div>
   );
 }
diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
index f0d117f..b7bc9e1 100644
--- a/src/components/Chip.tsx
+++ b/src/components/Chip.tsx
@@ -1,25 +1,12 @@
 type ChipProps = {
   className?: string;
   children: React.ReactNode;
-  "data-tip"?: string;
-  "data-for"?: string;
-  "data-html"?: boolean;
-  "data-multiline"?: boolean;
 };
 
 export default function Chip(props: ChipProps): JSX.Element {
   return (
     <div
-      className={`grid place-content-center place-items-center text-xs pb-[0.14rem] px-1.5 border-[1px] rounded-full opacity-70 transition-[color,_opacity,border-color] ${
-        props.className
-      } ${
-        props["data-tip"] &&
-        "hover:text-dark hover:border-dark hover:opacity-100"
-      }`}
-      data-tip={props["data-tip"]}
-      data-for={props["data-for"]}
-      data-html={props["data-html"]}
-      data-multiline={props["data-multiline"]}
+      className={`grid place-content-center place-items-center text-xs pb-[0.14rem] px-1.5 border-[1px] rounded-full opacity-70 transition-[color,_opacity,border-color] ${props.className} `}
     >
       {props.children}
     </div>
diff --git a/src/components/Chronology/ChronologyItemComponent.tsx b/src/components/Chronology/ChronologyItemComponent.tsx
index 3864c27..4bbc44c 100644
--- a/src/components/Chronology/ChronologyItemComponent.tsx
+++ b/src/components/Chronology/ChronologyItemComponent.tsx
@@ -85,23 +85,7 @@ export default function ChronologyItemComponent(
                 <div className="place-items-start place-content-start grid grid-flow-col gap-2">
                   {translation.status !==
                     Enum_Componenttranslationschronologyitem_Status.Done && (
-                    <Chip
-                      data-tip={
-                        translation.status ===
-                        Enum_Componenttranslationschronologyitem_Status.Incomplete
-                          ? "This entry is only partially translated/transcribed."
-                          : translation.status ===
-                            Enum_Componenttranslationschronologyitem_Status.Draft
-                          ? "This entry is just a draft. It usually means that this is a work-in-progress. Translation/transcription might be poor and/or computer-generated."
-                          : translation.status ===
-                            Enum_Componenttranslationschronologyitem_Status.Review
-                          ? "This entry has not yet being proofread. The content should still be accurate."
-                          : ""
-                      }
-                      data-for={"ChronologyTooltip"}
-                    >
-                      {translation.status}
-                    </Chip>
+                    <Chip>{translation.status}</Chip>
                   )}
                   {translation.title ? <h3>{translation.title}</h3> : ""}
                 </div>
diff --git a/src/components/PanelComponents/NavOption.tsx b/src/components/PanelComponents/NavOption.tsx
index be793d4..5a72763 100644
--- a/src/components/PanelComponents/NavOption.tsx
+++ b/src/components/PanelComponents/NavOption.tsx
@@ -1,14 +1,12 @@
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { MouseEventHandler } from "react";
-import ReactDOMServer from "react-dom/server";
 
 type NavOptionProps = {
   url: string;
   icon?: string;
   title: string;
   subtitle?: string;
-  tooltipId?: string;
   border?: boolean;
   reduced?: boolean;
   onClick?: MouseEventHandler<HTMLDivElement>;
@@ -28,17 +26,6 @@ export default function NavOption(props: NavOptionProps): JSX.Element {
     <Link href={props.url} passHref>
       <div
         onClick={props.onClick}
-        data-html
-        data-multiline
-        data-tip={ReactDOMServer.renderToStaticMarkup(
-          <div className="px-4 py-3">
-            <h3 className="text-2xl">{props.title}</h3>
-            {props.subtitle && (
-              <p className="max-w-[10rem]">{props.subtitle}</p>
-            )}
-          </div>
-        )}
-        data-for={props.tooltipId}
         className={`grid grid-flow-col grid-cols-[auto] auto-cols-fr justify-center ${
           props.icon ? "text-left" : "text-center"
         } ${divCommon}`}
diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx
index 5ea88c6..f585633 100644
--- a/src/components/Panels/MainPanel.tsx
+++ b/src/components/Panels/MainPanel.tsx
@@ -102,7 +102,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         icon="library_books"
         title={langui.library}
         subtitle={langui.library_short_description}
-        tooltipId="MainPanelTooltip"
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -112,7 +111,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         icon="workspaces"
         title={langui.contents}
         subtitle={langui.contents_short_description}
-        tooltipId="MainPanelTooltip"
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -124,7 +122,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         icon="travel_explore"
         title={langui.wiki}
         subtitle={langui.wiki_short_description}
-        tooltipId="MainPanelTooltip"
+        
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -134,7 +132,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         icon="watch_later"
         title={langui.chronicles}
         subtitle={langui.chronicles_short_description}
-        tooltipId="MainPanelTooltip"
+        
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -147,7 +145,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         url="/news"
         icon="feed"
         title={langui.news}
-        tooltipId="MainPanelTooltip"
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -156,7 +153,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         url="/merch"
         icon="store"
         title={langui.merch}
-        tooltipId="MainPanelTooltip"
+        
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -167,7 +164,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         url="/gallery"
         icon="collections"
         title={langui.gallery}
-        tooltipId="MainPanelTooltip"
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -178,7 +174,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         url="/archives"
         icon="inventory"
         title={langui.archives}
-        tooltipId="MainPanelTooltip"
+        
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -190,7 +186,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         url="/about-us"
         icon="info"
         title={langui.about_us}
-        tooltipId="MainPanelTooltip"
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
diff --git a/src/components/RecorderChip.tsx b/src/components/RecorderChip.tsx
index 404ca8e..6f84bd7 100644
--- a/src/components/RecorderChip.tsx
+++ b/src/components/RecorderChip.tsx
@@ -3,8 +3,6 @@ import {
   GetContentTextQuery,
   GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
-import Img, { ImageQuality } from "./Img";
-import ReactDOMServer from "react-dom/server";
 
 type RecorderChipProps = {
   className?: string;
@@ -16,47 +14,7 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element {
   const recorder = props.recorder;
   const langui = props.langui;
   return (
-    <Chip
-      key={recorder.id}
-      data-tip={ReactDOMServer.renderToStaticMarkup(
-        <div className="p-2 py-5 grid gap-2">
-          <div className="grid grid-flow-col gap-2 place-items-center place-content-start">
-            {recorder.attributes.avatar.data && (
-              <Img
-                className="w-8 rounded-full"
-                image={recorder.attributes.avatar.data.attributes}
-                quality={ImageQuality.Small}
-                rawImg
-              />
-            )}
-            <h3 className="text-xl">{recorder.attributes.username}</h3>
-          </div>
-          {recorder.attributes.languages.data.length > 0 && (
-            <div className="flex flex-row flex-wrap gap-1">
-              <p>{langui.languages}:</p>
-              {recorder.attributes.languages.data.map((language) => (
-                <Chip key={language.attributes.code}>
-                  {language.attributes.code.toUpperCase()}
-                </Chip>
-              ))}
-            </div>
-          )}
-          {recorder.attributes.pronouns && (
-            <div className="flex flex-row flex-wrap gap-1">
-              <p>{langui.pronouns}:</p>
-              <Chip>{recorder.attributes.pronouns}</Chip>
-            </div>
-          )}
-          <p>
-            {recorder.attributes.bio.length > 0 &&
-              recorder.attributes.bio[0].bio}
-          </p>
-        </div>
-      )}
-      data-for={"RecordersTooltip"}
-      data-multiline
-      data-html
-    >
+    <Chip key={recorder.id}>
       {recorder.attributes.anonymize
         ? `Recorder#${recorder.attributes.anonymous_code}`
         : recorder.attributes.username}
diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx
index 68cf596..d30be0d 100644
--- a/src/pages/contents/[slug]/read.tsx
+++ b/src/pages/contents/[slug]/read.tsx
@@ -23,7 +23,6 @@ import {
 import Button from "components/Button";
 import { useRouter } from "next/router";
 import Chip from "components/Chip";
-import ReactTooltip from "react-tooltip";
 import RecorderChip from "components/RecorderChip";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 import TOC from "components/Markdown/TOC";
@@ -35,7 +34,7 @@ interface ContentReadProps extends AppStaticProps {
 
 export default function ContentRead(props: ContentReadProps): JSX.Element {
   useTesting(props);
-  const { langui, content } = props;
+  const { langui, content, languages } = props;
   const router = useRouter();
 
   const subPanel = (
@@ -68,7 +67,8 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
                 }
               >
                 {prettyLanguage(
-                  content.text_set[0].source_language.data.attributes.code
+                  content.text_set[0].source_language.data.attributes.code,
+                  languages
                 )}
               </Button>
             </div>
@@ -77,23 +77,7 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
           <div className="grid grid-flow-col place-items-center place-content-center gap-2">
             <p className="font-headers">{langui.status}:</p>
 
-            <Chip
-              data-tip={
-                content.text_set[0].status ===
-                Enum_Componentsetstextset_Status.Incomplete
-                  ? langui.status_incomplete
-                  : content.text_set[0].status ===
-                    Enum_Componentsetstextset_Status.Draft
-                  ? langui.status_draft
-                  : content.text_set[0].status ===
-                    Enum_Componentsetstextset_Status.Review
-                  ? langui.status_review
-                  : langui.status_done
-              }
-              data-for={"StatusTooltip"}
-            >
-              {content.text_set[0].status}
-            </Chip>
+            <Chip>{content.text_set[0].status}</Chip>
           </div>
 
           {content.text_set[0].transcribers.data.length > 0 && (
@@ -184,32 +168,6 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
     </ContentPanel>
   );
 
-  const extra = (
-    <>
-      <ReactTooltip
-        id="StatusTooltip"
-        place="top"
-        type="light"
-        effect="solid"
-        delayShow={50}
-        clickable={true}
-        className="drop-shadow-shade-xl !opacity-100 !bg-light !rounded-lg desktop:after:!border-t-light text-left !text-black max-w-xs"
-      />
-
-      <ReactTooltip
-        id="RecordersTooltip"
-        place="top"
-        type="light"
-        effect="solid"
-        delayShow={100}
-        delayUpdate={100}
-        delayHide={100}
-        clickable={true}
-        className="drop-shadow-shade-xl !opacity-100 !bg-light !rounded-lg desktop:after:!border-t-light text-left !text-black max-w-[22rem]"
-      />
-    </>
-  );
-
   return (
     <AppLayout
       navTitle="Contents"
@@ -225,7 +183,6 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
       thumbnail={content.thumbnail.data?.attributes}
       contentPanel={contentPanel}
       subPanel={subPanel}
-      extra={extra}
       description={`${langui.type}: ${
         content.type.data.attributes.titles.length > 0
           ? content.type.data.attributes.titles[0].title
diff --git a/src/pages/wiki/chronology.tsx b/src/pages/wiki/chronology.tsx
index b006c03..600ffcf 100644
--- a/src/pages/wiki/chronology.tsx
+++ b/src/pages/wiki/chronology.tsx
@@ -16,7 +16,6 @@ import {
 } from "queries/helpers";
 import InsetBox from "components/InsetBox";
 import { useRouter } from "next/router";
-import ReactTooltip from "react-tooltip";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
 interface ChronologyProps extends AppStaticProps {
@@ -107,16 +106,6 @@ export default function Chronology(props: ChronologyProps): JSX.Element {
           ))}
         </>
       ))}
-
-      <ReactTooltip
-        id="ChronologyTooltip"
-        place="top"
-        type="light"
-        effect="solid"
-        delayShow={50}
-        clickable={true}
-        className="drop-shadow-shade-xl !opacity-100 mobile:after:!border-r-light !bg-light !rounded-lg desktop:after:!border-t-light text-left !text-black max-w-xs"
-      />
     </ContentPanel>
   );
 
diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts
index bbf5786..a3e2800 100644
--- a/src/queries/helpers.ts
+++ b/src/queries/helpers.ts
@@ -5,6 +5,7 @@ import {
 } from "components/Img";
 import {
   GetCurrenciesQuery,
+  GetLanguagesQuery,
   GetLibraryItemQuery,
   GetLibraryItemsPreviewQuery,
   GetWebsiteInterfaceQuery,
@@ -138,23 +139,16 @@ export function prettyItemSubType(metadata: {
   }
 }
 
-export function prettyLanguage(code: string): string {
-  switch (code) {
-    case "en":
-      return "English";
-    case "es":
-      return "Español";
-    case "fr":
-      return "Français";
-    case "ja":
-      return "日本語";
-    case "en":
-      return "English";
-    case "xx":
-      return "██";
-    default:
-      return code;
-  }
+export function prettyLanguage(
+  code: string,
+  languages: GetLanguagesQuery["languages"]["data"]
+): string {
+  let result = code;
+  languages.forEach((language) => {
+    if (language.attributes.code === code)
+      result = language.attributes.localized_name;
+  });
+  return result;
 }
 
 export function prettyTestWarning(
-- 
2.40.1


From 4b30dac8783f829e30fc52108c03488d6f54d734 Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Sun, 13 Mar 2022 02:27:34 +0100
Subject: [PATCH 11/17] Changed Applayout from fixed to grid + using custom
 tooltip

---
 src/components/AppLayout.tsx                  | 110 +++++++-----------
 src/components/Chip.tsx                       |   8 +-
 .../Library/LibraryItemsPreview.tsx           |   2 +-
 src/components/Markdown/Markdawn.tsx          |  16 ++-
 src/components/PanelComponents/NavOption.tsx  |  14 ++-
 src/components/Panels/MainPanel.tsx           |  14 +++
 src/components/Panels/SubPanel.tsx            |   2 +-
 src/components/RecorderChip.tsx               |  53 ++++++++-
 src/components/ToolTip.tsx                    |  80 +++++++++++++
 src/pages/index.tsx                           |   5 +
 10 files changed, 229 insertions(+), 75 deletions(-)
 create mode 100644 src/components/ToolTip.tsx

diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index 5806fe2..4d43c9d 100644
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -54,27 +54,6 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
     },
   });
 
-  const mainPanelClass = `fixed desktop:left-0 desktop:top-0 desktop:bottom-0 ${
-    appLayout.mainPanelReduced ? "desktop:w-[6rem]" : "desktop:w-[20rem]"
-  }`;
-  const subPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:w-[20rem] ${
-    appLayout.mainPanelReduced ? " desktop:left-[6rem]" : "desktop:left-[20rem]"
-  }`;
-  let contentPanelClass = "";
-  if (subPanel) {
-    contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${
-      appLayout.mainPanelReduced
-        ? "desktop:left-[26rem]"
-        : "desktop:left-[40rem]"
-    }`;
-  } else if (contentPanel) {
-    contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${
-      appLayout.mainPanelReduced
-        ? "desktop:left-[6rem]"
-        : "desktop:left-[20rem]"
-    }`;
-  }
-
   const turnSubIntoContent = subPanel && !contentPanel;
 
   const titlePrefix = "Accord’s Library";
@@ -115,6 +94,21 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currencySelect]);
 
+  let gridCol = "";
+  if (props.subPanel) {
+    if (appLayout.mainPanelReduced) {
+      gridCol = "grid-cols-[6rem_20rem_1fr]";
+    } else {
+      gridCol = "grid-cols-[20rem_20rem_1fr]";
+    }
+  } else {
+    if (appLayout.mainPanelReduced) {
+      gridCol = "grid-cols-[6rem_0px_1fr]";
+    } else {
+      gridCol = "grid-cols-[20rem_0px_1fr]";
+    }
+  }
+
   return (
     <div
       className={`${
@@ -127,7 +121,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
     >
       <div
         {...handlers}
-        className="fixed inset-0 touch-pan-y p-0 m-0 bg-light text-black"
+        className={`fixed inset-0 touch-pan-y p-0 m-0 bg-light text-black grid [grid-template-areas:'main_sub_content'] ${gridCol} mobile:grid-cols-[1fr] mobile:grid-rows-[1fr_5rem] mobile:[grid-template-areas:'content''navbar']`}
       >
         <Head>
           <title>{`${titlePrefix} - ${ogTitle}`}</title>
@@ -157,9 +151,32 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
           <meta name="twitter:image" content={metaImage.image}></meta>
         </Head>
 
+        {/* Background when navbar is opened */}
+        <div
+          className={`[grid-area:content] mobile:z-10 absolute inset-0 transition-[backdrop-filter] duration-500 ${
+            (appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
+              ? "[backdrop-filter:blur(2px)]"
+              : "pointer-events-none touch-none "
+          }`}
+        >
+          <div
+            className={`absolute bg-shade inset-0 transition-opacity duration-500 
+        ${turnSubIntoContent ? "" : ""}
+        ${
+          (appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
+            ? "opacity-60"
+            : "opacity-0"
+        }`}
+            onClick={() => {
+              appLayout.setMainPanelOpen(false);
+              appLayout.setSubPanelOpen(false);
+            }}
+          ></div>
+        </div>
+
         {/* Content panel */}
         <div
-          className={`top-0 left-0 right-0 bottom-20 overflow-y-scroll bg-light texture-paper-dots ${contentPanelClass}`}
+          className={`[grid-area:content] overflow-y-scroll bg-light texture-paper-dots`}
         >
           {contentPanel ? (
             contentPanel
@@ -173,38 +190,15 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
           )}
         </div>
 
-        {/* Background when navbar is opened */}
-        <div
-          className={`fixed inset-0 transition-[backdrop-filter] duration-500 ${
-            (appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
-              ? "[backdrop-filter:blur(2px)]"
-              : "pointer-events-none touch-none "
-          }`}
-        >
-          <div
-            className={`fixed bg-shade inset-0 transition-opacity duration-500 
-        ${turnSubIntoContent ? "z-10" : ""}
-        ${
-          (appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
-            ? "opacity-60"
-            : "opacity-0"
-        }`}
-            onClick={() => {
-              appLayout.setMainPanelOpen(false);
-              appLayout.setSubPanelOpen(false);
-            }}
-          ></div>
-        </div>
-
         {/* Sub panel */}
         {subPanel && (
           <div
-            className={`${subPanelClass} border-r-[1px] mobile:bottom-20 mobile:border-r-0 mobile:border-l-[1px] border-black border-dotted top-0 bottom-0 right-0 left-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
+            className={`[grid-area:sub] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%] mobile:justify-self-end border-r-[1px] mobile:border-r-0 mobile:border-l-[1px] border-black border-dotted overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
           ${
             turnSubIntoContent
-              ? "mobile:translate-x-0 mobile:left-0 mobile:border-l-0"
+              ? "mobile:border-l-0 mobile:w-full"
               : !appLayout.subPanelOpen
-              ? "mobile:translate-x-full"
+              ? "mobile:translate-x-[100vw]"
               : ""
           }`}
           >
@@ -214,28 +208,14 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
 
         {/* Main panel */}
         <div
-          className={`${mainPanelClass} border-r-[1px] mobile:bottom-20 border-black border-dotted top-0 bottom-0 left-0 right-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 z-20 bg-light texture-paper-dots
+          className={`[grid-area:main] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%] mobile:justify-self-start border-r-[1px] border-black border-dotted overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
         ${appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"}`}
         >
           <MainPanel langui={langui} />
         </div>
 
-        {/* Main panel minimize button*/}
-        <div
-          className={`mobile:hidden translate-x-0 fixed top-1/2 z-20 ${
-            appLayout.mainPanelReduced ? "left-[4.65rem]" : "left-[18.65rem]"
-          }`}
-          onClick={() =>
-            appLayout.setMainPanelReduced(!appLayout.mainPanelReduced)
-          }
-        >
-          <Button className="material-icons bg-light !px-2">
-            {appLayout.mainPanelReduced ? "chevron_right" : "chevron_left"}
-          </Button>
-        </div>
-
         {/* Navbar */}
-        <div className="fixed inset-0 z-30 top-auto h-20 border-t-[1px] border-black border-dotted grid grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light texture-paper-dots">
+        <div className="[grid-area:navbar] border-t-[1px] border-black border-dotted grid grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light texture-paper-dots">
           <span
             className="material-icons mt-[.1em] cursor-pointer"
             onClick={() => {
diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
index b7bc9e1..2c41af4 100644
--- a/src/components/Chip.tsx
+++ b/src/components/Chip.tsx
@@ -1,12 +1,18 @@
+import { MouseEventHandler } from "react";
+
 type ChipProps = {
   className?: string;
   children: React.ReactNode;
+  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: MouseEventHandler<HTMLDivElement>;
 };
 
 export default function Chip(props: ChipProps): JSX.Element {
   return (
     <div
-      className={`grid place-content-center place-items-center text-xs pb-[0.14rem] px-1.5 border-[1px] rounded-full opacity-70 transition-[color,_opacity,border-color] ${props.className} `}
+      className={`grid place-content-center place-items-center text-xs pb-[0.14rem] px-1.5 border-[1px] rounded-full opacity-70 transition-[color,_opacity,_border-color] hover:opacity-100 ${props.className} `}
+      onMouseEnter={props.onMouseEnter}
+      onMouseLeave={props.onMouseLeave}
     >
       {props.children}
     </div>
diff --git a/src/components/Library/LibraryItemsPreview.tsx b/src/components/Library/LibraryItemsPreview.tsx
index 85afd83..ed21e81 100644
--- a/src/components/Library/LibraryItemsPreview.tsx
+++ b/src/components/Library/LibraryItemsPreview.tsx
@@ -55,7 +55,7 @@ export default function LibraryItemsPreview(
             <h3 className="mobile:text-xs leading-3">{item.subtitle}</h3>
           </div>
 
-          <div className="w-full grid grid-flow-col gap-1 overflow-x-scroll webkit-scrollbar:w-0 [scrollbar-width:none] place-content-start">
+          <div className="w-full grid grid-flow-col gap-1 overflow-x-scroll webkit-scrollbar:h-0 [scrollbar-width:none] place-content-start">
             {item.categories.data.map((category) => (
               <Chip key={category.id} className="text-sm">
                 {category.attributes.short}
diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx
index 54feaf5..cd75fdf 100644
--- a/src/components/Markdown/Markdawn.tsx
+++ b/src/components/Markdown/Markdawn.tsx
@@ -22,10 +22,18 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
           slugify: slugify,
           overrides: {
             h2: {
-              component: (props: { id: string; children: React.ReactNode }) => {
+              component: (props: {
+                id: string;
+                style: React.CSSProperties;
+                children: React.ReactNode;
+              }) => {
                 return (
-                  <div className="flex flex-row place-items-center place-content-center gap-3 hover:[--anchor-opacity:100] [--anchor-opacity:0]">
-                    <h2 id={props.id}>{props.children}</h2>
+                  <h2
+                    id={props.id}
+                    className="flex flex-row place-items-center place-content-center gap-3 hover:[--anchor-opacity:100] [--anchor-opacity:0]"
+                    style={props.style}
+                  >
+                    {props.children}
                     <abbr title="Copy anchor link">
                       <span
                         className="material-icons opacity-[var(--anchor-opacity)] transition-all hover:text-dark cursor-pointer"
@@ -41,7 +49,7 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
                         link
                       </span>
                     </abbr>
-                  </div>
+                  </h2>
                 );
               },
             },
diff --git a/src/components/PanelComponents/NavOption.tsx b/src/components/PanelComponents/NavOption.tsx
index 5a72763..4d9660f 100644
--- a/src/components/PanelComponents/NavOption.tsx
+++ b/src/components/PanelComponents/NavOption.tsx
@@ -1,6 +1,7 @@
 import { useRouter } from "next/router";
 import Link from "next/link";
-import { MouseEventHandler } from "react";
+import { MouseEventHandler, useState } from "react";
+import ToolTip from "components/ToolTip";
 
 type NavOptionProps = {
   url: string;
@@ -22,11 +23,15 @@ export default function NavOption(props: NavOptionProps): JSX.Element {
     props.border ? border : ""
   } ${isActive ? divActive : ""}`;
 
+  const [hovered, setHovered] = useState(false);
+
   return (
     <Link href={props.url} passHref>
       <div
         onClick={props.onClick}
-        className={`grid grid-flow-col grid-cols-[auto] auto-cols-fr justify-center ${
+        onMouseEnter={() => props.reduced && setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        className={`relative grid grid-flow-col grid-cols-[auto] auto-cols-fr justify-center ${
           props.icon ? "text-left" : "text-center"
         } ${divCommon}`}
       >
@@ -40,6 +45,11 @@ export default function NavOption(props: NavOptionProps): JSX.Element {
             {props.subtitle && <p className="col-start-2">{props.subtitle}</p>}
           </div>
         )}
+
+        <ToolTip hovered={hovered} direction="right" offset="3.5rem">
+          <h3 className="text-2xl">{props.title}</h3>
+          {props.subtitle && <p className="col-start-2">{props.subtitle}</p>}
+        </ToolTip>
       </div>
     </Link>
   );
diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx
index f585633..81cb786 100644
--- a/src/components/Panels/MainPanel.tsx
+++ b/src/components/Panels/MainPanel.tsx
@@ -24,6 +24,20 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         appLayout.mainPanelReduced && isDesktop && "px-4"
       }`}
     >
+      {/* Reduce/expand main menu */}
+      <div
+        className={`mobile:hidden top-1/2 fixed ${
+          appLayout.mainPanelReduced ? "left-[4.65rem]" : "left-[18.65rem]"
+        }`}
+        onClick={() =>
+          appLayout.setMainPanelReduced(!appLayout.mainPanelReduced)
+        }
+      >
+        <Button className="material-icons bg-light !px-2">
+          {appLayout.mainPanelReduced ? "chevron_right" : "chevron_left"}
+        </Button>
+      </div>
+
       <div>
         <div className="grid place-items-center">
           <Link href="/" passHref>
diff --git a/src/components/Panels/SubPanel.tsx b/src/components/Panels/SubPanel.tsx
index 89f2584..f1fcde4 100644
--- a/src/components/Panels/SubPanel.tsx
+++ b/src/components/Panels/SubPanel.tsx
@@ -4,7 +4,7 @@ type SubPanelProps = {
 
 export default function SubPanel(props: SubPanelProps): JSX.Element {
   return (
-    <div className="flex flex-col p-8 gap-y-2 justify-items-center text-center mobile:h-full">
+    <div className="grid pt-10 pb-20 px-6 desktop:py-8 desktop:px-10 gap-y-2 justify-items-center text-center">
       {props.children}
     </div>
   );
diff --git a/src/components/RecorderChip.tsx b/src/components/RecorderChip.tsx
index 6f84bd7..257d5c5 100644
--- a/src/components/RecorderChip.tsx
+++ b/src/components/RecorderChip.tsx
@@ -3,6 +3,9 @@ import {
   GetContentTextQuery,
   GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
+import { useState } from "react";
+import Img, { ImageQuality } from "./Img";
+import ToolTip from "./ToolTip";
 
 type RecorderChipProps = {
   className?: string;
@@ -13,11 +16,59 @@ type RecorderChipProps = {
 export default function RecorderChip(props: RecorderChipProps): JSX.Element {
   const recorder = props.recorder;
   const langui = props.langui;
+
+  const [hovered, setHovered] = useState(false);
+
   return (
-    <Chip key={recorder.id}>
+    <Chip
+      key={recorder.id}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
       {recorder.attributes.anonymize
         ? `Recorder#${recorder.attributes.anonymous_code}`
         : recorder.attributes.username}
+
+      <ToolTip
+        hovered={hovered}
+        direction="top"
+        offset="1.5rem"
+        delayShow={150}
+      >
+        <div className="p-2 py-5 grid gap-2">
+          <div className="grid grid-flow-col gap-2 place-items-center place-content-start">
+            {recorder.attributes.avatar.data && (
+              <Img
+                className="w-8 rounded-full"
+                image={recorder.attributes.avatar.data.attributes}
+                quality={ImageQuality.Small}
+                rawImg
+              />
+            )}
+            <h3 className="text-xl">{recorder.attributes.username}</h3>
+          </div>
+          {recorder.attributes.languages.data.length > 0 && (
+            <div className="flex flex-row flex-wrap gap-1">
+              <p>{langui.languages}:</p>
+              {recorder.attributes.languages.data.map((language) => (
+                <Chip key={language.attributes.code}>
+                  {language.attributes.code.toUpperCase()}
+                </Chip>
+              ))}
+            </div>
+          )}
+          {recorder.attributes.pronouns && (
+            <div className="flex flex-row flex-wrap gap-1">
+              <p>{langui.pronouns}:</p>
+              <Chip>{recorder.attributes.pronouns}</Chip>
+            </div>
+          )}
+          <p>
+            {recorder.attributes.bio.length > 0 &&
+              recorder.attributes.bio[0].bio}
+          </p>
+        </div>
+      </ToolTip>
     </Chip>
   );
 }
diff --git a/src/components/ToolTip.tsx b/src/components/ToolTip.tsx
new file mode 100644
index 0000000..db41220
--- /dev/null
+++ b/src/components/ToolTip.tsx
@@ -0,0 +1,80 @@
+import { useEffect, useState } from "react";
+
+type ToolTipProps = {
+  hovered: boolean;
+  children: React.ReactNode;
+  delayShow?: number;
+  direction: "right" | "bottom" | "top" | "left";
+  offset: string;
+};
+
+export default function ToolTip(props: ToolTipProps): JSX.Element {
+  const { children, hovered, direction, offset } = props;
+  let { delayShow } = props;
+  if (delayShow === undefined) delayShow = 500;
+
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    let timeout = setTimeout(() => {});
+    if (hovered) {
+      timeout = setTimeout(() => hovered && setShow(true), delayShow);
+    } else {
+      setShow(false);
+    }
+    return () => clearTimeout(timeout);
+  }, [delayShow, hovered]);
+
+  let tooltipCSS = "";
+  let transformCSS = "";
+  let arrowParentCSS = "";
+  let arrowCSS = "";
+
+  switch (direction) {
+    case "left":
+      tooltipCSS = "[justify-self:end] [align-self:center]";
+      transformCSS = `translateX(-${offset})`;
+      arrowParentCSS = "w-4 -right-4 top-0 bottom-0";
+      arrowCSS = "border-l-light";
+      break;
+
+    case "right":
+      tooltipCSS = "[justify-self:start] [align-self:center]";
+      transformCSS = `translateX(${offset})`;
+      arrowParentCSS = "w-4 -left-4 top-0 bottom-0";
+      arrowCSS = "border-r-light";
+      break;
+
+    case "top":
+      tooltipCSS = "[align-self:end]";
+      transformCSS = `translateY(-${offset})`;
+      arrowParentCSS = "h-4 -bottom-4 left-0 right-0";
+      arrowCSS = "border-t-light";
+      break;
+
+    case "bottom":
+      tooltipCSS = "[align-self:start]";
+      transformCSS = `translateY(${offset})`;
+      arrowParentCSS = "h-4 -top-4 left-0 right-0";
+      arrowCSS = "border-b-light";
+      break;
+  }
+
+  return (
+    <div
+      className={`fixed z-[100] drop-shadow-shade-xl transition-opacity max-w-sm ${
+        show
+          ? "opacity-100 pointer-events-auto"
+          : "opacity-0 pointer-events-none"
+      } ${tooltipCSS}`}
+      style={{ transform: transformCSS }}
+    >
+      <div className={`absolute grid ${arrowParentCSS}`}>
+        <div
+          className={`w-0 h-0 border-8 border-[transparent] place-self-center ${arrowCSS}`}
+        />
+      </div>
+      <div className="p-2 px-4 bg-light rounded-md">{children}</div>
+    </div>
+  );
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5bdd564..818ea03 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -15,6 +15,11 @@ export default function Home(props: HomeProps): JSX.Element {
   const { post } = props;
   const contentPanel = (
     <ContentPanel>
+      <div className="grid place-items-center place-content-center w-full gap-5 text-center">
+        <div className="[mask:url('/icons/accords.svg')] [mask-size:contain] [mask-repeat:no-repeat] [mask-position:center] w-32 aspect-square mobile:w-[50vw] bg-black" />
+        <h1 className="text-5xl mb-0">Accord&rsquo;s Library</h1>
+        <h2 className="text-xl -mt-5">Discover • Analyse • Translate • Archive</h2>
+      </div>
       {post.translations.length > 0 && (
         <Markdawn text={post.translations[0].body} />
       )}
-- 
2.40.1


From 3873ef44f974c1a60f943252e96a89e00790e039 Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Sun, 13 Mar 2022 03:00:38 +0100
Subject: [PATCH 12/17] Added tooltips in more places

---
 .../Chronology/ChronologyItemComponent.tsx    | 26 ++++++++++++++++++-
 .../Chronology/ChronologyYearComponent.tsx    |  9 ++++++-
 src/components/Panels/SubPanel.tsx            |  2 +-
 src/components/ToolTip.tsx                    | 12 +++++----
 src/pages/contents/[slug]/read.tsx            | 23 +++++++++++++++-
 src/pages/wiki/chronology.tsx                 |  3 ++-
 src/queries/helpers.ts                        | 23 ++++++++++++++++
 7 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/src/components/Chronology/ChronologyItemComponent.tsx b/src/components/Chronology/ChronologyItemComponent.tsx
index 4bbc44c..4e1bcad 100644
--- a/src/components/Chronology/ChronologyItemComponent.tsx
+++ b/src/components/Chronology/ChronologyItemComponent.tsx
@@ -1,17 +1,25 @@
 import Chip from "components/Chip";
+import ToolTip from "components/ToolTip";
 import {
   Enum_Componenttranslationschronologyitem_Status,
   GetChronologyItemsQuery,
+  GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
+import { getStatusDescription } from "queries/helpers";
+import { useState } from "react";
 
 export type ChronologyItemComponentProps = {
   item: GetChronologyItemsQuery["chronologyItems"]["data"][number];
   displayYear: boolean;
+  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
 };
 
 export default function ChronologyItemComponent(
   props: ChronologyItemComponentProps
 ): JSX.Element {
+  const { langui } = props;
+  const [statusHovered, setStatusHovered] = useState(false);
+
   function generateAnchor(year: number, month: number, day: number): string {
     let result: string = "";
     result += year;
@@ -85,7 +93,23 @@ export default function ChronologyItemComponent(
                 <div className="place-items-start place-content-start grid grid-flow-col gap-2">
                   {translation.status !==
                     Enum_Componenttranslationschronologyitem_Status.Done && (
-                    <Chip>{translation.status}</Chip>
+                    <Chip
+                      onMouseEnter={() => setStatusHovered(true)}
+                      onMouseLeave={() => setStatusHovered(false)}
+                    >
+                      {translation.status}
+                      <ToolTip
+                        direction="top"
+                        hovered={statusHovered}
+                        offset={"1.5rem"}
+                        maxWidth="max-w-[10rem]"
+                        delayShow={100}
+                      >
+                        <p>
+                          {getStatusDescription(translation.status, langui)}
+                        </p>
+                      </ToolTip>
+                    </Chip>
                   )}
                   {translation.title ? <h3>{translation.title}</h3> : ""}
                 </div>
diff --git a/src/components/Chronology/ChronologyYearComponent.tsx b/src/components/Chronology/ChronologyYearComponent.tsx
index 8136ac0..d4cfbd0 100644
--- a/src/components/Chronology/ChronologyYearComponent.tsx
+++ b/src/components/Chronology/ChronologyYearComponent.tsx
@@ -1,14 +1,20 @@
 import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent";
-import { GetChronologyItemsQuery } from "graphql/operations-types";
+import {
+  GetChronologyItemsQuery,
+  GetWebsiteInterfaceQuery,
+} from "graphql/operations-types";
 
 type ChronologyYearComponentProps = {
   year: number;
   items: GetChronologyItemsQuery["chronologyItems"]["data"][number][];
+  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
 };
 
 export default function ChronologyYearComponent(
   props: ChronologyYearComponentProps
 ): JSX.Element {
+  const { langui } = props;
+
   return (
     <div
       className="target:bg-mid rounded-2xl target:py-4 target:my-4"
@@ -19,6 +25,7 @@ export default function ChronologyYearComponent(
           key={index}
           item={item}
           displayYear={index === 0}
+          langui={langui}
         />
       ))}
     </div>
diff --git a/src/components/Panels/SubPanel.tsx b/src/components/Panels/SubPanel.tsx
index f1fcde4..be36a28 100644
--- a/src/components/Panels/SubPanel.tsx
+++ b/src/components/Panels/SubPanel.tsx
@@ -4,7 +4,7 @@ type SubPanelProps = {
 
 export default function SubPanel(props: SubPanelProps): JSX.Element {
   return (
-    <div className="grid pt-10 pb-20 px-6 desktop:py-8 desktop:px-10 gap-y-2 justify-items-center text-center">
+    <div className="grid pt-10 pb-20 px-6 desktop:py-8 desktop:px-10 gap-y-2 text-center">
       {props.children}
     </div>
   );
diff --git a/src/components/ToolTip.tsx b/src/components/ToolTip.tsx
index db41220..eeadec6 100644
--- a/src/components/ToolTip.tsx
+++ b/src/components/ToolTip.tsx
@@ -3,15 +3,17 @@ import { useEffect, useState } from "react";
 type ToolTipProps = {
   hovered: boolean;
   children: React.ReactNode;
-  delayShow?: number;
   direction: "right" | "bottom" | "top" | "left";
   offset: string;
+  delayShow?: number;
+  maxWidth?: "max-w-[10rem]" | "max-w-xs" | "max-w-sm" | "max-w-md";
 };
 
 export default function ToolTip(props: ToolTipProps): JSX.Element {
   const { children, hovered, direction, offset } = props;
-  let { delayShow } = props;
-  if (delayShow === undefined) delayShow = 500;
+  let { delayShow, maxWidth } = props;
+  if (delayShow === undefined) delayShow = 300;
+  if (maxWidth === undefined) maxWidth = "max-w-sm";
 
   const [show, setShow] = useState(false);
 
@@ -62,7 +64,7 @@ export default function ToolTip(props: ToolTipProps): JSX.Element {
 
   return (
     <div
-      className={`fixed z-[100] drop-shadow-shade-xl transition-opacity max-w-sm ${
+      className={`fixed z-[100] drop-shadow-shade-xl transition-opacity ${maxWidth} ${
         show
           ? "opacity-100 pointer-events-auto"
           : "opacity-0 pointer-events-none"
@@ -74,7 +76,7 @@ export default function ToolTip(props: ToolTipProps): JSX.Element {
           className={`w-0 h-0 border-8 border-[transparent] place-self-center ${arrowCSS}`}
         />
       </div>
-      <div className="p-2 px-4 bg-light rounded-md">{children}</div>
+      <div className="p-4 px-6 bg-light rounded-md">{children}</div>
     </div>
   );
 }
diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx
index d30be0d..b45f324 100644
--- a/src/pages/contents/[slug]/read.tsx
+++ b/src/pages/contents/[slug]/read.tsx
@@ -14,6 +14,7 @@ import ThumbnailHeader from "components/Content/ThumbnailHeader";
 import AppLayout from "components/AppLayout";
 import Markdawn from "components/Markdown/Markdawn";
 import {
+  getStatusDescription,
   prettyinlineTitle,
   prettyLanguage,
   prettySlug,
@@ -26,6 +27,8 @@ import Chip from "components/Chip";
 import RecorderChip from "components/RecorderChip";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 import TOC from "components/Markdown/TOC";
+import ToolTip from "components/ToolTip";
+import { useState } from "react";
 
 interface ContentReadProps extends AppStaticProps {
   content: GetContentTextQuery["contents"]["data"][number]["attributes"];
@@ -37,6 +40,8 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
   const { langui, content, languages } = props;
   const router = useRouter();
 
+  const [statusHovered, setStatusHovered] = useState(false);
+
   const subPanel = (
     <SubPanel>
       <ReturnButton
@@ -77,7 +82,23 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
           <div className="grid grid-flow-col place-items-center place-content-center gap-2">
             <p className="font-headers">{langui.status}:</p>
 
-            <Chip>{content.text_set[0].status}</Chip>
+            <Chip
+              onMouseEnter={() => setStatusHovered(true)}
+              onMouseLeave={() => setStatusHovered(false)}
+            >
+              {content.text_set[0].status}
+              <ToolTip
+                direction="top"
+                hovered={statusHovered}
+                offset={"1.5rem"}
+                maxWidth="max-w-[10rem]"
+                delayShow={100}
+              >
+                <p>
+                  {getStatusDescription(content.text_set[0].status, langui)}
+                </p>
+              </ToolTip>
+            </Chip>
           </div>
 
           {content.text_set[0].transcribers.data.length > 0 && (
diff --git a/src/pages/wiki/chronology.tsx b/src/pages/wiki/chronology.tsx
index 600ffcf..f31f9e4 100644
--- a/src/pages/wiki/chronology.tsx
+++ b/src/pages/wiki/chronology.tsx
@@ -25,7 +25,7 @@ interface ChronologyProps extends AppStaticProps {
 
 export default function Chronology(props: ChronologyProps): JSX.Element {
   useTesting(props);
-  const { chronologyItems, chronologyEras } = props;
+  const { chronologyItems, chronologyEras, langui } = props;
 
   // Group by year the Chronology items
   let chronologyItemYearGroups: GetChronologyItemsQuery["chronologyItems"]["data"][number][][][] =
@@ -102,6 +102,7 @@ export default function Chronology(props: ChronologyProps): JSX.Element {
               key={`${eraIndex}-${index}`}
               year={items[0].attributes.year}
               items={items}
+              langui={langui}
             />
           ))}
         </>
diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts
index a3e2800..9e7200c 100644
--- a/src/queries/helpers.ts
+++ b/src/queries/helpers.ts
@@ -4,6 +4,7 @@ import {
   ImageQuality,
 } from "components/Img";
 import {
+  Enum_Componentsetstextset_Status,
   GetCurrenciesQuery,
   GetLanguagesQuery,
   GetLibraryItemQuery,
@@ -251,6 +252,28 @@ export function sortContent(
   });
 }
 
+export function getStatusDescription(
+  status: string,
+  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]
+): string {
+  switch (status) {
+    case Enum_Componentsetstextset_Status.Incomplete:
+      return langui.status_incomplete;
+
+    case Enum_Componentsetstextset_Status.Draft:
+      return langui.status_draft;
+
+    case Enum_Componentsetstextset_Status.Review:
+      return langui.status_review;
+
+    case Enum_Componentsetstextset_Status.Done:
+      return langui.status_done;
+
+    default:
+      return "";
+  }
+}
+
 export function slugify(str: string): string {
   return str
     .replace(/[ÀÁÂÃÄÅàáâãäåæÆ]/g, "a")
-- 
2.40.1


From d2294393b5e708fd2a966bbd372a00e4c4d80872 Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Sun, 13 Mar 2022 14:54:56 +0100
Subject: [PATCH 13/17] Now use Tippy for Tooltips

---
 package-lock.json                             | 52 +++++++++++
 package.json                                  |  1 +
 src/components/Chip.tsx                       |  6 +-
 .../Chronology/ChronologyItemComponent.tsx    | 23 ++---
 src/components/PanelComponents/NavOption.tsx  | 59 +++++++------
 src/components/Panels/MainPanel.tsx           | 88 ++++++++++++-------
 src/components/RecorderChip.tsx               | 31 +++----
 src/components/ToolTip.tsx                    | 83 ++---------------
 src/pages/_app.tsx                            |  2 +-
 src/pages/contents/[slug]/read.tsx            | 24 ++---
 src/tailwind.css                              | 65 +++++++++++++-
 11 files changed, 238 insertions(+), 196 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6ef716e..e9fc868 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@fontsource/opendyslexic": "^4.5.2",
         "@fontsource/vollkorn": "^4.5.4",
         "@fontsource/zen-maru-gothic": "^4.5.5",
+        "@tippyjs/react": "^4.2.6",
         "markdown-to-jsx": "^7.1.7",
         "next": "^12.1.0",
         "react": "17.0.2",
@@ -447,12 +448,34 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.3",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.3.tgz",
+      "integrity": "sha512-8U7hIl7+30XbIrJ0deQMXpXESM1L4yrt6BHok5hzcR0LivivuNkk+tHU1iRVScOwCmQcrOr6kvtIr29MNbQHqQ==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz",
       "integrity": "sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==",
       "dev": true
     },
+    "node_modules/@tippyjs/react": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz",
+      "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==",
+      "dependencies": {
+        "tippy.js": "^6.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -3409,6 +3432,14 @@
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
       "dev": true
     },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3894,12 +3925,25 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.3",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.3.tgz",
+      "integrity": "sha512-8U7hIl7+30XbIrJ0deQMXpXESM1L4yrt6BHok5hzcR0LivivuNkk+tHU1iRVScOwCmQcrOr6kvtIr29MNbQHqQ=="
+    },
     "@rushstack/eslint-patch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz",
       "integrity": "sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==",
       "dev": true
     },
+    "@tippyjs/react": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz",
+      "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==",
+      "requires": {
+        "tippy.js": "^6.3.1"
+      }
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -6013,6 +6057,14 @@
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
       "dev": true
     },
+    "tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "requires": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/package.json b/package.json
index f46c44f..07b9196 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@fontsource/opendyslexic": "^4.5.2",
     "@fontsource/vollkorn": "^4.5.4",
     "@fontsource/zen-maru-gothic": "^4.5.5",
+    "@tippyjs/react": "^4.2.6",
     "markdown-to-jsx": "^7.1.7",
     "next": "^12.1.0",
     "react": "17.0.2",
diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
index 2c41af4..e3719a1 100644
--- a/src/components/Chip.tsx
+++ b/src/components/Chip.tsx
@@ -3,16 +3,12 @@ import { MouseEventHandler } from "react";
 type ChipProps = {
   className?: string;
   children: React.ReactNode;
-  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
-  onMouseLeave?: MouseEventHandler<HTMLDivElement>;
 };
 
 export default function Chip(props: ChipProps): JSX.Element {
   return (
     <div
-      className={`grid place-content-center place-items-center text-xs pb-[0.14rem] px-1.5 border-[1px] rounded-full opacity-70 transition-[color,_opacity,_border-color] hover:opacity-100 ${props.className} `}
-      onMouseEnter={props.onMouseEnter}
-      onMouseLeave={props.onMouseLeave}
+      className={`grid relative place-content-center place-items-center text-xs pb-[0.14rem] px-1.5 border-[1px] rounded-full opacity-70 transition-[color,_opacity,_border-color] hover:opacity-100 ${props.className}`}
     >
       {props.children}
     </div>
diff --git a/src/components/Chronology/ChronologyItemComponent.tsx b/src/components/Chronology/ChronologyItemComponent.tsx
index 4e1bcad..81f1504 100644
--- a/src/components/Chronology/ChronologyItemComponent.tsx
+++ b/src/components/Chronology/ChronologyItemComponent.tsx
@@ -6,7 +6,6 @@ import {
   GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
 import { getStatusDescription } from "queries/helpers";
-import { useState } from "react";
 
 export type ChronologyItemComponentProps = {
   item: GetChronologyItemsQuery["chronologyItems"]["data"][number];
@@ -18,7 +17,6 @@ export default function ChronologyItemComponent(
   props: ChronologyItemComponentProps
 ): JSX.Element {
   const { langui } = props;
-  const [statusHovered, setStatusHovered] = useState(false);
 
   function generateAnchor(year: number, month: number, day: number): string {
     let result: string = "";
@@ -93,23 +91,12 @@ export default function ChronologyItemComponent(
                 <div className="place-items-start place-content-start grid grid-flow-col gap-2">
                   {translation.status !==
                     Enum_Componenttranslationschronologyitem_Status.Done && (
-                    <Chip
-                      onMouseEnter={() => setStatusHovered(true)}
-                      onMouseLeave={() => setStatusHovered(false)}
+                    <ToolTip
+                      content={getStatusDescription(translation.status, langui)}
+                      maxWidth={"20rem"}
                     >
-                      {translation.status}
-                      <ToolTip
-                        direction="top"
-                        hovered={statusHovered}
-                        offset={"1.5rem"}
-                        maxWidth="max-w-[10rem]"
-                        delayShow={100}
-                      >
-                        <p>
-                          {getStatusDescription(translation.status, langui)}
-                        </p>
-                      </ToolTip>
-                    </Chip>
+                      <Chip>{translation.status}</Chip>
+                    </ToolTip>
                   )}
                   {translation.title ? <h3>{translation.title}</h3> : ""}
                 </div>
diff --git a/src/components/PanelComponents/NavOption.tsx b/src/components/PanelComponents/NavOption.tsx
index 4d9660f..457e0dc 100644
--- a/src/components/PanelComponents/NavOption.tsx
+++ b/src/components/PanelComponents/NavOption.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import Link from "next/link";
-import { MouseEventHandler, useState } from "react";
+import { MouseEventHandler } from "react";
 import ToolTip from "components/ToolTip";
 
 type NavOptionProps = {
@@ -23,34 +23,39 @@ export default function NavOption(props: NavOptionProps): JSX.Element {
     props.border ? border : ""
   } ${isActive ? divActive : ""}`;
 
-  const [hovered, setHovered] = useState(false);
-
   return (
-    <Link href={props.url} passHref>
-      <div
-        onClick={props.onClick}
-        onMouseEnter={() => props.reduced && setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-        className={`relative grid grid-flow-col grid-cols-[auto] auto-cols-fr justify-center ${
-          props.icon ? "text-left" : "text-center"
-        } ${divCommon}`}
-      >
-        {props.icon && (
-          <span className="material-icons mt-[.1em]">{props.icon}</span>
-        )}
-
-        {!props.reduced && (
-          <div>
-            <h3 className="text-2xl">{props.title}</h3>
-            {props.subtitle && <p className="col-start-2">{props.subtitle}</p>}
-          </div>
-        )}
-
-        <ToolTip hovered={hovered} direction="right" offset="3.5rem">
+    <ToolTip
+      content={
+        <div>
           <h3 className="text-2xl">{props.title}</h3>
           {props.subtitle && <p className="col-start-2">{props.subtitle}</p>}
-        </ToolTip>
-      </div>
-    </Link>
+        </div>
+      }
+      placement="right"
+      className="text-left"
+      disabled={!props.reduced}
+    >
+      <Link href={props.url} passHref>
+        <div
+          onClick={props.onClick}
+          className={`relative grid grid-flow-col grid-cols-[auto] auto-cols-fr justify-center ${
+            props.icon ? "text-left" : "text-center"
+          } ${divCommon}`}
+        >
+          {props.icon && (
+            <span className="material-icons mt-[.1em]">{props.icon}</span>
+          )}
+
+          {!props.reduced && (
+            <div>
+              <h3 className="text-2xl">{props.title}</h3>
+              {props.subtitle && (
+                <p className="col-start-2">{props.subtitle}</p>
+              )}
+            </div>
+          )}
+        </div>
+      </Link>
+    </ToolTip>
   );
 }
diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx
index 81cb786..a705e48 100644
--- a/src/components/Panels/MainPanel.tsx
+++ b/src/components/Panels/MainPanel.tsx
@@ -7,6 +7,7 @@ import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import Markdown from "markdown-to-jsx";
 import { useMediaDesktop } from "hooks/useMediaQuery";
 import { useAppLayout } from "contexts/AppLayoutContext";
+import ToolTip from "components/ToolTip";
 
 type MainPanelProps = {
   langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
@@ -62,49 +63,74 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
                 : "flex-row"
             } flex-wrap gap-2`}
           >
-            <Button
-              className={
-                appLayout.mainPanelReduced && isDesktop ? "" : "!py-0.5 !px-2.5"
-              }
-              onClick={() => {
-                appLayout.setConfigPanelOpen(true);
-              }}
+            <ToolTip
+              content={<h3 className="text-2xl">{"Open settings"}</h3>}
+              placement="right"
+              className="text-left"
+              disabled={!appLayout.mainPanelReduced}
             >
-              <span
-                className={`material-icons ${
-                  !(appLayout.mainPanelReduced && isDesktop) && "!text-sm"
-                } `}
-              >
-                settings
-              </span>
-            </Button>
-
-            {router.locale && (
               <Button
-                onClick={() => appLayout.setLanguagePanelOpen(true)}
                 className={
                   appLayout.mainPanelReduced && isDesktop
                     ? ""
-                    : "!py-0.5 !px-2.5 !text-sm"
+                    : "!py-0.5 !px-2.5"
                 }
+                onClick={() => {
+                  appLayout.setConfigPanelOpen(true);
+                }}
               >
-                {router.locale.toUpperCase()}
+                <span
+                  className={`material-icons ${
+                    !(appLayout.mainPanelReduced && isDesktop) && "!text-sm"
+                  } `}
+                >
+                  settings
+                </span>
               </Button>
+            </ToolTip>
+
+            {router.locale && (
+              <ToolTip
+                content={<h3 className="text-2xl">{"Change language"}</h3>}
+                placement="right"
+                className="text-left"
+                disabled={!appLayout.mainPanelReduced}
+              >
+                <Button
+                  onClick={() => appLayout.setLanguagePanelOpen(true)}
+                  className={
+                    appLayout.mainPanelReduced && isDesktop
+                      ? ""
+                      : "!py-0.5 !px-2.5 !text-sm"
+                  }
+                >
+                  {router.locale.toUpperCase()}
+                </Button>
+              </ToolTip>
             )}
 
-            <Button
-              className={
-                appLayout.mainPanelReduced && isDesktop ? "" : "!py-0.5 !px-2.5"
-              }
+            <ToolTip
+              content={<h3 className="text-2xl">{"Open search"}</h3>}
+              placement="right"
+              className="text-left"
+              disabled={!appLayout.mainPanelReduced}
             >
-              <span
-                className={`material-icons ${
-                  !(appLayout.mainPanelReduced && isDesktop) && "!text-sm"
-                } `}
+              <Button
+                className={
+                  appLayout.mainPanelReduced && isDesktop
+                    ? ""
+                    : "!py-0.5 !px-2.5"
+                }
               >
-                search
-              </span>
-            </Button>
+                <span
+                  className={`material-icons ${
+                    !(appLayout.mainPanelReduced && isDesktop) && "!text-sm"
+                  } `}
+                >
+                  search
+                </span>
+              </Button>
+            </ToolTip>
           </div>
         </div>
       </div>
diff --git a/src/components/RecorderChip.tsx b/src/components/RecorderChip.tsx
index 257d5c5..2a61174 100644
--- a/src/components/RecorderChip.tsx
+++ b/src/components/RecorderChip.tsx
@@ -3,7 +3,6 @@ import {
   GetContentTextQuery,
   GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
-import { useState } from "react";
 import Img, { ImageQuality } from "./Img";
 import ToolTip from "./ToolTip";
 
@@ -17,24 +16,9 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element {
   const recorder = props.recorder;
   const langui = props.langui;
 
-  const [hovered, setHovered] = useState(false);
-
   return (
-    <Chip
-      key={recorder.id}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      {recorder.attributes.anonymize
-        ? `Recorder#${recorder.attributes.anonymous_code}`
-        : recorder.attributes.username}
-
-      <ToolTip
-        hovered={hovered}
-        direction="top"
-        offset="1.5rem"
-        delayShow={150}
-      >
+    <ToolTip
+      content={
         <div className="p-2 py-5 grid gap-2">
           <div className="grid grid-flow-col gap-2 place-items-center place-content-start">
             {recorder.attributes.avatar.data && (
@@ -68,7 +52,14 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element {
               recorder.attributes.bio[0].bio}
           </p>
         </div>
-      </ToolTip>
-    </Chip>
+      }
+      placement="top"
+    >
+      <Chip key={recorder.id}>
+        {recorder.attributes.anonymize
+          ? `Recorder#${recorder.attributes.anonymous_code}`
+          : recorder.attributes.username}
+      </Chip>
+    </ToolTip>
   );
 }
diff --git a/src/components/ToolTip.tsx b/src/components/ToolTip.tsx
index eeadec6..ccf0400 100644
--- a/src/components/ToolTip.tsx
+++ b/src/components/ToolTip.tsx
@@ -1,82 +1,17 @@
-import { useEffect, useState } from "react";
+import Tippy, { TippyProps } from "@tippyjs/react";
 
-type ToolTipProps = {
-  hovered: boolean;
-  children: React.ReactNode;
-  direction: "right" | "bottom" | "top" | "left";
-  offset: string;
-  delayShow?: number;
-  maxWidth?: "max-w-[10rem]" | "max-w-xs" | "max-w-sm" | "max-w-md";
-};
+interface ToolTipProps extends TippyProps {}
 
 export default function ToolTip(props: ToolTipProps): JSX.Element {
-  const { children, hovered, direction, offset } = props;
-  let { delayShow, maxWidth } = props;
-  if (delayShow === undefined) delayShow = 300;
-  if (maxWidth === undefined) maxWidth = "max-w-sm";
+  let newProps = { ...props };
 
-  const [show, setShow] = useState(false);
-
-  useEffect(() => {
-    let timeout = setTimeout(() => {});
-    if (hovered) {
-      timeout = setTimeout(() => hovered && setShow(true), delayShow);
-    } else {
-      setShow(false);
-    }
-    return () => clearTimeout(timeout);
-  }, [delayShow, hovered]);
-
-  let tooltipCSS = "";
-  let transformCSS = "";
-  let arrowParentCSS = "";
-  let arrowCSS = "";
-
-  switch (direction) {
-    case "left":
-      tooltipCSS = "[justify-self:end] [align-self:center]";
-      transformCSS = `translateX(-${offset})`;
-      arrowParentCSS = "w-4 -right-4 top-0 bottom-0";
-      arrowCSS = "border-l-light";
-      break;
-
-    case "right":
-      tooltipCSS = "[justify-self:start] [align-self:center]";
-      transformCSS = `translateX(${offset})`;
-      arrowParentCSS = "w-4 -left-4 top-0 bottom-0";
-      arrowCSS = "border-r-light";
-      break;
-
-    case "top":
-      tooltipCSS = "[align-self:end]";
-      transformCSS = `translateY(-${offset})`;
-      arrowParentCSS = "h-4 -bottom-4 left-0 right-0";
-      arrowCSS = "border-t-light";
-      break;
-
-    case "bottom":
-      tooltipCSS = "[align-self:start]";
-      transformCSS = `translateY(${offset})`;
-      arrowParentCSS = "h-4 -top-4 left-0 right-0";
-      arrowCSS = "border-b-light";
-      break;
-  }
+  // Set defaults
+  if (newProps.delay === undefined) newProps.delay = [150, 0];
+  if (newProps.interactive === undefined) newProps.interactive = true;
 
   return (
-    <div
-      className={`fixed z-[100] drop-shadow-shade-xl transition-opacity ${maxWidth} ${
-        show
-          ? "opacity-100 pointer-events-auto"
-          : "opacity-0 pointer-events-none"
-      } ${tooltipCSS}`}
-      style={{ transform: transformCSS }}
-    >
-      <div className={`absolute grid ${arrowParentCSS}`}>
-        <div
-          className={`w-0 h-0 border-8 border-[transparent] place-self-center ${arrowCSS}`}
-        />
-      </div>
-      <div className="p-4 px-6 bg-light rounded-md">{children}</div>
-    </div>
+    <Tippy {...newProps}>
+      <div>{props.children}</div>
+    </Tippy>
   );
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 1d10540..b073451 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -2,7 +2,7 @@ import type { AppProps } from "next/app";
 import "tailwind.css";
 import "@fontsource/zen-maru-gothic/500.css";
 import "@fontsource/vollkorn/700.css";
-import "@fontsource/opendyslexic/400.css"
+import "@fontsource/opendyslexic/400.css";
 import "@fontsource/material-icons";
 
 import { AppContextProvider } from "contexts/AppLayoutContext";
diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx
index b45f324..774c85e 100644
--- a/src/pages/contents/[slug]/read.tsx
+++ b/src/pages/contents/[slug]/read.tsx
@@ -28,7 +28,6 @@ import RecorderChip from "components/RecorderChip";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 import TOC from "components/Markdown/TOC";
 import ToolTip from "components/ToolTip";
-import { useState } from "react";
 
 interface ContentReadProps extends AppStaticProps {
   content: GetContentTextQuery["contents"]["data"][number]["attributes"];
@@ -40,8 +39,6 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
   const { langui, content, languages } = props;
   const router = useRouter();
 
-  const [statusHovered, setStatusHovered] = useState(false);
-
   const subPanel = (
     <SubPanel>
       <ReturnButton
@@ -82,23 +79,12 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
           <div className="grid grid-flow-col place-items-center place-content-center gap-2">
             <p className="font-headers">{langui.status}:</p>
 
-            <Chip
-              onMouseEnter={() => setStatusHovered(true)}
-              onMouseLeave={() => setStatusHovered(false)}
+            <ToolTip
+              content={getStatusDescription(content.text_set[0].status, langui)}
+              maxWidth={"20rem"}
             >
-              {content.text_set[0].status}
-              <ToolTip
-                direction="top"
-                hovered={statusHovered}
-                offset={"1.5rem"}
-                maxWidth="max-w-[10rem]"
-                delayShow={100}
-              >
-                <p>
-                  {getStatusDescription(content.text_set[0].status, langui)}
-                </p>
-              </ToolTip>
-            </Chip>
+              <Chip>{content.text_set[0].status}</Chip>
+            </ToolTip>
           </div>
 
           {content.text_set[0].transcribers.data.length > 0 && (
diff --git a/src/tailwind.css b/src/tailwind.css
index 7f30142..e4a8203 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -25,7 +25,7 @@
   }
 
   mark {
-    @apply bg-mid px-2
+    @apply bg-mid px-2;
   }
 
   /* SCROLLBARS STYLING */
@@ -142,3 +142,66 @@
     @apply [background-image:var(--theme-texture-dots)] [background-blend-mode:var(--theme-texture-dots-blend)] bg-local bg-[length:10cm];
   }
 }
+
+.tippy-box[data-animation="fade"][data-state="hidden"] {
+  @apply opacity-0;
+}
+[data-tippy-root] {
+  max-width: calc(100vw - 10px);
+}
+.tippy-box {
+  @apply relative bg-light drop-shadow-shade-xl rounded-lg transition-[transform,_visibility,_opacity];
+}
+.tippy-box[data-placement^="top"] > .tippy-arrow {
+  @apply bottom-0;
+}
+.tippy-box[data-placement^="top"] > .tippy-arrow:before {
+  bottom: -7px;
+  left: 0;
+  border-width: 8px 8px 0;
+  border-top-color: initial;
+  transform-origin: center top;
+}
+.tippy-box[data-placement^="bottom"] > .tippy-arrow {
+  top: 0;
+}
+.tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
+  top: -7px;
+  left: 0;
+  border-width: 0 8px 8px;
+  border-bottom-color: initial;
+  transform-origin: center bottom;
+}
+.tippy-box[data-placement^="left"] > .tippy-arrow {
+  right: 0;
+}
+.tippy-box[data-placement^="left"] > .tippy-arrow:before {
+  border-width: 8px 0 8px 8px;
+  border-left-color: initial;
+  right: -7px;
+  transform-origin: center left;
+}
+.tippy-box[data-placement^="right"] > .tippy-arrow {
+  left: 0;
+}
+.tippy-box[data-placement^="right"] > .tippy-arrow:before {
+  left: -7px;
+  border-width: 8px 8px 8px 0;
+  border-right-color: initial;
+  transform-origin: center right;
+}
+.tippy-box[data-inertia][data-state="visible"] {
+  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
+}
+.tippy-arrow {
+  @apply h-4 w-4 text-light;
+}
+.tippy-arrow:before {
+  content: "";
+  position: absolute;
+  border-color: transparent;
+  border-style: solid;
+}
+.tippy-content {
+  @apply relative px-6 py-4 z-10;
+}
-- 
2.40.1


From 08fe5000a7bc3d9633835c3bdfb04db5d1e2cf28 Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Sun, 13 Mar 2022 15:34:51 +0100
Subject: [PATCH 14/17] Added animation to tooltip opening closing

---
 next-env.d.ts              | 10 +++++-----
 src/components/ToolTip.tsx |  2 ++
 src/pages/_document.tsx    |  1 -
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/next-env.d.ts b/next-env.d.ts
index 4f11a03..62b8a52 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,5 +1,5 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/src/components/ToolTip.tsx b/src/components/ToolTip.tsx
index ccf0400..aafea75 100644
--- a/src/components/ToolTip.tsx
+++ b/src/components/ToolTip.tsx
@@ -1,4 +1,5 @@
 import Tippy, { TippyProps } from "@tippyjs/react";
+import "tippy.js/animations/scale-subtle.css";
 
 interface ToolTipProps extends TippyProps {}
 
@@ -8,6 +9,7 @@ export default function ToolTip(props: ToolTipProps): JSX.Element {
   // Set defaults
   if (newProps.delay === undefined) newProps.delay = [150, 0];
   if (newProps.interactive === undefined) newProps.interactive = true;
+  if (newProps.animation === undefined) newProps.animation = "scale-subtle";
 
   return (
     <Tippy {...newProps}>
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index a8304bc..506d91b 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -16,7 +16,6 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head>
-
           <link
             rel="apple-touch-icon"
             sizes="180x180"
-- 
2.40.1


From f1a1b83b45f8f148c8cf9a576d2c8312eec51cb7 Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Sun, 13 Mar 2022 15:39:19 +0100
Subject: [PATCH 15/17] run prettier

---
 run_accords_prettier.sh  | 2 ++
 src/components/Popup.tsx | 4 +++-
 src/pages/index.tsx      | 4 +++-
 3 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100755 run_accords_prettier.sh

diff --git a/run_accords_prettier.sh b/run_accords_prettier.sh
new file mode 100755
index 0000000..ce5e225
--- /dev/null
+++ b/run_accords_prettier.sh
@@ -0,0 +1,2 @@
+npx prettier --end-of-line auto --write "**/*.tsx"
+npx prettier --end-of-line auto --write "**/*.ts"
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index c0fc59a..c9a30e1 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -11,7 +11,9 @@ export default function Popup(props: PopupProps): JSX.Element {
   return (
     <div
       className={`fixed inset-0 z-50 grid place-content-center transition-[backdrop-filter] duration-500 ${
-        props.state ? "[backdrop-filter:blur(2px)]" : "pointer-events-none touch-none"
+        props.state
+          ? "[backdrop-filter:blur(2px)]"
+          : "pointer-events-none touch-none"
       }`}
     >
       <div
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 818ea03..d65e0d6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -18,7 +18,9 @@ export default function Home(props: HomeProps): JSX.Element {
       <div className="grid place-items-center place-content-center w-full gap-5 text-center">
         <div className="[mask:url('/icons/accords.svg')] [mask-size:contain] [mask-repeat:no-repeat] [mask-position:center] w-32 aspect-square mobile:w-[50vw] bg-black" />
         <h1 className="text-5xl mb-0">Accord&rsquo;s Library</h1>
-        <h2 className="text-xl -mt-5">Discover • Analyse • Translate • Archive</h2>
+        <h2 className="text-xl -mt-5">
+          Discover • Analyse • Translate • Archive
+        </h2>
       </div>
       {post.translations.length > 0 && (
         <Markdawn text={post.translations[0].body} />
-- 
2.40.1


From 4928acdee7727d7c296d1f439ba3de4210a8e7f8 Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Sun, 13 Mar 2022 15:49:04 +0100
Subject: [PATCH 16/17] Added prettier ignore config

---
 .prettierignore | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .prettierignore

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..a680367
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+.next
-- 
2.40.1


From b172aa34a20ec6f948b849740e4569365cbb5fb8 Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Sun, 13 Mar 2022 15:56:03 +0100
Subject: [PATCH 17/17] Ran prettier on more file type

---
 README.md               |  1 +
 postcss.config.js       |  4 ++--
 public/README.md        |  2 +-
 public/html_code.html   | 20 ++++++++++----------
 run_accords_prettier.sh |  3 +--
 tailwind.config.js      |  1 -
 6 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 66573d1..7912e64 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@
   - Markdown format for the rich text fields
 
 #### [Image Processor](https://github.com/Accords-Library/img.accords-library.com)
+
 - Convert the images from the CMS to 4 formats
   - Small: 512x512, quality 60, .webp
   - Medium: 1024x1024, quality 75, .webp
diff --git a/postcss.config.js b/postcss.config.js
index c8965cb..a1b36d2 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -2,5 +2,5 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
-  }
-}
\ No newline at end of file
+  },
+};
diff --git a/public/README.md b/public/README.md
index f42f4a5..4995470 100644
--- a/public/README.md
+++ b/public/README.md
@@ -21,4 +21,4 @@ Insert the following code in the `head` section of your pages:
     <meta name="msapplication-TileImage" content="/mstile-144x144.png">
     <meta name="theme-color" content="#feecd6">
 
-*Optional* - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker)
\ No newline at end of file
+_Optional_ - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker)
diff --git a/public/html_code.html b/public/html_code.html
index a2b5866..cfcf03b 100644
--- a/public/html_code.html
+++ b/public/html_code.html
@@ -1,10 +1,10 @@
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-<link rel="manifest" href="/site.webmanifest">
-<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#9c6644">
-<meta name="apple-mobile-web-app-title" content="Accord's Library">
-<meta name="application-name" content="Accord's Library">
-<meta name="msapplication-TileColor" content="#feecd6">
-<meta name="msapplication-TileImage" content="/mstile-144x144.png">
-<meta name="theme-color" content="#feecd6">
\ No newline at end of file
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+<link rel="manifest" href="/site.webmanifest" />
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#9c6644" />
+<meta name="apple-mobile-web-app-title" content="Accord's Library" />
+<meta name="application-name" content="Accord's Library" />
+<meta name="msapplication-TileColor" content="#feecd6" />
+<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
+<meta name="theme-color" content="#feecd6" />
diff --git a/run_accords_prettier.sh b/run_accords_prettier.sh
index ce5e225..b19f459 100755
--- a/run_accords_prettier.sh
+++ b/run_accords_prettier.sh
@@ -1,2 +1 @@
-npx prettier --end-of-line auto --write "**/*.tsx"
-npx prettier --end-of-line auto --write "**/*.ts"
+npx prettier --end-of-line auto --write .
diff --git a/tailwind.config.js b/tailwind.config.js
index 0f9f6b4..5beab85 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -72,7 +72,6 @@ module.exports = {
     },
   },
   plugins: [
-
     plugin(function ({ addUtilities }) {
       addUtilities({
         ".set-theme-light": {
-- 
2.40.1