UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-04-26 17:20:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refac: workspace styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-11-06 21:45:48 -08:00
parent d961e8943e
commit 24b7716241
11 changed files with 154 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/icons/Plus.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
export let className = 'w-4 h-4'; export let className = 'w-4 h-4';
export let strokeWidth = '1.5'; export let strokeWidth = '2';
</script> </script>
<svg <svg

22
src/lib/components/layout/Sidebar.svelte
View File

@ -410,11 +410,11 @@
data-state={$showSidebar} data-state={$showSidebar}
> >
<div <div
class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] overflow-x-hidden z-50 {$showSidebar class="py-1.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] overflow-x-hidden z-50 {$showSidebar
? '' ? ''
: 'invisible'}" : 'invisible'}"
> >
<div class="px-2.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400"> <div class="px-1.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400">
<a <a
id="sidebar-new-chat-button" id="sidebar-new-chat-button"
class="flex flex-1 rounded-lg px-2 h-full hover:bg-gray-100 dark:hover:bg-gray-900 transition" class="flex flex-1 rounded-lg px-2 h-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
@ -446,7 +446,7 @@
</a> </a>
<button <button
class=" cursor-pointer px-2 py-2 flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-900 transition" class=" cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-900 transition"
on:click={() => { on:click={() => {
showSidebar.set(!$showSidebar); showSidebar.set(!$showSidebar);
}} }}
@ -471,7 +471,7 @@
</div> </div>
{#if $user?.role === 'admin'} {#if $user?.role === 'admin'}
<div class="px-2.5 flex justify-center text-gray-800 dark:text-gray-200"> <div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200">
<a <a
class="flex-grow flex space-x-3 rounded-lg px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition" class="flex-grow flex space-x-3 rounded-lg px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
href="/workspace" href="/workspace"
@ -514,7 +514,13 @@
<div class="absolute z-40 w-full h-full flex justify-center"></div> <div class="absolute z-40 w-full h-full flex justify-center"></div>
{/if} {/if}
<div class="absolute z-40 right-4 top-1"> <SearchInput
bind:value={search}
on:input={searchDebounceHandler}
placeholder={$i18n.t('Search')}
/>
<div class="absolute z-40 right-3.5 top-1">
<Tooltip content={$i18n.t('New folder')}> <Tooltip content={$i18n.t('New folder')}>
<button <button
class="p-1 rounded-lg bg-gray-50 hover:bg-gray-100 dark:bg-gray-950 dark:hover:bg-gray-900 transition" class="p-1 rounded-lg bg-gray-50 hover:bg-gray-100 dark:bg-gray-950 dark:hover:bg-gray-900 transition"
@ -526,12 +532,6 @@
</button> </button>
</Tooltip> </Tooltip>
</div> </div>
<SearchInput
bind:value={search}
on:input={searchDebounceHandler}
placeholder={$i18n.t('Search')}
/>
</div> </div>
<div <div

2
src/lib/components/layout/Sidebar/SearchInput.svelte
View File

@ -73,7 +73,7 @@
}); });
</script> </script>
<div class="px-2 mb-1 flex justify-center space-x-2 relative z-10" id="search-container"> <div class="px-1 mb-1 flex justify-center space-x-2 relative z-10" id="search-container">
<div class="flex w-full rounded-xl" id="chat-search"> <div class="flex w-full rounded-xl" id="chat-search">
<div class="self-center pl-3 py-2 rounded-l-xl bg-transparent"> <div class="self-center pl-3 py-2 rounded-l-xl bg-transparent">
<svg <svg

72
src/lib/components/workspace/Functions.svelte
View File

