From 59d6f5e43c3d0248339682fefc684ebb2eeffd08 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 16 Oct 2026 14:18:22 +0400
Subject: [PATCH] refac

---
 .../layout/Sidebar/ChannelModal.svelte        |   7 +-
 .../workspace/common/Visibility.svelte        | 106 ++++++++++--------
 2 files changed, 61 insertions(+), 52 deletions(-)

diff --git a/src/lib/components/layout/Sidebar/ChannelModal.svelte b/src/lib/components/layout/Sidebar/ChannelModal.svelte
index feda1f1180..306cd4dfa9 100644
--- a/src/lib/components/layout/Sidebar/ChannelModal.svelte
+++ b/src/lib/components/layout/Sidebar/ChannelModal.svelte
@@ -241,12 +241,7 @@
 								<Visibility
 									state={isPrivate ? 'private' : 'public'}
 									onChange={(value: string) => {
-										if (value === 'private') {
-											isPrivate = true;
-										} else {
-											isPrivate = false;
-										}
-										console.log(value, isPrivate);
+										isPrivate = value === 'private';
 									}}
 								/>
 							{/if}
diff --git a/src/lib/components/workspace/common/Visibility.svelte b/src/lib/components/workspace/common/Visibility.svelte
index f2efaf5ee6..a4e14ff92f 100644
--- a/src/lib/components/workspace/common/Visibility.svelte
+++ b/src/lib/components/workspace/common/Visibility.svelte
@@ -1,55 +1,69 @@
 <script lang="ts">
-	import { getContext, onMount } from 'svelte';
+	import { getContext } from 'svelte';
+	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import Hashtag from '$lib/components/icons/Hashtag.svelte';
-	import Lock from '$lib/components/icons/Lock.svelte';
+	import LockClosed from '$lib/components/icons/LockClosed.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import Check from '$lib/components/icons/Check.svelte';
 
-	const i18n = getContext('i18n');
+	const i18n = getContext<typeof import('$lib/i18n').default>('i18n');
 
-	export let onChange: Function = () => {};
+	export let onChange: (value: string) => void = () => {};
 	export let state = 'private';
+
+	$: options = [
+		{ value: 'private', label: $i18n.t('Private') },
+		{ value: 'public', label: $i18n.t('Public') }
+	];
 </script>
 
-<div class=" rounded-lg flex flex-col gap-2">
-	<div class="">
-		<div class=" text-xs font-normal mb-2.5 text-gray-500">{$i18n.t('Visibility')}</div>
-
-		<div class="flex gap-2.5 items-center mb-1">
-			<div>
-				<div class=" p-2 bg-black/5 dark:bg-white/5 rounded-full">
-					{#if state === 'private'}
-						<Lock className="w-5 h-5" strokeWidth="1.8" />
-					{:else}
-						<Hashtag className="w-5 h-5" strokeWidth="1.8" />
-					{/if}
-				</div>
-			</div>
-
-			<div>
-				<select
-					id="models"
-					class="outline-hidden bg-transparent text-sm font-normal block w-fit pr-10 max-w-full placeholder-gray-400"
-					value={state === 'private' ? 'private' : 'public'}
-					on:change={(e) => {
-						if (e.target.value === 'public') {
-							state = 'public';
-						} else {
-							state = 'private';
-						}
-						onChange(state);
-					}}
-				>
-					<option class=" text-gray-700" value="public" selected>{$i18n.t('Public')}</option>
-					<option class=" text-gray-700" value="private" selected>{$i18n.t('Private')}</option>
-				</select>
-
-				<div class=" text-xs text-gray-400 font-normal">
-					{#if state === 'private'}
-						{$i18n.t('Only invited users can access')}
-					{:else}
-						{$i18n.t('Visible to all users')}
-					{/if}
-				</div>
-			</div>
+<div class="-mx-1 rounded-xl bg-gray-50/60 px-3 py-2 dark:bg-white/[0.03]">
+	<Dropdown closeOnSelect>
+		<button
+			type="button"
+			aria-label={$i18n.t('Visibility')}
+			class="flex h-6 items-center gap-2 rounded-md text-[0.8125rem] font-medium text-gray-800 transition hover:text-gray-950 dark:text-gray-200 dark:hover:text-white"
+		>
+			{#if state === 'private'}
+				<LockClosed className="size-3.5 text-gray-500 dark:text-gray-400" />
+			{:else}
+				<Hashtag className="size-3.5 text-gray-500 dark:text-gray-400" />
+			{/if}
+			<span>{state === 'private' ? $i18n.t('Private') : $i18n.t('Public')}</span>
+			<ChevronDown className="size-3 text-gray-400 dark:text-gray-500" strokeWidth="2" />
+		</button>
+		<div slot="content">
+			<DropdownMenu className="min-w-40">
+				{#each options as option}
+					<button
+						type="button"
+						role="menuitemradio"
+						aria-checked={state === option.value}
+						on:click={() => {
+							if (state !== option.value) {
+								state = option.value;
+								onChange(state);
+							}
+						}}
+					>
+						{#if option.value === 'private'}
+							<LockClosed className="size-3.5" />
+						{:else}
+							<Hashtag className="size-3.5" />
+						{/if}
+						<span class="flex-1 text-left">{option.label}</span>
+						{#if state === option.value}<Check className="size-3.5 text-blue-500" />{/if}
+					</button>
+				{/each}
+			</DropdownMenu>
 		</div>
-	</div>
+	</Dropdown>
+	<p class="mt-0.5 text-xs leading-5 text-gray-500 dark:text-gray-400">
+		{#if state === 'private'}
+			{$i18n.t('Only invited users can access')}
+		{:else}
+			{$i18n.t('Visible to all users')}
+		{/if}
+	</p>
 </div>