File size: 2,710 Bytes
e0ec969 e1f5db2 e0ec969 cafb235 e0ec969 4331e77 5367212 9f870c5 4331e77 21b8785 a04c5e9 4331e77 21b8785 e0ec969 4331e77 21b8785 5367212 4331e77 e0ec969 5dd3617 e0ec969 4331e77 e0ec969 4331e77 5367212 e0ec969 a04c5e9 5367212 a04c5e9 5367212 e0ec969 4331e77 5367212 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
<script lang="ts">
import { base } from "$app/paths";
import { page } from "$app/state";
import CarbonTrashCan from "~icons/carbon/trash-can";
import CarbonEdit from "~icons/carbon/edit";
import type { ConvSidebar } from "$lib/types/ConvSidebar";
import EditConversationModal from "$lib/components/EditConversationModal.svelte";
import DeleteConversationModal from "$lib/components/DeleteConversationModal.svelte";
import { requireAuthUser } from "$lib/utils/auth";
interface Props {
conv: ConvSidebar;
readOnly?: true;
ondeleteConversation?: (id: string) => void;
oneditConversationTitle?: (payload: { id: string; title: string }) => void;
}
let { conv, readOnly, ondeleteConversation, oneditConversationTitle }: Props = $props();
let deleteOpen = $state(false);
let renameOpen = $state(false);
</script>
<a
data-sveltekit-noscroll
data-sveltekit-preload-data="tap"
href="{base}/conversation/{conv.id}"
class="group flex h-[2.15rem] flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 max-sm:h-10
{conv.id === page.params.id ? 'bg-gray-100 dark:bg-gray-700' : ''}"
>
<div class="my-2 min-w-0 flex-1 truncate first-letter:uppercase">
<span>{conv.title}</span>
</div>
{#if !readOnly}
<button
type="button"
class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
title="Edit conversation title"
onclick={(e) => {
e.preventDefault();
if (requireAuthUser()) return;
renameOpen = true;
}}
>
<CarbonEdit class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
</button>
<button
type="button"
class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
title="Delete conversation"
onclick={(event) => {
event.preventDefault();
if (requireAuthUser()) return;
if (event.shiftKey) {
ondeleteConversation?.(conv.id.toString());
} else {
deleteOpen = true;
}
}}
>
<CarbonTrashCan class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
</button>
{/if}
</a>
<!-- Edit title modal -->
{#if renameOpen}
<EditConversationModal
open={renameOpen}
title={conv.title}
onclose={() => (renameOpen = false)}
onsave={(payload) => {
renameOpen = false;
oneditConversationTitle?.({ id: conv.id.toString(), title: payload.title });
}}
/>
{/if}
<!-- Delete confirmation modal -->
{#if deleteOpen}
<DeleteConversationModal
open={deleteOpen}
title={conv.title}
onclose={() => (deleteOpen = false)}
ondelete={() => {
deleteOpen = false;
ondeleteConversation?.(conv.id.toString());
}}
/>
{/if}
|