@ -30,6 +30,8 @@
import Heart from '../icons/Heart.svelte'; import Heart from '../icons/Heart.svelte';
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import GarbageBin from '../icons/GarbageBin.svelte'; import GarbageBin from '../icons/GarbageBin.svelte';
import Search from '../icons/Search.svelte';
import Plus from '../icons/Plus.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -182,56 +184,34 @@
</title> </title>
</svelte:head> </svelte:head>
<div class=" flex w-full space-x-2 mb-2.5"> <div class="flex flex-col gap-0.5 mt-1 mb-2">
<div class="flex flex-1">
<div class=" self-center ml-1 mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd"
/>
</svg>
</div>
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
bind:value={query}
placeholder={$i18n.t('Search Functions')}
/>
</div>
<div>
<a
class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
href="/workspace/functions/create"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
/>
</svg>
</a>
</div>
</div>
<div class="mb-3.5">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="flex md:self-center text-base font-medium px-0.5"> <div class="flex md:self-center text-xl items-center font-medium px-0.5">
{$i18n.t('Functions')} {$i18n.t('Functions')}
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" /> <div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
<span class="text-base font-medium text-gray-500 dark:text-gray-300" <span class="text-base font-lg text-gray-500 dark:text-gray-300">{filteredItems.length}</span>
>{filteredItems.length}</span </div>
</div>
<div class=" flex w-full space-x-2">
<div class="flex flex-1">
<div class=" self-center ml-1 mr-3">
<Search className="size-3.5" />
</div>
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
bind:value={query}
placeholder={$i18n.t('Search Functions')}
/>
</div>
<div>
<a
class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
href="/workspace/functions/create"
> >
<Plus className="size-3.5" />
</a>
</div> </div>
</div> </div>
</div> </div>

78
src/lib/components/workspace/Knowledge.svelte
View File

