From 04d577c833cb8aca1c2cac629897be6caed25339 Mon Sep 17 00:00:00 2001
From: Jake Coble <j@kecoble.com>
Date: Mon, 2 Dec 2024 11:39:56 -0500
Subject: [PATCH 1/4] Add toggle for grid and list views

---
 .../organisms/passageNavigation.module.scss   | 20 +++++++++++++++++--
 .../organisms/passageNavigation.tsx           | 15 ++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/passageNavigation.module.scss b/src/components/organisms/passageNavigation.module.scss
index b0dc441af..d7454de13 100644
--- a/src/components/organisms/passageNavigation.module.scss
+++ b/src/components/organisms/passageNavigation.module.scss
@@ -1,7 +1,6 @@
 @import '../../styles/common.scss';
 
 .wrapper {
-	display: flex;
 	background-color: $ts-bibleVersionH;
 }
 
@@ -29,7 +28,7 @@
 .wrapper li a {
 	color: $ts-lightTone;
 	font-weight: 700;
-	size: 16px;
+	font-size: 16px;
 	line-height: 19.2px;
 	text-transform: uppercase;
 	list-style-type: none;
@@ -39,6 +38,10 @@
 	color: $ts-salmon;
 }
 
+.switch > :global(button.active) {
+	color: $ts-salmon;
+}
+
 .wrapper,
 .wrapper .books,
 .wrapper .chapters {
@@ -69,3 +72,16 @@
 .books button:hover {
 	color: $ts-salmon;
 }
+
+.switch {
+	border-bottom: 1px solid $ts-salmon;
+}
+
+.switch > button {
+	color: $ts-lightTone;
+	font-weight: 700;
+	font-size: 12px;
+	line-height: 14.4px;
+	text-transform: uppercase;
+	display: inline-block;
+}
diff --git a/src/components/organisms/passageNavigation.tsx b/src/components/organisms/passageNavigation.tsx
index 96ca61f5f..86a5dfdca 100644
--- a/src/components/organisms/passageNavigation.tsx
+++ b/src/components/organisms/passageNavigation.tsx
@@ -14,9 +14,24 @@ export default function PassageNavigation({ books }: Props): JSX.Element {
 	const [selectedBook, setSelectedBook] = useState<string | number | null>(
 		null,
 	);
+	const [selectedView, setSelectedView] = useState<'grid' | 'list'>('grid');
 
 	return (
 		<div className={styles.wrapper}>
+			<div className={styles.switch}>
+				<button
+					className={clsx({ active: selectedView === 'grid' })}
+					onClick={() => setSelectedView('grid')}
+				>
+					Grid
+				</button>
+				<button
+					className={clsx({ active: selectedView === 'list' })}
+					onClick={() => setSelectedView('list')}
+				>
+					List
+				</button>
+			</div>
 			<ul className={styles.books}>
 				{books.map((book) => {
 					const chapters = book.recordings.nodes;

From 06fc6da2f737fbb3ff452b89e63cb1fd6290dd01 Mon Sep 17 00:00:00 2001
From: Jake Coble <j@kecoble.com>
Date: Mon, 2 Dec 2024 16:03:37 -0500
Subject: [PATCH 2/4] Add draft grid view

---
 src/components/organisms/passageNavigation.module.scss |  5 +++++
 src/components/organisms/passageNavigation.tsx         | 10 +++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/organisms/passageNavigation.module.scss b/src/components/organisms/passageNavigation.module.scss
index d7454de13..ca53fb8c3 100644
--- a/src/components/organisms/passageNavigation.module.scss
+++ b/src/components/organisms/passageNavigation.module.scss
@@ -23,6 +23,11 @@
 	padding-bottom: 16px;
 }
 
+.wrapper .books:global(.grid) {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+}
+
 .wrapper li,
 .wrapper li button,
 .wrapper li a {
diff --git a/src/components/organisms/passageNavigation.tsx b/src/components/organisms/passageNavigation.tsx
index 86a5dfdca..f15940b62 100644
--- a/src/components/organisms/passageNavigation.tsx
+++ b/src/components/organisms/passageNavigation.tsx
@@ -32,9 +32,11 @@ export default function PassageNavigation({ books }: Props): JSX.Element {
 					List
 				</button>
 			</div>
-			<ul className={styles.books}>
+
+			<ul className={clsx(styles.books, { grid: selectedView === 'grid' })}>
 				{books.map((book) => {
 					const chapters = book.recordings.nodes;
+
 					return (
 						<li
 							key={book.id}
@@ -47,9 +49,11 @@ export default function PassageNavigation({ books }: Props): JSX.Element {
 									setSelectedBook(book.id);
 								}}
 							>
-								{book.title}
+								{selectedView === 'grid'
+									? book.title.replace(' ', '').substring(0, 3)
+									: book.title}
 							</button>
-							{book.id === selectedBook ? (
+							{book.id === selectedBook && selectedView === 'list' ? (
 								<ul className={styles.chapters}>
 									{chapters?.map((chapter) => {
 										const n = Number(chapter.title.split(' ').pop());

From 790226db400f60a21603013a08cf36f19e00c05e Mon Sep 17 00:00:00 2001
From: Jake Coble <j@kecoble.com>
Date: Mon, 2 Dec 2024 17:21:48 -0500
Subject: [PATCH 3/4] Add chapters after current book

---
 .../organisms/passageNavigation.module.scss   | 10 +++-
 .../organisms/passageNavigation.tsx           | 56 ++++++++++---------
 2 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/src/components/organisms/passageNavigation.module.scss b/src/components/organisms/passageNavigation.module.scss
index ca53fb8c3..6ef9053a3 100644
--- a/src/components/organisms/passageNavigation.module.scss
+++ b/src/components/organisms/passageNavigation.module.scss
@@ -25,7 +25,7 @@
 
 .wrapper .books:global(.grid) {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
 }
 
 .wrapper li,
@@ -53,6 +53,10 @@
 	width: 100%;
 }
 
+.books:global(.grid) .chapters {
+	grid-column: 1 / -1;
+}
+
 .chapters {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
@@ -90,3 +94,7 @@
 	text-transform: uppercase;
 	display: inline-block;
 }
+
+.chaptersWrapper {
+	grid-column: 1 / -1;
+}
diff --git a/src/components/organisms/passageNavigation.tsx b/src/components/organisms/passageNavigation.tsx
index f15940b62..f70a6762f 100644
--- a/src/components/organisms/passageNavigation.tsx
+++ b/src/components/organisms/passageNavigation.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 import Link from '~components/atoms/linkWithoutPrefetch';
 
@@ -38,36 +38,40 @@ export default function PassageNavigation({ books }: Props): JSX.Element {
 					const chapters = book.recordings.nodes;
 
 					return (
-						<li
-							key={book.id}
-							className={clsx(styles.book, {
-								active: book.id === selectedBook,
-							})}
-						>
-							<button
-								onClick={() => {
-									setSelectedBook(book.id);
-								}}
+						<>
+							<li
+								key={book.id}
+								className={clsx(styles.book, {
+									active: book.id === selectedBook,
+								})}
 							>
-								{selectedView === 'grid'
-									? book.title.replace(' ', '').substring(0, 3)
-									: book.title}
-							</button>
+								<button
+									onClick={() => {
+										setSelectedBook(book.id);
+									}}
+								>
+									{selectedView === 'grid'
+										? book.title.replace(' ', '').substring(0, 3)
+										: book.title}
+								</button>
+							</li>
 							{book.id === selectedBook && selectedView === 'list' ? (
-								<ul className={styles.chapters}>
-									{chapters?.map((chapter) => {
-										const n = Number(chapter.title.split(' ').pop());
-										return (
-											<li key={n} className={styles.chapter}>
-												<Link href={chapter.canonicalPath}>{n}</Link>
-											</li>
-										);
-									})}
-								</ul>
+								<li className={styles.chaptersWrapper}>
+									<ul className={styles.chapters}>
+										{chapters?.map((chapter) => {
+											const n = Number(chapter.title.split(' ').pop());
+											return (
+												<li key={n} className={styles.chapter}>
+													<Link href={chapter.canonicalPath}>{n}</Link>
+												</li>
+											);
+										})}
+									</ul>
+								</li>
 							) : (
 								''
 							)}
-						</li>
+						</>
 					);
 				})}
 			</ul>

From c659465c79ca1a7ced9b7ab9f5f6f1b30dcba8e9 Mon Sep 17 00:00:00 2001
From: Jake Coble <j@kecoble.com>
Date: Tue, 3 Dec 2024 14:57:41 -0500
Subject: [PATCH 4/4] Make the book grid out of floats

---
 .../organisms/passageNavigation.module.scss   | 28 +++++++++++++------
 .../organisms/passageNavigation.tsx           | 14 ++++++++--
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/organisms/passageNavigation.module.scss b/src/components/organisms/passageNavigation.module.scss
index 6ef9053a3..e3d64b9de 100644
--- a/src/components/organisms/passageNavigation.module.scss
+++ b/src/components/organisms/passageNavigation.module.scss
@@ -23,10 +23,10 @@
 	padding-bottom: 16px;
 }
 
-.wrapper .books:global(.grid) {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
-}
+// .wrapper .books:global(.grid) {
+// 	display: grid;
+// 	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+// }
 
 .wrapper li,
 .wrapper li button,
@@ -53,9 +53,9 @@
 	width: 100%;
 }
 
-.books:global(.grid) .chapters {
-	grid-column: 1 / -1;
-}
+// .books:global(.grid) .chapters {
+// 	grid-column: 1 / -1;
+// }
 
 .chapters {
 	display: grid;
@@ -92,9 +92,19 @@
 	font-size: 12px;
 	line-height: 14.4px;
 	text-transform: uppercase;
-	display: inline-block;
 }
 
 .chaptersWrapper {
-	grid-column: 1 / -1;
+	width: 100%;
+	display: none;
+}
+
+.chaptersWrapper:global(.active) {
+	display: block;
+	float: left;
+}
+
+.books:global(.grid) .book {
+	width: 70px;
+	display: inline-block;
 }
diff --git a/src/components/organisms/passageNavigation.tsx b/src/components/organisms/passageNavigation.tsx
index f70a6762f..e2a4d306b 100644
--- a/src/components/organisms/passageNavigation.tsx
+++ b/src/components/organisms/passageNavigation.tsx
@@ -55,9 +55,17 @@ export default function PassageNavigation({ books }: Props): JSX.Element {
 										: book.title}
 								</button>
 							</li>
-							{book.id === selectedBook && selectedView === 'list' ? (
-								<li className={styles.chaptersWrapper}>
-									<ul className={styles.chapters}>
+							{book.id === selectedBook ? (
+								<li
+									className={clsx(styles.chaptersWrapper, {
+										active: book.id === selectedBook,
+									})}
+								>
+									<ul
+										className={clsx(styles.chapters, {
+											active: book.id === selectedBook,
+										})}
+									>
 										{chapters?.map((chapter) => {
 											const n = Number(chapter.title.split(' ').pop());
 											return (