@allbluecn/web-app 0.3.0

package/src/components/story/story-panel-header.tsx

@@ -0,0 +1,322 @@
+// 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 { useState } from "react";
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "@tanstack/react-router";
+import {
+  ArrowLeft,
+  ArrowRight,
+  Archive,
+  ChevronDown,
+  ChevronUp,
+  Link2,
+  Maximize,
+  Maximize2,
+  MoreHorizontal,
+  PanelLeft,
+  Trash2,
+  X,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { Separator } from "@/components/ui/separator";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { toast } from "sonner";
+import { NameConfirmDialog } from "@/components/shared/name-confirm-dialog";
+import { archiveStoryFn, deleteStoryFn } from "@/server/serverFns/story";
+import { TransferStoryPopover } from "./transfer-story-popover";
+
+export type PeekMode = "side-peek" | "modal" | "full-screen";
+
+export const PEEK_MODE_OPTIONS: { value: PeekMode; label: string; icon: typeof PanelLeft }[] = [
+  { value: "side-peek", label: "panel.mode.sidePeek", icon: PanelLeft },
+  { value: "modal", label: "panel.mode.modal", icon: Maximize },
+  { value: "full-screen", label: "panel.mode.fullScreen", icon: Maximize2 },
+];
+
+export type PanelCloseType = "collapse" | "close" | "back";
+
+export interface StoryPanelHeaderProps {
+  closeType?: PanelCloseType;
+  onClose?: () => void;
+  backTo?: string;
+  title?: ReactNode;
+  onFullscreen?: () => void;
+  mode?: PeekMode;
+  onModeChange?: (mode: PeekMode) => void;
+  onPrevious?: () => void;
+  onNext?: () => void;
+  prevDisabled?: boolean;
+  nextDisabled?: boolean;
+  storyId?: string;
+  identifier?: string;
+  canArchive?: boolean;
+  onArchived?: () => void;
+  onDeleted?: () => void;
+  projects?: { id: string; name: string; displayId: string | null; icon: string }[];
+  currentProjectId?: string | null;
+  onTransferred?: () => void;
+  hideFullscreen?: boolean;
+  hideLayoutSwitcher?: boolean;
+  hidePrevNext?: boolean;
+  hideCopyLink?: boolean;
+  hideMoreMenu?: boolean;
+  hideTransfer?: boolean;
+}
+
+export function StoryPanelHeader({
+  closeType = "collapse",
+  onClose,
+  backTo,
+  title,
+  onFullscreen,
+  mode,
+  onModeChange,
+  onPrevious,
+  onNext,
+  prevDisabled = false,
+  nextDisabled = false,
+  storyId,
+  identifier,
+  canArchive = false,
+  onArchived,
+  onDeleted,
+  projects,
+  currentProjectId,
+  onTransferred,
+  hideFullscreen = false,
+  hideLayoutSwitcher = false,
+  hidePrevNext = false,
+  hideCopyLink = false,
+  hideMoreMenu = false,
+  hideTransfer = false,
+}: StoryPanelHeaderProps) {
+  const { t } = useTranslation("story");
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [archiveLoading, setArchiveLoading] = useState(false);
+
+  const currentMode = PEEK_MODE_OPTIONS.find((o) => o.value === mode) ?? PEEK_MODE_OPTIONS[0];
+  const CurrentModeIcon = currentMode.icon;
+
+  const closeButton =
+    closeType === "back" ? (
+      <Button variant="ghost" size="icon" className="size-8" aria-label={t("panel.back")} onClick={onClose}>
+        <ArrowLeft className="size-4" />
+      </Button>
+    ) : (
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-8"
+        onClick={onClose}
+        aria-label={closeType === "collapse" ? t("panel.collapse") : t("panel.close")}
+      >
+        {closeType === "collapse" ? <ArrowRight className="size-4" /> : <X className="size-4" />}
+      </Button>
+    );
+
+  const closeButtonWithLink = backTo ? <Link to={backTo}>{closeButton}</Link> : closeButton;
+
+  const closeTooltip = closeType === "back" ? t("panel.back") : closeType === "collapse" ? t("panel.collapse") : t("panel.close");
+
+  const handleCopyLink = async () => {
+    const url = storyId ? `${window.location.origin}/stories/${storyId}` : window.location.href;
+    try {
+      await navigator.clipboard.writeText(url);
+      toast.success(t("panel.linkCopied"));
+    } catch {
+      toast.error(t("panel.copyFailed"));
+    }
+  };
+
+  const handleArchive = async () => {
+    if (!storyId || !onArchived) return;
+    setArchiveLoading(true);
+    try {
+      await archiveStoryFn({ data: { storyId } });
+      toast.success(t("panel.archived"));
+      onArchived();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : t("panel.archiveFailed"));
+    } finally {
+      setArchiveLoading(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!storyId || !onDeleted) return;
+    await deleteStoryFn({ data: { storyId } });
+    toast.success(t("panel.deleted"));
+    onDeleted();
+  };
+
+  return (
+    <>
+      <div className="flex h-11 shrink-0 items-center gap-1.5 mt-2 px-3">
+        <Tooltip>
+          <TooltipTrigger asChild>{closeButtonWithLink}</TooltipTrigger>
+          <TooltipContent>{closeTooltip}</TooltipContent>
+        </Tooltip>
+
+        {title}
+
+        {!hideFullscreen && onFullscreen && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon" className="size-8" onClick={onFullscreen} aria-label={t("panel.fullscreen")}>
+                <Maximize2 className="size-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("panel.fullscreen")}</TooltipContent>
+          </Tooltip>
+        )}
+
+        {!hideLayoutSwitcher && mode && onModeChange && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="size-8" aria-label={t("panel.switchLayout")}>
+                <CurrentModeIcon className="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="center" className="w-40" sideOffset={4}>
+              <DropdownMenuRadioGroup value={mode} onValueChange={(v) => onModeChange(v as PeekMode)}>
+                {PEEK_MODE_OPTIONS.map((o) => (
+                  <DropdownMenuRadioItem key={o.value} value={o.value}>
+                    <o.icon className="mr-2 size-4" />
+                    {t(o.label)}
+                  </DropdownMenuRadioItem>
+                ))}
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+
+        {!hidePrevNext && (onPrevious || onNext) && (
+          <>
+            <Separator orientation="vertical" data-vertical className="h-4 data-vertical:self-center mx-1" />
+            {onPrevious && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-8"
+                    onClick={onPrevious}
+                    disabled={prevDisabled}
+                    aria-label={t("panel.previousStory")}
+                  >
+                    <ChevronUp className="size-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{t("panel.previousStory")}</TooltipContent>
+              </Tooltip>
+            )}
+            {onNext && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-8"
+                    onClick={onNext}
+                    disabled={nextDisabled}
+                    aria-label={t("panel.nextStory")}
+                  >
+                    <ChevronDown className="size-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{t("panel.nextStory")}</TooltipContent>
+              </Tooltip>
+            )}
+          </>
+        )}
+
+        <div className="ml-auto flex items-center gap-1.5">
+          {!hideTransfer && projects && onTransferred && storyId && (
+            <TransferStoryPopover
+              storyId={storyId}
+              currentProjectId={currentProjectId ?? null}
+              projects={projects}
+              onTransferred={onTransferred}
+            />
+          )}
+
+          {!hideCopyLink && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon" className="size-8" onClick={handleCopyLink} aria-label={t("panel.copyLink")}>
+                  <Link2 className="size-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{t("panel.copyLink")}</TooltipContent>
+            </Tooltip>
+          )}
+
+          {!hideMoreMenu && storyId && (onArchived || onDeleted) && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="size-8" aria-label={t("panel.more")}>
+                  <MoreHorizontal className="size-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-40" sideOffset={4}>
+                {onArchived && (
+                  <>
+                    <DropdownMenuItem onClick={handleArchive} disabled={!canArchive || archiveLoading}>
+                      <Archive className="mr-2 size-4" />
+                      {t("panel.archive")}
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                  </>
+                )}
+                {onDeleted && (
+                  <DropdownMenuItem
+                    onClick={() => setDeleteDialogOpen(true)}
+                    className="text-destructive focus:text-destructive"
+                  >
+                    <Trash2 className="mr-2 size-4" />
+                    {t("panel.delete")}
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+      </div>
+
+      <NameConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        title={t("panel.deleteTitle")}
+        description={t("panel.deleteDescription")}
+        confirmText={t("panel.delete")}
+        expectedName={identifier ?? storyId ?? ""}
+        onConfirm={handleDelete}
+      />
+    </>
+  );
+}

package/src/components/story/story-toolbar.tsx

@@ -0,0 +1,283 @@
+// 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 { useTranslation } from "react-i18next";
+import { Plus, Search, Trees, Sprout, ChevronRight, ChevronDown, Archive, MoreHorizontal, MessagesSquare, Upload, Download } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
+import { ViewSwitcher, type StoryView } from "./views/view-switcher";
+import { ViewSelectorButton } from "./views/view-selector-button";
+import type { SavedView } from "./views/view-types";
+import { DisplayDropdown } from "./display/display-dropdown";
+import type { DisplayOptions } from "./display/types";
+import { StoryFilterToggle, StoryFilterRow, AppliedFilters, type FilterCondition, type FilterKey } from "./filters";
+import { ProjectIconDisplay } from "@/components/project/project-icon";
+import { CreateProjectDialog } from "@/components/project/create-project-dialog";
+import type { UserBrief } from "./types";
+
+export interface StoryFilters {
+  projectId?: string;
+  search?: string;
+}
+
+interface StoryToolbarProps {
+  filters: StoryFilters;
+  filterConditions: FilterCondition[];
+  onFilterChange: (filters: StoryFilters) => void;
+  onFilterConditionsChange: (conditions: FilterCondition[]) => void;
+  projects: { id: string; name: string; displayId: string | null; icon: string }[];
+  users: UserBrief[];
+  labels: { id: string; name: string; color: string }[];
+  total: number;
+  onCreateClick: () => void;
+  onArchiveAll?: () => void;
+  view: StoryView;
+  onViewChange: (view: StoryView) => void;
+  displayFilters: DisplayOptions;
+  onDisplayOptionsChange: (patch: Partial<DisplayOptions>) => void;
+  views: SavedView[];
+  activeViewId: string;
+  onApplyView: (view: SavedView) => void;
+  onEditView: (view: SavedView) => void;
+  onDeleteView: (view: SavedView) => void;
+  onAddView: () => void;
+  onSaveAsView: () => void;
+  onProjectCreated?: () => void;
+}
+
+export function StoryToolbar({ filters, filterConditions, onFilterChange, onFilterConditionsChange, projects, users, labels, total, onCreateClick, onArchiveAll, view, onViewChange, displayFilters, onDisplayOptionsChange, views, activeViewId, onApplyView, onEditView, onDeleteView, onAddView, onSaveAsView, onProjectCreated }: StoryToolbarProps) {
+  const { t } = useTranslation("story");
+  const [localSearch, setLocalSearch] = useState(filters.search ?? "");
+  const [projectOpen, setProjectOpen] = useState(false);
+  const [projectHover, setProjectHover] = useState(false);
+  const [filterVisible, setFilterVisible] = useState(false);
+  const [createProjectOpen, setCreateProjectOpen] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    setLocalSearch(filters.search ?? "");
+  }, [filters.search]);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  const handleSearchChange = (value: string) => {
+    setLocalSearch(value);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      onFilterChange({ ...filters, search: value || undefined });
+    }, 300);
+  };
+
+  const handleFilterToggle = () => {
+    setFilterVisible(!filterVisible);
+  };
+
+  const handleRemoveFilterCondition = (id: string) => {
+    onFilterConditionsChange(filterConditions.filter((c) => c.id !== id));
+  };
+
+  const handleClearAllFilters = () => {
+    onFilterConditionsChange([]);
+  };
+
+  const handleArchiveAll = () => {
+    onArchiveAll?.();
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-2">
+        <Popover open={projectOpen} onOpenChange={setProjectOpen}>
+          <PopoverTrigger asChild>
+             <Button variant="outline" size="sm" className="h-8 gap-1.5 border-0 px-2.5 text-sm font-medium shrink-0 hover:bg-muted" onMouseEnter={() => setProjectHover(true)} onMouseLeave={() => setProjectHover(false)}>
+               {filters.projectId === "__archived__" ? (
+                 <Archive className="size-4 text-muted-foreground" />
+               ) : filters.projectId ? (
+                 <ProjectIconDisplay name={projects.find((p) => p.id === filters.projectId)?.icon ?? ""} size={16} className="text-muted-foreground" />
+               ) : (
+                 <Trees className="size-4 text-muted-foreground" />
+               )}
+               {filters.projectId === "__archived__" ? t("toolbar.archived") : filters.projectId ? (projects.find((p) => p.id === filters.projectId)?.name ?? t("toolbar.project")) : t("toolbar.allProjects")}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-56 p-1" align="start">
+            <div className="[&>button+button]:mt-1">
+            <button
+              type="button"
+              onClick={() => { onFilterChange({ ...filters, projectId: undefined }); setProjectOpen(false); }}
+              className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-sm ${!filters.projectId ? "bg-accent font-medium" : "hover:bg-muted"}`}
+            >
+              <span className="flex items-center gap-2">
+                <Trees className="size-4 text-muted-foreground" />
+                {t("toolbar.allProjects")}
+              </span>
+              <span className="shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-[10px] font-normal text-muted-foreground">ALL</span>
+             </button>
+             {projects.map((p) => (
+               <button
+                 key={p.id}
+                 type="button"
+                 onClick={() => { onFilterChange({ ...filters, projectId: p.id }); setProjectOpen(false); }}
+                 className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-sm ${filters.projectId === p.id ? "bg-accent font-medium" : "hover:bg-muted"}`}
+               >
+                 <span className="flex min-w-0 items-center gap-2">
+                   <ProjectIconDisplay name={p.icon} size={16} className="text-muted-foreground" />
+                   <span className="truncate">{p.name}</span>
+                 </span>
+                 {p.displayId && (
+                   <span className="shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-[10px] font-normal text-muted-foreground">{p.displayId}</span>
+                 )}
+               </button>
+             ))}
+             </div>
+              <Separator orientation="horizontal" data-horizontal className="-my-1.5" />
+             <button
+               type="button"
+               onClick={() => { onFilterChange({ ...filters, projectId: "__archived__" }); setProjectOpen(false); }}
+               className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-sm ${filters.projectId === "__archived__" ? "bg-accent font-medium" : "hover:bg-muted"}`}
+             >
+<span className="flex items-center gap-2">
+                  <Archive className="size-4 text-muted-foreground" />
+                  {t("toolbar.archived")}
+                </span>
+             </button>
+             <Separator orientation="horizontal" data-horizontal className="-my-1.5" />
+            <button
+              type="button"
+              onClick={() => { setProjectOpen(false); setCreateProjectOpen(true); }}
+              className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground"
+            >
+              <Plus className="size-4" />
+              {t("toolbar.createProject")}
+            </button>
+          </PopoverContent>
+        </Popover>
+        {projectHover || projectOpen ? <ChevronDown className="size-4 text-muted-foreground" /> : <ChevronRight className="size-4 text-muted-foreground" />}
+        <ViewSelectorButton
+          views={views}
+          activeViewId={activeViewId}
+          projects={projects}
+          onApplyView={onApplyView}
+          onAddView={onAddView}
+        />
+
+        <span className="shrink-0 text-xs text-muted-foreground">{t("toolbar.total", { count: total })}</span>
+
+        <div className="relative flex flex-[1_0_auto] justify-center">
+          <div className="relative w-60">
+            <Search className="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground pointer-events-none" />
+            <Input
+              value={localSearch}
+              onChange={(e) => handleSearchChange(e.target.value)}
+              placeholder={t("toolbar.searchPlaceholder")}
+              className="h-8 w-full pl-8"
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          <StoryFilterToggle
+            visible={filterVisible}
+            conditions={filterConditions}
+            onToggle={handleFilterToggle}
+          />
+          <DisplayDropdown
+            filters={displayFilters}
+            onChange={onDisplayOptionsChange}
+            layout={view}
+            projectId={filters.projectId}
+            projects={projects}
+            views={views}
+            activeViewId={activeViewId}
+            onApplyView={onApplyView}
+            onEditView={onEditView}
+            onDeleteView={onDeleteView}
+            onAddView={onAddView}
+          />
+          <ViewSwitcher view={view} onViewChange={onViewChange} />
+          <Button size="sm" onClick={onCreateClick} className="h-8">
+            <Plus className="size-4" /> {t("toolbar.addStory")}
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="icon" className="h-8 w-8">
+                <MoreHorizontal className="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-44 space-y-1.5 py-1.5">
+              <DropdownMenuItem>
+                <MessagesSquare className="size-4 mr-2 h-6" />
+                {t("toolbar.collect")}
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Upload className="size-4 mr-2 h-6" />
+                {t("toolbar.import")}
+              </DropdownMenuItem>
+              {/* <Separator orientation="horizontal" data-horizontal className="-my-1" /> */}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <Download className="size-4 mr-2 h-6" />
+                {t("toolbar.export")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      {filterVisible && (
+        <StoryFilterRow
+          conditions={filterConditions}
+          onChange={onFilterConditionsChange}
+          onClearAll={handleClearAllFilters}
+          onCancel={() => { onFilterConditionsChange([]); setFilterVisible(false); }}
+          onSaveAsView={onSaveAsView}
+          users={users}
+          labels={labels}
+        />
+      )}
+
+      <AppliedFilters
+        conditions={filterConditions}
+        onRemove={handleRemoveFilterCondition}
+        onClearAll={handleClearAllFilters}
+        onArchiveAll={handleArchiveAll}
+        users={users}
+        labels={labels}
+      />
+
+      <CreateProjectDialog
+        open={createProjectOpen}
+        onOpenChange={setCreateProjectOpen}
+        onSuccess={onProjectCreated}
+      />
+    </div>
+  );
+}