Skip to content

Commit 2bf8a3e

Browse files
zh1pengzh1peng
committed
Simplify task cards and fix detail navigation
1 parent fa94225 commit 2bf8a3e

File tree

3 files changed

+70
-111
lines changed

3 files changed

+70
-111
lines changed

‎src/components/task-drawer.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
44
import { Markdown } from "@/components/markdown";
55
import { TaskChannelCard } from "@/components/task-channel-card";
66
import type { TaskIndexItem } from "@/lib/task-index";
7-
import { taskDetailStaticHref } from "@/lib/routes";
7+
import { taskDetailHref } from "@/lib/routes";
88
import {
99
localCloneCommand,
1010
taskHandle,
@@ -71,6 +71,11 @@ export function TaskDrawer({
7171
const hasError = Boolean(errorByRepo[task.repo]);
7272
const isLoading = markdown === undefined && !hasError;
7373
const preview = task.web_variant;
74+
const taskRepo = task.repo;
75+
76+
function openFullPage() {
77+
window.location.assign(taskDetailHref(taskRepo));
78+
}
7479

7580
return (
7681
<div className="fixed inset-0 z-[70] bg-slate-950/35 backdrop-blur-sm" onClick={onClose}>
@@ -101,12 +106,13 @@ export function TaskDrawer({
101106
</div>
102107

103108
<div className="flex items-center gap-2">
104-
<a
109+
<button
110+
type="button"
105111
className="tb-focus-ring rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-semibold text-slate-800 hover:border-brand-200 hover:bg-brand-50"
106-
href={taskDetailStaticHref(task.repo)}
112+
onClick={openFullPage}
107113
>
108114
Open full page
109-
</a>
115+
</button>
110116
<button
111117
type="button"
112118
className="tb-focus-ring rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-semibold text-slate-800 hover:border-brand-200 hover:bg-brand-50"

‎src/components/task-row.tsx‎

Lines changed: 60 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ function ActionLink({
1919
href,
2020
label,
2121
icon,
22-
tone
22+
tone = "local"
2323
}: {
2424
href: string;
2525
label: string;
2626
icon: keyof typeof ACTION_ICONS;
27-
tone: "local" | "preview" | "preview-primary";
27+
tone?: "local" | "preview" | "preview-primary";
2828
}) {
2929
const Icon = ACTION_ICONS[icon];
3030

@@ -35,8 +35,8 @@ function ActionLink({
3535
tone === "preview-primary"
3636
? "tb-button-primary"
3737
: tone === "preview"
38-
? "tb-button-ghost bg-[#ffe2d8]"
39-
: "tb-button-secondary bg-[#b9dceb]"
38+
? "tb-button-ghost bg-[#ffe9de]"
39+
: "tb-button-secondary bg-[#d7ebf6]"
4040
)}
4141
href={href}
4242
target="_blank"
@@ -62,11 +62,11 @@ export function TaskRow({
6262
return (
6363
<article className="tb-frame bg-[#fffdf9] p-4 sm:p-5">
6464
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
65-
<div className="min-w-0">
65+
<div className="min-w-0 flex-1">
6666
<div className="flex flex-wrap items-center gap-2">
67-
<div className="min-w-0 font-heading text-[2rem] font-bold leading-[0.95] text-[#25314d] sm:text-[2.35rem]">
67+
<h2 className="min-w-0 font-heading text-[2rem] font-bold leading-[0.95] text-[#25314d] sm:text-[2.35rem]">
6868
{taskTitle(task)}
69-
</div>
69+
</h2>
7070
{task.maturity ? <MaturityBadge maturity={task.maturity} /> : null}
7171
{preview ? (
7272
<span className="rounded-full bg-[#ecffe5] px-3 py-1 text-[11px] font-bold text-[#25314d]">
@@ -79,9 +79,11 @@ export function TaskRow({
7979
<code className="rounded-full border-2 border-[#25314d] bg-white px-2.5 py-1 font-mono text-[11px] font-semibold text-[#25314d]">
8080
{taskHandle(task)}
8181
</code>
82-
<code className="break-all rounded-full border-2 border-[#25314d] bg-white px-2.5 py-1 font-mono text-[11px] font-semibold text-[#25314d]">
83-
{task.repo}
84-
</code>
82+
{preview?.id ? (
83+
<code className="rounded-full border-2 border-[#25314d] bg-[#fff8f0] px-2.5 py-1 font-mono text-[11px] font-semibold text-[#25314d]">
84+
{preview.id}
85+
</code>
86+
) : null}
8587
{(task.tags?.paradigm ?? []).map((value) => (
8688
<TagChip
8789
key={`${task.repo}:paradigm:${value}`}
@@ -98,102 +100,57 @@ export function TaskRow({
98100
</div>
99101
</div>
100102

101-
<div className="mt-4 text-sm leading-7 text-slate-700 sm:text-base">
103+
<p className="mt-4 max-w-4xl text-sm leading-7 text-slate-700 sm:text-base">
102104
{task.short_description || "No description provided."}
103-
</div>
105+
</p>
104106

105-
<section className="mt-6 tb-frame-soft bg-[#fffdf9] p-4 sm:p-5">
106-
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
107-
<div className="min-w-0">
108-
<div className="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-500">
109-
Task Information
110-
</div>
111-
<div className="mt-3 flex flex-wrap gap-2 text-xs text-slate-600">
112-
<code className="rounded-full border-2 border-[#25314d] bg-white px-2.5 py-1 font-mono text-[11px] font-semibold text-[#25314d]">
113-
Local {taskHandle(task)}
114-
</code>
115-
{preview?.id ? (
116-
<code className="rounded-full border-2 border-[#25314d] bg-[#fff8f0] px-2.5 py-1 font-mono text-[11px] font-semibold text-[#25314d]">
117-
Preview {preview.id}
118-
</code>
119-
) : null}
120-
{task.release_tag ? (
121-
<span className="rounded-full bg-[#ecffe5] px-3 py-1 text-[11px] font-bold text-[#25314d]">
122-
Release {task.release_tag}
123-
</span>
124-
) : null}
125-
</div>
126-
</div>
127-
128-
<button
129-
type="button"
130-
className="tb-focus-ring tb-button-primary w-full md:w-auto"
131-
onClick={() => onOpen(task)}
132-
>
133-
Expand details
134-
</button>
135-
</div>
136-
137-
<div className="mt-5 space-y-4">
138-
<div className="rounded-[20px] border-2 border-[#25314d] bg-[#eef8ff] p-4 shadow-[0_4px_0_#25314d]">
139-
<div className="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-500">
140-
Local / PsyFlow
141-
</div>
142-
<div className="mt-2 text-sm leading-6 text-slate-700">
143-
Canonical repository for local execution, review, and extension.
144-
</div>
145-
<div className="mt-4 flex flex-wrap gap-2">
146-
<CopyButton
147-
text={localCloneCommand(task)}
148-
label="Copy Clone"
149-
className="bg-[#b9dceb] text-[#25314d]"
150-
/>
151-
<ActionLink href={task.html_url} label="Open Repo" icon="github" tone="local" />
152-
<ActionLink
153-
href={`${task.html_url}/archive/refs/heads/${task.default_branch}.zip`}
154-
label="Download"
155-
icon="download"
156-
tone="local"
157-
/>
158-
</div>
159-
</div>
107+
<div className="mt-5 flex flex-wrap items-center gap-2 text-xs text-slate-600">
108+
<code className="break-all rounded-full border-2 border-[#25314d] bg-white px-2.5 py-1 font-mono text-[11px] font-semibold text-[#25314d]">
109+
{task.repo}
110+
</code>
111+
{task.release_tag ? (
112+
<span className="rounded-full bg-[#ecffe5] px-3 py-1 text-[11px] font-bold text-[#25314d]">
113+
Release {task.release_tag}
114+
</span>
115+
) : null}
116+
</div>
160117

161-
{preview ? (
162-
<div className="rounded-[20px] border-2 border-[#25314d] bg-[#fff3ec] p-4 shadow-[0_4px_0_#25314d]">
163-
<div className="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-500">
164-
Preview
165-
</div>
166-
<div className="mt-2 text-sm leading-6 text-slate-700">
167-
Browser walkthrough for quick validation of task flow and participant-facing screens.
168-
</div>
169-
<div className="mt-4 flex flex-wrap gap-2">
170-
<ActionLink
171-
href={preview.run_url}
172-
label="Run Preview"
173-
icon="play"
174-
tone="preview-primary"
175-
/>
176-
<ActionLink
177-
href={preview.html_url}
178-
label="Preview Repo"
179-
icon="github"
180-
tone="preview"
181-
/>
182-
</div>
183-
</div>
184-
) : (
185-
<div className="rounded-[20px] border-2 border-[#25314d] bg-[#fff8f0] p-4 shadow-[0_4px_0_#25314d]">
186-
<div className="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-500">
187-
Preview
188-
</div>
189-
<div className="mt-2 text-sm leading-6 text-slate-700">
190-
No browser preview is attached yet. The local repository remains the canonical source
191-
for installation and review.
192-
</div>
193-
</div>
194-
)}
195-
</div>
196-
</section>
118+
<div className="mt-6 flex flex-wrap gap-2">
119+
<button
120+
type="button"
121+
className="tb-focus-ring tb-button-primary"
122+
onClick={() => onOpen(task)}
123+
>
124+
Expand details
125+
</button>
126+
<CopyButton
127+
text={localCloneCommand(task)}
128+
label="Copy Clone"
129+
className="bg-[#d7ebf6] text-[#25314d]"
130+
/>
131+
<ActionLink href={task.html_url} label="Open Repo" icon="github" />
132+
<ActionLink
133+
href={`${task.html_url}/archive/refs/heads/${task.default_branch}.zip`}
134+
label="Download"
135+
icon="download"
136+
/>
137+
{preview ? (
138+
<>
139+
<ActionLink
140+
href={preview.run_url}
141+
label="Run Preview"
142+
icon="play"
143+
tone="preview-primary"
144+
/>
145+
<ActionLink
146+
href={preview.html_url}
147+
label="Preview Repo"
148+
icon="github"
149+
tone="preview"
150+
/>
151+
</>
152+
) : null}
153+
</div>
197154
</article>
198155
);
199156
}

‎src/lib/routes.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,3 @@ export function tasksPageHref(): string {
55
export function taskDetailHref(repo: string): string {
66
return `/tasks/${encodeURIComponent(repo)}/`;
77
}
8-
9-
export function taskDetailStaticHref(repo: string): string {
10-
return `${taskDetailHref(repo)}index.html`;
11-
}

0 commit comments

Comments
 (0)