@ -22,6 +22,8 @@
import DeleteConfirmDialog from '../common/ConfirmDialog.svelte'; import DeleteConfirmDialog from '../common/ConfirmDialog.svelte';
import ItemMenu from './Knowledge/ItemMenu.svelte'; import ItemMenu from './Knowledge/ItemMenu.svelte';
import Badge from '../common/Badge.svelte'; import Badge from '../common/Badge.svelte';
import Search from '../icons/Search.svelte';
import Plus from '../icons/Plus.svelte';
let query = ''; let query = '';
let selectedItem = null; let selectedItem = null;
@ -73,61 +75,41 @@
}} }}
/> />
<div class=" flex w-full space-x-2 mb-2.5"> <div class="flex flex-col gap-0.5 mt-1 mb-2">
<div class="flex flex-1">
<div class=" self-center ml-1 mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd"
/>
</svg>
</div>
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
bind:value={query}
placeholder={$i18n.t('Search Knowledge')}
/>
</div>
<div>
<button
class=" px-2 py-2 rounded-xl border border-gray-50 dark:border-gray-800 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
aria-label={$i18n.t('Create Knowledge')}
on:click={() => {
goto('/workspace/knowledge/create');
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
/>
</svg>
</button>
</div>
</div>
<div class="mb-3.5">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="flex md:self-center text-base font-medium px-0.5"> <div class="flex md:self-center text-xl font-medium px-0.5 items-center">
{$i18n.t('Knowledge')} {$i18n.t('Knowledge')}
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" /> <div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
<span class="text-base font-medium text-gray-500 dark:text-gray-300" <span class="text-lg font-medium text-gray-500 dark:text-gray-300"
>{filteredItems.length}</span >{filteredItems.length}</span
> >
</div> </div>
</div> </div>
<div class=" flex w-full space-x-2">
<div class="flex flex-1">
<div class=" self-center ml-1 mr-3">
<Search className="size-3.5" />
</div>
<input
class=" w-full text-sm py-1 rounded-r-xl outline-none bg-transparent"
bind:value={query}
placeholder={$i18n.t('Search Knowledge')}
/>
</div>
<div>
<button
class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
aria-label={$i18n.t('Create Knowledge')}
on:click={() => {
goto('/workspace/knowledge/create');
}}
>
<Plus className="size-3.5" />
</button>
</div>
</div>
</div> </div>
<div class="my-3 mb-5 grid md:grid-cols-2 lg:grid-cols-3 gap-2"> <div class="my-3 mb-5 grid md:grid-cols-2 lg:grid-cols-3 gap-2">

72
src/lib/components/workspace/Models.svelte
View File

@ -22,6 +22,8 @@
import ModelDeleteConfirmDialog from '../common/ConfirmDialog.svelte'; import ModelDeleteConfirmDialog from '../common/ConfirmDialog.svelte';
import Tooltip from '../common/Tooltip.svelte'; import Tooltip from '../common/Tooltip.svelte';
import GarbageBin from '../icons/GarbageBin.svelte'; import GarbageBin from '../icons/GarbageBin.svelte';
import Search from '../icons/Search.svelte';
import Plus from '../icons/Plus.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -304,58 +306,38 @@
}} }}
/> />
<div class=" flex w-full space-x-2 mb-2.5"> <div class="flex flex-col gap-0.5 mt-1 mb-2">
<div class="flex flex-1">
<div class=" self-center ml-1 mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd"
/>
</svg>
</div>
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
bind:value={searchValue}
placeholder={$i18n.t('Search Models')}
/>
</div>
<div>
<a
class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition font-medium text-sm flex items-center space-x-1"
href="/workspace/models/create"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
/>
</svg>
</a>
</div>
</div>
<div class="mb-3.5">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="flex md:self-center text-base font-medium px-0.5"> <div class="flex items-center md:self-center text-xl font-medium px-0.5">
{$i18n.t('Models')} {$i18n.t('Models')}
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" /> <div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
<span class="text-base font-medium text-gray-500 dark:text-gray-300" <span class="text-lg font-medium text-gray-500 dark:text-gray-300"
>{filteredModels.length}</span >{filteredModels.length}</span
> >
</div> </div>
</div> </div>
<div class=" flex flex-1 items-center w-full space-x-2">
<div class="flex flex-1 items-center">
<div class=" self-center ml-1 mr-3">
<Search className="size-3.5" />
</div>
<input
class=" w-full text-sm py-1 rounded-r-xl outline-none bg-transparent"
bind:value={searchValue}
placeholder={$i18n.t('Search Models')}
/>
</div>
<div>
<a
class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
href="/workspace/models/create"
>
<Plus className="size-3.5" />
</a>
</div>
</div>
</div> </div>
<a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-1" href="/workspace/models/create"> <a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-1" href="/workspace/models/create">

72
src/lib/components/workspace/Prompts.svelte
View File

@ -11,6 +11,8 @@
import PromptMenu from './Prompts/PromptMenu.svelte'; import PromptMenu from './Prompts/PromptMenu.svelte';
import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte'; import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import Search from '../icons/Search.svelte';
import Plus from '../icons/Plus.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -79,58 +81,38 @@
</div> </div>
</DeleteConfirmDialog> </DeleteConfirmDialog>
<div class=" flex w-full space-x-2 mb-2.5"> <div class="flex flex-col gap-0.5 mt-1 mb-2">
<div class="flex flex-1">
<div class=" self-center ml-1 mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd"
/>
</svg>
</div>
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
bind:value={query}
placeholder={$i18n.t('Search Prompts')}
/>
</div>
<div>
<a
class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
href="/workspace/prompts/create"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
/>
</svg>
</a>
</div>
</div>
<div class="mb-3.5">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="flex md:self-center text-base font-medium px-0.5"> <div class="flex md:self-center text-xl font-medium px-0.5 items-center">
{$i18n.t('Prompts')} {$i18n.t('Prompts')}
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" /> <div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
<span class="text-base font-medium text-gray-500 dark:text-gray-300" <span class="text-lg font-medium text-gray-500 dark:text-gray-300"
>{filteredItems.length}</span >{filteredItems.length}</span
> >
</div> </div>
</div> </div>
<div class=" flex w-full space-x-2">
<div class="flex flex-1">
<div class=" self-center ml-1 mr-3">
<Search className="size-3.5" />
</div>
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
bind:value={query}
placeholder={$i18n.t('Search Prompts')}
/>
</div>
<div>
<a
class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
href="/workspace/prompts/create"
>
<Plus className="size-3.5" />
</a>
</div>
</div>
</div> </div>
<div class="my-3 mb-5"> <div class="my-3 mb-5">

