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
role="tablist"
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"
>
@ -574,11 +575,11 @@
placeholder={$i18n.t('Search')}
/>
</div>
{#if visibleTabs.length > 0}
{#each visibleTabs as tabId (tabId)}
{#if tabId === 'general'}
<button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${
selectedTab === 'general'
@ -611,6 +612,7 @@
</button>
{:else if tabId === 'interface'}
<button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${
selectedTab === 'interface'
@ -644,6 +646,7 @@
{:else if tabId === 'connections'}
{#if $user?.role === 'admin' || ($user?.role === 'user' && $config?.features?.enable_direct_connections)}
<button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${
selectedTab === 'connections'
@ -676,6 +679,7 @@
{:else if tabId === 'tools'}
{#if $user?.role === 'admin' || ($user?.role === 'user' && $user?.permissions?.features?.direct_tool_servers)}
<button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${
selectedTab === 'tools'
@ -709,6 +713,7 @@
{/if}
{:else if tabId === 'personalization'}
<button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${
selectedTab === 'personalization'
@ -730,6 +735,7 @@
</button>
{:else if tabId === 'audio'}
<button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${
selectedTab === 'audio'
@ -763,6 +769,7 @@
</button>
{:else if tabId === 'chats'}
<button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${
selectedTab === 'chats'
@ -795,6 +802,7 @@
</button>
{:else if tabId === 'account'}
<button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${
selectedTab === 'account'
@ -827,6 +835,7 @@
</button>
{:else if tabId === 'about'}
<button
role="tab"
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${
selectedTab === 'about'
@ -864,7 +873,6 @@
{$i18n.t('No results found')}
</div>
{/if}
{#if $user?.role === 'admin'}
<a
href="/admin/settings"