feat: note editor

This commit is contained in:
Timothy Jaeryang Baek
2025-05-03 21:18:19 +04:00
parent 52d32e8bf2
commit 1d82a1c8c4
4 changed files with 219 additions and 59 deletions

View File

@@ -95,68 +95,70 @@
</div>
</DeleteConfirmDialog>
{#if Object.keys(notes).length > 0}
{#each Object.keys(notes) as timeRange}
<div class="w-full text-xs text-gray-500 dark:text-gray-500 font-medium pb-2">
{$i18n.t(timeRange)}
</div>
<div class="px-4.5">
{#if Object.keys(notes).length > 0}
{#each Object.keys(notes) as timeRange}
<div class="w-full text-xs text-gray-500 dark:text-gray-500 font-medium pb-2">
{$i18n.t(timeRange)}
</div>
<div class="mb-5 gap-2 grid @lg:grid-cols-2 @2xl:grid-cols-3">
{#each notes[timeRange] as note, idx (note.id)}
<div
class=" flex space-x-4 cursor-pointer w-full px-4 py-3.5 bg-gray-50 dark:bg-gray-850 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl transition"
>
<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
<a href={`/notes/${note.id}`} class="w-full -translate-y-0.5">
<div class=" flex-1 flex items-center gap-2 self-center">
<div class=" font-semibold line-clamp-1 capitalize">{note.title}</div>
</div>
<div class=" text-xs text-gray-500 dark:text-gray-500 line-clamp-2 pb-2">
{#if note.data?.content}
{note.data?.content}
{:else}
{$i18n.t('No content')}
{/if}
</div>
<div class=" text-xs px-0.5 w-full flex justify-between items-center">
<div>
{dayjs(note.updated_at / 1000000).fromNow()}
<div class="mb-5 gap-2 grid @lg:grid-cols-2 @2xl:grid-cols-3">
{#each notes[timeRange] as note, idx (note.id)}
<div
class=" flex space-x-4 cursor-pointer w-full px-4 py-3.5 bg-gray-50 dark:bg-gray-850 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl transition"
>
<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
<a href={`/notes/${note.id}`} class="w-full -translate-y-0.5">
<div class=" flex-1 flex items-center gap-2 self-center">
<div class=" font-semibold line-clamp-1 capitalize">{note.title}</div>
</div>
<Tooltip
content={note?.user?.email ?? $i18n.t('Deleted User')}
className="flex shrink-0"
placement="top-start"
>
<div class="shrink-0 text-gray-500">
{$i18n.t('By {{name}}', {
name: capitalizeFirstLetter(
note?.user?.name ?? note?.user?.email ?? $i18n.t('Deleted User')
)
})}
</div>
</Tooltip>
</div>
</a>
</div>
</div>
{/each}
</div>
{/each}
{:else}
<div class="w-full h-full flex flex-col items-center justify-center">
<div class="pb-20 text-center">
<div class=" text-xl font-medium text-gray-400 dark:text-gray-600">
{$i18n.t('No Notes')}
</div>
<div class="mt-1 text-sm text-gray-300 dark:text-gray-700">
{$i18n.t('Create your first note by clicking on the plus button below.')}
<div class=" text-xs text-gray-500 dark:text-gray-500 line-clamp-2 pb-2">
{#if note.data?.content}
{note.data?.content}
{:else}
{$i18n.t('No content')}
{/if}
</div>
<div class=" text-xs px-0.5 w-full flex justify-between items-center">
<div>
{dayjs(note.updated_at / 1000000).fromNow()}
</div>
<Tooltip
content={note?.user?.email ?? $i18n.t('Deleted User')}
className="flex shrink-0"
placement="top-start"
>
<div class="shrink-0 text-gray-500">
{$i18n.t('By {{name}}', {
name: capitalizeFirstLetter(
note?.user?.name ?? note?.user?.email ?? $i18n.t('Deleted User')
)
})}
</div>
</Tooltip>
</div>
</a>
</div>
</div>
{/each}
</div>
{/each}
{:else}
<div class="w-full h-full flex flex-col items-center justify-center">
<div class="pb-20 text-center">
<div class=" text-xl font-medium text-gray-400 dark:text-gray-600">
{$i18n.t('No Notes')}
</div>
<div class="mt-1 text-sm text-gray-300 dark:text-gray-700">
{$i18n.t('Create your first note by clicking on the plus button below.')}
</div>
</div>
</div>
</div>
{/if}
{/if}
</div>
<div class="absolute bottom-0 left-0 right-0 p-5 max-w-full flex justify-end">
<div class="flex gap-0.5 justify-end w-full">