From 01651e9b8751aa11fa7fe6f945ea0f14df8c6075 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Mon, 22 Jul 2024 17:24:13 +0200
Subject: [PATCH 01/10] Add new project button to Sidebar Header

---
 .env.example                                |  1 +
 src/features/sidebar/view/SidebarHeader.tsx | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/.env.example b/.env.example
index 42dcfe76..f535aac1 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,6 @@
 SHAPE_DOCS_BASE_URL=http://localhost:3000
 SHAPE_DOCS_PROJECT_CONFIGURATION_FILENAME=.shape-docs.yml
+NEXT_PUBLIC_SHAPE_DOCS_PROJECT_WIKI_URL=https://github.com/shapehq/shape-docs/wiki
 NEXT_PUBLIC_SHAPE_DOCS_TITLE=Shape Docs
 NEXT_PUBLIC_SHAPE_DOCS_DESCRIPTION=Documentation for Shape's APIs
 NEXTAUTH_URL_INTERNAL=http://localhost:3000
diff --git a/src/features/sidebar/view/SidebarHeader.tsx b/src/features/sidebar/view/SidebarHeader.tsx
index 5bc88a4d..5f384a6d 100644
--- a/src/features/sidebar/view/SidebarHeader.tsx
+++ b/src/features/sidebar/view/SidebarHeader.tsx
@@ -1,11 +1,15 @@
 import Image from "next/image"
