Initial ui redo progress (#1)
Complete UI rewrite using shadcn-svelte for consistency and better design Reviewed-on: #1 Co-authored-by: June <self@breadone.net> Co-committed-by: June <self@breadone.net>
This commit was merged in pull request #1.
This commit is contained in:
319
src/lib/components/editor.svelte
Normal file
319
src/lib/components/editor.svelte
Normal file
@@ -0,0 +1,319 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
CalendarDate,
|
||||
today,
|
||||
getLocalTimeZone,
|
||||
} from "@internationalized/date";
|
||||
import { onMount } from "svelte";
|
||||
import { formatDate } from "$lib/date";
|
||||
import { createEntry, updateEntry, deleteEntry } from "$lib/upload";
|
||||
import Button from "$lib/components/ui/button/button.svelte";
|
||||
import { Textarea } from "$lib/components/ui/textarea";
|
||||
import { Upload, X } from "@lucide/svelte";
|
||||
import { marked } from "marked";
|
||||
|
||||
let { dateValue = $bindable<CalendarDate>(today(getLocalTimeZone())) } =
|
||||
$props();
|
||||
|
||||
let edit = $state<boolean>(false);
|
||||
let isLoading = $state<boolean>(false);
|
||||
let error = $state<string>("");
|
||||
let previewImage = $state<string | null>(null);
|
||||
let fileInput = $state<HTMLInputElement | undefined>(undefined);
|
||||
|
||||
let entry = $state({
|
||||
id: "",
|
||||
date: dateValue.toString(),
|
||||
image: "",
|
||||
content: "",
|
||||
});
|
||||
|
||||
let editingEntry = $state({
|
||||
id: "",
|
||||
date: dateValue.toString(),
|
||||
image: "",
|
||||
content: "",
|
||||
});
|
||||
|
||||
onMount(async () => {
|
||||
await loadEntry();
|
||||
});
|
||||
|
||||
async function loadEntry() {
|
||||
try {
|
||||
error = "";
|
||||
const res = await fetch(`/api/entry?date=${dateValue.toString()}`);
|
||||
const data = await res.json();
|
||||
if (data && data.length > 0) {
|
||||
entry = { ...data[0], date: dateValue.toString() };
|
||||
previewImage = entry.image || null;
|
||||
} else {
|
||||
entry = {
|
||||
id: "",
|
||||
date: dateValue.toString(),
|
||||
image: "",
|
||||
content: "",
|
||||
};
|
||||
previewImage = null;
|
||||
}
|
||||
} catch (err) {
|
||||
error = "Failed to load entry";
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
function startEdit() {
|
||||
editingEntry = { ...entry };
|
||||
previewImage = entry.image || null;
|
||||
edit = true;
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
edit = false;
|
||||
error = "";
|
||||
previewImage = entry.image || null;
|
||||
}
|
||||
|
||||
function handleImageSelect(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const files = target.files;
|
||||
|
||||
if (files && files.length > 0) {
|
||||
const file = files[0];
|
||||
|
||||
// Validate file type
|
||||
if (!file.type.startsWith("image/")) {
|
||||
error = "Please select a valid image file";
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file size (5MB max)
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
error = "Image must be smaller than 5MB";
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const result = event.target?.result as string;
|
||||
editingEntry.image = result;
|
||||
previewImage = result;
|
||||
error = "";
|
||||
};
|
||||
reader.onerror = () => {
|
||||
error = "Failed to read image file";
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
|
||||
function removeImage() {
|
||||
editingEntry.image = "";
|
||||
previewImage = null;
|
||||
if (fileInput) {
|
||||
fileInput.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
try {
|
||||
isLoading = true;
|
||||
error = "";
|
||||
|
||||
editingEntry.date = dateValue.toString();
|
||||
|
||||
if (entry.id) {
|
||||
editingEntry.id = entry.id;
|
||||
await updateEntry(editingEntry);
|
||||
} else {
|
||||
delete editingEntry.id;
|
||||
await createEntry(editingEntry);
|
||||
}
|
||||
|
||||
// Reload the entry to get updated data
|
||||
await loadEntry();
|
||||
edit = false;
|
||||
} catch (err) {
|
||||
error = "Failed to save entry. Please try again.";
|
||||
console.error(err);
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!confirm("Are you sure you want to delete this entry?")) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
isLoading = true;
|
||||
error = "";
|
||||
await deleteEntry(entry);
|
||||
await loadEntry();
|
||||
edit = false;
|
||||
} catch (err) {
|
||||
error = "Failed to delete entry. Please try again.";
|
||||
console.error(err);
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="w-full max-w-2xl">
|
||||
<!-- Header -->
|
||||
<div class="flex flex-row items-center justify-between mb-6">
|
||||
<h1 class="text-3xl font-bold">{formatDate(entry.date)}</h1>
|
||||
|
||||
<div class="flex gap-2">
|
||||
{#if !edit}
|
||||
<Button variant="secondary" onclick={startEdit}>Edit</Button>
|
||||
{:else}
|
||||
<Button
|
||||
variant="destructive"
|
||||
onclick={handleDelete}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
<Button
|
||||
variant="default"
|
||||
onclick={handleSave}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onclick={cancelEdit}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
{#if error}
|
||||
<div
|
||||
class="mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md text-destructive text-sm"
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- View Mode -->
|
||||
{#if !edit}
|
||||
<div class="space-y-4">
|
||||
<!-- Image Display -->
|
||||
{#if entry.image}
|
||||
<div class="rounded-lg overflow-hidden border border-input">
|
||||
<img
|
||||
src={entry.image}
|
||||
alt="Entry"
|
||||
class="w-full h-auto max-h-128 object-cover"
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 h-48 flex items-center justify-center text-muted-foreground text-sm"
|
||||
>
|
||||
No image
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Content Display -->
|
||||
{#if entry.content}
|
||||
<div class="rounded-lg border border-input bg-muted/30 p-4">
|
||||
<div class="text-base whitespace-pre-wrap text-foreground">
|
||||
{@html marked(entry.content)}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="rounded-lg border border-dashed border-muted-foreground/25 bg-muted/50 p-4 text-muted-foreground text-sm text-center"
|
||||
>
|
||||
No content yet
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Edit Mode -->
|
||||
{:else}
|
||||
<div class="space-y-6">
|
||||
<!-- Image Picker -->
|
||||
<div class="space-y-3">
|
||||
<!-- <label for="image-input" class="text-sm font-medium">
|
||||
Image
|
||||
</label> -->
|
||||
|
||||
{#if previewImage}
|
||||
<div
|
||||
class="relative rounded-lg overflow-hidden border border-input"
|
||||
>
|
||||
<img
|
||||
src={previewImage}
|
||||
alt="Preview"
|
||||
class="w-full h-auto max-h-128 object-cover"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onclick={removeImage}
|
||||
class="absolute top-2 right-2 p-2 bg-destructive text-white rounded-md hover:bg-destructive/90 transition-colors"
|
||||
title="Remove image"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 p-8 flex flex-col items-center justify-center gap-3 cursor-pointer hover:border-muted-foreground/50 transition-colors"
|
||||
role="button"
|
||||
tabindex={0}
|
||||
onkeydown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
fileInput?.click();
|
||||
}
|
||||
}}
|
||||
onclick={() => fileInput?.click()}
|
||||
>
|
||||
<Upload size={32} class="text-muted-foreground" />
|
||||
<p class="text-sm font-medium text-muted-foreground">
|
||||
Click to upload or drag and drop
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
PNG, JPG, GIF up to 5MB
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<input
|
||||
bind:this={fileInput}
|
||||
id="image-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onchange={handleImageSelect}
|
||||
class="hidden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Content Editor -->
|
||||
<div class="space-y-3">
|
||||
<!-- <label for="content-input" class="text-sm font-medium">
|
||||
Content
|
||||
</label> -->
|
||||
<Textarea
|
||||
id="content-input"
|
||||
bind:value={editingEntry.content}
|
||||
placeholder="How was your day?"
|
||||
class="min-h-64"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{editingEntry.content.length} characters
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user