From 27ae4d0d82dea4fb5ef0f0aba6304070e783ccee Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Thu, 15 Feb 2024 00:34:55 -0800
Subject: [PATCH] feat: fullscreen mode

---
 src/lib/components/chat/Messages.svelte       |  6 ++++-
 .../components/chat/Settings/Interface.svelte | 27 +++++++++++++++++++
 src/lib/components/layout/Navbar.svelte       |  9 +++++--
 src/routes/(app)/+page.svelte                 |  6 ++++-
 src/routes/(app)/c/[id]/+page.svelte          |  6 ++++-
 5 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index 7125dc62..d4ca35a3 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -220,7 +220,11 @@
 	{#key chatId}
 		{#each messages as message, messageIdx}
 			<div class=" w-full">
-				<div class="flex flex-col justify-between px-5 mb-3 max-w-3xl mx-auto rounded-lg group">
+				<div
+					class="flex flex-col justify-between px-5 mb-3 {$settings?.fullScreenMode ?? null
+						? 'max-w-full'
+						: 'max-w-3xl'} mx-auto rounded-lg group"
+				>
 					{#if message.role === 'user'}
 						<UserMessage
 							user={$user}
diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte
index 45be9adb..866818ab 100644
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@@ -12,11 +12,17 @@
 	let titleAutoGenerate = true;
 	let responseAutoCopy = false;
 	let titleAutoGenerateModel = '';
+	let fullScreenMode = false;
 
 	// Interface
 	let promptSuggestions = [];
 	let showUsername = false;
 
+	const toggleFullScreenMode = async () => {
+		fullScreenMode = !fullScreenMode;
+		saveSettings({ fullScreenMode: fullScreenMode });
+	};
+
 	const toggleShowUsername = async () => {
 		showUsername = !showUsername;
 		saveSettings({ showUsername: showUsername });
@@ -64,6 +70,7 @@
 		titleAutoGenerate = settings.titleAutoGenerate ?? true;
 		responseAutoCopy = settings.responseAutoCopy ?? false;
 		showUsername = settings.showUsername ?? false;
+		fullScreenMode = settings.fullScreenMode ?? false;
 		titleAutoGenerateModel = settings.titleAutoGenerateModel ?? '';
 	});
 </script>
@@ -119,6 +126,26 @@
 				</div>
 			</div>
 
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div class=" self-center text-xs font-medium">Full Screen Mode</div>
+
+					<button
+						class="p-1 px-3 text-xs flex rounded transition"
+						on:click={() => {
+							toggleFullScreenMode();
+						}}
+						type="button"
+					>
+						{#if fullScreenMode === true}
+							<span class="ml-2 self-center">On</span>
+						{:else}
+							<span class="ml-2 self-center">Off</span>
+						{/if}
+					</button>
+				</div>
+			</div>
+
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
 					<div class=" self-center text-xs font-medium">
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 3b63cb88..adc11b3f 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -4,7 +4,7 @@
 	const { saveAs } = fileSaver;
 
 	import { getChatById } from '$lib/apis/chats';
-	import { chatId, modelfiles } from '$lib/stores';
+	import { chatId, modelfiles, settings } from '$lib/stores';
 	import ShareChatModal from '../chat/ShareChatModal.svelte';
 	import TagInput from '../common/Tags/TagInput.svelte';
 	import Tags from '../common/Tags.svelte';
@@ -71,7 +71,12 @@
 	id="nav"
 	class=" fixed py-2.5 top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-900/90 dark:text-gray-200 backdrop-blur-xl w-screen z-30"
 >
-	<div class=" flex max-w-3xl w-full mx-auto px-3">
+	<div
+		class=" flex
+	
+	{$settings?.fullScreenMode ?? null ? 'max-w-full' : 'max-w-3xl'} 
+		 w-full mx-auto px-3"
+	>
 		<div class="flex items-center w-full max-w-full">
 			<div class="pr-2 self-start">
 				<button
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 6b7ccb2e..98c767a9 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -781,7 +781,11 @@
 <Navbar {title} shareEnabled={messages.length > 0} {initNewChat} {tags} {addTag} {deleteTag} />
 <div class="min-h-screen w-full flex justify-center">
 	<div class=" py-2.5 flex flex-col justify-between w-full">
-		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">
+		<div
+			class="{$settings?.fullScreenMode ?? null
+				? 'max-w-full'
+				: 'max-w-2xl md:px-0'}mx-auto w-full px-4 md:px-0 mt-10"
+		>
 			<ModelSelector bind:selectedModels disabled={messages.length > 0} />
 		</div>
 
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte
index c1e05087..2c65c7c2 100644
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@@ -810,7 +810,11 @@
 	/>
 	<div class="min-h-screen w-full flex justify-center">
 		<div class=" py-2.5 flex flex-col justify-between w-full">
-			<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">
+			<div
+				class="{$settings?.fullScreenMode ?? null
+					? 'max-w-full'
+					: 'max-w-2xl md:px-0'} mx-auto w-full px-4 mt-10"
+			>
 				<ModelSelector
 					bind:selectedModels
 					disabled={messages.length > 0 && !selectedModels.includes('')}