From b20bcdbba72707e3b0cf2b9a6a5f3168b464ba3c Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 10 Aug 2026 20:22:29 -0600
Subject: [PATCH] refac

---
 .../components/common/MobileSwipePanel.svelte |  274 +++
 src/lib/components/layout/Sidebar.svelte      | 1578 +++++++++--------
 .../components/layout/Sidebar/ChatItem.svelte |    9 +
 3 files changed, 1079 insertions(+), 782 deletions(-)
 create mode 100644 src/lib/components/common/MobileSwipePanel.svelte

diff --git a/src/lib/components/common/MobileSwipePanel.svelte b/src/lib/components/common/MobileSwipePanel.svelte
new file mode 100644
index 0000000000..538cf6b1ee
--- /dev/null
+++ b/src/lib/components/common/MobileSwipePanel.svelte
@@ -0,0 +1,274 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+
+	const UNSAFE_EDGE = 16;
+	const SWIPE_SLOP = 8;
+	const AXIS_RATIO = 1.2;
+	const FLICK_VELOCITY = 0.55;
+	const SETTLE_MS = 210;
+
+	export let open = false;
+	export let enabled = false;
+	export let width = 245;
+	export let onOpenChange: (open: boolean) => void = () => {};
+
+	let mounted = false;
+	let active = false;
+	let locked = false;
+	let direction: 'open' | 'close' | null = null;
+	let startX = 0;
+	let startY = 0;
+	let lastX = 0;
+	let lastTime = 0;
+	let velocity = 0;
+	let startProgress = 0;
+	let swipeProgress = 0;
+	let settling = false;
+	let settleTimer: ReturnType<typeof setTimeout> | null = null;
+	let settleFrame: ReturnType<typeof requestAnimationFrame> | null = null;
+	let scrollLocked = false;
+	let lastOpen: boolean | null = null;
+	let lastEnabled: boolean | null = null;
+
+	$: panelWidth = width || 245;
+	$: progress = enabled ? Math.max(0, Math.min(1, swipeProgress)) : 1;
+	$: visible = open || (enabled && mounted);
+	$: panelStyle = enabled
+		? `transform: translateX(${(progress - 1) * 100}%); transition: ${
+				settling ? `transform ${SETTLE_MS}ms cubic-bezier(0.22, 1, 0.36, 1)` : 'none'
+			};`
+		: '';
+	$: backdropStyle = enabled
+		? `opacity: ${progress * 0.6}; transition: ${
+				settling ? `opacity ${SETTLE_MS}ms cubic-bezier(0.22, 1, 0.36, 1)` : 'none'
+			};`
+		: '';
+
+	$: if (open !== lastOpen || enabled !== lastEnabled) {
+		lastOpen = open;
+		lastEnabled = enabled;
+
+		if (enabled) {
+			animate(open);
+		} else {
+			mounted = false;
+			swipeProgress = open ? 1 : 0;
+			settling = false;
+			setScrollLock(false);
+		}
+	}
+
+	const shouldSkipSwipe = (target: EventTarget | null) => {
+		return (
+			target instanceof Element &&
+			!!target.closest(
+				'input, textarea, select, button, [role="menu"], [contenteditable="true"], [data-sidebar-no-gesture]'
+			)
+		);
+	};
+
+	const setScrollLock = (locked: boolean) => {
+		if (scrollLocked === locked || typeof document === 'undefined') {
+			return;
+		}
+
+		scrollLocked = locked;
+		document.documentElement.classList.toggle('mobile-swipe-panel-active', locked);
+		document.body.classList.toggle('mobile-swipe-panel-active', locked);
+	};
+
+	const clearTimer = () => {
+		if (settleTimer) {
+			clearTimeout(settleTimer);
+			settleTimer = null;
+		}
+	};
+
+	const clearFrame = () => {
+		if (settleFrame) {
+			cancelAnimationFrame(settleFrame);
+			settleFrame = null;
+		}
+	};
+
+	const prefersReducedMotion = () =>
+		typeof window !== 'undefined' &&
+		window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+	const animate = (nextOpen: boolean) => {
+		clearTimer();
+		clearFrame();
+		mounted = nextOpen || mounted;
+
+		const finish = () => {
+			settling = false;
+			mounted = nextOpen;
+			settleTimer = null;
+		};
+
+		const settle = () => {
+			settling = !prefersReducedMotion();
+			swipeProgress = nextOpen ? 1 : 0;
+			settleTimer = setTimeout(finish, settling ? SETTLE_MS : 0);
+		};
+
+		if (nextOpen && swipeProgress <= 0.01) {
+			swipeProgress = 0;
+			settling = false;
+			settleFrame = requestAnimationFrame(() => {
+				settleFrame = null;
+				settle();
+			});
+			return;
+		}
+
+		settle();
+	};
+
+	const resetSwipe = () => {
+		active = false;
+		locked = false;
+		direction = null;
+		velocity = 0;
+		setScrollLock(false);
+	};
+
+	const cancelSwipe = () => {
+		resetSwipe();
+		animate(open);
+	};
+
+	const onTouchStart = (e: TouchEvent) => {
+		if (!enabled || e.touches.length !== 1 || shouldSkipSwipe(e.target)) {
+			return;
+		}
+
+		const touch = e.touches[0];
+		const x = touch.clientX;
+
+		if (!open) {
+			if (x < UNSAFE_EDGE) {
+				return;
+			}
+
+			direction = 'open';
+			startProgress = 0;
+			mounted = true;
+			swipeProgress = 0;
+		} else {
+			direction = 'close';
+			startProgress = swipeProgress || 1;
+		}
+
+		clearTimer();
+		settling = false;
+		active = true;
+		locked = false;
+		startX = x;
+		startY = touch.clientY;
+		lastX = x;
+		lastTime = e.timeStamp;
+		velocity = 0;
+	};
+
+	const onTouchMove = (e: TouchEvent) => {
+		if (!active || !direction || e.touches.length !== 1) {
+			return;
+		}
+
+		const touch = e.touches[0];
+		const dx = touch.clientX - startX;
+		const dy = touch.clientY - startY;
+		const absX = Math.abs(dx);
+		const absY = Math.abs(dy);
+
+		if (!locked) {
+			if ((direction === 'open' && dx > 0) || (direction === 'close' && dx < 0)) {
+				swipeProgress = Math.max(0, Math.min(1, startProgress + dx / panelWidth));
+			}
+
+			if (absX < SWIPE_SLOP && absY < SWIPE_SLOP) {
+				return;
+			}
+
+			if (absY > absX || absX < absY * AXIS_RATIO) {
+				cancelSwipe();
+				return;
+			}
+
+			locked = true;
+			setScrollLock(true);
+		}
+
+		e.preventDefault();
+
+		const now = e.timeStamp;
+		const elapsed = Math.max(1, now - lastTime);
+		velocity = (touch.clientX - lastX) / elapsed;
+		lastX = touch.clientX;
+		lastTime = now;
+
+		swipeProgress = Math.max(0, Math.min(1, startProgress + dx / panelWidth));
+	};
+
+	const onTouchEnd = () => {
+		if (!active) {
+			return;
+		}
+
+		if (!locked) {
+			cancelSwipe();
+			return;
+		}
+
+		let shouldOpen = direction === 'open' ? swipeProgress > 0.35 : swipeProgress > 0.65;
+
+		if (velocity > FLICK_VELOCITY) {
+			shouldOpen = true;
+		} else if (velocity < -FLICK_VELOCITY) {
+			shouldOpen = false;
+		}
+
+		resetSwipe();
+		animate(shouldOpen);
+		onOpenChange(shouldOpen);
+	};
+
+	const onTouchCancel = () => {
+		if (active) {
+			cancelSwipe();
+		}
+	};
+
+	onMount(() => {
+		window.addEventListener('touchstart', onTouchStart, { passive: true });
+		window.addEventListener('touchmove', onTouchMove, { passive: false });
+		window.addEventListener('touchend', onTouchEnd);
+		window.addEventListener('touchcancel', onTouchCancel);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('touchstart', onTouchStart);
+		window.removeEventListener('touchmove', onTouchMove);
+		window.removeEventListener('touchend', onTouchEnd);
+		window.removeEventListener('touchcancel', onTouchCancel);
+		clearTimer();
+		clearFrame();
+		setScrollLock(false);
+	});
+</script>
+
+<slot {visible} {progress} {panelStyle} {backdropStyle} />
+
+<style>
+	:global(html),
+	:global(body) {
+		overflow-x: hidden;
+		overscroll-behavior-x: contain;
+	}
+
+	:global(html.mobile-swipe-panel-active),
+	:global(body.mobile-swipe-panel-active) {
+		touch-action: pan-y;
+	}
+</style>
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 8e20c83d96..6691938abe 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -92,9 +92,13 @@
 	import DropdownMenu from '../common/DropdownMenu.svelte';
 	import CheckIcon from '../icons/Check.svelte';
 	import MoreHorizontalIcon from './Sidebar/icons/MoreHorizontal.svelte';
