mirror of
https://github.com/xCyanGrizzly/DragonsStash.git
synced 2026-05-11 14:21:15 +00:00
feat: add package grouping UI with expand/collapse, selection, and manual grouping
- Update STL page to use listDisplayItems query for mixed package/group display - Rewrite package-columns to handle StlTableRow union type (group headers + packages) - Add group expand/collapse with chevron toggle and indented member rows - Add checkbox selection with "Group N Selected" toolbar button and dialog - Add inline group actions: rename, dissolve, send all, remove member - Add clickable group preview thumbnail with file upload for preview images - Extend DataTable with optional rowClassName prop for group row styling Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { type ColumnDef } from "@tanstack/react-table";
|
||||
import { FileArchive, Eye } from "lucide-react";
|
||||
import { FileArchive, Eye, ChevronRight, Layers, Ungroup, Send, ImagePlus } from "lucide-react";
|
||||
import { DataTableColumnHeader } from "@/components/shared/data-table-column-header";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { SendToTelegramButton } from "./send-to-telegram-button";
|
||||
|
||||
export interface PackageRow {
|
||||
@@ -25,6 +26,34 @@ export interface PackageRow {
|
||||
};
|
||||
matchedFileCount: number;
|
||||
matchedByContent: boolean;
|
||||
packageGroupId?: string | null;
|
||||
}
|
||||
|
||||
export interface GroupHeaderRow {
|
||||
_rowType: "group";
|
||||
id: string;
|
||||
name: string;
|
||||
hasPreview: boolean;
|
||||
totalFileSize: string;
|
||||
totalFileCount: number;
|
||||
packageCount: number;
|
||||
combinedTags: string[];
|
||||
archiveTypes: ("ZIP" | "RAR" | "SEVEN_Z" | "DOCUMENT")[];
|
||||
latestIndexedAt: string;
|
||||
sourceChannel: { id: string; title: string };
|
||||
_expanded: boolean;
|
||||
}
|
||||
|
||||
export interface PackageTableRow extends PackageRow {
|
||||
_rowType: "package";
|
||||
_groupId: string | null;
|
||||
_isGroupMember: boolean;
|
||||
}
|
||||
|
||||
export type StlTableRow = GroupHeaderRow | PackageTableRow;
|
||||
|
||||
function isGroupRow(row: StlTableRow): row is GroupHeaderRow {
|
||||
return row._rowType === "group";
|
||||
}
|
||||
|
||||
interface PackageColumnsProps {
|
||||
@@ -32,9 +61,17 @@ interface PackageColumnsProps {
|
||||
onSetCreator: (pkg: PackageRow) => void;
|
||||
onSetTags: (pkg: PackageRow) => void;
|
||||
searchTerm: string;
|
||||
onToggleGroup: (groupId: string) => void;
|
||||
onRenameGroup: (groupId: string, currentName: string) => void;
|
||||
onDissolveGroup: (groupId: string) => void;
|
||||
onSendAllInGroup: (groupId: string) => void;
|
||||
onRemoveFromGroup: (packageId: string) => void;
|
||||
onGroupPreviewUpload: (groupId: string) => void;
|
||||
selectedPackages: Set<string>;
|
||||
onToggleSelect: (packageId: string) => void;
|
||||
}
|
||||
|
||||
function formatBytes(bytesStr: string): string {
|
||||
export function formatBytes(bytesStr: string): string {
|
||||
const bytes = Number(bytesStr);
|
||||
if (bytes === 0) return "0 B";
|
||||
const k = 1024;
|
||||
@@ -61,107 +98,254 @@ function PreviewCell({ pkg }: { pkg: PackageRow }) {
|
||||
);
|
||||
}
|
||||
|
||||
function GroupPreviewCell({
|
||||
group,
|
||||
onUpload,
|
||||
}: {
|
||||
group: GroupHeaderRow;
|
||||
onUpload: (groupId: string) => void;
|
||||
}) {
|
||||
if (group.hasPreview) {
|
||||
return (
|
||||
<button
|
||||
className="relative group/preview cursor-pointer"
|
||||
onClick={() => onUpload(group.id)}
|
||||
title="Click to change preview image"
|
||||
>
|
||||
<img
|
||||
src={`/api/groups/${group.id}/preview`}
|
||||
alt=""
|
||||
className="h-9 w-9 rounded-md object-cover bg-muted"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center rounded-md bg-black/50 opacity-0 group-hover/preview:opacity-100 transition-opacity">
|
||||
<ImagePlus className="h-3.5 w-3.5 text-white" />
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<button
|
||||
className="flex h-9 w-9 items-center justify-center rounded-md bg-muted hover:bg-muted/80 transition-colors cursor-pointer"
|
||||
onClick={() => onUpload(group.id)}
|
||||
title="Click to add preview image"
|
||||
>
|
||||
<Layers className="h-4 w-4 text-muted-foreground" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function getPackageColumns({
|
||||
onViewFiles,
|
||||
onSetCreator,
|
||||
onSetTags,
|
||||
searchTerm,
|
||||
}: PackageColumnsProps): ColumnDef<PackageRow, unknown>[] {
|
||||
onToggleGroup,
|
||||
onRenameGroup,
|
||||
onDissolveGroup,
|
||||
onSendAllInGroup,
|
||||
onRemoveFromGroup,
|
||||
onGroupPreviewUpload,
|
||||
selectedPackages,
|
||||
onToggleSelect,
|
||||
}: PackageColumnsProps): ColumnDef<StlTableRow, unknown>[] {
|
||||
return [
|
||||
{
|
||||
id: "select",
|
||||
header: "",
|
||||
cell: ({ row }) => {
|
||||
const data = row.original;
|
||||
if (isGroupRow(data)) return null;
|
||||
return (
|
||||
<Checkbox
|
||||
checked={selectedPackages.has(data.id)}
|
||||
onCheckedChange={() => onToggleSelect(data.id)}
|
||||
aria-label="Select package"
|
||||
className="translate-y-[2px]"
|
||||
/>
|
||||
);
|
||||
},
|
||||
enableHiding: false,
|
||||
enableSorting: false,
|
||||
size: 32,
|
||||
},
|
||||
{
|
||||
id: "preview",
|
||||
header: "",
|
||||
cell: ({ row }) => <PreviewCell pkg={row.original} />,
|
||||
cell: ({ row }) => {
|
||||
const data = row.original;
|
||||
if (isGroupRow(data)) {
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
className="shrink-0 p-0.5 cursor-pointer"
|
||||
onClick={() => onToggleGroup(data.id)}
|
||||
aria-label={data._expanded ? "Collapse group" : "Expand group"}
|
||||
>
|
||||
<ChevronRight
|
||||
className={`h-4 w-4 text-muted-foreground transition-transform ${
|
||||
data._expanded ? "rotate-90" : ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<GroupPreviewCell group={data} onUpload={onGroupPreviewUpload} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className={data._isGroupMember ? "pl-5" : ""}>
|
||||
<PreviewCell pkg={data} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
enableHiding: false,
|
||||
enableSorting: false,
|
||||
size: 52,
|
||||
size: 72,
|
||||
},
|
||||
{
|
||||
accessorKey: "fileName",
|
||||
header: ({ column }) => <DataTableColumnHeader column={column} title="File Name" />,
|
||||
cell: ({ row }) => (
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium truncate max-w-[300px]">{row.original.fileName}</span>
|
||||
{row.original.isMultipart && (
|
||||
<Badge variant="outline" className="text-[10px] shrink-0">
|
||||
Multi
|
||||
</Badge>
|
||||
cell: ({ row }) => {
|
||||
const data = row.original;
|
||||
if (isGroupRow(data)) {
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
className="font-semibold truncate max-w-[300px] cursor-pointer hover:underline text-left"
|
||||
onClick={() => onRenameGroup(data.id, data.name)}
|
||||
title="Click to rename group"
|
||||
>
|
||||
{data.name}
|
||||
</button>
|
||||
<Badge variant="secondary" className="text-[10px] shrink-0">
|
||||
{data.packageCount} pkg{data.packageCount !== 1 ? "s" : ""}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium truncate max-w-[300px]">{data.fileName}</span>
|
||||
{data.isMultipart && (
|
||||
<Badge variant="outline" className="text-[10px] shrink-0">
|
||||
Multi
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{searchTerm && data.matchedByContent && (
|
||||
<button
|
||||
className="text-[11px] text-amber-500 hover:text-amber-400 hover:underline cursor-pointer mt-0.5"
|
||||
onClick={() => onViewFiles(data)}
|
||||
>
|
||||
{data.matchedFileCount.toLocaleString()} file match{data.matchedFileCount !== 1 ? "es" : ""}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{searchTerm && row.original.matchedByContent && (
|
||||
<button
|
||||
className="text-[11px] text-amber-500 hover:text-amber-400 hover:underline cursor-pointer mt-0.5"
|
||||
onClick={() => onViewFiles(row.original)}
|
||||
>
|
||||
{row.original.matchedFileCount.toLocaleString()} file match{row.original.matchedFileCount !== 1 ? "es" : ""}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
);
|
||||
},
|
||||
enableHiding: false,
|
||||
},
|
||||
{
|
||||
accessorKey: "archiveType",
|
||||
header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
|
||||
cell: ({ row }) => (
|
||||
<Badge variant="secondary" className="text-[10px]">
|
||||
{row.original.archiveType}
|
||||
</Badge>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
const data = row.original;
|
||||
if (isGroupRow(data)) {
|
||||
const types = data.archiveTypes;
|
||||
if (types.length === 1) {
|
||||
return (
|
||||
<Badge variant="secondary" className="text-[10px]">
|
||||
{types[0]}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Badge variant="secondary" className="text-[10px]">
|
||||
Mixed
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Badge variant="secondary" className="text-[10px]">
|
||||
{data.archiveType}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "fileSize",
|
||||
header: ({ column }) => <DataTableColumnHeader column={column} title="Size" />,
|
||||
cell: ({ row }) => (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{formatBytes(row.original.fileSize)}
|
||||
</span>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
const data = row.original;
|
||||
const size = isGroupRow(data) ? data.totalFileSize : data.fileSize;
|
||||
return (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{formatBytes(size)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "fileCount",
|
||||
header: ({ column }) => <DataTableColumnHeader column={column} title="Files" />,
|
||||
cell: ({ row }) => (
|
||||
<span className="text-sm">
|
||||
{row.original.fileCount.toLocaleString()}
|
||||
</span>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
const data = row.original;
|
||||
const count = isGroupRow(data) ? data.totalFileCount : data.fileCount;
|
||||
return (
|
||||
<span className="text-sm">
|
||||
{count.toLocaleString()}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "creator",
|
||||
header: ({ column }) => <DataTableColumnHeader column={column} title="Creator" />,
|
||||
cell: ({ row }) => (
|
||||
<button
|
||||
className="text-sm text-muted-foreground truncate max-w-[160px] block hover:text-foreground hover:underline cursor-pointer text-left"
|
||||
onClick={() => onSetCreator(row.original)}
|
||||
title="Click to edit creator"
|
||||
>
|
||||
{row.original.creator || "\u2014"}
|
||||
</button>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
const data = row.original;
|
||||
if (isGroupRow(data)) {
|
||||
return <span className="text-sm text-muted-foreground">{"\u2014"}</span>;
|
||||
}
|
||||
return (
|
||||
<button
|
||||
className="text-sm text-muted-foreground truncate max-w-[160px] block hover:text-foreground hover:underline cursor-pointer text-left"
|
||||
onClick={() => onSetCreator(data)}
|
||||
title="Click to edit creator"
|
||||
>
|
||||
{data.creator || "\u2014"}
|
||||
</button>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "tags",
|
||||
header: ({ column }) => <DataTableColumnHeader column={column} title="Tags" />,
|
||||
cell: ({ row }) => {
|
||||
const tags = row.original.tags;
|
||||
const data = row.original;
|
||||
const tags = isGroupRow(data) ? data.combinedTags : data.tags;
|
||||
if (tags.length === 0) {
|
||||
if (isGroupRow(data)) {
|
||||
return <span className="text-sm text-muted-foreground">{"\u2014"}</span>;
|
||||
}
|
||||
return (
|
||||
<button
|
||||
className="text-sm text-muted-foreground hover:text-foreground cursor-pointer"
|
||||
onClick={() => onSetTags(row.original)}
|
||||
onClick={() => onSetTags(data)}
|
||||
title="Click to add tags"
|
||||
>
|
||||
{"\u2014"}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
const clickHandler = isGroupRow(data) ? undefined : () => onSetTags(data as PackageTableRow);
|
||||
return (
|
||||
<button
|
||||
className="flex flex-wrap gap-1 cursor-pointer"
|
||||
onClick={() => onSetTags(row.original)}
|
||||
title="Click to edit tags"
|
||||
className={`flex flex-wrap gap-1 ${clickHandler ? "cursor-pointer" : "cursor-default"}`}
|
||||
onClick={clickHandler}
|
||||
title={clickHandler ? "Click to edit tags" : undefined}
|
||||
>
|
||||
{tags.map((tag) => (
|
||||
<Badge
|
||||
@@ -175,7 +359,10 @@ export function getPackageColumns({
|
||||
</button>
|
||||
);
|
||||
},
|
||||
accessorFn: (row) => row.tags.join(", "),
|
||||
accessorFn: (row) => {
|
||||
if (isGroupRow(row)) return row.combinedTags.join(", ");
|
||||
return row.tags.join(", ");
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "channel",
|
||||
@@ -190,31 +377,73 @@ export function getPackageColumns({
|
||||
{
|
||||
accessorKey: "indexedAt",
|
||||
header: ({ column }) => <DataTableColumnHeader column={column} title="Indexed" />,
|
||||
cell: ({ row }) => (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{new Date(row.original.indexedAt).toLocaleDateString()}
|
||||
</span>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
const data = row.original;
|
||||
const date = isGroupRow(data) ? data.latestIndexedAt : data.indexedAt;
|
||||
return (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{new Date(date).toLocaleDateString()}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-0.5">
|
||||
<SendToTelegramButton
|
||||
packageId={row.original.id}
|
||||
packageName={row.original.fileName}
|
||||
variant="icon"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => onViewFiles(row.original)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
const data = row.original;
|
||||
if (isGroupRow(data)) {
|
||||
return (
|
||||
<div className="flex items-center gap-0.5">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => onSendAllInGroup(data.id)}
|
||||
title="Send all packages in group"
|
||||
>
|
||||
<Send className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => onDissolveGroup(data.id)}
|
||||
title="Dissolve group"
|
||||
>
|
||||
<Ungroup className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="flex items-center gap-0.5">
|
||||
<SendToTelegramButton
|
||||
packageId={data.id}
|
||||
packageName={data.fileName}
|
||||
variant="icon"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => onViewFiles(data)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
{data._isGroupMember && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => onRemoveFromGroup(data.id)}
|
||||
title="Remove from group"
|
||||
>
|
||||
<Ungroup className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
enableHiding: false,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,11 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback, useTransition } from "react";
|
||||
import { useState, useCallback, useTransition, useMemo, useRef } from "react";
|
||||
import { useRouter, usePathname, useSearchParams } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
import { Search } from "lucide-react";
|
||||
import { Search, Layers } from "lucide-react";
|
||||
import { useDataTable } from "@/hooks/use-data-table";
|
||||
import { getPackageColumns, type PackageRow } from "./package-columns";
|
||||
import {
|
||||
getPackageColumns,
|
||||
type PackageRow,
|
||||
type StlTableRow,
|
||||
type PackageTableRow,
|
||||
type GroupHeaderRow,
|
||||
} from "./package-columns";
|
||||
import { PackageFilesDrawer } from "./package-files-drawer";
|
||||
import { IngestionStatus } from "./ingestion-status";
|
||||
import { SkippedPackagesTab } from "./skipped-packages-tab";
|
||||
@@ -14,6 +20,7 @@ import { DataTablePagination } from "@/components/shared/data-table-pagination";
|
||||
import { DataTableViewOptions } from "@/components/shared/data-table-view-options";
|
||||
import { PageHeader } from "@/components/shared/page-header";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
@@ -21,14 +28,31 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import type { IngestionAccountStatus } from "@/lib/telegram/types";
|
||||
import type { DisplayItem, IngestionAccountStatus } from "@/lib/telegram/types";
|
||||
import type { SkippedRow } from "./skipped-columns";
|
||||
import { updatePackageCreator, updatePackageTags } from "../actions";
|
||||
import {
|
||||
updatePackageCreator,
|
||||
updatePackageTags,
|
||||
renameGroupAction,
|
||||
dissolveGroupAction,
|
||||
createGroupAction,
|
||||
removeFromGroupAction,
|
||||
sendAllInGroupAction,
|
||||
updateGroupPreviewAction,
|
||||
} from "../actions";
|
||||
|
||||
interface StlTableProps {
|
||||
data: PackageRow[];
|
||||
data: DisplayItem[];
|
||||
pageCount: number;
|
||||
totalCount: number;
|
||||
ingestionStatus: IngestionAccountStatus[];
|
||||
@@ -58,6 +82,88 @@ export function StlTable({
|
||||
const [viewPkg, setViewPkg] = useState<PackageRow | null>(null);
|
||||
const [, startTransition] = useTransition();
|
||||
|
||||
// Group expansion state
|
||||
const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
|
||||
|
||||
// Package selection state (for manual grouping)
|
||||
const [selectedPackages, setSelectedPackages] = useState<Set<string>>(new Set());
|
||||
|
||||
// Create group dialog state
|
||||
const [createGroupOpen, setCreateGroupOpen] = useState(false);
|
||||
const [groupName, setGroupName] = useState("");
|
||||
|
||||
// Group preview upload ref
|
||||
const previewInputRef = useRef<HTMLInputElement>(null);
|
||||
const [uploadGroupId, setUploadGroupId] = useState<string | null>(null);
|
||||
|
||||
const toggleGroup = useCallback((groupId: string) => {
|
||||
setExpandedGroups((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(groupId)) {
|
||||
next.delete(groupId);
|
||||
} else {
|
||||
next.add(groupId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const toggleSelect = useCallback((packageId: string) => {
|
||||
setSelectedPackages((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(packageId)) {
|
||||
next.delete(packageId);
|
||||
} else {
|
||||
next.add(packageId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Flatten DisplayItem[] into StlTableRow[] based on expansion state
|
||||
const tableRows: StlTableRow[] = useMemo(() => {
|
||||
const rows: StlTableRow[] = [];
|
||||
for (const item of data) {
|
||||
if (item.type === "package") {
|
||||
rows.push({
|
||||
...item.data,
|
||||
_rowType: "package" as const,
|
||||
_groupId: null,
|
||||
_isGroupMember: false,
|
||||
});
|
||||
} else {
|
||||
const group = item.data;
|
||||
const isExpanded = expandedGroups.has(group.id);
|
||||
rows.push({
|
||||
_rowType: "group" as const,
|
||||
id: group.id,
|
||||
name: group.name,
|
||||
hasPreview: group.hasPreview,
|
||||
totalFileSize: group.totalFileSize,
|
||||
totalFileCount: group.totalFileCount,
|
||||
packageCount: group.packageCount,
|
||||
combinedTags: group.combinedTags,
|
||||
archiveTypes: group.archiveTypes,
|
||||
latestIndexedAt: group.latestIndexedAt,
|
||||
sourceChannel: group.sourceChannel,
|
||||
_expanded: isExpanded,
|
||||
});
|
||||
if (isExpanded) {
|
||||
for (const pkg of group.packages) {
|
||||
rows.push({
|
||||
...pkg,
|
||||
_rowType: "package" as const,
|
||||
_groupId: group.id,
|
||||
_isGroupMember: true,
|
||||
packageGroupId: group.id,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return rows;
|
||||
}, [data, expandedGroups]);
|
||||
|
||||
const updateSearch = useCallback(
|
||||
(value: string) => {
|
||||
setSearchValue(value);
|
||||
@@ -103,6 +209,131 @@ export function StlTable({
|
||||
[router, pathname, searchParams]
|
||||
);
|
||||
|
||||
const handleRenameGroup = useCallback(
|
||||
(groupId: string, currentName: string) => {
|
||||
const value = prompt("Enter group name:", currentName);
|
||||
if (value === null || value.trim() === currentName) return;
|
||||
startTransition(async () => {
|
||||
const result = await renameGroupAction(groupId, value);
|
||||
if (result.success) {
|
||||
toast.success(`Group renamed to "${value.trim()}"`);
|
||||
router.refresh();
|
||||
} else {
|
||||
toast.error(result.error);
|
||||
}
|
||||
});
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
const handleDissolveGroup = useCallback(
|
||||
(groupId: string) => {
|
||||
if (!confirm("Dissolve this group? Packages will become standalone items.")) return;
|
||||
startTransition(async () => {
|
||||
const result = await dissolveGroupAction(groupId);
|
||||
if (result.success) {
|
||||
toast.success("Group dissolved");
|
||||
setExpandedGroups((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(groupId);
|
||||
return next;
|
||||
});
|
||||
router.refresh();
|
||||
} else {
|
||||
toast.error(result.error);
|
||||
}
|
||||
});
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
const handleSendAllInGroup = useCallback(
|
||||
(groupId: string) => {
|
||||
if (!confirm("Send all packages in this group to your Telegram?")) return;
|
||||
startTransition(async () => {
|
||||
const result = await sendAllInGroupAction(groupId);
|
||||
if (result.success) {
|
||||
toast.success("Group packages queued for sending");
|
||||
router.refresh();
|
||||
} else {
|
||||
toast.error(result.error);
|
||||
}
|
||||
});
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
const handleRemoveFromGroup = useCallback(
|
||||
(packageId: string) => {
|
||||
startTransition(async () => {
|
||||
const result = await removeFromGroupAction(packageId);
|
||||
if (result.success) {
|
||||
toast.success("Package removed from group");
|
||||
router.refresh();
|
||||
} else {
|
||||
toast.error(result.error);
|
||||
}
|
||||
});
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
const handleCreateGroup = useCallback(() => {
|
||||
if (selectedPackages.size < 2) return;
|
||||
setGroupName("");
|
||||
setCreateGroupOpen(true);
|
||||
}, [selectedPackages.size]);
|
||||
|
||||
const submitCreateGroup = useCallback(() => {
|
||||
if (!groupName.trim() || selectedPackages.size < 2) return;
|
||||
const ids = Array.from(selectedPackages);
|
||||
startTransition(async () => {
|
||||
const result = await createGroupAction(groupName, ids);
|
||||
if (result.success) {
|
||||
toast.success(`Group "${groupName.trim()}" created`);
|
||||
setSelectedPackages(new Set());
|
||||
setCreateGroupOpen(false);
|
||||
router.refresh();
|
||||
} else {
|
||||
toast.error(result.error);
|
||||
}
|
||||
});
|
||||
}, [groupName, selectedPackages, router]);
|
||||
|
||||
// Group preview upload handler (Task 12)
|
||||
const handleGroupPreviewUpload = useCallback((groupId: string) => {
|
||||
setUploadGroupId(groupId);
|
||||
// Trigger file input after state update
|
||||
setTimeout(() => {
|
||||
previewInputRef.current?.click();
|
||||
}, 0);
|
||||
}, []);
|
||||
|
||||
const handlePreviewFileChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file || !uploadGroupId) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
|
||||
startTransition(async () => {
|
||||
const result = await updateGroupPreviewAction(uploadGroupId, formData);
|
||||
if (result.success) {
|
||||
toast.success("Group preview updated");
|
||||
router.refresh();
|
||||
} else {
|
||||
toast.error(result.error);
|
||||
}
|
||||
setUploadGroupId(null);
|
||||
});
|
||||
|
||||
// Reset input so the same file can be selected again
|
||||
e.target.value = "";
|
||||
},
|
||||
[uploadGroupId, router]
|
||||
);
|
||||
|
||||
const columns = getPackageColumns({
|
||||
onViewFiles: (pkg) => setViewPkg(pkg),
|
||||
searchTerm,
|
||||
@@ -136,9 +367,17 @@ export function StlTable({
|
||||
}
|
||||
});
|
||||
},
|
||||
onToggleGroup: toggleGroup,
|
||||
onRenameGroup: handleRenameGroup,
|
||||
onDissolveGroup: handleDissolveGroup,
|
||||
onSendAllInGroup: handleSendAllInGroup,
|
||||
onRemoveFromGroup: handleRemoveFromGroup,
|
||||
onGroupPreviewUpload: handleGroupPreviewUpload,
|
||||
selectedPackages,
|
||||
onToggleSelect: toggleSelect,
|
||||
});
|
||||
|
||||
const { table } = useDataTable({ data, columns, pageCount });
|
||||
const { table } = useDataTable({ data: tableRows, columns, pageCount });
|
||||
|
||||
const activeTag = searchParams.get("tag") ?? "";
|
||||
|
||||
@@ -191,11 +430,37 @@ export function StlTable({
|
||||
</Select>
|
||||
)}
|
||||
<DataTableViewOptions table={table} />
|
||||
{selectedPackages.size >= 2 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 gap-1.5"
|
||||
onClick={handleCreateGroup}
|
||||
>
|
||||
<Layers className="h-3.5 w-3.5" />
|
||||
Group {selectedPackages.size} Selected
|
||||
</Button>
|
||||
)}
|
||||
{selectedPackages.size > 0 && selectedPackages.size < 2 && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Select at least 2 packages to group
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
table={table}
|
||||
emptyMessage="No packages found. Archives will appear here after ingestion."
|
||||
rowClassName={(row) => {
|
||||
const data = row.original as StlTableRow;
|
||||
if (data._rowType === "group") {
|
||||
return "bg-muted/30 border-border";
|
||||
}
|
||||
if (data._rowType === "package" && (data as PackageTableRow)._isGroupMember) {
|
||||
return "bg-muted/10";
|
||||
}
|
||||
return "";
|
||||
}}
|
||||
/>
|
||||
<DataTablePagination table={table} totalCount={totalCount} />
|
||||
</TabsContent>
|
||||
@@ -217,6 +482,47 @@ export function StlTable({
|
||||
}}
|
||||
highlightTerm={searchTerm}
|
||||
/>
|
||||
|
||||
{/* Create Group Dialog */}
|
||||
<Dialog open={createGroupOpen} onOpenChange={setCreateGroupOpen}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create Package Group</DialogTitle>
|
||||
<DialogDescription>
|
||||
Group {selectedPackages.size} selected packages together. Enter a name for the group.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="py-4">
|
||||
<Input
|
||||
placeholder="Group name..."
|
||||
value={groupName}
|
||||
onChange={(e) => setGroupName(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") submitCreateGroup();
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setCreateGroupOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={submitCreateGroup} disabled={!groupName.trim()}>
|
||||
<Layers className="h-4 w-4 mr-1" />
|
||||
Create Group
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Hidden file input for group preview upload (Task 12) */}
|
||||
<input
|
||||
ref={previewInputRef}
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
className="hidden"
|
||||
onChange={handlePreviewFileChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user