fix sidebar btn

README.md

@@ -50,7 +50,7 @@ Clone of [T3 Chat](https://t3.chat/)
 - [x] Ensure responsiveness
 - [x] Streams on the server (Resumable streams)
 - [x] Syntax highlighting with Shiki/markdown renderer
-- [x] Eliminate FOUC (kinda)
+- [x] Eliminate FOUC
 - [x] Cascade deletes
 - [x] Google Auth
 - [x] Fix light mode (urgh)

src/lib/components/app-sidebar.svelte

@@ -156,6 +156,7 @@
 			{/snippet}
 			New Chat ({cmdOrCtrl} + Shift + O)
 		</Tooltip>
+		<!--
 		<Tooltip>
 			{#snippet trigger(tooltip)}
 				<button
@@ -170,6 +171,7 @@
 			{/snippet}
 			Search ({cmdOrCtrl} + K)
 		</Tooltip>
+		-->
 	</div>
 	<div class="relative flex min-h-0 flex-1 shrink-0 flex-col overflow-clip">
 		<div

src/routes/+layout.server.ts

@@ -14,4 +14,4 @@ export const load: LayoutServerLoad = async ({ locals }) => {
 };
 
 // Makes caching easier, and tbf, we don't need SSR anyways here
-export const ssr = false;
+export const ssr = true;

src/routes/+layout.svelte

@@ -7,6 +7,7 @@
 	import { setupConvex } from 'convex-svelte';
 	import { ModeWatcher } from 'mode-watcher';
 	import '../app.css';
+	import { browser } from '$app/environment';
 
 	let { children } = $props();
 
@@ -19,6 +20,8 @@
 />
 
 <ModeWatcher />
-{@render children()}
+{#if browser}
+	{@render children()}
+{/if}
 
 <GlobalModal />

src/routes/chat/+layout.svelte

@@ -20,6 +20,7 @@
 	import { settings } from '$lib/state/settings.svelte.js';
 	import { Provider } from '$lib/types';
 	import { compressImage } from '$lib/utils/image-compression';
+	import { isHtmlElement } from '$lib/utils/is.js';
 	import { supportsImages } from '$lib/utils/model-capabilities';
 	import { omit, pick } from '$lib/utils/object.js';
 	import { cn } from '$lib/utils/utils.js';
@@ -27,26 +28,22 @@
 	import { FileUpload, Popover } from 'melt/builders';
 	import { ResultAsync } from 'neverthrow';
 	import { Debounced, ElementSize, IsMounted, PersistedState, ScrollState } from 'runed';
-	import { scale } from 'svelte/transition';
+	import { fade, scale } from 'svelte/transition';
 	import SendIcon from '~icons/lucide/arrow-up';
 	import CheckIcon from '~icons/lucide/check';
 	import ChevronDownIcon from '~icons/lucide/chevron-down';
 	import ImageIcon from '~icons/lucide/image';
 	import PanelLeftIcon from '~icons/lucide/panel-left';
+	import SearchIcon from '~icons/lucide/search';
 	import Settings2Icon from '~icons/lucide/settings-2';
+	import ShareIcon from '~icons/lucide/share';
+	import StopIcon from '~icons/lucide/square';
 	import UploadIcon from '~icons/lucide/upload';
 	import XIcon from '~icons/lucide/x';
-	import SearchIcon from '~icons/lucide/search';
-	import { callGenerateMessage } from '../api/generate-message/call.js';
 	import { callCancelGeneration } from '../api/cancel-generation/call.js';
+	import { callGenerateMessage } from '../api/generate-message/call.js';
 	import ModelPicker from './model-picker.svelte';
-	import ShareIcon from '~icons/lucide/share';
-	import { fade } from 'svelte/transition';
-	import LockIcon from '~icons/lucide/lock';
-	import LockOpenIcon from '~icons/lucide/lock-open';
-	import StopIcon from '~icons/lucide/square';
 	import SearchModal from './search-modal.svelte';
-	import { isHtmlElement } from '$lib/utils/is.js';
 
 	const client = useConvexClient();
 
@@ -380,18 +377,18 @@
 		clipboard.copy(page.url.toString());
 	}
 
-	async function togglePublic() {
+	// async function togglePublic() {
-		if (!page.params.id || !session.current?.session.token) return;
+	// 	if (!page.params.id || !session.current?.session.token) return;
-
+	//
-		await ResultAsync.fromPromise(
+	// 	await ResultAsync.fromPromise(
-			client.mutation(api.conversations.setPublic, {
+	// 		client.mutation(api.conversations.setPublic, {
-				conversation_id: page.params.id as Id<'conversations'>,
+	// 			conversation_id: page.params.id as Id<'conversations'>,
-				public: !currentConversationQuery.data?.public,
+	// 			public: !currentConversationQuery.data?.public,
-				session_token: session.current?.session.token ?? '',
+	// 			session_token: session.current?.session.token ?? '',
-			}),
+	// 		}),
-			(e) => e
+	// 		(e) => e
-		);
+	// 	);
-	}
+	// }
 
 	const textareaSize = new ElementSize(() => textarea);
 
@@ -446,46 +443,27 @@
 	<AppSidebar bind:searchModalOpen />
 
 	<Sidebar.Inset class="w-full overflow-clip px-2">
-		<!-- header - top left -->
+		{#if !sidebarOpen}
-		<div
+			<!-- header - top left -->
-			class={cn(
+			<div
-				'bg-sidebar/50 fixed top-2 left-2 z-50 flex w-fit rounded-lg p-1 backdrop-blur-lg md:top-0 md:right-0 md:left-0 md:rounded-none md:rounded-br-lg',
+				class={cn(
-				{
+					'bg-sidebar/50 fixed top-2 left-2 z-50 flex w-fit rounded-lg p-1 backdrop-blur-lg md:top-0 md:right-0 md:left-0 md:rounded-none md:rounded-br-lg',
-					'md:left-(--sidebar-width)': sidebarOpen,
+					{
-					'hidden md:flex': sidebarOpen,
+						'md:left-(--sidebar-width)': sidebarOpen,
-				}
+						'hidden md:flex': sidebarOpen,
-			)}
+					}
-		>
+				)}
-			<Tooltip>
+			>
-				{#snippet trigger(tooltip)}
-					<Sidebar.Trigger class="size-8" {...tooltip.trigger}>
-						<PanelLeftIcon />
-					</Sidebar.Trigger>
-				{/snippet}
-				Toggle Sidebar ({cmdOrCtrl} + B)
-			</Tooltip>
-
-			{#if page.params.id && currentConversationQuery.data}
 				<Tooltip>
 					{#snippet trigger(tooltip)}
-						<Button
+						<Sidebar.Trigger class="size-8" {...tooltip.trigger}>
-							class="bg-sidebar size-8"
+							<PanelLeftIcon />
-							size="icon"
+						</Sidebar.Trigger>
-							variant="ghost"
-							onClickPromise={togglePublic}
-							{...tooltip.trigger}
-						>
-							{#if currentConversationQuery.data?.public}
-								<LockOpenIcon class="size-4" />
-							{:else}
-								<LockIcon class="size-4" />
-							{/if}
-						</Button>
 					{/snippet}
-					{currentConversationQuery.data?.public ? 'Public' : 'Private'}
+					Toggle Sidebar ({cmdOrCtrl} + B)
 				</Tooltip>
-			{/if}
+			</div>
-		</div>
+		{/if}
 
 		<!-- header - top right -->
 		<div