From 4b2c57388a5b3db1174a493ceca91a05819ce42e Mon Sep 17 00:00:00 2001
From: Eric Rolf <xrolfex@gmail.com>
Date: Sat, 27 Jan 2024 09:32:17 -0500
Subject: [PATCH 1/2] Update date sidebar to support vertical and horizontal
 layouts.

---
 src/lib/Modal/DateConfig.svelte | 37 ++++++++++++++++++++++++++++++---
 src/lib/Sidebar/Date.svelte     | 18 +++++++++++-----
 src/lib/Sidebar/Index.svelte    |  1 +
 src/lib/Types.ts                |  1 +
 4 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/lib/Modal/DateConfig.svelte b/src/lib/Modal/DateConfig.svelte
index d8344cd6..12c5520d 100644
--- a/src/lib/Modal/DateConfig.svelte
+++ b/src/lib/Modal/DateConfig.svelte
@@ -26,7 +26,12 @@
 		<h2>{$lang('preview')}</h2>
 
 		<div class="preview">
-			<Date short_day={sel?.short_day} short_month={sel?.short_month} hide={sel?.hide} />
+			<Date
+				short_day={sel?.short_day}
+				short_month={sel?.short_month}
+				hide={sel?.hide}
+				layout={sel?.layout}
+			/>
 		</div>
 
 		<!-- DAY -->
@@ -79,19 +84,45 @@
 			</button>
 			<button
 				class:selected={sel?.hide === 'day'}
-				on:click={() => set('hide', 'day')}
+				on:click={() => {
+					set('hide', 'day');
+					set('layout', 'vertical');
+				}}
 				use:Ripple={$ripple}
 			>
 				{$lang('day')}
 			</button>
 			<button
 				class:selected={sel?.hide === 'month'}
-				on:click={() => set('hide', 'month')}
+				on:click={() => {
+					set('hide', 'month');
+					set('layout', 'vertical');
+				}}
 				use:Ripple={$ripple}
 			>
 				{$lang('month')}
 			</button>
 		</div>
+		{#if sel?.hide === 'none'}
+			<!-- Layout -->
+			<h2>{$lang('Layout')}</h2>
+			<div class="button-container">
+				<button
+					class:selected={!sel?.layout || sel?.layout === 'vertical'}
+					on:click={() => set('layout', 'vertical')}
+					use:Ripple={$ripple}
+				>
+					{$lang('vertical')}
+				</button>
+				<button
+					class:selected={sel?.layout === 'horizontal'}
+					on:click={() => set('layout', 'horizontal')}
+					use:Ripple={$ripple}
+				>
+					{$lang('horizontal')}
+				</button>
+			</div>
+		{/if}
 
 		<ConfigButtons {sel} />
 	</Modal>
diff --git a/src/lib/Sidebar/Date.svelte b/src/lib/Sidebar/Date.svelte
index fe2582fe..b9573aa7 100644
--- a/src/lib/Sidebar/Date.svelte
+++ b/src/lib/Sidebar/Date.svelte
@@ -4,6 +4,7 @@
 	export let short_day: boolean | undefined = undefined;
 	export let short_month: boolean | undefined = undefined;
 	export let hide: string | undefined = undefined;
+	export let layout: string | undefined = undefined;
 
 	$: weekDay = $timer.toLocaleDateString($selectedLanguage, {
 		weekday: short_day ? 'short' : 'long'
@@ -13,15 +14,22 @@
 		day: 'numeric',
 		month: short_month ? 'short' : 'long'
 	});
+
+	$: orientation = layout || 'vertical';
 </script>
 
 <div>
-	{#if hide !== 'day'}
-		{weekDay}<br />
-	{/if}
+	{#if orientation === 'vertical'}
+		{#if hide !== 'day'}
+			{weekDay}<br />
+		{/if}
 
-	{#if hide !== 'month'}
-		{shortDate}<br />
+		{#if hide !== 'month'}
+			{shortDate}<br />
+		{/if}
+	{/if}
+	{#if orientation === 'horizontal'}
+		{weekDay},&nbsp;{shortDate}
 	{/if}
 </div>
 
diff --git a/src/lib/Sidebar/Index.svelte b/src/lib/Sidebar/Index.svelte
index 1ed91e7c..45ac6eba 100644
--- a/src/lib/Sidebar/Index.svelte
+++ b/src/lib/Sidebar/Index.svelte
@@ -218,6 +218,7 @@
 								short_day={item?.short_day}
 								short_month={item?.short_month}
 								hide={item?.hide}
+								layout={item?.layout}
 							/>
 						</button>
 
diff --git a/src/lib/Types.ts b/src/lib/Types.ts
index 6af8cc61..b181aa20 100644
--- a/src/lib/Types.ts
+++ b/src/lib/Types.ts
@@ -108,6 +108,7 @@ export interface DateItem {
 	short_day?: boolean;
 	short_month?: boolean;
 	hide?: string;
+	layout?: string;
 }
 
 export interface GraphItem {

From 774143f1a61ce9a2fde191f2de572d7b40b7c097 Mon Sep 17 00:00:00 2001
From: Eric Rolf <xrolfex@gmail.com>
Date: Sat, 27 Jan 2024 18:00:46 -0500
Subject: [PATCH 2/2] Fix bug where layout was not visible on the inital add to
 sidebar.:

---
 src/lib/Modal/DateConfig.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/Modal/DateConfig.svelte b/src/lib/Modal/DateConfig.svelte
index 12c5520d..1d591cf6 100644
--- a/src/lib/Modal/DateConfig.svelte
+++ b/src/lib/Modal/DateConfig.svelte
@@ -103,7 +103,7 @@
 				{$lang('month')}
 			</button>
 		</div>
-		{#if sel?.hide === 'none'}
+		{#if !sel?.hide || sel?.hide === 'none'}
 			<!-- Layout -->
 			<h2>{$lang('Layout')}</h2>
 			<div class="button-container">