refac: allow chat menu in mobile

This commit is contained in:
Timothy J. Baek 2024-09-18 01:30:09 +02:00
parent 771482c6e6
commit 705508a674
2 changed files with 28 additions and 14 deletions

View File

@ -82,7 +82,7 @@
}} }}
> >
<button <button
class="hidden md:flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition" class="flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
id="chat-context-menu-button" id="chat-context-menu-button"
> >
<div class=" m-auto self-center"> <div class=" m-auto self-center">
@ -105,19 +105,21 @@
</Menu> </Menu>
{/if} {/if}
<Tooltip content={$i18n.t('Controls')}> {#if !$mobile}
<button <Tooltip content={$i18n.t('Controls')}>
class=" flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition" <button
on:click={() => { class=" flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
showControls.set(!$showControls); on:click={() => {
}} showControls.set(!$showControls);
aria-label="Controls" }}
> aria-label="Controls"
<div class=" m-auto self-center"> >
<AdjustmentsHorizontal className=" size-5" strokeWidth="0.5" /> <div class=" m-auto self-center">
</div> <AdjustmentsHorizontal className=" size-5" strokeWidth="0.5" />
</button> </div>
</Tooltip> </button>
</Tooltip>
{/if}
<Tooltip content={$i18n.t('New Chat')}> <Tooltip content={$i18n.t('New Chat')}>
<button <button

View File

@ -17,6 +17,7 @@
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import Clipboard from '$lib/components/icons/Clipboard.svelte'; import Clipboard from '$lib/components/icons/Clipboard.svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import AdjustmentsHorizontal from '$lib/components/icons/AdjustmentsHorizontal.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -126,6 +127,17 @@
<div class="flex items-center">{$i18n.t('Settings')}</div> <div class="flex items-center">{$i18n.t('Settings')}</div>
</DropdownMenu.Item> --> </DropdownMenu.Item> -->
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
id="chat-controls-button"
on:click={async () => {
await showControls.set(true);
}}
>
<AdjustmentsHorizontal className=" size-4" strokeWidth="0.5" />
<div class="flex items-center">{$i18n.t('Controls')}</div>
</DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
id="chat-overview-button" id="chat-overview-button"