add roles tablist and tab to tabs in settings modal

This commit is contained in:
Sine Jespersen 2025-06-11 13:41:26 +02:00
parent fd8cdb383c
commit 6af91325e2

View File

@ -554,6 +554,7 @@
<div class="flex flex-col md:flex-row w-full px-4 pt-1 pb-4 md:space-x-4"> <div class="flex flex-col md:flex-row w-full px-4 pt-1 pb-4 md:space-x-4">
<div <div
role="tablist"
id="settings-tabs-container" id="settings-tabs-container"
class="tabs flex flex-row overflow-x-auto gap-2.5 md:gap-1 md:flex-col flex-1 md:flex-none md:w-40 md:min-h-[32rem] md:max-h-[32rem] dark:text-gray-200 text-sm font-medium text-left mb-1 md:mb-0 -translate-y-1" class="tabs flex flex-row overflow-x-auto gap-2.5 md:gap-1 md:flex-col flex-1 md:flex-none md:w-40 md:min-h-[32rem] md:max-h-[32rem] dark:text-gray-200 text-sm font-medium text-left mb-1 md:mb-0 -translate-y-1"
> >
@ -574,11 +575,11 @@
placeholder={$i18n.t('Search')} placeholder={$i18n.t('Search')}
/> />
</div> </div>
{#if visibleTabs.length > 0} {#if visibleTabs.length > 0}
{#each visibleTabs as tabId (tabId)} {#each visibleTabs as tabId (tabId)}
{#if tabId === 'general'} {#if tabId === 'general'}
<button <button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'general' selectedTab === 'general'
@ -611,6 +612,7 @@
</button> </button>
{:else if tabId === 'interface'} {:else if tabId === 'interface'}
<button <button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'interface' selectedTab === 'interface'
@ -644,6 +646,7 @@
{:else if tabId === 'connections'} {:else if tabId === 'connections'}
{#if $user?.role === 'admin' || ($user?.role === 'user' && $config?.features?.enable_direct_connections)} {#if $user?.role === 'admin' || ($user?.role === 'user' && $config?.features?.enable_direct_connections)}
<button <button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'connections' selectedTab === 'connections'
@ -676,6 +679,7 @@
{:else if tabId === 'tools'} {:else if tabId === 'tools'}
{#if $user?.role === 'admin' || ($user?.role === 'user' && $user?.permissions?.features?.direct_tool_servers)} {#if $user?.role === 'admin' || ($user?.role === 'user' && $user?.permissions?.features?.direct_tool_servers)}
<button <button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'tools' selectedTab === 'tools'
@ -709,6 +713,7 @@
{/if} {/if}
{:else if tabId === 'personalization'} {:else if tabId === 'personalization'}
<button <button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'personalization' selectedTab === 'personalization'
@ -730,6 +735,7 @@
</button> </button>
{:else if tabId === 'audio'} {:else if tabId === 'audio'}
<button <button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'audio' selectedTab === 'audio'
@ -763,6 +769,7 @@
</button> </button>
{:else if tabId === 'chats'} {:else if tabId === 'chats'}
<button <button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'chats' selectedTab === 'chats'
@ -795,6 +802,7 @@
</button> </button>
{:else if tabId === 'account'} {:else if tabId === 'account'}
<button <button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'account' selectedTab === 'account'
@ -827,6 +835,7 @@
</button> </button>
{:else if tabId === 'about'} {:else if tabId === 'about'}
<button <button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'about' selectedTab === 'about'
@ -864,7 +873,6 @@
{$i18n.t('No results found')} {$i18n.t('No results found')}
</div> </div>
{/if} {/if}
{#if $user?.role === 'admin'} {#if $user?.role === 'admin'}
<a <a
href="/admin/settings" href="/admin/settings"