implement tag filtering ui

This commit is contained in:
2025-05-31 13:44:08 +01:00
parent 835a76709c
commit 11d4cc19af
6 changed files with 208 additions and 76 deletions

View File

@@ -60,7 +60,7 @@ async function listUserBookmarks(request: Bun.BunRequest<"/api/bookmarks">, user
if (queryParams.q || queryParams.tags) {
let tagIds: TagId[] = []
if (queryParams.tags) {
const tagNames = queryParams.tags.split(",")
const tagNames = queryParams.tags.split(" ")
const tagIdsQuery = db.query<{ id: string }, string[]>(
`SELECT id FROM tags WHERE name IN (${Array(tagNames.length).fill("?").join(",")})`,
)

View File

@@ -52,12 +52,14 @@ interface BookmarkPageState {
bookmarkToBeEdited: Bookmark | null
layoutMode: LayoutMode
dialog: DialogData
hasDialog: boolean
actionBarContent: ActionBarContent
statusMessage: string
isSearchBarActive: boolean
isTagFilterWindowOpen: boolean
openSearchBar: () => void
closeSearchBar: () => void
openTagFilterWindow: () => void
closeTagFilterWindow: () => void
toggleTagFilterWindow: () => void
setActionBarContent: (content: ActionBarContent) => void
handleBookmarkListItemAction: (bookmark: Bookmark, action: BookmarkListItemAction) => void
setActiveDialog: (dialog: DialogData) => void
@@ -73,14 +75,22 @@ const useBookmarkPageStore = create<BookmarkPageState>()((set, get) => ({
dialog: NO_DIALOG,
actionBarContent: { kind: ActionBarContentKind.Normal },
statusMessage: "",
isSearchBarActive: false,
isTagFilterWindowOpen: false,
openSearchBar() {
set({ isSearchBarActive: true })
get hasDialog(): boolean {
return get().dialog.kind !== DialogKind.None
},
closeSearchBar() {
set({ isSearchBarActive: false })
toggleTagFilterWindow() {
set({ isTagFilterWindowOpen: !get().isTagFilterWindowOpen })
},
openTagFilterWindow() {
set({ isTagFilterWindowOpen: true })
},
closeTagFilterWindow() {
set({ isTagFilterWindowOpen: false })
},
setActionBarContent(content: ActionBarContent) {

View File

@@ -1,10 +1,15 @@
import { autoUpdate, offset, useFloating } from "@floating-ui/react-dom"
import type { Tag } from "@markone/core"
import { createFileRoute, useNavigate } from "@tanstack/react-router"
import { useCallback, useEffect, useId, useRef } from "react"
import { memo, useCallback, useEffect, useId, useRef } from "react"
import { fetchApi, useAuthenticatedQuery } from "~/api"
import { ActionBar } from "~/app/bookmarks/-action-bar.tsx"
import { useLogOut } from "~/auth.ts"
import { useTags } from "~/bookmark/api.ts"
import { Button } from "~/components/button.tsx"
import { LoadingSpinner } from "~/components/loading-spinner"
import { Message, MessageVariant } from "~/components/message.tsx"
import { useDocumentEvent } from "~/hooks/use-document-event.ts"
import { useMnemonics } from "~/hooks/use-mnemonics.ts"
import { BookmarkList } from "./-bookmark-list"
import { ActionBarContentKind, DialogKind, useBookmarkPageStore } from "./-store"
@@ -73,20 +78,30 @@ function BookmarkListContainer() {
}
function BookmarkListActionBar({ className }: { className?: string }) {
const isTagFilterWindowOpen = useBookmarkPageStore((state) => state.isTagFilterWindowOpen)
const content = useBookmarkPageStore((state) => state.actionBarContent)
const { refs, floatingStyles } = useFloating({
placement: "top",
whileElementsMounted: autoUpdate,
middleware: [offset(8)],
})
return (
<ActionBar className={className}>
{(() => {
switch (content.kind) {
case ActionBarContentKind.Normal:
return <ActionButtons />
case ActionBarContentKind.StatusMessage:
return <p>{content.message}</p>
case ActionBarContentKind.SearchBar:
return <SearchBar />
}
})()}
</ActionBar>
<>
<ActionBar ref={refs.setReference} className={className}>
{(() => {
switch (content.kind) {
case ActionBarContentKind.Normal:
return <ActionButtons />
case ActionBarContentKind.StatusMessage:
return <p>{content.message}</p>
case ActionBarContentKind.SearchBar:
return <SearchBar />
}
})()}
</ActionBar>
{isTagFilterWindowOpen ? <TagFilterWindow ref={refs.setFloating} style={floatingStyles} /> : null}
</>
)
}
@@ -98,20 +113,22 @@ function SearchBar() {
const navigate = Route.useNavigate()
const { q } = Route.useSearch()
useMnemonics(
{
Escape: () => {
navigate({
search: (prevSearch: Record<string, string | undefined>) => ({
...prevSearch,
tags: undefined,
q: undefined,
}),
})
setActionBarContent({ kind: ActionBarContentKind.Normal })
useDocumentEvent(
"keydown",
useCallback(
(event) => {
if (event.key === "Escape") {
navigate({
search: (prevSearch: Record<string, string | undefined>) => ({
...prevSearch,
q: undefined,
}),
})
setActionBarContent({ kind: ActionBarContentKind.Normal })
}
},
},
{ ignore: () => false },
[navigate, setActionBarContent],
),
)
useEffect(() => {
@@ -195,11 +212,13 @@ function SearchBar() {
function ActionButtons() {
const setActiveDialog = useBookmarkPageStore((state) => state.setActiveDialog)
const setActionBarContent = useBookmarkPageStore((state) => state.setActionBarContent)
const toggleTagFilterWindow = useBookmarkPageStore((state) => state.toggleTagFilterWindow)
useMnemonics(
{
a: addBookmark,
s: openSearchBar,
t: toggleTagFilterWindow,
},
{ ignore: useCallback(() => useBookmarkPageStore.getState().dialog.kind !== DialogKind.None, []) },
)
@@ -220,10 +239,99 @@ function ActionButtons() {
<Button onClick={openSearchBar}>
<span className="underline">S</span>EARCH
</Button>
<LogOutButton />
<Button onClick={toggleTagFilterWindow}>
<span className="underline">T</span>AGS
</Button>
</div>
)
}
function TagFilterWindow({ ref, style }: { ref: React.Ref<HTMLDivElement>; style: React.CSSProperties }) {
const { data: tags, status } = useTags()
const navigate = Route.useNavigate()
const { tags: tagsQuery } = Route.useSearch()
const filterByTags = new Set(tagsQuery ? tagsQuery.split(" ") : [])
const onTagFilterItemChange = useCallback(
(tag: Tag, selected: boolean) => {
navigate({
search: (prevSearch: Record<string, string | undefined>) => {
const tagsQuery = prevSearch.tags
const tags = tagsQuery ? tagsQuery.split(" ").filter((tagName) => Boolean(tagName)) : []
if (selected) {
tags.push(tag.name)
} else {
const i = tags.indexOf(tag.name)
if (i >= 0) {
tags.splice(i, 1)
}
}
if (tags.length === 0) {
return { ...prevSearch, tags: undefined }
}
return { ...prevSearch, tags: tags.join(" ") }
},
})
},
[navigate],
)
function content() {
switch (status) {
case "pending":
return (
<p className="p-4 text-center">
Loading tags <LoadingSpinner />
</p>
)
case "success":
return (
<ul className="p-4 flex flex-row flex-wrap gap-2">
{tags.map((tag) => (
<TagFilterItem
key={tag.id}
tag={tag}
checked={filterByTags.has(tag.name)}
onChange={onTagFilterItemChange}
/>
))}
</ul>
)
case "error":
return <Message variant={MessageVariant.Error}>Failed to load tags!</Message>
}
}
return (
<div ref={ref} style={style} className="border w-full md:w-100">
<p className="bg-stone-900 dark:bg-stone-200 text-stone-300 dark:text-stone-800 text-center">TAGS</p>
{content()}
</div>
)
}
const TagFilterItem = memo(
({ tag, checked, onChange }: { tag: Tag; checked: boolean; onChange: (tag: Tag, selected: boolean) => void }) => {
const id = useId()
return (
<li key={tag.id} className="flex flex-row items-center space-x-1">
<input
id={id}
type="checkbox"
checked={checked}
onChange={(event) => {
onChange(tag, event.target.checked)
}}
/>
<label htmlFor={id}>#{tag.name}</label>
</li>
)
},
)
function LogOutButton() {
const logOutMutation = useLogOut()
const navigate = useNavigate()

View File

@@ -167,46 +167,43 @@ function _TagList({ ref, style, tags }: { tags: Tag[]; ref: React.Ref<HTMLDivEle
}
}, [shouldResetSelection])
useMnemonics(
{
ArrowUp: (event) => {
event.preventDefault()
if (selectedTag) {
const i = filteredTags.findIndex((tag) => tag.id === selectedTag.id)
if (i === 0) {
setSelectedTag(null)
} else if (i === -1) {
setSelectedTag(filteredTags[0])
} else {
setSelectedTag(filteredTags[i - 1])
}
} else {
setSelectedTag(filteredTags.at(-1) ?? null)
}
},
ArrowDown: (event) => {
event.preventDefault()
if (selectedTag) {
const i = filteredTags.findIndex((tag) => tag.id === selectedTag.id)
if (i === filteredTags.length - 1) {
setSelectedTag(null)
} else {
setSelectedTag(filteredTags[i + 1])
}
} else {
useMnemonics({
ArrowUp: (event) => {
event.preventDefault()
if (selectedTag) {
const i = filteredTags.findIndex((tag) => tag.id === selectedTag.id)
if (i === 0) {
setSelectedTag(null)
} else if (i === -1) {
setSelectedTag(filteredTags[0])
} else {
setSelectedTag(filteredTags[i - 1])
}
},
Enter: (event) => {
if (lastTag) {
event.preventDefault()
event.stopPropagation()
addTag(selectedTag)
}
},
} else {
setSelectedTag(filteredTags.at(-1) ?? null)
}
},
{ ignore: () => false },
)
ArrowDown: (event) => {
event.preventDefault()
if (selectedTag) {
const i = filteredTags.findIndex((tag) => tag.id === selectedTag.id)
if (i === filteredTags.length - 1) {
setSelectedTag(null)
} else {
setSelectedTag(filteredTags[i + 1])
}
} else {
setSelectedTag(filteredTags[0])
}
},
Enter: (event) => {
if (lastTag) {
event.preventDefault()
event.stopPropagation()
addTag(selectedTag)
}
},
})
function addTag(selectedTag: Tag | null | undefined) {
if (selectedTag) {

View File

@@ -0,0 +1,15 @@
import { useEffect } from "react"
function useDocumentEvent<TEvent extends keyof DocumentEventMap>(
type: TEvent,
listener: (this: Document, event: DocumentEventMap[TEvent]) => void,
) {
useEffect(() => {
document.addEventListener<TEvent>(type, listener)
return () => {
document.removeEventListener(type, listener)
}
}, [type, listener])
}
export { useDocumentEvent }

View File

@@ -1,12 +1,14 @@
import { useEffect } from "react"
const DONT_IGNORE = () => false
function useMnemonics(
mnemonicMap: Record<string, (event: KeyboardEvent) => void>,
{ ignore }: { ignore: (event: KeyboardEvent) => boolean },
{ ignore }: { ignore: (event: KeyboardEvent) => boolean } = { ignore: DONT_IGNORE },
) {
useEffect(() => {
function onKeyDown(event: KeyboardEvent) {
if (event.key === "Escape" || document.activeElement?.tagName !== "INPUT") {
if (!ignore(event)) {
mnemonicMap[event.key]?.(event)
}
}
@@ -14,7 +16,7 @@ function useMnemonics(
return () => {
document.removeEventListener("keydown", onKeyDown)
}
}, [mnemonicMap])
}, [mnemonicMap, ignore])
}
export { useMnemonics }