refac: styling

src/lib/components/app/AppControls.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Plus from '$lib/components/icons/Plus.svelte';
+
+	let selected = 'home';
+</script>
+
+<div class="min-w-[4.5rem] bg-black flex gap-2.5 flex-col pt-10">
+	<div class="flex justify-center relative">
+		{#if selected === 'home'}
+			<div class="absolute top-0 left-0 flex h-full">
+				<div class="my-auto rounded-r-lg w-1 h-8 bg-white"></div>
+			</div>
+		{/if}
+
+		<Tooltip content="Home" placement="right">
+			<button
+				class=" cursor-pointer bg-gray-850 {selected === 'home' ? 'rounded-2xl' : 'rounded-full'}"
+				on:click={() => {
+					selected = 'home';
+				}}
+			>
+				<img
+					src="/static/splash.png"
+					class="size-11 dark:invert p-1"
+					alt="logo"
+					draggable="false"
+				/>
+			</button>
+		</Tooltip>
+	</div>
+
+	<div class="border-t border-gray-900 mx-3"></div>
+
+	<div class="flex justify-center relative group">
+		{#if selected === ''}
+			<div class="absolute top-0 left-0 flex h-full">
+				<div class="my-auto rounded-r-lg w-1 h-8 bg-white"></div>
+			</div>
+		{/if}
+		<button
+			class=" cursor-pointer bg-transparent"
+			onclick={() => {
+				selected = '';
+			}}
+		>
+			<img
+				src="/assets/images/adam.jpg"
+				class="size-11 {selected === '' ? 'rounded-2xl' : 'rounded-full'}"
+				alt="logo"
+				draggable="false"
+			/>
+		</button>
+	</div>
+
+	<div class="flex justify-center relative group text-gray-400">
+		<button class=" cursor-pointer p-2" onclick={() => {}}>
+			<Plus className="size-5" strokeWidth="2" />
+		</button>
+	</div>
+</div>

src/lib/components/channel/Channel.svelte

@@ -199,7 +199,7 @@
 </svelte:head>
 
 <div
-	class="h-screen max-h-[100dvh] {$showSidebar
+	class="h-screen max-h-[100dvh] transition-width duration-300 ease-in-out {$showSidebar
 		? 'md:max-w-[calc(100%-260px)]'
 		: ''} w-full max-w-full flex flex-col"
 	id="channel-container"

src/lib/components/chat/Chat.svelte

@@ -1831,9 +1831,9 @@
 
 {#if !chatIdProp || (loaded && chatIdProp)}
 	<div
-		class="h-screen max-h-[100dvh] {$showSidebar
-			? 'md:max-w-[calc(100%-260px)]'
-			: ''} w-full max-w-full flex flex-col"
+		class="h-screen max-h-[100dvh] transition-width duration-300 ease-in-out {$showSidebar
+			? '  md:max-w-[calc(100%-260px)]'
+			: ' '} w-full max-w-full flex flex-col"
 		id="chat-container"
 	>
 		{#if $settings?.backgroundImageUrl ?? null}

src/lib/components/layout/Sidebar.svelte

@@ -19,7 +19,8 @@
 		temporaryChatEnabled,
 		channels,
 		socket,
-		config
+		config,
+		isApp
 	} from '$lib/stores';
 	import { onMount, getContext, tick, onDestroy } from 'svelte';
 
@@ -426,7 +427,9 @@
 
 {#if $showSidebar}
 	<div
-		class=" fixed md:hidden z-40 top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center overflow-hidden overscroll-contain"
+		class=" {$isApp
+			? ' ml-[4.5rem] md:ml-0'
+			: ''} fixed md:hidden z-40 top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center overflow-hidden overscroll-contain"
 		on:mousedown={() => {
 			showSidebar.set(!$showSidebar);
 		}}
@@ -438,7 +441,9 @@
 	id="sidebar"
 	class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
 		? 'md:relative w-[260px] max-w-[260px]'