72
src/lib/components/workspace/Tools.svelte
View File

@ -25,6 +25,8 @@
import Heart from '../icons/Heart.svelte'; import Heart from '../icons/Heart.svelte';
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import GarbageBin from '../icons/GarbageBin.svelte'; import GarbageBin from '../icons/GarbageBin.svelte';
import Search from '../icons/Search.svelte';
import Plus from '../icons/Plus.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -154,58 +156,38 @@
</title> </title>
</svelte:head> </svelte:head>
<div class=" flex w-full space-x-2 mb-2.5"> <div class="flex flex-col gap-0.5 mt-1 mb-2">
<div class="flex flex-1">
<div class=" self-center ml-1 mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd"
/>
</svg>
</div>
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
bind:value={query}
placeholder={$i18n.t('Search Tools')}
/>
</div>
<div>
<a
class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
href="/workspace/tools/create"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
/>
</svg>
</a>
</div>
</div>
<div class="mb-3.5">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="flex md:self-center text-base font-medium px-0.5"> <div class="flex md:self-center text-xl font-medium px-0.5 items-center">
{$i18n.t('Tools')} {$i18n.t('Tools')}
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" /> <div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
<span class="text-base font-medium text-gray-500 dark:text-gray-300" <span class="text-lg font-medium text-gray-500 dark:text-gray-300"
>{filteredItems.length}</span >{filteredItems.length}</span
> >
</div> </div>
</div> </div>
<div class=" flex w-full space-x-2">
<div class="flex flex-1">
<div class=" self-center ml-1 mr-3">
<Search className="size-3.5" />
</div>
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
bind:value={query}
placeholder={$i18n.t('Search Tools')}
/>
</div>
<div>
<a
class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
href="/workspace/tools/create"
>
<Plus className="size-3.5" />
</a>
</div>
</div>
</div> </div>
<div class="my-3 mb-5"> <div class="my-3 mb-5">

2
src/routes/(app)/admin/+layout.svelte
View File

@ -49,7 +49,7 @@
<div class=" flex w-full"> <div class=" flex w-full">
<div <div
class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent p-1" class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent py-1"
> >
<a <a
class="min-w-fit rounded-full p-1.5 {['/admin', '/admin/'].includes( class="min-w-fit rounded-full p-1.5 {['/admin', '/admin/'].includes(

2
src/routes/(app)/playground/+layout.svelte
View File

@ -39,7 +39,7 @@
<div class=" flex w-full"> <div class=" flex w-full">
<div <div
class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent p-1" class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent py-1"
> >
<a <a
class="min-w-fit rounded-full p-1.5 {['/playground', '/playground/'].includes( class="min-w-fit rounded-full p-1.5 {['/playground', '/playground/'].includes(

4
src/routes/(app)/workspace/+layout.svelte
View File

@ -30,7 +30,7 @@
? 'md:max-w-[calc(100%-260px)]' ? 'md:max-w-[calc(100%-260px)]'
: ''}" : ''}"
> >
<div class=" px-3.5 mt-1.5 bg-transparent backdrop-blur-xl"> <div class=" px-3.5 py-1 backdrop-blur-xl">
<div class=" flex items-center gap-1"> <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-center flex flex-none items-center">
<button <button
@ -49,7 +49,7 @@
<div class=""> <div class="">
<div <div
class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent p-1 touch-auto pointer-events-auto" class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent py-1 touch-auto pointer-events-auto"
> >
<a <a
class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/workspace/models') class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/workspace/models')