+	import MobileSwipePanel from '../common/MobileSwipePanel.svelte';
 
 	const BREAKPOINT = 768;
 	const DEFAULT_PINNED_ITEMS = ['notes', 'workspace'];
+	const MOBILE_SIDEBAR_SETTLE_MS = 210;
+	const sidebarMountTransition = (node: Element, params: Record<string, unknown>) =>
+		$mobile ? { duration: 0, css: () => '' } : slide(node, params);
 
 	let scrollTop = 0;
 
@@ -554,32 +558,6 @@
 		draggedOver = false; // Reset draggedOver status after drop
 	};
 
-	let touchstart;
-	let touchend;
-
-	function checkDirection() {
-		const screenWidth = window.innerWidth;
-		const swipeDistance = Math.abs(touchend.screenX - touchstart.screenX);
-		if (touchstart.clientX < 40 && swipeDistance >= screenWidth / 8) {
-			if (touchend.screenX < touchstart.screenX) {
-				showSidebar.set(false);
-			}
-			if (touchend.screenX > touchstart.screenX) {
-				showSidebar.set(true);
-			}
-		}
-	}
-
-	const onTouchStart = (e) => {
-		touchstart = e.changedTouches[0];
-		console.log(touchstart.clientX);
-	};
-
-	const onTouchEnd = (e) => {
-		touchend = e.changedTouches[0];
-		checkDirection();
-	};
-
 	const onKeyDown = (e) => {
 		if (e.key === 'Shift') {
 			shiftKey = true;
@@ -599,6 +577,21 @@
 		selectedChatId = null;
 	};
 
+	const focusChatInputSoon = () => {
+		setTimeout(() => {
+			document.getElementById('chat-input')?.focus({ preventScroll: true });
+		}, MOBILE_SIDEBAR_SETTLE_MS);
+	};
+
+	const closeMobileSidebar = (focusChatInput = false) => {
+		if ($mobile) {
+			showSidebar.set(false);
+			if (focusChatInput) {
+				focusChatInputSoon();
+			}
+		}
+	};
+
 	const MIN_WIDTH = 220;
 	const MAX_WIDTH = 480;
 
@@ -701,9 +694,6 @@
 		window.addEventListener('keydown', onKeyDown);
 		window.addEventListener('keyup', onKeyUp);
 
-		window.addEventListener('touchstart', onTouchStart);
-		window.addEventListener('touchend', onTouchEnd);
-
 		window.addEventListener('focus', onFocus);
 		window.addEventListener('blur', onBlur);
 
@@ -739,9 +729,6 @@
 			window.removeEventListener('keydown', onKeyDown);
 			window.removeEventListener('keyup', onKeyUp);
 
-			window.removeEventListener('touchstart', onTouchStart);
-			window.removeEventListener('touchend', onTouchEnd);
-
 			window.removeEventListener('focus', onFocus);
 			window.removeEventListener('blur', onBlur);
 
@@ -811,27 +798,20 @@
 	const newChatHandler = async () => {
 		selectedChatId = null;
 		selectedFolder.set(null);
+		closeMobileSidebar(true);
 
 		if ($user?.role !== 'admin' && $user?.permissions?.chat?.temporary_enforced) {
 			await temporaryChatEnabled.set(true);
 		} else {
 			await temporaryChatEnabled.set(false);
 		}
-
-		setTimeout(() => {
-			if ($mobile) {
-				showSidebar.set(false);
-			}
-		}, 0);
 	};
 
 	const itemClickHandler = async () => {
 		selectedChatId = null;
 		chatId.set('');
 
-		if ($mobile) {
-			showSidebar.set(false);
-		}
+		closeMobileSidebar();
 
 		await tick();
 	};
@@ -887,37 +867,6 @@
 	}}
 />
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-
-{#if $showSidebar}
-	<div
-		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);
-		}}
-	/>
-{/if}
-
-<SearchModal
-	bind:show={$showSearch}
-	onClose={() => {
-		if ($mobile) {
-			showSidebar.set(false);
-		}
-	}}
-/>
-
-<button
-	id="sidebar-new-chat-button"
-	class="hidden"
-	on:click={() => {
-		goto('/');
-		newChatHandler();
-	}}
-/>
-
 <svelte:window
 	on:mousemove={(e) => {
 		if (!isResizing) return;
@@ -928,336 +877,165 @@
 	}}
 />
 