-		: '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0 overflow-x-hidden
+		: '-translate-x-[260px] w-[0px]'} {$isApp
+		? ' ml-[4.5rem] md:ml-0'
+		: 'transition-width duration-300 ease-in-out flex-shrink-0'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm fixed z-50 top-0 left-0 overflow-x-hidden
         "
 	data-state={$showSidebar}
 >

src/lib/stores/index.ts

@@ -11,6 +11,10 @@ export const WEBUI_NAME = writable(APP_NAME);
 export const config: Writable<Config | undefined> = writable(undefined);
 export const user: Writable<SessionUser | undefined> = writable(undefined);
 
+// Electron App
+export const isApp = writable(false);
+export const appVersion = writable(null);
+
 // Frontend
 export const MODEL_DOWNLOAD_POOL = writable({});
 

src/routes/(app)/+layout.svelte

@@ -233,7 +233,7 @@
 
 <div class="app relative">
 	<div
-		class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 h-screen max-h-[100dvh] overflow-auto flex flex-row"
+		class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 h-screen max-h-[100dvh] overflow-auto flex flex-row justify-end"
 	>
 		{#if loaded}
 			{#if !['user', 'admin'].includes($user.role)}

src/routes/(app)/admin/+layout.svelte

@@ -26,13 +26,13 @@
 
 {#if loaded}
 	<div
-		class=" flex flex-col w-full min-h-screen max-h-screen {$showSidebar
+		class=" flex flex-col w-full min-h-screen max-h-screen transition-width duration-300 ease-in-out {$showSidebar
 			? 'md:max-w-[calc(100%-260px)]'
-			: ''}"
+			: ''} max-w-full"
 	>
 		<nav class="   px-2.5 pt-1 backdrop-blur-xl drag-region">
 			<div class=" flex items-center gap-1">
-				<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
+				<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end">
 					<button
 						id="sidebar-toggle-button"
 						class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"

src/routes/(app)/playground/+layout.svelte

@@ -16,13 +16,13 @@
 </svelte:head>
 
 <div
-	class=" flex flex-col w-full h-screen max-h-[100dvh] {$showSidebar
+	class=" flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-300 ease-in-out {$showSidebar
 		? 'md:max-w-[calc(100%-260px)]'
-		: ''}"
+		: ''} max-w-full"
 >
 	<nav class="   px-2.5 pt-1 backdrop-blur-xl w-full drag-region">
 		<div class=" flex items-center">
-			<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
+			<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end">
 				<button
 					id="sidebar-toggle-button"
 					class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"

src/routes/(app)/workspace/+layout.svelte

@@ -51,13 +51,13 @@
 
 {#if loaded}
 	<div
-		class=" relative flex flex-col w-full h-screen max-h-[100dvh] {$showSidebar
+		class=" relative flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-300 ease-in-out {$showSidebar
 			? 'md:max-w-[calc(100%-260px)]'
-			: ''}"
+			: ''} max-w-full"
 	>
 		<nav class="   px-2.5 pt-1 backdrop-blur-xl drag-region">
 			<div class=" flex items-center gap-1">
-				<div class="{$showSidebar ? 'md:hidden' : ''} self-center flex flex-none items-center">
+				<div class="{$showSidebar ? 'md:hidden' : ''} self-end flex flex-none items-center">
 					<button
 						id="sidebar-toggle-button"
 						class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"

src/routes/+layout.svelte

@@ -22,7 +22,9 @@
 		currentChatPage,
 		tags,
 		temporaryChatEnabled,
-		isLastActiveTab
+		isLastActiveTab,
+		isApp,
+		appVersion
 	} from '$lib/stores';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
@@ -41,6 +43,7 @@
 	import { bestMatchingLanguage } from '$lib/utils';
 	import { getAllTags, getChatList } from '$lib/apis/chats';
 	import NotificationToast from '$lib/components/NotificationToast.svelte';
+	import AppControls from '$lib/components/app/AppControls.svelte';
 
 	setContext('i18n', i18n);
 
@@ -177,6 +180,17 @@
 	};
 
 	onMount(async () => {
+		if (window?.electronAPI) {
+			const res = await window.electronAPI.send({
+				type: 'version'
+			});
+
+			if (res) {
+				isApp.set(true);
+				appVersion.set(res.version);
+			}
+		}
+
 		// Listen for messages on the BroadcastChannel
 		bc.onmessage = (event) => {
 			if (event.data === 'active') {
@@ -324,7 +338,17 @@
 </svelte:head>
 
 {#if loaded}
-	<slot />
+	{#if $isApp}
+		<div class="flex flex-row h-screen">
+			<AppControls />
+
+			<div class="w-full flex-1">
+				<slot />
+			</div>
+		</div>
+	{:else}
+		<slot />
+	{/if}
 {/if}
 
 <Toaster