bvandeusen
969ef0efa3
- App.vue: e → edit on viewer pages; / → focus search (custom event); c → focus chat on home or navigate to /chat; update shortcuts panel with Lists + Chat sections - theme.css: add a:focus-visible to focus-ring rules (router-link cards now show visible keyboard focus outline) - SearchBar.vue: expose focus() via defineExpose for cross-component focus dispatch - NotesListView / TasksListView: j/k vim-style navigation with kb-active-item highlight; listen for shortcut:focus-search; cleanup on unmount - HomeView.vue: listen for shortcut:focus-chat, call chatInputRef.focus() Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
42 lines
907 B
Vue
42 lines
907 B
Vue
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
|
|
const emit = defineEmits<{ search: [query: string] }>();
|
|
const query = ref("");
|
|
const inputRef = ref<HTMLInputElement | null>(null);
|
|
let timeout: ReturnType<typeof setTimeout>;
|
|
|
|
watch(query, (val) => {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => emit("search", val), 300);
|
|
});
|
|
|
|
defineExpose({ focus: () => inputRef.value?.focus() });
|
|
</script>
|
|
|
|
<template>
|
|
<input
|
|
ref="inputRef"
|
|
v-model="query"
|
|
type="text"
|
|
placeholder="Search notes..."
|
|
class="search-input"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.search-input {
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 1rem;
|
|
box-sizing: border-box;
|
|
background: var(--color-bg-card);
|
|
color: var(--color-text);
|
|
}
|
|
.search-input::placeholder {
|
|
color: var(--color-text-muted);
|
|
}
|
|
</style>
|