@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/tags/tag-color-classes.ts

@@ -1,61 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-export const TAG_COLOR_CLASSES = {
-  0: {
-    bg: "bg-blue-100 dark:bg-blue-900/30",
-    text: "text-blue-700 dark:text-blue-300",
-    border: "border-blue-200 dark:border-blue-700",
-  },
-  1: {
-    bg: "bg-emerald-100 dark:bg-emerald-900/30",
-    text: "text-emerald-700 dark:text-emerald-300",
-    border: "border-emerald-200 dark:border-emerald-700",
-  },
-  2: {
-    bg: "bg-violet-100 dark:bg-violet-900/30",
-    text: "text-violet-700 dark:text-violet-300",
-    border: "border-violet-200 dark:border-violet-700",
-  },
-  3: {
-    bg: "bg-amber-100 dark:bg-amber-900/30",
-    text: "text-amber-700 dark:text-amber-300",
-    border: "border-amber-200 dark:border-amber-700",
-  },
-  4: {
-    bg: "bg-rose-100 dark:bg-rose-900/30",
-    text: "text-rose-700 dark:text-rose-300",
-    border: "border-rose-200 dark:border-rose-700",
-  },
-  5: {
-    bg: "bg-cyan-100 dark:bg-cyan-900/30",
-    text: "text-cyan-700 dark:text-cyan-300",
-    border: "border-cyan-200 dark:border-cyan-700",
-  },
-  6: {
-    bg: "bg-orange-100 dark:bg-orange-900/30",
-    text: "text-orange-700 dark:text-orange-300",
-    border: "border-orange-200 dark:border-orange-700",
-  },
-  7: {
-    bg: "bg-pink-100 dark:bg-pink-900/30",
-    text: "text-pink-700 dark:text-pink-300",
-    border: "border-pink-200 dark:border-pink-700",
-  },
-} as const
-
-export type TagColorIndex = keyof typeof TAG_COLOR_CLASSES

package/src/components/tags/tag-color-picker.tsx

@@ -1,54 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-import { cn } from '@/lib/utils'
-import { TAG_COLOR_CLASSES, type TagColorIndex } from "./tag-color-classes"
-import { m } from "@/paraglide/messages.js";
-
-type TagColorPickerProps = {
-  value: number
-  onChange: (color: number) => void
-  size?: 'sm' | 'md'
-}
-
-export function TagColorPicker({ value, onChange, size = 'md' }: TagColorPickerProps) {
-  const indices: TagColorIndex[] = [0, 1, 2, 3, 4, 5, 6, 7]
-  const sz = size === 'sm' ? 'size-5' : 'size-7'
-
-  return (
-    <div className="flex flex-wrap gap-1.5">
-      {indices.map((i) => {
-        const c = TAG_COLOR_CLASSES[i]
-        const selected = value === i
-        return (
-          <button
-            key={i}
-            type="button"
-              aria-label={m.tags_colorPicker_selectColor({ color: i })}
-            onClick={() => onChange(i)}
-            className={cn(
-              sz,
-              'rounded-full border-2 transition-all',
-              c.bg,
-              c.border,
-              selected ? 'ring-2 ring-primary ring-offset-2 scale-110' : 'hover:scale-105'
-            )}
-          />
-        )
-      })}
-    </div>
-  )
-}

package/src/components/tags/tag-components-index.ts

@@ -1,23 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-export { TagBadge } from "./tag-badge"
-export { TagSelector } from "./tag-selector"
-export { TagManager } from "./tag-manager"
-export { TagColorPicker } from "./tag-color-picker"
-export { TAG_COLOR_CLASSES } from "./tag-color-classes"
-export type { TagColorIndex } from "./tag-color-classes"

package/src/components/tags/tag-manager.tsx

