9890b7c1a1
Sort classes using the same algorithm as prettier-plugin-tailwindcss, configured for Tailwind v4 (reads src/app.css for theme). Also sorts class strings inside twMerge() and tv() calls. Eliminates 2 nested ternaries that conflicted with the formatter (oxfmt strips parentheses that the lint rule requires).
97 lines
3.2 KiB
Vue
97 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
|
|
import { useInlineRename } from '@/composables/use-inline-rename'
|
|
import { useEditorStore } from '@/stores/editor'
|
|
|
|
const store = useEditorStore()
|
|
|
|
const DIVIDER_RE = /^[-–—*\s]+$/
|
|
const pageInputRefs = new Map<string, HTMLInputElement>()
|
|
|
|
function isDivider(page: { name: string; childIds: string[] }) {
|
|
return page.childIds.length === 0 && DIVIDER_RE.test(page.name)
|
|
}
|
|
|
|
const pages = computed(() => {
|
|
void store.state.sceneVersion
|
|
return store.graph.getPages()
|
|
})
|
|
|
|
const rename = useInlineRename((id, name) => store.renamePage(id, name))
|
|
const activeRenameId = ref<string | null>(null)
|
|
|
|
function setPageInputRef(pageId: string, el: HTMLInputElement | null) {
|
|
if (el) pageInputRefs.set(pageId, el)
|
|
else pageInputRefs.delete(pageId)
|
|
|
|
if (el && activeRenameId.value === pageId) {
|
|
activeRenameId.value = null
|
|
void rename.focusInput(el)
|
|
}
|
|
}
|
|
|
|
function startRename(pg: { id: string; name: string }) {
|
|
rename.start(pg.id, pg.name)
|
|
activeRenameId.value = pg.id
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div data-test-id="pages-panel" class="flex min-h-0 flex-1 flex-col">
|
|
<div class="flex shrink-0 items-center justify-between px-3 py-1.5">
|
|
<span data-test-id="pages-header" class="text-[11px] tracking-wider text-muted uppercase"
|
|
>Pages</span
|
|
>
|
|
<button
|
|
data-test-id="pages-add"
|
|
class="cursor-pointer rounded border-none bg-transparent px-1 text-base leading-none text-muted hover:bg-hover hover:text-surface"
|
|
title="Add page"
|
|
@click="store.addPage()"
|
|
>
|
|
+
|
|
</button>
|
|
</div>
|
|
<div class="scrollbar-thin overflow-x-hidden overflow-y-auto px-1 pb-1">
|
|
<div v-for="pg in pages" :key="pg.id">
|
|
<div
|
|
v-if="rename.editingId.value === pg.id"
|
|
class="flex w-full items-center gap-1.5 rounded px-2 py-1"
|
|
>
|
|
<icon-lucide-file class="size-3 shrink-0 opacity-70" />
|
|
<input
|
|
:ref="(el) => setPageInputRef(pg.id, el as HTMLInputElement | null)"
|
|
data-test-id="pages-item-input"
|
|
class="min-w-0 flex-1 rounded border border-accent bg-input px-1 py-0 text-xs text-surface outline-none"
|
|
:value="pg.name"
|
|
@blur="rename.commit(pg.id, $event.target as HTMLInputElement)"
|
|
@keydown="rename.onKeydown"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else-if="isDivider(pg)"
|
|
class="my-1 flex items-center px-2"
|
|
@dblclick="startRename(pg)"
|
|
>
|
|
<div class="h-px flex-1 bg-border" />
|
|
</div>
|
|
<button
|
|
v-else
|
|
data-test-id="pages-item"
|
|
class="flex w-full cursor-pointer items-center gap-1.5 rounded border-none px-2 py-1 text-left text-xs"
|
|
:class="
|
|
pg.id === store.state.currentPageId
|
|
? 'bg-hover text-surface'
|
|
: 'bg-transparent text-muted hover:bg-hover hover:text-surface'
|
|
"
|
|
@click="store.switchPage(pg.id)"
|
|
@dblclick="startRename(pg)"
|
|
>
|
|
<icon-lucide-file class="size-3 shrink-0" />
|
|
<span class="truncate">{{ pg.name }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|