-import { Box, Typography } from "@mui/material"
+import { Box, Typography, IconButton, Tooltip } from "@mui/material"
 import Link from "next/link"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faPlus } from "@fortawesome/free-solid-svg-icons"
 
 export default function SidebarHeader() {
   const siteName = process.env.NEXT_PUBLIC_SHAPE_DOCS_TITLE
+  const projectWikiURL = process.env.NEXT_PUBLIC_SHAPE_DOCS_PROJECT_WIKI_URL || ""
+
   return (
-    <Box sx={{ padding: 2, paddingBottom: 4 }}>
+    <Box sx={{ padding: 2, paddingBottom: 4, display: "flex", justifyContent: "space-between", alignItems: "center"}}>
       <Link
         href={"/"}
         style={{
@@ -31,7 +35,14 @@ export default function SidebarHeader() {
         >
           {siteName}
         </Typography>
-      </Link> 
+      </Link>
+      <Tooltip title="Add new project">
+        <Link href={`${projectWikiURL}`} target="_blank">
+          <IconButton color="primary" size="small" aria-label="Add new project">
+            <FontAwesomeIcon icon={faPlus} size="xs" style={{ aspectRatio: 1, padding: 2 }} />
+          </IconButton>
+        </Link>
+      </Tooltip>
     </Box>
   )
 }

From 777d747374546fb0f9735f3b90479159c738a8c8 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Tue, 23 Jul 2024 09:45:03 +0200
Subject: [PATCH 02/10] Adapt SecondaryHeader style to SidebarHeader

---
 src/features/sidebar/view/SidebarHeader.tsx        |  2 +-
 src/features/sidebar/view/base/SecondaryHeader.tsx | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/features/sidebar/view/SidebarHeader.tsx b/src/features/sidebar/view/SidebarHeader.tsx
index 5f384a6d..c3a55eab 100644
--- a/src/features/sidebar/view/SidebarHeader.tsx
+++ b/src/features/sidebar/view/SidebarHeader.tsx
@@ -9,7 +9,7 @@ export default function SidebarHeader() {
   const projectWikiURL = process.env.NEXT_PUBLIC_SHAPE_DOCS_PROJECT_WIKI_URL || ""
 
   return (
-    <Box sx={{ padding: 2, paddingBottom: 4, display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+    <Box sx={{ padding: 2, height: 80, marginBottom: 2, display: "flex", justifyContent: "space-between", alignItems: "center"}}>
       <Link
         href={"/"}
         style={{
diff --git a/src/features/sidebar/view/base/SecondaryHeader.tsx b/src/features/sidebar/view/base/SecondaryHeader.tsx
index a906f589..6b86819a 100644
--- a/src/features/sidebar/view/base/SecondaryHeader.tsx
+++ b/src/features/sidebar/view/base/SecondaryHeader.tsx
@@ -26,26 +26,28 @@ export default function SecondaryHeader({
       sx={{
         ...sx,
         backgroundColor: theme.palette.background.default,
-        color: theme.palette.text.primary
+        color: theme.palette.text.primary,
       }}
     >
-      <Box sx={{ display: "flex", alignItems: "center", padding: 2 }}>
+      <Box sx={{ display: "flex", alignItems: "center", padding: 2, maxWidth: "1460px", margin: "auto", height: 80 }}>
         {showOpenSidebar &&
           <IconButton
+            size="medium"
             color="primary"
             onClick={() => onToggleSidebarOpen(true)}
             edge="start"
           >
-            <FontAwesomeIcon icon={faBars} size="sm" style={{ aspectRatio: 1 }} />
+            <FontAwesomeIcon icon={faBars} size="sm" style={{ aspectRatio: 1, padding: 2 }} />
           </IconButton>
         }
         {showCloseSidebar &&
           <IconButton
+            size="small"
             color="primary"
             onClick={() => onToggleSidebarOpen(false)}
             edge="start"
           >
-            <FontAwesomeIcon icon={faChevronLeft} size="sm" style={{ aspectRatio: 1 }} />
+            <FontAwesomeIcon icon={faChevronLeft} size="sm" style={{ aspectRatio: 1, padding: 2 }} />
           </IconButton>
         }
         <Box sx={{ display: "flex", flexGrow: 1, justifyContent: "end" }}> 

From fdbeef65dc0389f2fb825073fd1f6d95d7e0d762 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Thu, 25 Jul 2024 08:06:01 +0200
Subject: [PATCH 03/10] Hides New Project button

---
 src/features/sidebar/view/SidebarHeader.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/features/sidebar/view/SidebarHeader.tsx b/src/features/sidebar/view/SidebarHeader.tsx
index c3a55eab..de09bd9f 100644
--- a/src/features/sidebar/view/SidebarHeader.tsx
+++ b/src/features/sidebar/view/SidebarHeader.tsx
@@ -1,13 +1,12 @@
 import Image from "next/image"
-import { Box, Typography, IconButton, Tooltip } from "@mui/material"
+// import { Box, Typography, IconButton, Tooltip } from "@mui/material"
+import { Box, Typography } from "@mui/material"
 import Link from "next/link"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faPlus } from "@fortawesome/free-solid-svg-icons"
+// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+// import { faPlus } from "@fortawesome/free-solid-svg-icons"
 
 export default function SidebarHeader() {
   const siteName = process.env.NEXT_PUBLIC_SHAPE_DOCS_TITLE
-  const projectWikiURL = process.env.NEXT_PUBLIC_SHAPE_DOCS_PROJECT_WIKI_URL || ""
-
   return (
     <Box sx={{ padding: 2, height: 80, marginBottom: 2, display: "flex", justifyContent: "space-between", alignItems: "center"}}>
       <Link
@@ -36,13 +35,13 @@ export default function SidebarHeader() {
           {siteName}
         </Typography>
       </Link>
-      <Tooltip title="Add new project">
+      {/* <Tooltip title="Add new project">
         <Link href={`${projectWikiURL}`} target="_blank">
           <IconButton color="primary" size="small" aria-label="Add new project">
             <FontAwesomeIcon icon={faPlus} size="xs" style={{ aspectRatio: 1, padding: 2 }} />
           </IconButton>
         </Link>
-      </Tooltip>
+      </Tooltip> */}
     </Box>
   )
 }

From 444984a7d07f8aa02ebccbabc381b09ab85c7c09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Thu, 25 Jul 2024 08:06:09 +0200
Subject: [PATCH 04/10] Moves environment variable

---
 .env.example | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index f535aac1..c2c78954 100644
--- a/.env.example
+++ b/.env.example
@@ -1,8 +1,8 @@
 SHAPE_DOCS_BASE_URL=http://localhost:3000
 SHAPE_DOCS_PROJECT_CONFIGURATION_FILENAME=.shape-docs.yml
-NEXT_PUBLIC_SHAPE_DOCS_PROJECT_WIKI_URL=https://github.com/shapehq/shape-docs/wiki
 NEXT_PUBLIC_SHAPE_DOCS_TITLE=Shape Docs
 NEXT_PUBLIC_SHAPE_DOCS_DESCRIPTION=Documentation for Shape's APIs
+NEXT_PUBLIC_SHAPE_DOCS_PROJECT_WIKI_URL=https://github.com/shapehq/shape-docs/wiki
 NEXTAUTH_URL_INTERNAL=http://localhost:3000
 NEXTAUTH_SECRET=use [openssl rand -base64 32] to generate a 32 bytes value
 REDIS_URL=localhost

From 0f686d324f029ade31df7bca7ac96bd56aae5a40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Thu, 25 Jul 2024 08:07:29 +0200
Subject: [PATCH 05/10] Renames to NEXT_PUBLIC_SHAPE_DOCS_HELP_URL

---
 .env.example | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index c2c78954..7327e16b 100644
--- a/.env.example
+++ b/.env.example
@@ -2,7 +2,7 @@ SHAPE_DOCS_BASE_URL=http://localhost:3000
 SHAPE_DOCS_PROJECT_CONFIGURATION_FILENAME=.shape-docs.yml
 NEXT_PUBLIC_SHAPE_DOCS_TITLE=Shape Docs
 NEXT_PUBLIC_SHAPE_DOCS_DESCRIPTION=Documentation for Shape's APIs
-NEXT_PUBLIC_SHAPE_DOCS_PROJECT_WIKI_URL=https://github.com/shapehq/shape-docs/wiki
+NEXT_PUBLIC_SHAPE_DOCS_HELP_URL=https://github.com/shapehq/shape-docs/wiki
 NEXTAUTH_URL_INTERNAL=http://localhost:3000
 NEXTAUTH_SECRET=use [openssl rand -base64 32] to generate a 32 bytes value
 REDIS_URL=localhost

From 126ebab1ac3479b81eb41893fec354f5239af5d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Thu, 25 Jul 2024 08:08:40 +0200
Subject: [PATCH 06/10] Adds Help button

---
 src/features/user/view/SettingsList.tsx | 70 +++++++++++++++++--------
 1 file changed, 49 insertions(+), 21 deletions(-)

diff --git a/src/features/user/view/SettingsList.tsx b/src/features/user/view/SettingsList.tsx
index 93fe7987..57745900 100644
--- a/src/features/user/view/SettingsList.tsx
+++ b/src/features/user/view/SettingsList.tsx
@@ -1,35 +1,63 @@
-import { List, Button } from "@mui/material"
+import { ReactNode } from "react"
+import { signOut } from "next-auth/react"
+import Link from "next/link"
+import { List, Button, Stack, Typography } from "@mui/material"
 import ThickDivider from "@/common/ui/ThickDivider"
 import DocumentationVisualizationPicker from "./DocumentationVisualizationPicker"
-import { signOut } from "next-auth/react"
-
-const SettingsItem = ({ onClick, href, children }: {
-  onClick?: () => void;
-  href?: string;
-  children?: string;
-}) =>  
-  <Button
-    variant="text"
-    fullWidth={true}
-    style={{ justifyContent: "flex-start" }}
-    sx={{ marginTop: 1.3 }}
-    onClick={onClick}
-    href={href}
-  >{children}</Button>
+import { IconProp } from "@fortawesome/fontawesome-svg-core"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faQuestionCircle, faRightFromBracket } from "@fortawesome/free-solid-svg-icons"
+  
+const SettingsItem = ({ onClick, icon, children }: {
+  onClick?: () => void
+  icon?: IconProp
+  children?: ReactNode
+}) => {
+  return (
+    <Button
+      variant="text"
+      fullWidth={true}
+      style={{ justifyContent: "flex-start" }}
+      sx={{ marginTop: 1.3 }}
+      onClick={onClick}
+    >
+      <Stack direction="row" alignItems="center" width="100%">
+        {icon && <FontAwesomeIcon icon={icon} size="lg" style={{ marginRight: 10 }} /> }
+        {children}
+      </Stack>
+    </Button>
+  )
+}
 
 const SettingsList = () => {
+  const helpURL = process.env.NEXT_PUBLIC_SHAPE_DOCS_HELP_URL
   return (
     <List sx={{
       padding: 1,
-      paddingLeft: 2,
-      paddingRight: 2,
+      paddingLeft: 1.5,
+      paddingRight: 1.5,
       paddingBottom: 0.5,
       minWidth: 250
     }}>
-      <DocumentationVisualizationPicker sx={{ marginBottom: 2 }} />
+      <DocumentationVisualizationPicker sx={{
+        marginBottom: 2,
+        paddingLeft: 0.5,
+        paddingRight: 0.5
+      }} />
       <ThickDivider sx={{ marginLeft: -2, marginRight: -2 }} />
-      <SettingsItem onClick={() => signOut()}>
-        Log out
+      {helpURL && helpURL.length > 0 &&
+        <Link href={`${helpURL}`} target="_blank">
+          <SettingsItem icon={faQuestionCircle}>
+            <Typography>
+              Help
+            </Typography>
+          </SettingsItem>
+        </Link>
+      }
+      <SettingsItem onClick={() => signOut()} icon={faRightFromBracket}>
+        <Typography>
+          Log out
+        </Typography>
       </SettingsItem>
     </List>
   )

From 588f4cc42117f4338b3e4f13cbe2393516f47103 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Thu, 25 Jul 2024 08:11:35 +0200
Subject: [PATCH 07/10] Reduces line length

---
 src/features/sidebar/view/SidebarHeader.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/features/sidebar/view/SidebarHeader.tsx b/src/features/sidebar/view/SidebarHeader.tsx
index de09bd9f..916fdb5e 100644
--- a/src/features/sidebar/view/SidebarHeader.tsx
+++ b/src/features/sidebar/view/SidebarHeader.tsx
@@ -8,7 +8,14 @@ import Link from "next/link"
 export default function SidebarHeader() {
   const siteName = process.env.NEXT_PUBLIC_SHAPE_DOCS_TITLE
   return (
-    <Box sx={{ padding: 2, height: 80, marginBottom: 2, display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+    <Box sx={{
+      padding: 2,
+      height: 80,
+      marginBottom: 2,
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center"
+    }}>
       <Link
         href={"/"}
         style={{

From e146f9cee4d92c82fcdb9716c0b9ed87b542f6f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Thu, 25 Jul 2024 08:19:41 +0200
Subject: [PATCH 08/10] Fixes linting

---
 src/features/sidebar/view/base/SecondaryHeader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/sidebar/view/base/SecondaryHeader.tsx b/src/features/sidebar/view/base/SecondaryHeader.tsx
index 2454a3fd..8b65cbd7 100644
--- a/src/features/sidebar/view/base/SecondaryHeader.tsx
+++ b/src/features/sidebar/view/base/SecondaryHeader.tsx
@@ -57,8 +57,8 @@ export default function SecondaryHeader({
         }
         {showCloseSidebar &&
           <Tooltip title={`Hide Projects${openCloseShortcutString}`}>
-          	<IconButton
-           	  size="small"
+            <IconButton
+              size="small"
               color="primary"
               onClick={() => onToggleSidebarOpen(false)}
               edge="start"

From 017d9eea4adeba8e9b28121c73a59442576ee375 Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Thu, 25 Jul 2024 09:31:30 +0200
Subject: [PATCH 09/10] Adapt conditional to falsy value on string

---
 src/features/user/view/SettingsList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/user/view/SettingsList.tsx b/src/features/user/view/SettingsList.tsx
index 57745900..183bad38 100644
--- a/src/features/user/view/SettingsList.tsx
+++ b/src/features/user/view/SettingsList.tsx
@@ -45,7 +45,7 @@ const SettingsList = () => {
         paddingRight: 0.5
       }} />
       <ThickDivider sx={{ marginLeft: -2, marginRight: -2 }} />
-      {helpURL && helpURL.length > 0 &&
+      {helpURL &&
         <Link href={`${helpURL}`} target="_blank">
           <SettingsItem icon={faQuestionCircle}>
             <Typography>

From 471b6f9627c8e7bdab54a9bbc7bc1df6b964fb9b Mon Sep 17 00:00:00 2001
From: mpabarca <maria@shape.dk>
Date: Thu, 25 Jul 2024 09:31:48 +0200
Subject: [PATCH 10/10] Reduces line length

---
 src/features/sidebar/view/base/SecondaryHeader.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/features/sidebar/view/base/SecondaryHeader.tsx b/src/features/sidebar/view/base/SecondaryHeader.tsx
index 8b65cbd7..0e4a0177 100644
--- a/src/features/sidebar/view/base/SecondaryHeader.tsx
+++ b/src/features/sidebar/view/base/SecondaryHeader.tsx
@@ -42,7 +42,14 @@ export default function SecondaryHeader({
         color: theme.palette.text.primary,
       }}
     >
-      <Box sx={{ display: "flex", alignItems: "center", padding: 2, maxWidth: "1460px", margin: "auto", height: 80 }}>
+      <Box sx={{ 
+        display: "flex",
+        alignItems: "center",
+        padding: 2,
+        maxWidth: "1460px",
+        margin: "auto",
+        height: 80 
+      }}>
         {showOpenSidebar &&
           <Tooltip title={`Show Projects${openCloseShortcutString}`}>
             <IconButton