From 69413fd5e20e65010cf522ad262a786340fc10c2 Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Tue, 8 Oct 2024 12:27:29 +0000
Subject: [PATCH 1/3] Add chapter links

---
 .../Wrapper/OrganizationWrapper.tsx           |  1 +
 apps/web/screens/Manual/Manual.css.ts         |  4 -
 apps/web/screens/Manual/ManualChapter.tsx     | 90 ++++++++++++++++++-
 .../Manual/components/ManualWrapper.tsx       |  2 +-
 4 files changed, 89 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx b/apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx
index b0720718d9f8..9616fd095eea 100644
--- a/apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx
+++ b/apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx
@@ -1146,6 +1146,7 @@ export const OrganizationWrapper: React.FC<
                         type="button"
                         variant="text"
                         truncate
+                        unfocusable
                       >
                         {backLink.text}
                       </Button>
diff --git a/apps/web/screens/Manual/Manual.css.ts b/apps/web/screens/Manual/Manual.css.ts
index 1fa72d0ff04a..50ec164869b1 100644
--- a/apps/web/screens/Manual/Manual.css.ts
+++ b/apps/web/screens/Manual/Manual.css.ts
@@ -13,7 +13,3 @@ export const inputContainer = style({
     },
   }),
 })
-
-export const smallLink = style({
-  fontSize: '14px',
-})
diff --git a/apps/web/screens/Manual/ManualChapter.tsx b/apps/web/screens/Manual/ManualChapter.tsx
index f643d6ca73b5..0e2679128c5f 100644
--- a/apps/web/screens/Manual/ManualChapter.tsx
+++ b/apps/web/screens/Manual/ManualChapter.tsx
@@ -7,7 +7,9 @@ import {
   Accordion,
   AccordionItem,
   Box,
+  Button,
   Divider,
+  Inline,
   LinkV2,
   Stack,
   TableOfContents,
@@ -91,6 +93,41 @@ const ManualChapter: ManualScreen = ({ manual, manualChapter, namespace }) => {
     initialScrollHasHappened.current = true
   }, [selectedItemId])
 
+  const { previousChapterUrl, nextChapterUrl } = useMemo(() => {
+    if (!manual?.slug || !manualChapter?.id) {
+      return {
+        previousChapterUrl: '',
+        nextChapterUrl: '',
+      }
+    }
+
+    const index = manual.chapters.findIndex(
+      (chapter) => chapter.id === manualChapter?.id,
+    )
+
+    const nextChapterSlug = manual.chapters[index + 1]?.slug
+
+    if (index === 0) {
+      return {
+        previousChapterUrl: '',
+        nextChapterUrl: nextChapterSlug
+          ? linkResolver('manualchapter', [manual.slug, nextChapterSlug]).href
+          : '',
+      }
+    }
+
+    const previousChapterSlug = manual.chapters[index - 1]?.slug
+
+    return {
+      previousChapterUrl: previousChapterSlug
+        ? linkResolver('manualchapter', [manual.slug, previousChapterSlug]).href
+        : '',
+      nextChapterUrl: nextChapterSlug
+        ? linkResolver('manualchapter', [manual.slug, nextChapterSlug]).href
+        : '',
+    }
+  }, [linkResolver, manual?.chapters, manual?.slug, manualChapter?.id])
+
   return (
     <ManualWrapper
       manual={manual}
@@ -98,12 +135,13 @@ const ManualChapter: ManualScreen = ({ manual, manualChapter, namespace }) => {
       socialTitle={generateOgTitle(manual?.title, manualChapter?.title)}
     >
       {manualChapter && (
-        <Stack space={2}>
+        <Stack space={5}>
           <LinkV2
-            className={styles.smallLink}
             underline="small"
             underlineVisibility="always"
+            color="blue400"
             href={linkResolver('manual', [manual?.slug as string]).href}
+            className={styles.link}
           >
             {n(
               'manualFrontpage',
@@ -111,7 +149,7 @@ const ManualChapter: ManualScreen = ({ manual, manualChapter, namespace }) => {
             )}
           </LinkV2>
           <Divider />
-          <Box paddingTop={2}>
+          <Box>
             <Text variant="h2" as="h1">
               {manualChapter.title}
             </Text>
@@ -154,6 +192,52 @@ const ManualChapter: ManualScreen = ({ manual, manualChapter, namespace }) => {
             ))}
           </Accordion>
         )}
+        <Box paddingTop={3}>
+          <Inline space={3} alignY="center" justifyContent="spaceBetween">
+            <Box>
+              {previousChapterUrl && (
+                <LinkV2 href={previousChapterUrl}>
+                  <Button
+                    preTextIcon="arrowBack"
+                    preTextIconType="filled"
+                    size="medium"
+                    type="button"
+                    variant="text"
+                    truncate
+                    unfocusable
+                  >
+                    {n(
+                      'manualPreviousChapter',
+                      activeLocale === 'is'
+                        ? 'Fyrri kafli'
+                        : 'Previous chapter',
+                    )}
+                  </Button>
+                </LinkV2>
+              )}
+            </Box>
+            <Box>
+              {nextChapterUrl && (
+                <LinkV2 href={nextChapterUrl}>
+                  <Button
+                    icon="arrowForward"
+                    iconType="filled"
+                    size="medium"
+                    type="button"
+                    variant="text"
+                    truncate
+                    unfocusable
+                  >
+                    {n(
+                      'manualNextChapter',
+                      activeLocale === 'is' ? 'Næsti kafli' : 'Next chapter',
+                    )}
+                  </Button>
+                </LinkV2>
+              )}
+            </Box>
+          </Inline>
+        </Box>
       </Stack>
     </ManualWrapper>
   )
