Spaces:
Sleeping
Sleeping
File size: 3,542 Bytes
cbb996c 1a14c61 8811ee0 1b66f8d fc15a4c 1a14c61 cbb996c 1b66f8d ac94c73 1b66f8d ac94c73 1b66f8d 7482c01 1b66f8d fc15a4c 1a14c61 fc15a4c 1a14c61 fc15a4c 1b66f8d |
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 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<script lang="ts">
import { goto, invalidateAll } from '$app/navigation';
import { page } from '$app/stores';
import '../styles/main.css';
import type { LayoutData } from './$types';
export let data: LayoutData;
function switchTheme() {
const { classList } = document.querySelector('html') as HTMLElement;
if (classList.contains('dark')) {
classList.remove('dark');
localStorage.theme = 'light';
} else {
classList.add('dark');
localStorage.theme = 'dark';
}
}
async function shareConversation(id: string, title: string) {
try {
const res = await fetch(`/conversation/${id}/share`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
});
if (!res.ok) {
alert('Error while sharing conversation: ' + (await res.text()));
return;
}
const { url } = await res.json();
if (navigator.share) {
navigator.share({
title,
text: 'Share this chat with others',
url
});
} else {
prompt('Share this link with your friends:', url);
}
} catch (err) {
console.error(err);
alert('Error while sharing conversation: ' + err);
}
}
async function deleteConversation(id: string) {
try {
const res = await fetch(`/conversation/${id}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
}
});
if (!res.ok) {
alert('Error while deleting conversation: ' + (await res.text()));
return;
}
if ($page.params.id !== id) {
await invalidateAll();
} else {
await goto(`/`, { invalidateAll: true });
}
} catch (err) {
console.error(err);
alert('Error while deleting conversation: ' + err);
}
}
</script>
<div
class="grid h-screen w-screen md:grid-cols-[280px,1fr] overflow-hidden text-smd dark:text-gray-300"
>
<nav
class="max-md:hidden grid grid-rows-[auto,1fr,auto] grid-cols-1 max-h-screen bg-gradient-to-l from-gray-50 dark:from-gray-800/30 rounded-r-xl"
>
<div class="flex-none sticky top-0 p-3 flex flex-col">
<a
href="/"
class="border px-12 py-2.5 rounded-lg shadow bg-white dark:bg-gray-700 dark:border-gray-600"
>
New Chat
</a>
</div>
<div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-2">
{#each data.conversations as conv}
<a
href="/conversation/{conv.id}"
class="truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center {conv.id ===
$page.params.id
? 'bg-gray-100 dark:bg-gray-700'
: ''}"
>
{conv.title}
<span class="grow" />
<button
type="button"
class="bg-white rounded border-black px-2 py-1 border-[1px] border-solid"
on:click|preventDefault={() => deleteConversation(conv.id)}
>
Delele
</button>
<button
type="button"
class="bg-white rounded border-black px-2 py-1 border-[1px] border-solid"
on:click|preventDefault={() => shareConversation(conv.id, conv.title)}
>
Share
</button>
</a>
{/each}
</div>
<div class="flex flex-col p-3 gap-2">
<button
on:click={switchTheme}
class="text-left flex items-center first-letter:capitalize truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
>
Theme
</button>
<a
href="/"
class="truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
>
Settings
</a>
</div>
</nav>
<slot />
</div>
|