@allbluecn/web-app 0.4.21 → 0.5.0

package/src/components/notifications/notification-list.tsx

@@ -1,232 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-import { useCallback, useState } from 'react'
-import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
-import { useNavigate } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
-import { format } from 'date-fns'
-import { zhCN } from 'date-fns/locale'
-import { Bell, CreditCard, MessageSquare, Megaphone, ShieldCheck, Trash2, Users } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
-import { Button } from '@/components/ui/button'
-import { Skeleton } from '@/components/ui/skeleton'
-import { cn } from '@/lib/utils'
-import type { NotificationCategory } from '@allbluecn/shared'
-import {
-  deleteNotificationFn,
-  listNotificationsFn,
-  markAllNotificationsReadFn,
-  markNotificationReadFn,
-} from '@/server/serverFns/notifications'
-import {
-  NOTIFICATION_LIST_KEY,
-  NOTIFICATION_UNREAD_KEY,
-} from '@/hooks/use-notifications'
-
-export const CATEGORY_ICONS: Record<NotificationCategory, LucideIcon> & { all: LucideIcon } = {
-  all: Bell,
-  team: Users,
-  collaboration: MessageSquare,
-  system: Megaphone,
-  billing: CreditCard,
-  security: ShieldCheck,
-}
-
-const TABS: { key: 'all' | NotificationCategory; labelKey: string }[] = [
-  { key: 'all', labelKey: 'tabs.all' },
-  { key: 'team', labelKey: 'tabs.team' },
-  { key: 'collaboration', labelKey: 'tabs.collaboration' },
-  { key: 'system', labelKey: 'tabs.system' },
-  { key: 'billing', labelKey: 'tabs.billing' },
-  { key: 'security', labelKey: 'tabs.security' },
-]
-
-export interface NotificationListProps {
-  category?: NotificationCategory
-}
-
-export function NotificationList({ category }: NotificationListProps) {
-  const { t } = useTranslation('notifications')
-  const navigate = useNavigate()
-  const queryClient = useQueryClient()
-  const [activeTab, setActiveTab] = useState<'all' | NotificationCategory>(category ?? 'all')
-
-  const { data, isLoading, fetchNextPage, isFetchingNextPage, hasNextPage } = useInfiniteQuery({
-    queryKey: [...NOTIFICATION_LIST_KEY, activeTab === 'all' ? undefined : activeTab],
-    queryFn: async ({ pageParam }) => {
-      const base = activeTab === 'all' ? {} : { category: activeTab }
-      return listNotificationsFn({
-        data: pageParam ? { ...base, cursor: pageParam } : base,
-      })
-    },
-    initialPageParam: undefined as string | undefined,
-    getNextPageParam: (lastPage) =>
-      lastPage.hasMore ? lastPage.items[lastPage.items.length - 1].id : undefined,
-  })
-
-  const handleMarkRead = useCallback(
-    async (id: string) => {
-      await markNotificationReadFn({ data: { id } })
-      queryClient.invalidateQueries({ queryKey: NOTIFICATION_LIST_KEY })
-      queryClient.invalidateQueries({ queryKey: NOTIFICATION_UNREAD_KEY })
-    },
-    [queryClient]
-  )
-
-  const handleDelete = useCallback(
-    async (id: string, e: React.MouseEvent) => {
-      e.stopPropagation()
-      await deleteNotificationFn({ data: { id } })
-      queryClient.invalidateQueries({ queryKey: NOTIFICATION_LIST_KEY })
-      queryClient.invalidateQueries({ queryKey: NOTIFICATION_UNREAD_KEY })
-    },
-    [queryClient]
-  )
-
-  const handleMarkAll = useCallback(async () => {
-    await markAllNotificationsReadFn({ data: {} })
-    queryClient.invalidateQueries({ queryKey: NOTIFICATION_LIST_KEY })
-    queryClient.invalidateQueries({ queryKey: NOTIFICATION_UNREAD_KEY })
-  }, [queryClient])
-
-  const handleClickItem = useCallback(
-    (item: { id: string; link: string | null; readAt: string | null }) => {
-      if (!item.readAt) {
-        void handleMarkRead(item.id)
-      }
-      if (item.link) {
-        navigate({ to: item.link as never })
-      }
-    },
-    [handleMarkRead, navigate]
-  )
-
-  const formatRelativeTime = (createdAt: string) => {
-    const date = new Date(createdAt)
-    const now = new Date()
-    const diffMs = now.getTime() - date.getTime()
-    const diffMin = Math.floor(diffMs / 60000)
-    const diffHour = Math.floor(diffMs / 3600000)
-    const diffDay = Math.floor(diffMs / 86400000)
-
-    if (diffMin < 1) return t('relativeTime.justNow')
-    if (diffMin < 60) return t('relativeTime.minutesAgo', { count: diffMin })
-    if (diffHour < 24) return t('relativeTime.hoursAgo', { count: diffHour })
-    if (diffDay < 30) return t('relativeTime.daysAgo', { count: diffDay })
-    return format(date, 'MM/dd/yyyy HH:mm', { locale: zhCN })
-  }
-
-  if (isLoading) {
-    return (
-      <div className="flex flex-col gap-3">
-        {Array.from({ length: 5 }).map((_, i) => (
-          <div key={i} className="flex items-center gap-3 rounded-lg border p-3">
-            <Skeleton className="size-9 shrink-0 rounded-full" />
-            <div className="flex-1 space-y-2">
-              <Skeleton className="h-4 w-3/4" />
-              <Skeleton className="h-3 w-1/2" />
-            </div>
-          </div>
-        ))}
-      </div>
-    )
-  }
-
-  const items = data?.pages.flatMap((page) => page.items) ?? []
-  const hasMore = hasNextPage ?? false
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex items-center justify-between">
-        <div className="flex gap-1">
-          {TABS.map((tab) => {
-            const Icon = CATEGORY_ICONS[tab.key]
-            return (
-              <Button
-                key={tab.key}
-                variant={activeTab === tab.key ? 'secondary' : 'ghost'}
-                size="sm"
-                className="gap-1.5"
-                onClick={() => setActiveTab(tab.key)}
-              >
-                <Icon className="size-4" />
-                {t(tab.labelKey)}
-              </Button>
-            )
-          })}
-        </div>
-        {items.some((item) => !item.readAt) && (
-          <Button variant="ghost" size="sm" onClick={handleMarkAll}>
-            {t('actions.markAllRead')}
-          </Button>
-        )}
-      </div>
-
-      {items.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-12 text-center">
-          <Bell className="size-12 text-muted-foreground/40" />
-          <p className="mt-2 text-sm text-muted-foreground">
-            {activeTab === 'all' ? t('empty') : t('emptyFiltered')}
-          </p>
-        </div>
-      ) : (
-        <div className="flex flex-col gap-1">
-          {items.map((item) => {
-            const Icon = CATEGORY_ICONS[item.category]
-            const isUnread = !item.readAt
-            return (
-              <div
-                key={item.id}
-                className={cn(
-                  'group flex items-start gap-3 rounded-lg border p-3 transition-colors',
-                  isUnread ? 'bg-muted/30' : 'opacity-70',
-                  'hover:bg-muted/50 cursor-pointer'
-                )}
-                onClick={() => handleClickItem(item)}
-              >
-                <Avatar className="size-9 shrink-0">
-                  <AvatarFallback className="bg-primary/10 text-primary">
-                    <Icon className="size-4" />
-                  </AvatarFallback>
-                </Avatar>
-                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-                  <div className="flex items-center gap-2">
-                    {isUnread && <span className="size-2 shrink-0 rounded-full bg-primary" />}
-                    <span className={cn('text-sm font-medium', isUnread ? '' : 'text-muted-foreground')}>
-                      {item.title}
-                    </span>
-                    <span className="ml-auto shrink-0 text-xs text-muted-foreground">
-                      {formatRelativeTime(item.createdAt)}
-                    </span>
-                  </div>
-                  {item.body && (
-                    <span className="line-clamp-2 text-xs text-muted-foreground">{item.body}</span>
-                  )}
-                </div>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="size-7 shrink-0 opacity-0 group-hover:opacity-100"
-                  onClick={(e) => handleDelete(item.id, e)}
-                >
-                  <Trash2 className="size-3.5" />
-                </Button>
-              </div>
-            )
-          })}
-          {hasMore && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="mt-1 mx-auto"
-              onClick={() => void fetchNextPage()}
-              disabled={isFetchingNextPage}
-            >
-              {t('actions.loadMore')}
-            </Button>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/notifications/notification-preferences.tsx

@@ -1,156 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-import { useEffect, useState } from 'react'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { useTranslation } from 'react-i18next'
-import { toast } from 'sonner'
-import { useNotifications } from '@/hooks/use-notifications'
-import { getNotificationPreferencesFn, updateNotificationPreferencesFn } from '@/server/serverFns/notifications'
-import type { CategoryPreferences, NotificationCategory, NotificationPreferences } from '@allbluecn/shared'
-
-const CATEGORY_META: { key: NotificationCategory; labelKey: string; descKey: string }[] = [
-  { key: 'team', labelKey: 'preferences.categories.team', descKey: 'preferences.categories.teamDesc' },
-  { key: 'collaboration', labelKey: 'preferences.categories.collaboration', descKey: 'preferences.categories.collaborationDesc' },
-  { key: 'system', labelKey: 'preferences.categories.system', descKey: 'preferences.categories.systemDesc' },
-  { key: 'billing', labelKey: 'preferences.categories.billing', descKey: 'preferences.categories.billingDesc' },
-  { key: 'security', labelKey: 'preferences.categories.security', descKey: 'preferences.categories.securityDesc' },
-]
-
-export function NotificationPreferences() {
-  const { t } = useTranslation('notifications')
-  const queryClient = useQueryClient()
-  const { setUnreadCount } = useNotifications()
-
-  const { data: prefsData, isLoading } = useQuery({
-    queryKey: ['notifications', 'preferences'],
-    queryFn: () => getNotificationPreferencesFn({ data: {} }),
-  })
-
-  const [categories, setCategories] = useState<CategoryPreferences | null>(null)
-  const [dndEnabled, setDndEnabled] = useState(false)
-  const [dndStart, setDndStart] = useState('22:00')
-  const [dndEnd, setDndEnd] = useState('08:00')
-
-  useEffect(() => {
-    if (prefsData) {
-      setCategories(prefsData.categories)
-      setDndEnabled(prefsData.dndEnabled)
-      setDndStart(prefsData.dndStart)
-      setDndEnd(prefsData.dndEnd)
-    }
-  }, [prefsData])
-
-  const save = async () => {
-    if (!categories) return
-    await updateNotificationPreferencesFn({
-      data: {
-        categories,
-        dndEnabled,
-        dndStart,
-        dndEnd,
-      },
-    })
-    queryClient.invalidateQueries({ queryKey: ['notifications', 'preferences'] })
-    toast.success(t('preferences.saved'))
-  }
-
-  const toggleCategory = (key: NotificationCategory) => {
-    setCategories((prev) => (prev ? { ...prev, [key]: !prev[key] } : prev))
-  }
-
-  if (isLoading) {
-    return <div className="space-y-4">{Array.from({ length: 4 }).map((_, i) => <div key={i} className="h-16 rounded-lg border bg-muted/30" />)}</div>
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="space-y-3">
-        {CATEGORY_META.map((meta) => (
-          <div key={meta.key} className="flex items-center justify-between rounded-lg border p-4">
-            <div className="flex flex-col gap-0.5">
-              <span className="text-sm font-medium">{t(meta.labelKey)}</span>
-              <span className="text-xs text-muted-foreground">{t(meta.descKey)}</span>
-            </div>
-            <button
-              type="button"
-              role="switch"
-              aria-checked={categories?.[meta.key] ?? false}
-              className={
-                'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ' +
-                ((categories?.[meta.key] ?? false) ? 'bg-primary' : 'bg-input')
-              }
-              onClick={() => toggleCategory(meta.key)}
-            >
-              <span
-                className={
-                  'pointer-events-none block size-4 translate-x-0.5 rounded-full bg-background shadow ring-0 transition-transform ' +
-                  ((categories?.[meta.key] ?? false) ? 'translate-x-5' : '')
-                }
-              />
-            </button>
-          </div>
-        ))}
-      </div>
-
-      <div className="rounded-lg border p-4 space-y-4">
-        <div className="flex flex-col gap-0.5">
-          <span className="text-sm font-medium">{t('preferences.dnd.title')}</span>
-          <span className="text-xs text-muted-foreground">{t('preferences.dnd.desc')}</span>
-        </div>
-
-        <div className="flex items-center justify-between">
-          <span className="text-sm">{t('preferences.dnd.enabled')}</span>
-          <button
-            type="button"
-            role="switch"
-            aria-checked={dndEnabled}
-            className={
-              'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ' +
-              (dndEnabled ? 'bg-primary' : 'bg-input')
-            }
-            onClick={() => setDndEnabled(!dndEnabled)}
-          >
-            <span
-              className={
-                'pointer-events-none block size-4 translate-x-0.5 rounded-full bg-background shadow ring-0 transition-transform ' +
-                (dndEnabled ? 'translate-x-5' : '')
-              }
-            />
-          </button>
-        </div>
-
-        {dndEnabled && (
-          <div className="flex gap-4">
-            <div className="flex-1 space-y-1">
-              <label className="text-xs text-muted-foreground">{t('preferences.dnd.start')}</label>
-              <input
-                type="time"
-                value={dndStart}
-                onChange={(e) => setDndStart(e.target.value)}
-                className="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm"
-              />
-            </div>
-            <div className="flex-1 space-y-1">
-              <label className="text-xs text-muted-foreground">{t('preferences.dnd.end')}</label>
-              <input
-                type="time"
-                value={dndEnd}
-                onChange={(e) => setDndEnd(e.target.value)}
-                className="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm"
-              />
-            </div>
-          </div>
-        )}
-      </div>
-
-      <div className="flex justify-end">
-        <button
-          type="button"
-          onClick={save}
-          className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90"
-        >
-          {t('actions.save', { defaultValue: '保存' })}
-        </button>
-      </div>
-    </div>
-  )
-}

package/src/components/story/relation-badge.tsx

@@ -1,57 +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 * as React from "react";
-import { X } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { DEPENDENCY_COLORS, DEPENDENCY_ICONS, DEPENDENCY_LABELS } from "./constants";
-import type { DependencyType } from "./types";
-
-export interface RelationBadgeProps {
-  type: DependencyType;
-  title: string;
-  onRemove?: () => void;
-  className?: string;
-}
-
-export function RelationBadge({ type, title, onRemove, className }: RelationBadgeProps) {
-  const Icon = DEPENDENCY_ICONS[type];
-  const colors = DEPENDENCY_COLORS[type];
-
-  return (
-    <div
-      className={cn(
-        "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium",
-        colors.bg,
-        colors.text,
-        className
-      )}
-    >
-      <Icon className="h-3 w-3" />
-      <span className="max-w-[150px] truncate">{title}</span>
-      {onRemove && (
-        <button
-          type="button"
-          onClick={onRemove}
-          className="hover:opacity-70 transition-opacity"
-        >
-          <X className="h-3 w-3" />
-        </button>
-      )}
-    </div>
-  );
-}

package/src/components/story/relations/dependency-panel.tsx

@@ -1,190 +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 * as React from "react";
-import { Link } from "@tanstack/react-router";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Plus, X, ChevronDown } from "lucide-react";
-import { useServerFn } from "@tanstack/react-start"
-import { useTranslation } from "react-i18next";
-import { addDependencyFn, removeDependencyFn } from "@/server/serverFns/story";
-import { toast } from "sonner";
-import { StorySearchPopover } from "../search-popover";
-import { STATE_LABEL, STATE_COLOR, DEPENDENCY_TYPES, DEPENDENCY_LABELS } from "../constants";
-import type { DependencyGroup, DependencyType, DependencyItem } from "../types";
-
-type ServerDependencyType = "BLOCKS" | "BLOCKED_BY" | "RELATES_TO";
-
-function toServerType(type: DependencyType): ServerDependencyType {
-  return type === "blocks" ? "BLOCKS" : type === "blocked_by" ? "BLOCKED_BY" : "RELATES_TO";
-}
-
-export interface DependencyPanelProps {
-  storyId: string;
-  data: DependencyGroup;
-  onUpdate: (updates: Partial<DependencyGroup>) => void;
-}
-
-export function DependencyPanel({ storyId, data, onUpdate }: DependencyPanelProps) {
-  const { t } = useTranslation("story");
-  const [selectedType, setSelectedType] = React.useState<DependencyType>("blocks");
-  const [adding, setAdding] = React.useState(false);
-  const addDependency = useServerFn(addDependencyFn);
-  const removeDependency = useServerFn(removeDependencyFn);
-
-  const handleAddDependency = async (targetStoryId: string, story?: { id: string; title: string; identifier: string }) => {
-    try {
-      await addDependency({
-        data: {
-          sourceId: storyId,
-          targetId: targetStoryId,
-          type: toServerType(selectedType),
-        },
-      });
-      toast.success(t("relation.added"));
-
-      const groupKey = selectedType === "blocks" ? "blocking" : selectedType === "blocked_by" ? "blockedBy" : "relatesTo";
-      onUpdate({
-        [groupKey]: [
-          ...data[groupKey],
-          {
-            id: targetStoryId,
-            title: story?.title || t("relation.newTitle"),
-            status: "backlog",
-            type: selectedType,
-          },
-        ],
-      });
-      setAdding(false);
-    } catch (error: any) {
-      console.error(t("relation.addFailed"), error);
-      toast.error(error.message || t("relation.addFailed"));
-    }
-  };
-
-  const handleRemoveDependency = async (story: DependencyItem) => {
-    try {
-      const type = story.type;
-      const sourceId = storyId;
-      const targetId = story.id;
-
-      await removeDependency({ data: { sourceId, targetId, type: toServerType(type) } });
-      toast.success(t("relation.removed"));
-
-      const groupKey = type === "blocks" ? "blocking" : type === "blocked_by" ? "blockedBy" : "relatesTo";
-      onUpdate({
-        [groupKey]: data[groupKey].filter((d) => d.id !== story.id),
-      });
-    } catch (error: any) {
-      console.error(t("relation.removeFailed"), error);
-      toast.error(error.message || t("relation.removeFailed"));
-    }
-  };
-
-  const renderDependencySection = (
-    title: string,
-    groupKey: keyof DependencyGroup,
-    type: DependencyType
-  ) => {
-    const items = data[groupKey];
-
-    return (
-      <div key={groupKey}>
-        <p className="text-xs font-medium text-muted-foreground mb-2">
-          {title} ({items.length})
-        </p>
-        {items.length > 0 ? (
-          <div className="space-y-1">
-            {items.map((item) => (
-              <div key={item.id} className="group flex items-center gap-2 rounded-md border px-3 py-2">
-                <Link
-                  to="/stories/$storyId"
-                  params={{ storyId: item.id }}
-                  className="font-mono text-xs text-primary hover:underline"
-                >
-                  {item.id.slice(0, 8)}
-                </Link>
-                <span className="flex-1 truncate text-sm">{item.title}</span>
-                <Badge variant="outline" className={STATE_COLOR[item.status as keyof typeof STATE_COLOR]}>
-                  {t(STATE_LABEL[item.status as keyof typeof STATE_LABEL])}
-                </Badge>
-                <button
-                  onClick={() => handleRemoveDependency(item)}
-                  className="opacity-0 transition-opacity group-hover:opacity-100"
-                >
-                  <X className="size-3.5 text-muted-foreground hover:text-destructive" />
-                </button>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <p className="py-1 text-xs text-muted-foreground">{t("relation.none")}</p>
-        )}
-      </div>
-    );
-  };
-
-  return (
-    <div className="space-y-3 py-2">
-      {renderDependencySection(t("dependency.blocking"), "blocking", "blocks")}
-      {renderDependencySection(t("dependency.blocked_by"), "blockedBy", "blocked_by")}
-      {renderDependencySection(t("dependency.relatesTo"), "relatesTo", "relates_to")}
-
-      {adding ? (
-        <div className="flex items-center gap-2">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" size="sm">
-                {t(DEPENDENCY_LABELS[selectedType])}
-                <ChevronDown className="ml-1 size-3" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              {Object.values(DEPENDENCY_TYPES).map((type) => (
-                <DropdownMenuItem key={type} onClick={() => setSelectedType(type)}>
-                  {t(DEPENDENCY_LABELS[type])}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <StorySearchPopover
-            onSelect={handleAddDependency}
-            excludeIds={[storyId]}
-            trigger={
-              <Button variant="outline" size="sm">
-                <Plus className="mr-2 h-4 w-4" />
-                {t("relation.search")}
-              </Button>
-            }
-          />
-        </div>
-      ) : (
-        <Button variant="outline" size="sm" onClick={() => setAdding(true)}>
-          <Plus className="mr-2 h-4 w-4" />
-          {t("relation.add")}
-        </Button>
-      )}
-    </div>
-  );
-}