diff --git a/apps/web/screens/Manual/components/ManualWrapper.tsx b/apps/web/screens/Manual/components/ManualWrapper.tsx
index 72f2274419a1..933ac3087971 100644
--- a/apps/web/screens/Manual/components/ManualWrapper.tsx
+++ b/apps/web/screens/Manual/components/ManualWrapper.tsx
@@ -33,7 +33,7 @@ export const ManualWrapper = ({
               paddingTop={0}
               sidebarContent={null}
             >
-              <Stack space={3}>
+              <Stack space={5}>
                 <ManualHeader manual={manual} namespace={namespace} />
                 {children}
               </Stack>

From faaa540062925c3f6937d63db51ac1ec86cd2ff5 Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Tue, 8 Oct 2024 14:01:24 +0000
Subject: [PATCH 2/3] Dont take up space

---
 apps/web/screens/Manual/ManualChapter.tsx | 101 ++++++++++++----------
 1 file changed, 55 insertions(+), 46 deletions(-)

diff --git a/apps/web/screens/Manual/ManualChapter.tsx b/apps/web/screens/Manual/ManualChapter.tsx
index 0e2679128c5f..6f64d76b14ff 100644
--- a/apps/web/screens/Manual/ManualChapter.tsx
+++ b/apps/web/screens/Manual/ManualChapter.tsx
@@ -105,6 +105,13 @@ const ManualChapter: ManualScreen = ({ manual, manualChapter, namespace }) => {
       (chapter) => chapter.id === manualChapter?.id,
     )
 
+    if (index < 0) {
+      return {
+        previousChapterUrl: '',
+        nextChapterUrl: '',
+      }
+    }
+
     const nextChapterSlug = manual.chapters[index + 1]?.slug
 
     if (index === 0) {
@@ -192,52 +199,54 @@ const ManualChapter: ManualScreen = ({ manual, manualChapter, namespace }) => {
             ))}
           </Accordion>
         )}