@@ -1,208 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import { useEffect, useRef, useState } from 'react'
-import { useLiveQuery } from '@tanstack/react-db'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import { ConfirmDialog } from '@/components/confirm-dialog'
-import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent } from '@/components/ui/empty'
-import { Plus, Trash2, Edit, GripVertical } from 'lucide-react'
-import { createTagFn, updateTagFn, deleteTagFn, reorderTagsFn } from "@/server/serverFns/tags"
-import { getTagsCollection } from "./tags-collection"
-import { getQueryClient } from '@/lib/query-client-seam'
-import { TagBadge } from "./tag-badge"
-import { TagColorPicker } from "./tag-color-picker"
-import { toast } from '@/components/ui/toast'
-import { m } from "@/paraglide/messages.js";
-import { toastError } from "@/lib/toast-error";
-
-type Tag = { id: string; name: string; color: number; sortOrder: number }
-
-function TagManagerContent() {
-  const { data: tags, status } = useLiveQuery(
-    (q) => q.from({ tag: getTagsCollection() })
-  )
-  const tagsList = (tags as unknown as Tag[]) ?? []
-  const [editing, setEditing] = useState<Tag | null>(null)
-  const [creating, setCreating] = useState(false)
-  const [deleting, setDeleting] = useState<Tag | null>(null)
-  const dragFrom = useRef<number | null>(null)
-
-  async function handleDrop(targetIndex: number) {
-    const from = dragFrom.current
-    dragFrom.current = null
-    if (from === null || from === targetIndex || tagsList.length === 0) return
-
-    const newTags = [...tagsList]
-    const [dragged] = newTags.splice(from, 1)
-    newTags.splice(targetIndex, 0, dragged)
-
-    try {
-      for (const [i, tag] of newTags.entries()) {
-        getTagsCollection().update(tag.id, (draft: any) => { draft.sortOrder = i * 1000 })
-      }
-      await reorderTagsFn({ data: { orderedIds: newTags.map((tag) => tag.id) } })
-    } catch {
-      toast.error(m.tags_sortFailed())
-    }
-  }
-
-  async function handleDelete() {
-    if (!deleting) return
-    try {
-      getTagsCollection().delete(deleting.id)
-      await deleteTagFn({ data: { id: deleting.id } })
-      toast.success(m.tags_deleted())
-      setDeleting(null)
-    } catch (e) {
-      toastError(e, m.tags_deleteFailed())
-    }
-  }
-
-  if (status === 'idle' && tagsList.length === 0) {
-    return (
-      <Empty className="border rounded-lg py-12">
-        <EmptyHeader>
-          <EmptyTitle>{m.tags_emptyTitle()}</EmptyTitle>
-          <EmptyDescription>{m.tags_emptyDesc()}</EmptyDescription>
-        </EmptyHeader>
-        <EmptyContent>
-          <Button onClick={() => setCreating(true)}>
-            <Plus className="size-4" /> {m.tags_createTag()}
-          </Button>
-        </EmptyContent>
-      </Empty>
-    )
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="flex justify-end">
-        <Button onClick={() => setCreating(true)}>
-          <Plus className="size-4" /> {m.tags_createTag()}
-        </Button>
-      </div>
-
-      <div className="space-y-1">
-        {tagsList.map((tag, i) => (
-          <div
-            key={tag.id}
-            draggable
-            onDragStart={() => { dragFrom.current = i }}
-            onDragOver={(e) => e.preventDefault()}
-            onDrop={() => handleDrop(i)}
-            onDragEnd={() => { dragFrom.current = null }}
-            className="flex items-center gap-3 rounded-md border bg-card px-4 py-2.5 cursor-grab active:cursor-grabbing"
-          >
-            <GripVertical className="size-4 text-muted-foreground/40" />
-            <TagBadge tag={tag} />
-            <span className="flex-1" />
-            <Button variant="ghost" size="icon" onClick={() => setEditing(tag)} aria-label={m.tags_editTag()}>
-              <Edit className="size-4" />
-            </Button>
-            <Button variant="ghost" size="icon" onClick={() => setDeleting(tag)} aria-label={m.tags_delete()}>
-              <Trash2 className="size-4" />
-            </Button>
-          </div>
-        ))}
-      </div>
-
-      {(creating || editing) && (
-        <TagEditDialog
-          tag={editing}
-          onClose={() => { setCreating(false); setEditing(null) }}
-          onSuccess={() => { setCreating(false); setEditing(null) }}
-        />
-      )}
-
-      <ConfirmDialog
-        open={!!deleting}
-        onOpenChange={(o) => !o && setDeleting(null)}
-        title={m.tags_confirmDeleteTitle({ name: deleting?.name ?? "" })}
-        description={m.tags_confirmDeleteDesc()}
-        cancelLabel={m.tags_cancel()}
-        confirmLabel={m.tags_delete()}
-        onConfirm={handleDelete}
-      />
-    </div>
-  )
-}
-
-export function TagManager() {
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  return mounted ? <TagManagerContent /> : null
-}
-
-function TagEditDialog({ tag, onClose, onSuccess }: { tag: Tag | null; onClose: () => void; onSuccess: () => void }) {
-  const [name, setName] = useState(tag?.name ?? '')
-  const [color, setColor] = useState(tag?.color ?? 0)
-  const [saving, setSaving] = useState(false)
-  const [error, setError] = useState('')
-
-  async function handleSave() {
-    if (!name.trim()) { setError(m.tags_nameRequired()); return }
-    setSaving(true)
-    setError('')
-    try {
-      if (tag) {
-        await updateTagFn({ data: { id: tag.id, name: name.trim(), color } })
-      } else {
-        await createTagFn({ data: { name: name.trim() } })
-      }
-      await getQueryClient().invalidateQueries({ queryKey: ['tags'] })
-      toast.success(tag ? m.tags_updated() : m.tags_created())
-      onSuccess()
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : m.tags_saveFailed()
-      setError(msg === 'TAG_NAME_CONFLICT' ? m.tags_nameConflict() : msg)
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  return (
-    <Dialog open onOpenChange={(o) => !o && onClose()}>
-      <DialogContent className="sm:max-w-100">
-        <DialogHeader>
-          <DialogTitle>{tag ? m.tags_editTag() : m.tags_createTag()}</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-4">
-          <div>
-            <label className="text-sm font-medium">{m.tags_nameLabel()}</label>
-            <Input autoFocus value={name} onChange={(e) => setName(e.target.value)} maxLength={30} />
-          </div>
-          <div>
-            <label className="text-sm font-medium">{m.tags_colorLabel()}</label>
-            <div className="mt-2"><TagColorPicker value={color} onChange={setColor} /></div>
-          </div>
-          {error && <p className="text-sm text-destructive">{error}</p>}
-        </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={onClose}>{m.tags_cancel()}</Button>
-          <Button onClick={handleSave} disabled={saving}>{saving ? m.tags_saving() : m.tags_save()}</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}

package/src/components/tags/tag-selector.tsx

@@ -1,164 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import { useEffect, useState } from 'react'
-import { useLiveQuery } from '@tanstack/react-db'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { Input } from '@/components/ui/input'
-import { Plus, Tag, X } from 'lucide-react'
-import { createTagFn } from "@/server/serverFns/tags"
-import { getTagsCollection } from "./tags-collection"
-import { TagBadge } from "./tag-badge"
-import { cn } from '@/lib/utils'
-import { m } from "@/paraglide/messages.js";
-
-type Tag = { id: string; name: string; color: number }
-type TagSelectorProps = {
-  value: string[]
-  onChange: (tagIds: string[]) => void
-  placeholder?: string
-  className?: string
-}
-
-function TagSelectorInner({
-  value,
-  onChange,
-  placeholder,
-  className,
-}: TagSelectorProps) {
-  const resolvedPlaceholder = placeholder ?? m.tags_selector_placeholder()
-  const [open, setOpen] = useState(false)
-  const [search, setSearch] = useState('')
-  const [creating, setCreating] = useState(false)
-
-  const { data: allTags } = useLiveQuery(
-    (q) => q.from({ tag: getTagsCollection() })
-  )
-
-  const tagsList = (allTags as unknown as Tag[]) ?? []
-  const selected = tagsList.filter((t) => value.includes(t.id))
-  const filtered = tagsList.filter((t) => t.name.toLowerCase().includes(search.toLowerCase()))
-
-  function toggle(id: string) {
-    onChange(value.includes(id) ? value.filter((x) => x !== id) : [...value, id])
-  }
-
-  async function handleCreate() {
-    const name = search.trim()
-    if (!name) return
-    setCreating(true)
-    try {
-      const tag = await createTagFn({ data: { name } })
-      getTagsCollection().insert(tag)
-      onChange([...value, tag.id])
-      setSearch('')
-    } finally {
-      setCreating(false)
-    }
-  }
-
-  const hasSelected = selected.length > 0
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger render={<button type="button"
-          className={cn(
-            'inline-flex items-center gap-2.5 rounded-xl bg-background px-2 py-0.5 text-xs hover:bg-muted/30',
-            hasSelected ? 'border-0' : 'border border-dashed border-input ',
-            className
-          )} />}>
-          {hasSelected ? (
-            selected.map((t) => (
-              <TagBadge key={t.id} tag={t} icon />
-            ))
-          ) : (
-            <><Tag className="size-3 mr-1 shrink-0 text-muted-foreground" /><span className="text-muted-foreground ">{resolvedPlaceholder}</span></>
-          )}
-        </PopoverTrigger>
-      <PopoverContent className="w-72 p-2" align="start">
-        <Input
-          autoFocus
-          placeholder={m.tags_selector_searchPlaceholder()}
-          className='text-xs md:text-xs'
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' && search.trim() && filtered.length === 0) {
-              e.preventDefault()
-              handleCreate()
-            }
-          }}
-        />
-        <div className="mt-2 max-h-60 overflow-y-auto space-y-0.5">
-          {filtered.length === 0 && search.trim() && (
-            <button
-              type="button"
-              onClick={handleCreate}
-              disabled={creating}
-              className="w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-muted"
-            >
-              <Plus className="size-3.5" />
-              {m.tags_selector_createTag({ name: search.trim() })}
-            </button>
-          )}
-          {filtered.map((t) => {
-            const checked = value.includes(t.id)
-            return (
-              <button
-                key={t.id}
-                type="button"
-                onClick={() => toggle(t.id)}
-                className="w-full flex items-center justify-between px-2 py-1.5 text-sm rounded hover:bg-muted"
-              >
-                <TagBadge tag={t} />
-                {checked && (
-                  <span className="text-muted-foreground hover:text-destructive">
-                    <X className="size-3.5" />
-                  </span>
-                )}
-              </button>
-            )
-          })}
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-export function TagSelector({
-  value,
-  onChange,
-  placeholder,
-  className,
-}: TagSelectorProps) {
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  if (!mounted) return null
-
-  return (
-    <TagSelectorInner
-      value={value}
-      onChange={onChange}
-      placeholder={placeholder}
-      className={className}
-    />
-  )
-}