bvandeusenandClaude Opus 4.8
545f946754
Each data view now catches a failed load and shows an explicit error message with a Retry button, instead of falling through to a misleading empty state. Pairs with the global error toast: the toast says something failed, the view says which and offers a retry. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm
95 lines
3.0 KiB
Vue
95 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, watch } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import { api } from "../api/client";
|
|
import { useNotesStore, type Note } from "../stores/notes";
|
|
import NoteCard from "../components/NoteCard.vue";
|
|
import NoteEditor from "../components/NoteEditor.vue";
|
|
|
|
const route = useRoute();
|
|
const notes = useNotesStore();
|
|
|
|
const results = ref<Note[]>([]);
|
|
const loading = ref(false);
|
|
const error = ref("");
|
|
const editing = ref<Note | null>(null);
|
|
|
|
const query = computed(() => (typeof route.query.q === "string" ? route.query.q : ""));
|
|
|
|
async function run() {
|
|
const q = query.value.trim();
|
|
if (!q) {
|
|
results.value = [];
|
|
return;
|
|
}
|
|
loading.value = true;
|
|
error.value = "";
|
|
try {
|
|
const res = await api.get<{ notes: Note[] }>(`/api/notes/search?q=${encodeURIComponent(q)}`);
|
|
results.value = res.notes;
|
|
} catch (e) {
|
|
error.value = (e as { error?: string }).error ?? "Search failed.";
|
|
results.value = [];
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
watch(query, run, { immediate: true });
|
|
|
|
function openEditor(n: Note) {
|
|
editing.value = n;
|
|
}
|
|
async function closeEditor() {
|
|
editing.value = null;
|
|
await run(); // reflect any edits made from a result
|
|
}
|
|
async function onNavigate(id: string) {
|
|
const found = results.value.find((n) => n.id === id);
|
|
if (found) {
|
|
editing.value = found;
|
|
return;
|
|
}
|
|
const fetched = await notes.fetchOne(id);
|
|
if (fetched) editing.value = fetched;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mx-auto w-full max-w-6xl px-4 py-6">
|
|
<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">
|
|
<template v-if="query"
|
|
>Results for <span class="font-semibold text-neutral-800 dark:text-neutral-200">{{ query }}</span></template
|
|
>
|
|
<template v-else>Type in the search box to find your notes.</template>
|
|
</p>
|
|
|
|
<div v-if="loading" class="py-20 text-center text-sm text-neutral-400">Searching…</div>
|
|
|
|
<div v-else-if="error" class="py-20 text-center">
|
|
<h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">Couldn't search</h2>
|
|
<p class="mt-1 text-sm text-neutral-400">{{ error }}</p>
|
|
<button
|
|
type="button"
|
|
class="mt-3 rounded-md border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:hover:bg-neutral-800"
|
|
@click="run"
|
|
>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
|
|
<div v-else-if="query && results.length === 0" class="py-20 text-center">
|
|
<h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">No matches</h2>
|
|
<p class="mt-1 text-sm text-neutral-400">Nothing found for "{{ query }}".</p>
|
|
</div>
|
|
|
|
<div v-else class="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4">
|
|
<NoteCard v-for="n in results" :key="n.id" :note="n" @open="openEditor" />
|
|
</div>
|
|
</div>
|
|
|
|
<template v-if="editing">
|
|
<NoteEditor :note="editing" @close="closeEditor" @navigate="onNavigate" />
|
|
</template>
|
|
</template>
|