refactor(teams): move workspace button from header to board toolbar

Move workspace button to toolbar (left of Kanban/List toggle) with
FolderOpen icon + text label for better discoverability.
This commit is contained in:
viettranx committed 2026-03-16 07:25:15 +07:00
1 parent d5ede64595
commit a1495fc317
4 files changed
+17 -10

No files matched your search

@@ -24,11 +24,12 @@ interface BoardContainerProps {
getTeamTasks: (teamId: string, status?: string, channel?: string, chatId?: string) => Promise<{ tasks: TeamTaskData[]; count: number }>;
getTaskDetail: (teamId: string, taskId: string) => Promise<{ task: TeamTaskData; comments: TeamTaskComment[]; events: TeamTaskEvent[]; attachments: TeamTaskAttachment[] }>;
deleteTask?: (teamId: string, taskId: string) => Promise<void>;
onWorkspace?: () => void;
}
export const BoardContainer = memo(function BoardContainer({
teamId, members, scopes, isTeamV2,
getTeamTasks, getTaskDetail, deleteTask,
getTeamTasks, getTaskDetail, deleteTask, onWorkspace,
}: BoardContainerProps) {
const { t } = useTranslation("teams");
const viewMode = useBoardStore((s) => s.viewMode);
@@ -133,6 +134,7 @@ export const BoardContainer = memo(function BoardContainer({
spinning={refreshing}
onRefresh={handleRefresh}
onCreateTask={handleCreateTask}
onWorkspace={onWorkspace}
/>
<div className="flex flex-1 flex-col min-h-0 overflow-hidden">
@@ -1,6 +1,6 @@
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ArrowLeft, Settings, Trash2, FolderOpen, Users } from "lucide-react";
import { ArrowLeft, Settings, Trash2, Users } from "lucide-react";
import { useTranslation } from "react-i18next";
import type { TeamData, TeamMemberData, TeamAccessSettings } from "@/types/team";
@@ -11,11 +11,10 @@ interface BoardHeaderProps {
onDelete: () => void;
onSettings: () => void;
onMembers: () => void;
onWorkspace: () => void;
onV2Click?: () => void;
}
export function BoardHeader({ team, members, onBack, onDelete, onSettings, onMembers, onWorkspace, onV2Click }: BoardHeaderProps) {
export function BoardHeader({ team, members, onBack, onDelete, onSettings, onMembers, onV2Click }: BoardHeaderProps) {
const { t } = useTranslation("teams");
const settings = (team.settings ?? {}) as TeamAccessSettings;
const isV2 = (settings.version ?? 1) >= 2;
@@ -62,9 +61,6 @@ export function BoardHeader({ team, members, onBack, onDelete, onSettings, onMem
<Button variant="ghost" size="icon" onClick={onMembers} className="shrink-0" title={t("members.title")}>
<Users className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" onClick={onWorkspace} className="shrink-0" title={t("workspace.title")}>
<FolderOpen className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" onClick={onSettings} className="shrink-0" title={t("detail.tabs.settings")}>
<Settings className="h-4 w-4" />
</Button>
+11 -2
View File
@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
import {
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from "@/components/ui/select";
import { RefreshCw, Plus, LayoutGrid, List } from "lucide-react";
import { RefreshCw, Plus, LayoutGrid, List, FolderOpen } from "lucide-react";
import { useTranslation } from "react-i18next";
import { useBoardStore } from "../stores/use-board-store";
import type { GroupBy } from "../stores/use-board-store";
@@ -20,6 +20,7 @@ interface BoardToolbarProps {
spinning: boolean;
onRefresh: () => void;
onCreateTask: () => void;
onWorkspace?: () => void;
}
const STATUS_FILTERS: { value: StatusFilter; labelKey: string }[] = [
@@ -37,7 +38,7 @@ const GROUP_OPTIONS: { value: GroupBy; labelKey: string }[] = [
export const BoardToolbar = memo(function BoardToolbar({
statusFilter, onStatusFilter,
scopes, selectedScope, onScopeChange,
spinning, onRefresh, onCreateTask,
spinning, onRefresh, onCreateTask, onWorkspace,
}: BoardToolbarProps) {
const { t } = useTranslation("teams");
const { viewMode, setViewMode, groupBy, setGroupBy } = useBoardStore();
@@ -109,6 +110,14 @@ export const BoardToolbar = memo(function BoardToolbar({
</div>
<div className="flex items-center gap-2">
{/* Workspace */}
{onWorkspace && (
<Button variant="outline" size="sm" onClick={onWorkspace} className="gap-1.5 h-8 text-xs">
<FolderOpen className="h-3.5 w-3.5" />
{t("workspace.title")}
</Button>
)}
{/* View toggle */}
<div className="flex rounded-lg border bg-muted/50 p-0.5">
<button
+1 -1
View File
@@ -89,7 +89,6 @@ export function TeamDetailPage({ teamId, onBack }: TeamDetailPageProps) {
onDelete={() => setDeleteOpen(true)}
onSettings={() => setInfoOpen(true)}
onMembers={() => setMembersOpen(true)}
onWorkspace={() => setWorkspaceOpen(true)}
onV2Click={() => setVersionModalOpen(true)}
/>
@@ -101,6 +100,7 @@ export function TeamDetailPage({ teamId, onBack }: TeamDetailPageProps) {
getTeamTasks={getTeamTasks}
getTaskDetail={getTaskDetail}
deleteTask={deleteTask}
onWorkspace={() => setWorkspaceOpen(true)}
/>
{/* Team info + settings + members dialog */}