-{#if !$mobile && !$showSidebar}
-	<div
-		class="w-[calc(42px*var(--app-text-scale,1))] shrink-0 py-[calc(0.25rem*var(--app-text-scale,1))] px-[calc(0.25rem*var(--app-text-scale,1))] flex flex-col justify-between text-gray-700 dark:text-gray-300 hover:bg-gray-50/30 dark:hover:bg-gray-800/30 h-full z-10 transition-all border-e-[0.5px] border-gray-50 dark:border-gray-850/30"
-		id="sidebar"
-		role="navigation"
-		aria-label={$i18n.t('Chat history')}
-	>
-		<button
-			class="flex flex-col flex-1 {isWindows ? 'cursor-pointer' : 'cursor-[e-resize]'}"
-			on:click={async () => {
-				showSidebar.set(!$showSidebar);
-			}}
-		>
-			<div class="pb-1">
-				<Tooltip
-					content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
-					placement="right"
-				>
-					<button
-						class="flex size-8.5 items-center justify-center transition group {isWindows
-							? 'cursor-pointer'
-							: 'cursor-[e-resize]'}"
-						aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
-					>
-						<div
-							class="self-center flex size-[calc(30px*var(--app-text-scale,1))] items-center justify-center rounded-lg transition group-hover:bg-gray-50 dark:group-hover:bg-gray-900"
-						>
-							<!-- LICENSE covers this Open WebUI sidebar logo.
-							Do not alter, remove, obscure, or replace it except as LICENSE permits:
-							https://docs.openwebui.com/license. -->
-							<img
-								src="{WEBUI_BASE_URL}/static/favicon.png"
-								class="sidebar-new-chat-icon size-5 rounded-full group-hover:hidden"
-								alt=""
-							/>
+<MobileSwipePanel
+	open={$showSidebar}
+	enabled={$mobile}
+	width={$sidebarWidth}
+	onOpenChange={(open) => showSidebar.set(open)}
+	let:visible
+	let:progress
+	let:panelStyle
+	let:backdropStyle
+>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 
-							<Sidebar className="size-4 hidden group-hover:flex" />
-						</div>
-					</button>
-				</Tooltip>
-			</div>
-
-			<div class="-gap-0.5">
-				<div class="">
-					<Tooltip content={$i18n.t('New Chat')} placement="right">
-						<a
-							class=" cursor-pointer flex size-8 items-center justify-center transition group"
-							href="/"
-							draggable="false"
-							on:click={async (e) => {
-								e.stopImmediatePropagation();
-								e.preventDefault();
-
-								goto('/');
-								newChatHandler();
-							}}
-							aria-label={$i18n.t('New Chat')}
-						>
-							<div
-								class="self-center flex size-[calc(30px*var(--app-text-scale,1))] items-center justify-center rounded-lg transition group-hover:bg-gray-50 dark:group-hover:bg-gray-900"
-							>
-								<EditPencilIcon className="size-4" strokeWidth="1.5" />
-							</div>
-						</a>
-					</Tooltip>
-				</div>
-
-				<div>
-					<Tooltip content={$i18n.t('Search')} placement="right">
-						<button
-							class=" cursor-pointer flex size-8 items-center justify-center transition group"
-							on:click={(e) => {
-								e.stopImmediatePropagation();
-								e.preventDefault();
-
-								showSearch.set(true);
-							}}
-							draggable="false"
-							aria-label={$i18n.t('Search')}
-						>
-							<div
-								class="self-center flex size-[calc(30px*var(--app-text-scale,1))] items-center justify-center rounded-lg transition group-hover:bg-gray-50 dark:group-hover:bg-gray-900"
-							>
-								<SearchIcon className="size-4" strokeWidth="1.5" />
-							</div>
-						</button>
-					</Tooltip>
-				</div>
-
-				{#each pinnedItems as itemId (itemId)}
-					{@const meta = getMenuItemMeta(itemId)}
-					{#if meta && isMenuItemVisible(itemId)}
-						<div class="">
-							<Tooltip content={$i18n.t(meta.label)} placement="right">
-								<a
-									class=" cursor-pointer flex size-8 items-center justify-center transition group"
-									href={meta.href}
-									on:click={async (e) => {
-										e.stopImmediatePropagation();
-										e.preventDefault();
-										goto(meta.href);
-										itemClickHandler();
-									}}
-									draggable="false"
-									aria-label={$i18n.t(meta.label)}
-								>
-									<div
-										class="self-center flex size-[calc(30px*var(--app-text-scale,1))] items-center justify-center rounded-lg transition {itemId ===
-										activeMenuItemId
-											? ($settings?.highContrastMode ?? false)
-												? 'bg-black/[0.035] dark:bg-white/[0.06]'
-												: 'bg-black/[0.035] dark:bg-white/[0.045]'
-											: 'group-hover:bg-gray-50 dark:group-hover:bg-gray-900'}"
-									>
-										{#if itemId === 'notes'}
-											<NotesIcon className="size-4" strokeWidth="1.5" />
-										{:else if itemId === 'workspace'}
-											<WorkspaceIcon className="size-4" strokeWidth="1.5" />
-										{:else if itemId === 'automations'}
-											<ClockIcon className="size-4" strokeWidth="1.5" />
-										{:else if itemId === 'calendar'}
-											<CalendarIcon className="size-4" strokeWidth="1.5" />
-										{:else if itemId === 'playground'}
-											<CodeIcon className="size-4" strokeWidth="1.5" />
-										{/if}
-									</div>
-								</a>
-							</Tooltip>
-						</div>
-					{/if}
-				{/each}
-			</div>
-		</button>
-
-		<div>
-			<div>
-				<div class=" flex justify-center items-center">
-					{#if $user !== undefined && $user !== null}
-						<UserMenu role={$user?.role} profile={$config?.features?.enable_user_status ?? true}>
-							<button
-								type="button"
-								class=" cursor-pointer flex size-8.5 items-center justify-center transition group"
-								aria-label={$i18n.t('User menu')}
-							>
-								<div
-									class="self-center relative flex size-[calc(30px*var(--app-text-scale,1))] items-center justify-center rounded-lg transition group-hover:bg-gray-50 dark:group-hover:bg-gray-900"
-								>
-									<img
-										src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
-										class="size-5.5 object-cover rounded-full"
-										alt={$i18n.t('Open User Profile Menu')}
-										aria-label={$i18n.t('Open User Profile Menu')}
-									/>
-
-									{#if $config?.features?.enable_user_status}
-										<div class="absolute -bottom-0.5 -right-0.5">
-											<span class="relative flex size-2.5">
-												<span
-													class="relative inline-flex size-2.5 rounded-full {true
-														? 'bg-green-500'
-														: 'bg-gray-300 dark:bg-gray-700'} border-2 border-white dark:border-gray-900"
-												></span>
-											</span>
-										</div>
-									{/if}
-								</div>
-							</button>
-						</UserMenu>
-					{/if}
-				</div>
-			</div>
-		</div>
-	</div>
-{/if}
-
-<!-- {$i18n.t('New Folder')} -->
-<!-- {$i18n.t('Pinned')} -->
-
-{#if $showSidebar}
-	<div
-		bind:this={navElement}
-		id="sidebar"
-		role="navigation"
-		aria-label={$i18n.t('Chat history')}
-		class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
-			? `${$mobile ? 'bg-gray-50 dark:bg-gray-950' : 'bg-gray-50/70 dark:bg-gray-950/70'} z-50`
-			: ' bg-transparent z-0 '} {$isApp
-			? `ml-[4.5rem] md:ml-0 `
-			: ' transition-all duration-300 '} shrink-0 text-gray-700 dark:text-gray-300 text-[0.8125rem] leading-5 fixed top-0 left-0 overflow-x-hidden
-        "
-		transition:slide={{ duration: 250, axis: 'x' }}
-		data-state={$showSidebar}
-	>
+	{#if visible}
 		<div
-			class=" my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[var(--sidebar-width)] overflow-x-hidden scrollbar-hidden z-50 border-e border-gray-50 dark:border-gray-850/30 {$showSidebar
+			class=" {$isApp
+				? ' ml-[4.5rem] md:ml-0'
+				: ''} fixed md:hidden z-40 top-0 right-0 left-0 bottom-0 bg-black w-full min-h-screen h-screen flex justify-center overflow-hidden overscroll-contain {progress >
+			0.02
 				? ''
-				: 'invisible'}"
+				: 'pointer-events-none'}"
+			style={backdropStyle}
+			on:mousedown={() => {
+				showSidebar.set(false);
+			}}
+		></div>
+	{/if}
+
+	<SearchModal
+		bind:show={$showSearch}
+		onClose={() => {
+			if ($mobile) {
+				showSidebar.set(false);
+			}
+		}}
+	/>
+
+	<button
+		id="sidebar-new-chat-button"
+		class="hidden"
+		on:click={() => {
+			goto('/');
+			newChatHandler();
+		}}
+	/>
+
+	{#if !$mobile && !$showSidebar}
+		<div
+			class="w-[calc(42px*var(--app-text-scale,1))] shrink-0 py-[calc(0.25rem*var(--app-text-scale,1))] px-[calc(0.25rem*var(--app-text-scale,1))] flex flex-col justify-between text-gray-700 dark:text-gray-300 hover:bg-gray-50/30 dark:hover:bg-gray-800/30 h-full z-10 transition-all border-e-[0.5px] border-gray-50 dark:border-gray-850/30"
+			id="sidebar"
+			role="navigation"
+			aria-label={$i18n.t('Chat history')}
 		>
-			<div
-				class="sidebar px-1 pt-1.5 pb-1 flex justify-between space-x-1 text-gray-600 dark:text-gray-400 sticky top-0 z-10 -mb-2"
-			>
-				<a
-					class="flex items-center rounded-xl size-8.5 h-full justify-center hover:bg-gray-50 dark:hover:bg-gray-900 transition no-drag-region"
-					href="/"
-					draggable="false"
-					on:click={newChatHandler}
-				>
-					<!-- LICENSE covers this Open WebUI sidebar logo.
-					Do not alter, remove, obscure, or replace it except as LICENSE permits:
-					https://docs.openwebui.com/license. -->
-					<img
-						crossorigin="anonymous"
-						src="{WEBUI_BASE_URL}/static/favicon.png"
-						class="sidebar-new-chat-icon size-5 rounded-full"
-						alt=""
-					/>
-				</a>
-
-				<a href="/" class="flex flex-1 px-0.5" on:click={newChatHandler}>
-					<!-- LICENSE covers this Open WebUI sidebar name.
-					Do not alter, remove, obscure, or replace it except as LICENSE permits:
-					https://docs.openwebui.com/license. -->
-					<div
-						id="sidebar-webui-name"
-						class=" self-center font-normal text-gray-700 dark:text-gray-200"
-					>
-						{$WEBUI_NAME}
-					</div>
-				</a>
-				<Tooltip
-					content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
-					placement="bottom"
-				>
-					<button
-						class="flex size-[1.875rem] justify-center items-center rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900 transition {isWindows
-							? 'cursor-pointer'
-							: 'cursor-[w-resize]'}"
-						on:click={() => {
-							showSidebar.set(!$showSidebar);
-						}}
-						aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
-					>
-						<div class=" self-center">
-							<Sidebar className="size-4" />
-						</div>
-					</button>
-				</Tooltip>
-
-				<div
-					class="{scrollTop > 0
-						? 'visible'
-						: 'invisible'} sidebar-bg-gradient-to-b bg-linear-to-b from-gray-50 dark:from-gray-950 to-transparent from-50% pointer-events-none absolute inset-0 -z-10 -mb-6"
-				></div>
-			</div>
-
-			<div
-				class="relative flex flex-col flex-1 overflow-y-auto scrollbar-hidden pt-2.5 pb-2.5"
-				on:scroll={(e) => {
-					if (e.target.scrollTop === 0) {
-						scrollTop = 0;
-					} else {
-						scrollTop = e.target.scrollTop;
-					}
+			<button
+				class="flex flex-col flex-1 {isWindows ? 'cursor-pointer' : 'cursor-[e-resize]'}"
+				on:click={async () => {
+					showSidebar.set(!$showSidebar);
 				}}
 			>
 				<div class="pb-1">
-					<div class="px-1 flex justify-center text-gray-700 dark:text-gray-300">
-						<a
-							id="sidebar-new-chat-button"
-							class="group grow flex items-center space-x-2 rounded-xl px-2 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-900 transition outline-none"
-							href="/"
-							draggable="false"
-							on:click={newChatHandler}
-							aria-label={$i18n.t('New Chat')}
-						>
-							<div class="self-center flex size-4 shrink-0 items-center justify-center">
-								<EditPencilIcon className=" size-4" strokeWidth="1.5" />
-							</div>
-
-							<div class="flex flex-1 self-center translate-y-[0.5px]">
-								<div class=" self-center text-[0.8125rem] leading-5">{$i18n.t('New Chat')}</div>
-							</div>
-
-							<HotkeyHint name="newChat" className=" group-hover:visible invisible" />
-						</a>
-					</div>
-
-					<div class="px-1 flex justify-center text-gray-700 dark:text-gray-300">
+					<Tooltip
+						content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
+						placement="right"
+					>
 						<button
-							id="sidebar-search-button"
-							class="group grow flex items-center space-x-2 rounded-xl px-2 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-900 transition outline-none"
-							on:click={() => {
-								showSearch.set(true);
-							}}
-							draggable="false"
-							aria-label={$i18n.t('Search')}
+							class="flex size-8.5 items-center justify-center transition group {isWindows
+								? 'cursor-pointer'
+								: 'cursor-[e-resize]'}"
+							aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
 						>
-							<div class="self-center flex size-4 shrink-0 items-center justify-center">
-								<SearchIcon strokeWidth="1.5" className="size-4" />
-							</div>
+							<div
+								class="self-center flex size-[calc(30px*var(--app-text-scale,1))] items-center justify-center rounded-lg transition group-hover:bg-gray-50 dark:group-hover:bg-gray-900"
+							>
+								<!-- LICENSE covers this Open WebUI sidebar logo.
+							Do not alter, remove, obscure, or replace it except as LICENSE permits:
+							https://docs.openwebui.com/license. -->
+								<img
+									src="{WEBUI_BASE_URL}/static/favicon.png"
+									class="sidebar-new-chat-icon size-5 rounded-full group-hover:hidden"
+									alt=""
+								/>
 
-							<div class="flex flex-1 self-center translate-y-[0.5px]">
-								<div class=" self-center text-[0.8125rem] leading-5">{$i18n.t('Search')}</div>
+								<Sidebar className="size-4 hidden group-hover:flex" />
 							</div>
-							<HotkeyHint name="search" className=" group-hover:visible invisible" />
 						</button>
+					</Tooltip>
+				</div>
+
+				<div class="-gap-0.5">
+					<div class="">
+						<Tooltip content={$i18n.t('New Chat')} placement="right">
+							<a
+								class=" cursor-pointer flex size-8 items-center justify-center transition group"
+								href="/"
+								draggable="false"
+								on:click={async (e) => {
+									e.stopImmediatePropagation();
+									e.preventDefault();
+
+									goto('/');
+									newChatHandler();
+								}}
+								aria-label={$i18n.t('New Chat')}
+							>
+								<div
+									class="self-center flex size-[calc(30px*var(--app-text-scale,1))] items-center justify-center rounded-lg transition group-hover:bg-gray-50 dark:group-hover:bg-gray-900"
+								>
+									<EditPencilIcon className="size-4" strokeWidth="1.5" />
+								</div>
+							</a>
+						</Tooltip>
 					</div>
 
-					<div id="pinned-menu-items-list">
-						{#each pinnedItems as itemId (itemId)}
-							{@const meta = getMenuItemMeta(itemId)}
-							{#if meta && isMenuItemVisible(itemId)}
+					<div>
+						<Tooltip content={$i18n.t('Search')} placement="right">
+							<button
+								class=" cursor-pointer flex size-8 items-center justify-center transition group"
+								on:click={(e) => {
+									e.stopImmediatePropagation();
+									e.preventDefault();
+
+									showSearch.set(true);
+								}}
+								draggable="false"
+								aria-label={$i18n.t('Search')}
+							>
 								<div
-									class="px-1 flex justify-center text-gray-700 dark:text-gray-300"
-									data-id={itemId}
+									class="self-center flex size-[calc(30px*var(--app-text-scale,1))] items-center justify-center rounded-lg transition group-hover:bg-gray-50 dark:group-hover:bg-gray-900"
 								>
+									<SearchIcon className="size-4" strokeWidth="1.5" />
+								</div>
+							</button>
+						</Tooltip>
+					</div>
+
+					{#each pinnedItems as itemId (itemId)}
+						{@const meta = getMenuItemMeta(itemId)}
+						{#if meta && isMenuItemVisible(itemId)}
+							<div class="">
+								<Tooltip content={$i18n.t(meta.label)} placement="right">
 									<a
-										id="sidebar-{itemId}-button"
-										class="grow flex items-center space-x-2 rounded-xl px-2 py-1.5 transition {itemId ===
-										activeMenuItemId
-											? ($settings?.highContrastMode ?? false)
-												? 'bg-black/[0.035] dark:bg-white/[0.06]'
-												: 'bg-black/[0.035] dark:bg-white/[0.045]'
-											: 'hover:bg-gray-50 dark:hover:bg-gray-900'}"
+										class=" cursor-pointer flex size-8 items-center justify-center transition group"
 										href={meta.href}
-										on:click={itemClickHandler}
+										on:click={async (e) => {
+											e.stopImmediatePropagation();
+											e.preventDefault();
+											goto(meta.href);
+											itemClickHandler();
+										}}
 										draggable="false"
 										aria-label={$i18n.t(meta.label)}
 									>
-										<div class="self-center flex size-4 shrink-0 items-center justify-center">
+										<div
+											class="self-center flex size-[calc(30px*var(--app-text-scale,1))] items-center justify-center rounded-lg transition {itemId ===
+											activeMenuItemId
+												? ($settings?.highContrastMode ?? false)
+													? 'bg-black/[0.035] dark:bg-white/[0.06]'
+													: 'bg-black/[0.035] dark:bg-white/[0.045]'
+												: 'group-hover:bg-gray-50 dark:group-hover:bg-gray-900'}"
+										>
 											{#if itemId === 'notes'}
 												<NotesIcon className="size-4" strokeWidth="1.5" />
 											{:else if itemId === 'workspace'}
@@ -1270,96 +1048,414 @@
 												<CodeIcon className="size-4" strokeWidth="1.5" />
 											{/if}
 										</div>
-
-										<div class="flex self-center translate-y-[0.5px]">
-											<div class=" self-center text-[0.8125rem] leading-5">{$i18n.t(meta.label)}</div>
-										</div>
 									</a>
-								</div>
-							{/if}
-						{/each}
+								</Tooltip>
+							</div>
+						{/if}
+					{/each}
+				</div>
+			</button>
+
+			<div>
+				<div>
+					<div class=" flex justify-center items-center">
+						{#if $user !== undefined && $user !== null}
+							<UserMenu role={$user?.role} profile={$config?.features?.enable_user_status ?? true}>
+								<button
+									type="button"
+									class=" cursor-pointer flex size-8.5 items-center justify-center transition group"
+									aria-label={$i18n.t('User menu')}
+								>
+									<div
+										class="self-center relative flex size-[calc(30px*var(--app-text-scale,1))] items-center justify-center rounded-lg transition group-hover:bg-gray-50 dark:group-hover:bg-gray-900"
+									>
+										<img
+											src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
+											class="size-5.5 object-cover rounded-full"
+											alt={$i18n.t('Open User Profile Menu')}
+											aria-label={$i18n.t('Open User Profile Menu')}
+										/>
+
+										{#if $config?.features?.enable_user_status}
+											<div class="absolute -bottom-0.5 -right-0.5">
+												<span class="relative flex size-2.5">
+													<span
+														class="relative inline-flex size-2.5 rounded-full {true
+															? 'bg-green-500'
+															: 'bg-gray-300 dark:bg-gray-700'} border-2 border-white dark:border-gray-900"
+													></span>
+												</span>
+											</div>
+										{/if}
+									</div>
+								</button>
+							</UserMenu>
+						{/if}
 					</div>
 				</div>
+			</div>
+		</div>
+	{/if}
 
-				{#if ($models ?? []).length > 0 && (($settings?.pinnedModels ?? []).length > 0 || $config?.default_pinned_models)}
-					<SidebarSection
-						id="sidebar-models"
-						bind:open={showPinnedModels}
-						className="mt-0.5"
-						name={$i18n.t('Models')}
-						dragAndDrop={false}
+	<!-- {$i18n.t('New Folder')} -->
+	<!-- {$i18n.t('Pinned')} -->
+
+	{#if visible}
+		<div
+			bind:this={navElement}
+			id="sidebar"
+			role="navigation"
+			aria-label={$i18n.t('Chat history')}
+			class="h-screen max-h-[100dvh] min-h-screen select-none {visible
+				? `${$mobile ? 'bg-gray-50 dark:bg-gray-950' : 'bg-gray-50/70 dark:bg-gray-950/70'} z-50`
+				: ' bg-transparent z-0 '} {$isApp
+				? `ml-[4.5rem] md:ml-0 `
+				: $mobile
+					? ''
+					: ' transition-all duration-300 '} shrink-0 text-gray-700 dark:text-gray-300 text-[0.8125rem] leading-5 fixed top-0 left-0 overflow-x-hidden
+        "
+			style={panelStyle}
+			transition:sidebarMountTransition={{ duration: 250, axis: 'x' }}
+			data-state={$showSidebar}
+		>
+			<div
+				class=" my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[var(--sidebar-width)] overflow-x-hidden scrollbar-hidden z-50 border-e border-gray-50 dark:border-gray-850/30 {visible
+					? ''
+					: 'invisible'}"
+			>
+				<div
+					class="sidebar px-1 pt-1.5 pb-1 flex justify-between space-x-1 text-gray-600 dark:text-gray-400 sticky top-0 z-10 -mb-2"
+				>
+					<a
+						class="flex items-center rounded-xl size-8.5 h-full justify-center hover:bg-gray-50 dark:hover:bg-gray-900 transition no-drag-region"
+						href="/"
+						draggable="false"
+						on:click={newChatHandler}
 					>
-						<PinnedModelList bind:selectedChatId {shiftKey} />
-					</SidebarSection>
-				{/if}
+						<!-- LICENSE covers this Open WebUI sidebar logo.
+					Do not alter, remove, obscure, or replace it except as LICENSE permits:
+					https://docs.openwebui.com/license. -->
+						<img
+							crossorigin="anonymous"
+							src="{WEBUI_BASE_URL}/static/favicon.png"
+							class="sidebar-new-chat-icon size-5 rounded-full"
+							alt=""
+						/>
+					</a>
 
-				{#if ($config?.features?.enable_notes ?? false) && ($user?.role === 'admin' || ($user?.permissions?.features?.notes ?? true)) && $pinnedNotes.length > 0}
-					<SidebarSection
-						id="sidebar-pinned-notes"
-						bind:open={showPinnedNotes}
-						className="mt-0.5"
-						name={$i18n.t('Notes')}
-						dragAndDrop={false}
-						onAdd={async () => {
-							const note = await createNoteHandler('New Note');
-							if (note) {
-								goto(`/notes/${note.id}`);
-							}
-						}}
-						onAddLabel={$i18n.t('New Note')}
+					<a href="/" class="flex flex-1 px-0.5" on:click={newChatHandler}>
+						<!-- LICENSE covers this Open WebUI sidebar name.
+					Do not alter, remove, obscure, or replace it except as LICENSE permits:
+					https://docs.openwebui.com/license. -->
+						<div
+							id="sidebar-webui-name"
+							class=" self-center font-normal text-gray-700 dark:text-gray-200"
+						>
+							{$WEBUI_NAME}
+						</div>
+					</a>
+					<Tooltip
+						content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
+						placement="bottom"
 					>
-						<PinnedNoteList bind:selectedChatId />
-					</SidebarSection>
-				{/if}
+						<button
+							class="flex size-[1.875rem] justify-center items-center rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900 transition {isWindows
+								? 'cursor-pointer'
+								: 'cursor-[w-resize]'}"
+							on:click={() => {
+								showSidebar.set(!$showSidebar);
+							}}
+							aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
+						>
+							<div class=" self-center">
+								<Sidebar className="size-4" />
+							</div>
+						</button>
+					</Tooltip>
 
-				{#if $config?.features?.enable_channels && ($user?.role === 'admin' || ($user?.permissions?.features?.channels ?? true))}
-					<SidebarSection
-						id="sidebar-channels"
-						bind:open={showChannels}
-						className="mt-0.5"
-						name={$i18n.t('Channels')}
-						dragAndDrop={false}
-						onAdd={$user?.role === 'admin' || ($user?.permissions?.features?.channels ?? true)
-							? async () => {
-									await tick();
+					<div
+						class="{scrollTop > 0
+							? 'visible'
+							: 'invisible'} sidebar-bg-gradient-to-b bg-linear-to-b from-gray-50 dark:from-gray-950 to-transparent from-50% pointer-events-none absolute inset-0 -z-10 -mb-6"
+					></div>
+				</div>
 
-									setTimeout(() => {
-										showCreateChannel = true;
-									}, 0);
+				<div
+					class="relative flex flex-col flex-1 overflow-y-auto scrollbar-hidden pt-2.5 pb-2.5"
+					on:scroll={(e) => {
+						if (e.target.scrollTop === 0) {
+							scrollTop = 0;
+						} else {
+							scrollTop = e.target.scrollTop;
+						}
+					}}
+				>
+					<div class="pb-1">
+						<div class="px-1 flex justify-center text-gray-700 dark:text-gray-300">
+							<a
+								id="sidebar-new-chat-button"
+								class="group grow flex items-center space-x-2 rounded-xl px-2 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-900 transition outline-none"
+								href="/"
+								draggable="false"
+								on:click={newChatHandler}
+								aria-label={$i18n.t('New Chat')}
+							>
+								<div class="self-center flex size-4 shrink-0 items-center justify-center">
+									<EditPencilIcon className=" size-4" strokeWidth="1.5" />
+								</div>
+
+								<div class="flex flex-1 self-center translate-y-[0.5px]">
+									<div class=" self-center text-[0.8125rem] leading-5">{$i18n.t('New Chat')}</div>
+								</div>
+
+								<HotkeyHint name="newChat" className=" group-hover:visible invisible" />
+							</a>
+						</div>
+
+						<div class="px-1 flex justify-center text-gray-700 dark:text-gray-300">
+							<button
+								id="sidebar-search-button"
+								class="group grow flex items-center space-x-2 rounded-xl px-2 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-900 transition outline-none"
+								on:click={() => {
+									showSearch.set(true);
+								}}
+								draggable="false"
+								aria-label={$i18n.t('Search')}
+							>
+								<div class="self-center flex size-4 shrink-0 items-center justify-center">
+									<SearchIcon strokeWidth="1.5" className="size-4" />
+								</div>
+
+								<div class="flex flex-1 self-center translate-y-[0.5px]">
+									<div class=" self-center text-[0.8125rem] leading-5">{$i18n.t('Search')}</div>
+								</div>
+								<HotkeyHint name="search" className=" group-hover:visible invisible" />
+							</button>
+						</div>
+
+						<div id="pinned-menu-items-list">
+							{#each pinnedItems as itemId (itemId)}
+								{@const meta = getMenuItemMeta(itemId)}
+								{#if meta && isMenuItemVisible(itemId)}
+									<div
+										class="px-1 flex justify-center text-gray-700 dark:text-gray-300"
+										data-id={itemId}
+									>
+										<a
+											id="sidebar-{itemId}-button"
+											class="grow flex items-center space-x-2 rounded-xl px-2 py-1.5 transition {itemId ===
+											activeMenuItemId
+												? ($settings?.highContrastMode ?? false)
+													? 'bg-black/[0.035] dark:bg-white/[0.06]'
+													: 'bg-black/[0.035] dark:bg-white/[0.045]'
+												: 'hover:bg-gray-50 dark:hover:bg-gray-900'}"
+											href={meta.href}
+											on:click={itemClickHandler}
+											draggable="false"
+											aria-label={$i18n.t(meta.label)}
+										>
+											<div class="self-center flex size-4 shrink-0 items-center justify-center">
+												{#if itemId === 'notes'}
+													<NotesIcon className="size-4" strokeWidth="1.5" />
+												{:else if itemId === 'workspace'}
+													<WorkspaceIcon className="size-4" strokeWidth="1.5" />
+												{:else if itemId === 'automations'}
+													<ClockIcon className="size-4" strokeWidth="1.5" />
+												{:else if itemId === 'calendar'}
+													<CalendarIcon className="size-4" strokeWidth="1.5" />
+												{:else if itemId === 'playground'}
+													<CodeIcon className="size-4" strokeWidth="1.5" />
+												{/if}
+											</div>
+
+											<div class="flex self-center translate-y-[0.5px]">
+												<div class=" self-center text-[0.8125rem] leading-5">
+													{$i18n.t(meta.label)}
+												</div>
+											</div>
+										</a>
+									</div>
+								{/if}
+							{/each}
+						</div>
+					</div>
+
+					{#if ($models ?? []).length > 0 && (($settings?.pinnedModels ?? []).length > 0 || $config?.default_pinned_models)}
+						<SidebarSection
+							id="sidebar-models"
+							bind:open={showPinnedModels}
+							className="mt-0.5"
+							name={$i18n.t('Models')}
+							dragAndDrop={false}
+						>
+							<PinnedModelList bind:selectedChatId {shiftKey} />
+						</SidebarSection>
+					{/if}
+
+					{#if ($config?.features?.enable_notes ?? false) && ($user?.role === 'admin' || ($user?.permissions?.features?.notes ?? true)) && $pinnedNotes.length > 0}
+						<SidebarSection
+							id="sidebar-pinned-notes"
+							bind:open={showPinnedNotes}
+							className="mt-0.5"
+							name={$i18n.t('Notes')}
+							dragAndDrop={false}
+							onAdd={async () => {
+								const note = await createNoteHandler('New Note');
+								if (note) {
+									goto(`/notes/${note.id}`);
 								}
-							: null}
-						onAddLabel={$i18n.t('Create Channel')}
-					>
-						{#each $channels as channel, channelIdx (`${channel?.id}`)}
-							<ChannelItem
-								{channel}
-								onUpdate={async () => {
-									await initChannels();
+							}}
+							onAddLabel={$i18n.t('New Note')}
+						>
+							<PinnedNoteList bind:selectedChatId />
+						</SidebarSection>
+					{/if}
+
+					{#if $config?.features?.enable_channels && ($user?.role === 'admin' || ($user?.permissions?.features?.channels ?? true))}
+						<SidebarSection
+							id="sidebar-channels"
+							bind:open={showChannels}
+							className="mt-0.5"
+							name={$i18n.t('Channels')}
+							dragAndDrop={false}
+							onAdd={$user?.role === 'admin' || ($user?.permissions?.features?.channels ?? true)
+								? async () => {
+										await tick();
+
+										setTimeout(() => {
+											showCreateChannel = true;
+										}, 0);
+									}
+								: null}
+							onAddLabel={$i18n.t('Create Channel')}
+						>
+							{#each $channels as channel, channelIdx (`${channel?.id}`)}
+								<ChannelItem
+									{channel}
+									onUpdate={async () => {
+										await initChannels();
+									}}
+								/>
+
+								{#if channelIdx < $channels.length - 1 && channel.type !== $channels[channelIdx + 1]?.type}<hr
+										class=" border-gray-100/40 dark:border-gray-800/10 my-1.5 w-full"
+									/>
+								{/if}
+							{/each}
+						</SidebarSection>
+					{/if}
+
+					{#if $config?.features?.enable_folders && ($user?.role === 'admin' || ($user?.permissions?.features?.folders ?? true))}
+						<SidebarSection
+							id="sidebar-folders"
+							bind:open={showFolders}
+							className="mt-0.5"
+							name={$i18n.t('Folders')}
+							onAdd={() => {
+								showCreateFolderModal = true;
+							}}
+							onAddLabel={$i18n.t('New Folder')}
+							on:drop={async (e) => {
+								const { type, id, item } = e.detail;
+
+								if (type === 'folder') {
+									if (folders[id].parent_id === null) {
+										return;
+									}
+
+									const res = await updateFolderParentIdById(localStorage.token, id, null).catch(
+										(error) => {
+											toast.error(`${error}`);
+											return null;
+										}
+									);
+
+									if (res) {
+										await initFolders();
+									}
+								}
+							}}
+						>
+							<Folders
+								bind:folderRegistry
+								{folders}
+								{shiftKey}
+								onFolderUnreadCounts={applyFolderUnreadCounts}
+								onDelete={(folderId) => {
+									selectedFolder.set(null);
+									initChatList();
+								}}
+								on:update={() => {
+									initChatList();
+								}}
+								on:import={(e) => {
+									const { folderId, items } = e.detail;
+									importChatHandler(items, false, folderId);
+								}}
+								on:change={async () => {
+									initChatList();
 								}}
 							/>
+						</SidebarSection>
+					{/if}
 
-							{#if channelIdx < $channels.length - 1 && channel.type !== $channels[channelIdx + 1]?.type}<hr
-									class=" border-gray-100/40 dark:border-gray-800/10 my-1.5 w-full"
-								/>
-							{/if}
-						{/each}
-					</SidebarSection>
-				{/if}
-
-				{#if $config?.features?.enable_folders && ($user?.role === 'admin' || ($user?.permissions?.features?.folders ?? true))}
 					<SidebarSection
-						id="sidebar-folders"
-						bind:open={showFolders}
+						id="sidebar-chats"
 						className="mt-0.5"
-						name={$i18n.t('Folders')}
-						onAdd={() => {
-							showCreateFolderModal = true;
+						name={$i18n.t('Chats')}
+						on:change={async (e) => {
+							selectedFolder.set(null);
+						}}
+						on:import={(e) => {
+							importChatHandler(e.detail);
 						}}
-						onAddLabel={$i18n.t('New Folder')}
 						on:drop={async (e) => {
 							const { type, id, item } = e.detail;
 
-							if (type === 'folder') {
+							if (type === 'chat') {
+								let chat = await getChatById(localStorage.token, id).catch((error) => {
+									return null;
+								});
+								if (!chat && item) {
+									if (!canImportChats) {
+										toast.error($i18n.t('Access prohibited'));
+										return;
+									}
+
+									chat = await importChats(localStorage.token, [
+										{
+											chat: item.chat,
+											meta: item?.meta ?? {},
+											pinned: false,
+											folder_id: null,
+											created_at: item?.created_at ?? null,
+											updated_at: item?.updated_at ?? null
+										}
+									]);
+								}
+
+								if (chat) {
+									console.log(chat);
+									if (chat.folder_id) {
+										const res = await updateChatFolderIdById(
+											localStorage.token,
+											chat.id,
+											null
+										).catch((error) => {
+											toast.error(`${error}`);
+											return null;
+										});
+
+										folderRegistry[chat.folder_id]?.setFolderItems();
+									}
+
+									if (chat.pinned) {
+										const res = await toggleChatPinnedStatusById(localStorage.token, chat.id);
+									}
+
+									initChatList();
+								}
+							} else if (type === 'folder') {
 								if (folders[id].parent_id === null) {
 									return;
 								}
@@ -1377,234 +1473,142 @@
 							}
 						}}
 					>
-						<Folders
-							bind:folderRegistry
-							{folders}
-							{shiftKey}
-							onFolderUnreadCounts={applyFolderUnreadCounts}
-							onDelete={(folderId) => {
-								selectedFolder.set(null);
-								initChatList();
-							}}
-							on:update={() => {
-								initChatList();
-							}}
-							on:import={(e) => {
-								const { folderId, items } = e.detail;
-								importChatHandler(items, false, folderId);
-							}}
-							on:change={async () => {
-								initChatList();
-							}}
-						/>
-					</SidebarSection>
-				{/if}
-
-				<SidebarSection
-					id="sidebar-chats"
-					className="mt-0.5"
-					name={$i18n.t('Chats')}
-					on:change={async (e) => {
-						selectedFolder.set(null);
-					}}
-					on:import={(e) => {
-						importChatHandler(e.detail);
-					}}
-					on:drop={async (e) => {
-						const { type, id, item } = e.detail;
-
-						if (type === 'chat') {
-							let chat = await getChatById(localStorage.token, id).catch((error) => {
-								return null;
-							});
-							if (!chat && item) {
-								if (!canImportChats) {
-									toast.error($i18n.t('Access prohibited'));
-									return;
-								}
-
-								chat = await importChats(localStorage.token, [
-									{
-										chat: item.chat,
-										meta: item?.meta ?? {},
-										pinned: false,
-										folder_id: null,
-										created_at: item?.created_at ?? null,
-										updated_at: item?.updated_at ?? null
-									}
-								]);
-							}
-
-							if (chat) {
-								console.log(chat);
-								if (chat.folder_id) {
-									const res = await updateChatFolderIdById(localStorage.token, chat.id, null).catch(
-										(error) => {
-											toast.error(`${error}`);
-											return null;
-										}
-									);
-
-									folderRegistry[chat.folder_id]?.setFolderItems();
-								}
-
-								if (chat.pinned) {
-									const res = await toggleChatPinnedStatusById(localStorage.token, chat.id);
-								}
-
-								initChatList();
-							}
-						} else if (type === 'folder') {
-							if (folders[id].parent_id === null) {
-								return;
-							}
-
-							const res = await updateFolderParentIdById(localStorage.token, id, null).catch(
-								(error) => {
-									toast.error(`${error}`);
-									return null;
-								}
-							);
-
-							if (res) {
-								await initFolders();
-							}
-						}
-					}}
-				>
-					<svelte:fragment slot="action">
-						<Dropdown bind:show={showChatsMenu} align="end">
-							<Tooltip content={$i18n.t('More')}>
-								<button
-									type="button"
-									class="flex items-center justify-center w-7 h-7 rounded-lg text-gray-300 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-400 transition-colors duration-100"
-									aria-label={$i18n.t('More')}
-									on:pointerup|stopPropagation
-								>
-									<MoreHorizontalIcon className="size-3.5" strokeWidth="2" />
-								</button>
-							</Tooltip>
-
-							<div slot="content">
-								<DropdownMenu className="min-w-[10.625rem]">
+						<svelte:fragment slot="action">
+							<Dropdown bind:show={showChatsMenu} align="end">
+								<Tooltip content={$i18n.t('More')}>
 									<button
-										class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
-										on:click={markAllChatsReadHandler}
+										type="button"
+										class="flex items-center justify-center w-7 h-7 rounded-lg text-gray-300 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-400 transition-colors duration-100"
+										aria-label={$i18n.t('More')}
+										on:pointerup|stopPropagation
 									>
-										<CheckIcon className="size-3.5" />
-										<div class="flex items-center">{$i18n.t('Mark all as read')}</div>
+										<MoreHorizontalIcon className="size-3.5" strokeWidth="2" />
 									</button>
-								</DropdownMenu>
-							</div>
-						</Dropdown>
-					</svelte:fragment>
+								</Tooltip>
 
-					{#if $pinnedChats.length > 0}
-						<div class="mb-1">
-							<div class="flex flex-col space-y-1 rounded-xl">
-								<Folder
-									id="sidebar-pinned-chats"
-									buttonClassName=" text-gray-500"
-									on:import={(e) => {
-										importChatHandler(e.detail, true);
-									}}
-									on:drop={async (e) => {
-										const { type, id, item } = e.detail;
-
-										if (type === 'chat') {
-											let chat = await getChatById(localStorage.token, id).catch((error) => {
-												return null;
-											});
-											if (!chat && item) {
-												if (!canImportChats) {
-													toast.error($i18n.t('Access prohibited'));
-													return;
-												}
-
-												chat = await importChats(localStorage.token, [
-													{
-														chat: item.chat,
-														meta: item?.meta ?? {},
-														pinned: false,
-														folder_id: null,
-														created_at: item?.created_at ?? null,
-														updated_at: item?.updated_at ?? null
-													}
-												]);
-											}
-
-											if (chat) {
-												console.log(chat);
-												if (chat.folder_id) {
-													const res = await updateChatFolderIdById(
-														localStorage.token,
-														chat.id,
-														null
-													).catch((error) => {
-														toast.error(`${error}`);
-														return null;
-													});
-												}
-
-												if (!chat.pinned) {
-													const res = await toggleChatPinnedStatusById(localStorage.token, chat.id);
-												}
-
-												initChatList();
-											}
-										}
-									}}
-									name={$i18n.t('Pinned')}
-								>
-									<div
-										class="ml-3 pl-1 mt-[0.0625rem] flex flex-col overflow-y-auto scrollbar-hidden border-s border-gray-100 dark:border-gray-900 text-gray-700 dark:text-gray-300"
-									>
-										{#each $pinnedChats as chat, idx (`pinned-chat-${chat?.id ?? idx}`)}
-											<ChatItem
-												className=""
-												id={chat.id}
-												title={chat.title}
-												createdAt={chat.created_at}
-												updatedAt={chat.updated_at}
-												lastReadAt={chat.last_read_at}
-												active={chat.active ?? false}
-												{shiftKey}
-												selected={selectedChatId === chat.id}
-												on:select={() => {
-													selectedChatId = chat.id;
-												}}
-												on:unselect={() => {
-													selectedChatId = null;
-												}}
-												on:change={async () => {
-													initChatList();
-												}}
-												onReadStateChange={applyChatReadState}
-												on:tag={(e) => {
-													const { type, name } = e.detail;
-													tagEventHandler(type, name, chat.id);
-												}}
-											/>
-										{/each}
-									</div>
-								</Folder>
-							</div>
-						</div>
-					{/if}
-
-					<div class=" flex-1 flex flex-col overflow-y-auto scrollbar-hidden">
-						<div class="pt-1.5">
-							{#if $chats}
-								{#each $chats as chat, idx (`chat-${chat?.id ?? idx}`)}
-									{#if idx === 0 || (idx > 0 && chat.time_range !== $chats[idx - 1].time_range)}
-										<div
-											class="w-full pl-2.5 text-xs text-gray-500 dark:text-gray-500 font-normal {idx ===
-											0
-												? ''
-												: 'pt-4'} pb-1"
+								<div slot="content">
+									<DropdownMenu className="min-w-[10.625rem]">
+										<button
+											class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
+											on:click={markAllChatsReadHandler}
 										>
-											{$i18n.t(chat.time_range)}
-											<!-- localisation keys for time_range to be recognized from the i18next parser (so they don't get automatically removed):
+											<CheckIcon className="size-3.5" />
+											<div class="flex items-center">{$i18n.t('Mark all as read')}</div>
+										</button>
+									</DropdownMenu>
+								</div>
+							</Dropdown>
+						</svelte:fragment>
+
+						{#if $pinnedChats.length > 0}
+							<div class="mb-1">
+								<div class="flex flex-col space-y-1 rounded-xl">
+									<Folder
+										id="sidebar-pinned-chats"
+										buttonClassName=" text-gray-500"
+										on:import={(e) => {
+											importChatHandler(e.detail, true);
+										}}
+										on:drop={async (e) => {
+											const { type, id, item } = e.detail;
+
+											if (type === 'chat') {
+												let chat = await getChatById(localStorage.token, id).catch((error) => {
+													return null;
+												});
+												if (!chat && item) {
+													if (!canImportChats) {
+														toast.error($i18n.t('Access prohibited'));
+														return;
+													}
+
+													chat = await importChats(localStorage.token, [
+														{
+															chat: item.chat,
+															meta: item?.meta ?? {},
+															pinned: false,
+															folder_id: null,
+															created_at: item?.created_at ?? null,
+															updated_at: item?.updated_at ?? null
+														}
+													]);
+												}
+
+												if (chat) {
+													console.log(chat);
+													if (chat.folder_id) {
+														const res = await updateChatFolderIdById(
+															localStorage.token,
+															chat.id,
+															null
+														).catch((error) => {
+															toast.error(`${error}`);
+															return null;
+														});
+													}
+
+													if (!chat.pinned) {
+														const res = await toggleChatPinnedStatusById(
+															localStorage.token,
+															chat.id
+														);
+													}
+
+													initChatList();
+												}
+											}
+										}}
+										name={$i18n.t('Pinned')}
+									>
+										<div
+											class="ml-3 pl-1 mt-[0.0625rem] flex flex-col overflow-y-auto scrollbar-hidden border-s border-gray-100 dark:border-gray-900 text-gray-700 dark:text-gray-300"
+										>
+											{#each $pinnedChats as chat, idx (`pinned-chat-${chat?.id ?? idx}`)}
+												<ChatItem
+													className=""
+													id={chat.id}
+													title={chat.title}
+													createdAt={chat.created_at}
+													updatedAt={chat.updated_at}
+													lastReadAt={chat.last_read_at}
+													active={chat.active ?? false}
+													{shiftKey}
+													selected={selectedChatId === chat.id}
+													on:select={() => {
+														selectedChatId = chat.id;
+													}}
+													on:unselect={() => {
+														selectedChatId = null;
+													}}
+													on:change={async () => {
+														initChatList();
+													}}
+													onReadStateChange={applyChatReadState}
+													on:tag={(e) => {
+														const { type, name } = e.detail;
+														tagEventHandler(type, name, chat.id);
+													}}
+												/>
+											{/each}
+										</div>
+									</Folder>
+								</div>
+							</div>
+						{/if}
+
+						<div class=" flex-1 flex flex-col overflow-y-auto scrollbar-hidden">
+							<div class="pt-1.5">
+								{#if $chats}
+									{#each $chats as chat, idx (`chat-${chat?.id ?? idx}`)}
+										{#if idx === 0 || (idx > 0 && chat.time_range !== $chats[idx - 1].time_range)}
+											<div
+												class="w-full pl-2.5 text-xs text-gray-500 dark:text-gray-500 font-normal {idx ===
+												0
+													? ''
+													: 'pt-4'} pb-1"
+											>
+												{$i18n.t(chat.time_range)}
+												<!-- localisation keys for time_range to be recognized from the i18next parser (so they don't get automatically removed):
 							{$i18n.t('Today')}
 							{$i18n.t('Yesterday')}
 							{$i18n.t('Previous 7 days')}
@@ -1622,120 +1626,130 @@
 							{$i18n.t('November')}
 							{$i18n.t('December')}
 							-->
-										</div>
-									{/if}
+											</div>
+										{/if}
 
-									<ChatItem
-										className=""
-										id={chat.id}
-										title={chat.title}
-										createdAt={chat.created_at}
-										updatedAt={chat.updated_at}
-										lastReadAt={chat.last_read_at}
-										active={chat.active ?? false}
-										{shiftKey}
-										selected={selectedChatId === chat.id}
-										on:select={() => {
-											selectedChatId = chat.id;
-										}}
-										on:unselect={() => {
-											selectedChatId = null;
-										}}
-										on:change={async () => {
-											initChatList();
-										}}
-										onReadStateChange={applyChatReadState}
-										on:tag={(e) => {
-											const { type, name } = e.detail;
-											tagEventHandler(type, name, chat.id);
-										}}
-									/>
-								{/each}
+										<ChatItem
+											className=""
+											id={chat.id}
+											title={chat.title}
+											createdAt={chat.created_at}
+											updatedAt={chat.updated_at}
+											lastReadAt={chat.last_read_at}
+											active={chat.active ?? false}
+											{shiftKey}
+											selected={selectedChatId === chat.id}
+											on:select={() => {
+												selectedChatId = chat.id;
+											}}
+											on:unselect={() => {
+												selectedChatId = null;
+											}}
+											on:change={async () => {
+												initChatList();
+											}}
+											onReadStateChange={applyChatReadState}
+											on:tag={(e) => {
+												const { type, name } = e.detail;
+												tagEventHandler(type, name, chat.id);
+											}}
+										/>
+									{/each}
 
-								{#if chatListReady && !allChatsLoaded}
-									<Loader
-										on:visible={(e) => {
-											if (!chatListLoading) {
-												loadMoreChats();
-											}
-										}}
-									>
-										<div
-											class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2"
+									{#if chatListReady && !allChatsLoaded}
+										<Loader
+											on:visible={(e) => {
+												if (!chatListLoading) {
+													loadMoreChats();
+												}
+											}}
 										>
-											<Spinner className=" size-4" />
-											<div class=" ">{$i18n.t('Loading...')}</div>
-										</div>
-									</Loader>
-								{/if}
-							{:else}
-								<div
-									class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2"
-								>
-									<Spinner className=" size-4" />
-									<div class=" ">{$i18n.t('Loading...')}</div>
-								</div>
-							{/if}
-						</div>
-					</div>
-				</SidebarSection>
-			</div>
-
-			<div class="px-1 pt-1 pb-1.5 sticky bottom-0 z-10 -mt-2 sidebar">
-				<div
-					class=" sidebar-bg-gradient-to-t bg-linear-to-t from-gray-50 dark:from-gray-950 to-transparent from-50% pointer-events-none absolute inset-0 -z-10 -mt-6"
-				></div>
-				<div class="flex flex-col">
-					{#if $user !== undefined && $user !== null}
-						<UserMenu
-							role={$user?.role}
-							profile={$config?.features?.enable_user_status ?? true}
-							className="w-[calc(var(--sidebar-width)-1rem)]"
-						>
-							<button
-								type="button"
-								class=" flex items-center rounded-xl py-1.5 px-1.5 w-full hover:bg-gray-50 dark:hover:bg-gray-900 transition"
-								aria-label={$i18n.t('User menu')}
-							>
-								<div class=" self-center mr-3 relative flex-shrink-0">
-									<img
-										src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
-										class="size-5.5 object-cover rounded-full"
-										alt={$i18n.t('Open User Profile Menu')}
-										aria-label={$i18n.t('Open User Profile Menu')}
-									/>
-
-									{#if $config?.features?.enable_user_status}
-										<div class="absolute -bottom-0.5 -right-0.5">
-											<span class="relative flex size-2.5">
-												<span
-													class="relative inline-flex size-2.5 rounded-full {true
-														? 'bg-green-500'
-														: 'bg-gray-300 dark:bg-gray-700'} border-2 border-white dark:border-gray-900"
-												></span>
-											</span>
-										</div>
+											<div
+												class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2"
+											>
+												<Spinner className=" size-4" />
+												<div class=" ">{$i18n.t('Loading...')}</div>
+											</div>
+										</Loader>
 									{/if}
-								</div>
-								<div class=" self-center font-normal truncate">{$user?.name}</div>
-							</button>
-						</UserMenu>
-					{/if}
+								{:else}
+									<div
+										class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2"
+									>
+										<Spinner className=" size-4" />
+										<div class=" ">{$i18n.t('Loading...')}</div>
+									</div>
+								{/if}
+							</div>
+						</div>
+					</SidebarSection>
+				</div>
+
+				<div class="px-1 pt-1 pb-1.5 sticky bottom-0 z-10 -mt-2 sidebar">
+					<div
+						class=" sidebar-bg-gradient-to-t bg-linear-to-t from-gray-50 dark:from-gray-950 to-transparent from-50% pointer-events-none absolute inset-0 -z-10 -mt-6"
+					></div>
+					<div class="flex flex-col">
+						{#if $user !== undefined && $user !== null}
+							<UserMenu
+								role={$user?.role}
+								profile={$config?.features?.enable_user_status ?? true}
+								className="w-[calc(var(--sidebar-width)-1rem)]"
+							>
+								<button
+									type="button"
+									class=" flex items-center rounded-xl py-1.5 px-1.5 w-full hover:bg-gray-50 dark:hover:bg-gray-900 transition"
+									aria-label={$i18n.t('User menu')}
+								>
+									<div class=" self-center mr-3 relative flex-shrink-0">
+										<img
+											src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
+											class="size-5.5 object-cover rounded-full"
+											alt={$i18n.t('Open User Profile Menu')}
+											aria-label={$i18n.t('Open User Profile Menu')}
+										/>
+
+										{#if $config?.features?.enable_user_status}
+											<div class="absolute -bottom-0.5 -right-0.5">
+												<span class="relative flex size-2.5">
+													<span
+														class="relative inline-flex size-2.5 rounded-full {true
+															? 'bg-green-500'
+															: 'bg-gray-300 dark:bg-gray-700'} border-2 border-white dark:border-gray-900"
+													></span>
+												</span>
+											</div>
+										{/if}
+									</div>
+									<div class=" self-center font-normal truncate">{$user?.name}</div>
+								</button>
+							</UserMenu>
+						{/if}
+					</div>
 				</div>
 			</div>
 		</div>
-	</div>
 
-	{#if !$mobile}
-		<div
-			class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850/30 hover:border-gray-200 dark:hover:border-gray-800 transition z-20"
-			id="sidebar-resizer"
-			on:mousedown={resizeStartHandler}
-			role="separator"
-		>
+		{#if !$mobile}
 			<div
-				class=" absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
-			/>
-		</div>
+				class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850/30 hover:border-gray-200 dark:hover:border-gray-800 transition z-20"
+				id="sidebar-resizer"
+				on:mousedown={resizeStartHandler}
+				role="separator"
+			>
+				<div
+					class=" absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
+				/>
+			</div>
+		{/if}
 	{/if}
-{/if}
+</MobileSwipePanel>
+
+<style>
+	@media (max-width: 767px) {
+		#sidebar {
+			will-change: transform;
+			touch-action: pan-y;
+		}
+	}
+</style>
diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte
index 216f792c29..a120084141 100644
--- a/src/lib/components/layout/Sidebar/ChatItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChatItem.svelte
@@ -58,6 +58,8 @@
 	import { createMessagesList } from '$lib/utils';
 	import { getOutputText } from '$lib/components/chat/Messages/structuredOutput';
 
+	const MOBILE_SIDEBAR_SETTLE_MS = 210;
+
 	const i18n = getContext('i18n');
 
 	const dispatch = createEventDispatcher();
@@ -111,6 +113,12 @@
 		}
 	};
 
+	const focusChatInputSoon = () => {
+		setTimeout(() => {
+			document.getElementById('chat-input')?.focus({ preventScroll: true });
+		}, MOBILE_SIDEBAR_SETTLE_MS);
+	};
+
 	$: if (openPreview && closeActiveHoverPreview !== closeHoverPreview) {
 		closeActiveHoverPreview?.();
 		closeActiveHoverPreview = closeHoverPreview;
@@ -569,6 +577,7 @@
 
 					if ($mobile) {
 						showSidebar.set(false);
+						focusChatInputSoon();
 					}
 
 					// Optimistically mark as read in UI when clicked