-        <Box paddingTop={3}>
-          <Inline space={3} alignY="center" justifyContent="spaceBetween">
-            <Box>
-              {previousChapterUrl && (
-                <LinkV2 href={previousChapterUrl}>
-                  <Button
-                    preTextIcon="arrowBack"
-                    preTextIconType="filled"
-                    size="medium"
-                    type="button"
-                    variant="text"
-                    truncate
-                    unfocusable
-                  >
-                    {n(
-                      'manualPreviousChapter',
-                      activeLocale === 'is'
-                        ? 'Fyrri kafli'
-                        : 'Previous chapter',
-                    )}
-                  </Button>
-                </LinkV2>
-              )}
-            </Box>
-            <Box>
-              {nextChapterUrl && (
-                <LinkV2 href={nextChapterUrl}>
-                  <Button
-                    icon="arrowForward"
-                    iconType="filled"
-                    size="medium"
-                    type="button"
-                    variant="text"
-                    truncate
-                    unfocusable
-                  >
-                    {n(
-                      'manualNextChapter',
-                      activeLocale === 'is' ? 'Næsti kafli' : 'Next chapter',
-                    )}
-                  </Button>
-                </LinkV2>
-              )}
-            </Box>
-          </Inline>
-        </Box>
+        {(Boolean(previousChapterUrl) || Boolean(nextChapterUrl)) && (
+          <Box paddingTop={3}>
+            <Inline space={3} alignY="center" justifyContent="spaceBetween">
+              <Box>
+                {previousChapterUrl && (
+                  <LinkV2 href={previousChapterUrl}>
+                    <Button
+                      preTextIcon="arrowBack"
+                      preTextIconType="filled"
+                      size="medium"
+                      type="button"
+                      variant="text"
+                      truncate
+                      unfocusable
+                    >
+                      {n(
+                        'manualPreviousChapter',
+                        activeLocale === 'is'
+                          ? 'Fyrri kafli'
+                          : 'Previous chapter',
+                      )}
+                    </Button>
+                  </LinkV2>
+                )}
+              </Box>
+              <Box>
+                {nextChapterUrl && (
+                  <LinkV2 href={nextChapterUrl}>
+                    <Button
+                      icon="arrowForward"
+                      iconType="filled"
+                      size="medium"
+                      type="button"
+                      variant="text"
+                      truncate
+                      unfocusable
+                    >
+                      {n(
+                        'manualNextChapter',
+                        activeLocale === 'is' ? 'Næsti kafli' : 'Next chapter',
+                      )}
+                    </Button>
+                  </LinkV2>
+                )}
+              </Box>
+            </Inline>
+          </Box>
+        )}
       </Stack>
     </ManualWrapper>
   )

From 610b675f34ff59bb9b15e7ad5411278fcf5bbd50 Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Tue, 8 Oct 2024 14:37:42 +0000
Subject: [PATCH 3/3] Set single expand to false

---
 apps/web/screens/Manual/ManualChangelog.tsx | 9 +++++----
 apps/web/screens/Manual/ManualChapter.tsx   | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/web/screens/Manual/ManualChangelog.tsx b/apps/web/screens/Manual/ManualChangelog.tsx
index f628126ccaad..f3936f655c4c 100644
--- a/apps/web/screens/Manual/ManualChangelog.tsx
+++ b/apps/web/screens/Manual/ManualChangelog.tsx
@@ -50,12 +50,13 @@ const ManualChangelog: ManualScreen = ({ manual, namespace }) => {
       namespace={namespace}
       socialTitle={generateOgTitle(manual?.title, manualChangelogTitle)}
     >
-      <Stack space={2}>
+      <Stack space={5}>
         <LinkV2
-          className={styles.smallLink}
+          className={styles.link}
           underline="small"
           underlineVisibility="always"
           href={linkResolver('manual', [manual?.slug as string]).href}
+          color="blue400"
         >
           {n(
             'manualFrontpage',
@@ -63,7 +64,7 @@ const ManualChangelog: ManualScreen = ({ manual, namespace }) => {
           )}
         </LinkV2>
         <Divider />
-        <Box paddingTop={2}>
+        <Box>
           <Stack space={2}>
             <Text variant="h2" as="h1">
               {manualChangelogTitle}
@@ -94,7 +95,7 @@ const ManualChangelog: ManualScreen = ({ manual, namespace }) => {
         </Box>
       )}
       {changelog?.length > 0 && (
-        <Accordion>
+        <Accordion singleExpand={false}>
           {changelog.map(({ year, dates }) => (
             <AccordionItem
               labelUse="h2"
diff --git a/apps/web/screens/Manual/ManualChapter.tsx b/apps/web/screens/Manual/ManualChapter.tsx
index 6f64d76b14ff..5ac904a3038a 100644
--- a/apps/web/screens/Manual/ManualChapter.tsx
+++ b/apps/web/screens/Manual/ManualChapter.tsx
@@ -167,7 +167,7 @@ const ManualChapter: ManualScreen = ({ manual, manualChapter, namespace }) => {
 
       <Stack space={3}>
         {manualChapter && (
-          <Accordion>
+          <Accordion singleExpand={false}>
             {manualChapter.chapterItems.map((item) => (
               <AccordionItem
                 labelUse="h2"