remove mobile demo routes
This commit is contained in:
sai karthik
@@ -19,9 +19,6 @@ export type MobileWorkspaceVariant =
|
||||
| "character-pass"
|
||||
| "expanded-work-unit"
|
||||
| "home-expanded-in-place"
|
||||
| "stacked-final"
|
||||
| "stacked-final-check"
|
||||
| "stacked-work-units"
|
||||
| "vertical-work-stack"
|
||||
| "work-units-home";
|
||||
|
||||
@@ -50,7 +47,6 @@ const BrandGlyph = ({ className }: { className?: string }) => (
|
||||
);
|
||||
|
||||
interface ProductHeaderProps {
|
||||
assistant?: boolean;
|
||||
avatar?: boolean;
|
||||
letterLogo?: boolean;
|
||||
onAssistant?: () => void;
|
||||
@@ -59,7 +55,6 @@ interface ProductHeaderProps {
|
||||
}
|
||||
|
||||
const ProductHeader = ({
|
||||
assistant = false,
|
||||
avatar = false,
|
||||
letterLogo = false,
|
||||
onAssistant,
|
||||
@@ -80,29 +75,16 @@ const ProductHeader = ({
|
||||
</p>
|
||||
</div>
|
||||
{avatar ? (
|
||||
<>
|
||||
{assistant ? (
|
||||
<button
|
||||
aria-label="Open Zopu assistant"
|
||||
className="ml-auto flex size-10 items-center justify-center rounded-full bg-[#f2f3ef]"
|
||||
onClick={onAssistant}
|
||||
type="button"
|
||||
>
|
||||
<BrandGlyph className="h-[20px] w-[8px]" />
|
||||
</button>
|
||||
) : null}
|
||||
<button
|
||||
aria-label="Open profile"
|
||||
className={cn(
|
||||
"flex items-center justify-center rounded-full bg-[#0b0b0a] text-[13px] font-semibold text-white",
|
||||
assistant ? "ml-2 size-10" : "ml-auto size-[42px]",
|
||||
profileInset && "mr-[31px]"
|
||||
)}
|
||||
type="button"
|
||||
>
|
||||
YM
|
||||
</button>
|
||||
</>
|
||||
<button
|
||||
aria-label="Open profile"
|
||||
className={cn(
|
||||
"ml-auto flex size-[42px] items-center justify-center rounded-full bg-[#0b0b0a] text-[13px] font-semibold text-white",
|
||||
profileInset && "mr-[31px]"
|
||||
)}
|
||||
type="button"
|
||||
>
|
||||
YM
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
@@ -209,230 +191,6 @@ const ReferenceComposer = ({
|
||||
</footer>
|
||||
);
|
||||
|
||||
interface FocusCardProps {
|
||||
final: boolean;
|
||||
finalStateLeadingArticle?: boolean;
|
||||
onOpen?: () => void;
|
||||
}
|
||||
|
||||
const FocusCard = ({
|
||||
final,
|
||||
finalStateLeadingArticle = false,
|
||||
onOpen,
|
||||
}: FocusCardProps) => (
|
||||
<article
|
||||
className={cn(
|
||||
"absolute top-[77px] z-30 rounded-[30px] bg-[#e8efff] px-5 text-[#14265f]",
|
||||
final ? "inset-x-5 h-[378px] pt-5" : "inset-x-6 h-[370px] pt-5"
|
||||
)}
|
||||
>
|
||||
<div className="flex h-7 items-center">
|
||||
<span className="inline-flex h-6 items-center rounded-full bg-[#d6e2ff] px-2 text-[10px] font-semibold text-[#315dc0]">
|
||||
IN PROGRESS
|
||||
</span>
|
||||
<span className="ml-2 text-[10px] text-[#6e83b4]">
|
||||
{final ? "FLOW-08" : "· ID: FLOW-08"}
|
||||
</span>
|
||||
<MoreHorizontal className="ml-auto size-5 text-[#315dc0]" />
|
||||
</div>
|
||||
<h3
|
||||
className={cn(
|
||||
"font-semibold tracking-[-0.045em]",
|
||||
final
|
||||
? "mt-[14px] text-[25px] leading-[27px]"
|
||||
: "mt-4 text-[29px] leading-[31px]"
|
||||
)}
|
||||
>
|
||||
Launch onboarding flow
|
||||
</h3>
|
||||
{final ? (
|
||||
<>
|
||||
<p className="mt-2 text-[13px] leading-5 text-[#60718e]">
|
||||
Customer experience · Updated 4 min ago
|
||||
</p>
|
||||
<div className="mt-[5px] border-t border-[#315dc0]/15 pt-3">
|
||||
<p className="text-[10px] font-semibold text-[#6e83b4]">
|
||||
CURRENT STATE
|
||||
</p>
|
||||
<p className="mt-1 overflow-hidden text-[14px] leading-5 whitespace-nowrap text-[#33405c]">
|
||||
{finalStateLeadingArticle
|
||||
? "The flow is mapped. Welcome copy and the activation checklist are being drafted."
|
||||
: "Flow mapped. Welcome copy and activation checklist are being drafted."}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-[30px] h-[7px] overflow-hidden rounded-full bg-[#315dc0]/15">
|
||||
<div className="h-full w-[68%] rounded-full bg-[#315dc0]" />
|
||||
</div>
|
||||
<div className="mt-1.5 flex text-[10px] font-semibold text-[#315dc0]">
|
||||
68% COMPLETE
|
||||
<span className="ml-auto font-normal text-[#6e83b4]">On track</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="mt-[48px] border-t border-[#315dc0]/15 pt-4">
|
||||
<p className="text-[10px] font-semibold text-[#6e83b4]">
|
||||
STATUS SUMMARY
|
||||
</p>
|
||||
<p className="mt-1 overflow-hidden text-[14px] leading-5 whitespace-nowrap text-[#33405c]">
|
||||
Flow mapped. Zopu is drafting the welcome sequence.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-4 h-[7px] overflow-hidden rounded-full bg-[#315dc0]/15">
|
||||
<div className="h-full w-[68%] rounded-full bg-[#315dc0]" />
|
||||
</div>
|
||||
<div className="mt-1.5 flex text-[10px] font-semibold text-[#315dc0]">
|
||||
68% COMPLETE
|
||||
<span className="ml-auto font-normal text-[#6e83b4]">4 min ago</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center border-t border-[#315dc0]/15",
|
||||
final ? "mt-[21px] pt-[18px]" : "mt-[18px] pt-[14px]"
|
||||
)}
|
||||
>
|
||||
<span className="flex size-10 shrink-0 items-center justify-center rounded-[14px] bg-white text-[#315dc0]">
|
||||
<Check className="size-5" />
|
||||
</span>
|
||||
<div className="ml-2.5 min-w-0">
|
||||
<p className="text-[10px] font-semibold text-[#6e83b4]">NEXT ACTION</p>
|
||||
<p className="truncate text-[14px] font-semibold">
|
||||
Review welcome copy
|
||||
</p>
|
||||
{final ? (
|
||||
<p className="text-[10px] text-[#6e83b4]">About 5 minutes</p>
|
||||
) : null}
|
||||
</div>
|
||||
<button
|
||||
className={cn(
|
||||
"ml-auto flex h-[52px] items-center justify-center gap-1 rounded-[20px] bg-[#c8ff00] px-4 text-[13px] font-semibold text-black",
|
||||
final ? "min-w-[110px]" : "min-w-[104px]"
|
||||
)}
|
||||
onClick={onOpen}
|
||||
type="button"
|
||||
>
|
||||
Open unit
|
||||
<ChevronRight className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
|
||||
interface FocusStackScreenProps extends ComposerProps {
|
||||
final: boolean;
|
||||
letterLogo?: boolean;
|
||||
onOpen?: () => void;
|
||||
polishedText?: boolean;
|
||||
}
|
||||
|
||||
const FocusStackScreen = ({
|
||||
final,
|
||||
letterLogo = false,
|
||||
onChange,
|
||||
onOpen,
|
||||
onSubmit,
|
||||
polishedText = false,
|
||||
statusMessage,
|
||||
value,
|
||||
}: FocusStackScreenProps) => (
|
||||
<div className="mx-auto flex h-[min(100dvh,844px)] w-full max-w-[390px] flex-col overflow-hidden bg-white text-[#0b0b0a]">
|
||||
<ProductHeader
|
||||
assistant={final}
|
||||
avatar={final}
|
||||
letterLogo={letterLogo}
|
||||
subtitle={final ? "4 active work units" : "Workspace is active"}
|
||||
/>
|
||||
<main className="relative min-h-0 flex-1 bg-[#f7f8f5]">
|
||||
<div className={cn("absolute inset-x-5", final ? "top-8" : "top-[25px]")}>
|
||||
<div className="flex items-center">
|
||||
<h2 className="text-[29px] leading-9 font-semibold tracking-[-0.05em]">
|
||||
Daily focus
|
||||
</h2>
|
||||
{final ? (
|
||||
<span className="ml-auto rounded-full bg-white px-3 py-1.5 text-[11px] font-semibold text-[#5f5b57]">
|
||||
MON 20
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="mt-1 text-[14px] leading-5 text-[#807b76]">
|
||||
{final
|
||||
? "One priority is moving. Two items need attention."
|
||||
: "You have 4 active work units today."}
|
||||
</p>
|
||||
</div>
|
||||
<section
|
||||
aria-label="Stacked work units"
|
||||
className={cn(
|
||||
"absolute inset-x-0 h-[509px]",
|
||||
final ? "top-[135px]" : "top-[142px]"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"absolute top-0 z-10 flex h-24 items-start gap-2 rounded-[26px] bg-[#f1e8ff] px-4 pt-4",
|
||||
final ? "inset-x-16" : "inset-x-[58px]"
|
||||
)}
|
||||
>
|
||||
<span className="rounded-full bg-[#e7d8ff] px-2 py-1 text-[10px] font-semibold text-[#7137ef]">
|
||||
RESEARCHING
|
||||
</span>
|
||||
<span className="pt-1 text-[10px] text-[#9a7ac5]">WORK-402</span>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"absolute top-[37px] z-20 flex h-24 items-start gap-2 rounded-[27px] bg-[#fff0e8] px-4 pt-4",
|
||||
final ? "inset-x-11" : "inset-x-[42px]"
|
||||
)}
|
||||
>
|
||||
<span className="rounded-full bg-[#ffe0cf] px-2 py-1 text-[10px] font-semibold text-[#c53c08]">
|
||||
BLOCKED
|
||||
</span>
|
||||
<span className="pt-1 text-[10px] text-[#c68168]">BUG-12</span>
|
||||
</div>
|
||||
<FocusCard
|
||||
final={final}
|
||||
finalStateLeadingArticle={final && !letterLogo}
|
||||
onOpen={onOpen}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"absolute inset-x-0 flex justify-center gap-2",
|
||||
final ? "bottom-[22px]" : "bottom-[39px]"
|
||||
)}
|
||||
>
|
||||
<span className="h-1.5 w-6 rounded-full bg-black" />
|
||||
<span className="size-1.5 rounded-full bg-[#d4d3cf]" />
|
||||
<span className="size-1.5 rounded-full bg-[#d4d3cf]" />
|
||||
<span
|
||||
className={cn(
|
||||
"size-1.5 rounded-full bg-[#d4d3cf]",
|
||||
final && "hidden"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
{polishedText ? (
|
||||
<span className="sr-only">Polished stacked work-unit reference</span>
|
||||
) : null}
|
||||
</main>
|
||||
<ReferenceComposer
|
||||
homeIndicator={final}
|
||||
onChange={onChange}
|
||||
onSubmit={onSubmit}
|
||||
placeholder={
|
||||
final
|
||||
? "Ask Zopu or create new work..."
|
||||
: "Ask anything or create new work..."
|
||||
}
|
||||
statusMessage={statusMessage}
|
||||
value={value}
|
||||
{...(final ? { hint: "Use @ to reference a work unit" } : {})}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const WorkFeedScreen = ({
|
||||
onChange,
|
||||
onOpenAssistant,
|
||||
@@ -1147,22 +905,6 @@ export const MobileWorkspaceScreenRenderer = ({
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (variant === "stacked-final" || variant === "stacked-final-check") {
|
||||
return (
|
||||
<FocusStackScreen
|
||||
{...composerProps}
|
||||
final
|
||||
letterLogo={variant === "stacked-final-check"}
|
||||
onOpen={onOpenUnit}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<FocusStackScreen
|
||||
{...composerProps}
|
||||
final={false}
|
||||
onOpen={onOpenUnit}
|
||||
polishedText={variant === "stacked-work-units"}
|
||||
/>
|
||||
);
|
||||
variant satisfies never;
|
||||
return null;
|
||||
};
|
||||
|
||||
@@ -1,937 +0,0 @@
|
||||
import { cn } from "@code/ui/lib/utils";
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowUp,
|
||||
Check,
|
||||
ChevronRight,
|
||||
FileText,
|
||||
Mic,
|
||||
MoreHorizontal,
|
||||
Paperclip,
|
||||
Plus,
|
||||
Sparkles,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import type {
|
||||
ComponentProps,
|
||||
FormEvent,
|
||||
KeyboardEvent,
|
||||
ReactNode,
|
||||
} from "react";
|
||||
|
||||
type WorkUnitTone = "blocked" | "progress" | "ready" | "research";
|
||||
|
||||
interface WorkUnitSummary {
|
||||
code: string;
|
||||
description: string;
|
||||
id: string;
|
||||
progress?: number;
|
||||
status: string;
|
||||
title: string;
|
||||
tone: WorkUnitTone;
|
||||
}
|
||||
|
||||
interface WorkUnitDetail extends WorkUnitSummary {
|
||||
activity: {
|
||||
detail: string;
|
||||
id: string;
|
||||
title: string;
|
||||
}[];
|
||||
artifacts: number;
|
||||
currentState: string;
|
||||
nextMilestone: string;
|
||||
nextMilestoneDetail: string;
|
||||
weeklyActivity: number;
|
||||
}
|
||||
|
||||
const toneClasses: Record<
|
||||
WorkUnitTone,
|
||||
{
|
||||
badge: string;
|
||||
card: string;
|
||||
copy: string;
|
||||
muted: string;
|
||||
}
|
||||
> = {
|
||||
blocked: {
|
||||
badge: "bg-[#ffe0cf] text-[#c53c08]",
|
||||
card: "bg-[#fff0e8]",
|
||||
copy: "text-[#8a2e13]",
|
||||
muted: "text-[#c68168]",
|
||||
},
|
||||
progress: {
|
||||
badge: "bg-[#d6e2ff] text-[#315dc0]",
|
||||
card: "bg-[#e8efff]",
|
||||
copy: "text-[#14265f]",
|
||||
muted: "text-[#6e83b4]",
|
||||
},
|
||||
ready: {
|
||||
badge: "bg-[#dff4e8] text-[#238050]",
|
||||
card: "bg-[#e8f7ef]",
|
||||
copy: "text-[#105c35]",
|
||||
muted: "text-[#61a17e]",
|
||||
},
|
||||
research: {
|
||||
badge: "bg-[#e7d8ff] text-[#7137ef]",
|
||||
card: "bg-[#f1e8ff]",
|
||||
copy: "text-[#3e0b74]",
|
||||
muted: "text-[#9a7ac5]",
|
||||
},
|
||||
};
|
||||
|
||||
const MobileWorkspaceHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: ComponentProps<"header">) => (
|
||||
<header
|
||||
className={cn(
|
||||
"flex h-[72px] shrink-0 items-center bg-[#fbfcf9] px-4",
|
||||
className
|
||||
)}
|
||||
data-slot="mobile-workspace-header"
|
||||
{...props}
|
||||
>
|
||||
<div className="flex size-10 items-center justify-center rounded-[14px] bg-[#c7ff00] text-xl font-bold text-black">
|
||||
Z
|
||||
</div>
|
||||
<div className="ml-3 min-w-0">
|
||||
<h1 className="text-[20px] leading-6 font-semibold tracking-[-0.025em] text-[#11110f]">
|
||||
Zopu
|
||||
</h1>
|
||||
<p className="mt-0.5 flex items-center gap-2 text-[13px] text-[#77736f]">
|
||||
<span className="size-1.5 rounded-full bg-[#62a91e]" />4 active work
|
||||
units
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
aria-label="Open Zopu assistant"
|
||||
className="ml-auto flex size-10 items-center justify-center rounded-full bg-[#f1f2ee] text-[9px] font-semibold text-[#11110f] transition-transform active:scale-95"
|
||||
type="button"
|
||||
>
|
||||
ZOPU
|
||||
</button>
|
||||
<button
|
||||
aria-label="Open profile"
|
||||
className="ml-2 flex size-10 items-center justify-center rounded-full bg-[#0b0b0a] text-[13px] font-semibold text-white transition-transform active:scale-95"
|
||||
type="button"
|
||||
>
|
||||
YM
|
||||
</button>
|
||||
</header>
|
||||
);
|
||||
|
||||
interface MobileCommandComposerProps extends Omit<
|
||||
ComponentProps<"form">,
|
||||
"onChange" | "onSubmit"
|
||||
> {
|
||||
contextLabel?: string;
|
||||
hint?: string;
|
||||
onChange: (value: string) => void;
|
||||
onSubmit: (event: FormEvent<HTMLFormElement>) => void;
|
||||
placeholder: string;
|
||||
statusMessage?: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const handleCommandKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (
|
||||
event.key === "Enter" &&
|
||||
!event.shiftKey &&
|
||||
!event.nativeEvent.isComposing
|
||||
) {
|
||||
event.preventDefault();
|
||||
event.currentTarget.form?.requestSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
const MobileCommandComposer = ({
|
||||
className,
|
||||
contextLabel,
|
||||
hint = "Use @ to reference a work unit",
|
||||
onChange,
|
||||
onSubmit,
|
||||
placeholder,
|
||||
statusMessage,
|
||||
value,
|
||||
...props
|
||||
}: MobileCommandComposerProps) => (
|
||||
<footer
|
||||
className="shrink-0 border-t border-[#eff0ec] bg-[#fbfcf9] px-3 pt-2.5 pb-[max(12px,env(safe-area-inset-bottom))]"
|
||||
data-slot="mobile-command-composer"
|
||||
>
|
||||
{contextLabel ? (
|
||||
<div className="mb-2 flex h-6 w-fit items-center gap-2 rounded-full bg-[#dce7ff] px-2.5 text-[10px] font-semibold text-[#315dc0]">
|
||||
<span className="size-1.5 rounded-full bg-[#315dc0]" />
|
||||
{contextLabel}
|
||||
<X className="size-3" />
|
||||
</div>
|
||||
) : null}
|
||||
<form
|
||||
className={cn(
|
||||
"flex min-h-[62px] items-center rounded-[31px] bg-[#f1f2ef] p-2",
|
||||
className
|
||||
)}
|
||||
onSubmit={onSubmit}
|
||||
{...props}
|
||||
>
|
||||
<button
|
||||
aria-label="Add attachment"
|
||||
className="flex size-11 shrink-0 items-center justify-center rounded-full bg-white text-[#5d5a56] transition-transform active:scale-95"
|
||||
type="button"
|
||||
>
|
||||
<Plus className="size-5" strokeWidth={1.8} />
|
||||
</button>
|
||||
<label className="ml-2 min-w-0 flex-1">
|
||||
<span className="sr-only">{placeholder}</span>
|
||||
<textarea
|
||||
className="block max-h-20 min-h-5 w-full resize-none bg-transparent text-[14px] leading-5 text-[#24231f] outline-none placeholder:text-[#b1adaa]"
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
onKeyDown={handleCommandKeyDown}
|
||||
placeholder={placeholder}
|
||||
rows={1}
|
||||
value={value}
|
||||
/>
|
||||
<span className="block truncate text-[10px] leading-4 text-[#c0bcb8]">
|
||||
{statusMessage ?? hint}
|
||||
</span>
|
||||
</label>
|
||||
<button
|
||||
aria-label="Send"
|
||||
className="ml-2 flex size-11 shrink-0 items-center justify-center rounded-full bg-[#0b0b0a] text-white transition-transform active:scale-95 disabled:bg-[#d7d7d2] disabled:text-[#999792]"
|
||||
disabled={!value.trim()}
|
||||
type="submit"
|
||||
>
|
||||
<ArrowUp className="size-5" strokeWidth={2.2} />
|
||||
</button>
|
||||
</form>
|
||||
</footer>
|
||||
);
|
||||
|
||||
const WorkStatusBadge = ({
|
||||
className,
|
||||
tone,
|
||||
...props
|
||||
}: ComponentProps<"span"> & { tone: WorkUnitTone }) => (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex h-6 items-center rounded-full px-2 text-[10px] leading-none font-semibold",
|
||||
toneClasses[tone].badge,
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
interface FocusWorkCardProps extends ComponentProps<"article"> {
|
||||
onOpen: () => void;
|
||||
unit: WorkUnitSummary;
|
||||
}
|
||||
|
||||
const FocusWorkCard = ({
|
||||
className,
|
||||
onOpen,
|
||||
unit,
|
||||
...props
|
||||
}: FocusWorkCardProps) => (
|
||||
<article
|
||||
className={cn(
|
||||
"absolute inset-x-5 top-[86px] z-30 min-h-[365px] rounded-[30px] px-5 pt-5 pb-4",
|
||||
toneClasses[unit.tone].card,
|
||||
toneClasses[unit.tone].copy,
|
||||
className
|
||||
)}
|
||||
data-slot="focus-work-card"
|
||||
{...props}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<WorkStatusBadge tone={unit.tone}>{unit.status}</WorkStatusBadge>
|
||||
<span className={cn("text-[10px]", toneClasses[unit.tone].muted)}>
|
||||
{unit.code}
|
||||
</span>
|
||||
<MoreHorizontal className="ml-auto size-5" />
|
||||
</div>
|
||||
<h3 className="mt-4 text-[25px] leading-[1.05] font-semibold tracking-[-0.045em]">
|
||||
{unit.title}
|
||||
</h3>
|
||||
<p className={cn("mt-2 text-[13px]", toneClasses[unit.tone].muted)}>
|
||||
Customer experience · Updated 4 min ago
|
||||
</p>
|
||||
<div className="mt-3 border-t border-[#315dc0]/15 pt-3">
|
||||
<p className="text-[10px] font-semibold text-[#6e83b4]">CURRENT STATE</p>
|
||||
<p className="mt-1 line-clamp-2 text-[14px] leading-5 text-[#33405c]">
|
||||
{unit.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-4 h-2 overflow-hidden rounded-full bg-[#315dc0]/15">
|
||||
<div
|
||||
className="h-full rounded-full bg-[#315dc0]"
|
||||
style={{ width: `${unit.progress ?? 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-1.5 flex text-[10px] font-semibold text-[#315dc0]">
|
||||
<span>{unit.progress}% COMPLETE</span>
|
||||
<span className="ml-auto font-normal text-[#6e83b4]">On track</span>
|
||||
</div>
|
||||
<div className="mt-5 flex items-center border-t border-[#315dc0]/15 pt-4">
|
||||
<span className="flex size-10 shrink-0 items-center justify-center rounded-[14px] bg-white text-[#315dc0]">
|
||||
<Check className="size-5" />
|
||||
</span>
|
||||
<div className="ml-2.5 min-w-0">
|
||||
<p className="text-[10px] font-semibold text-[#6e83b4]">NEXT ACTION</p>
|
||||
<p className="truncate text-[14px] font-semibold">
|
||||
Review welcome copy
|
||||
</p>
|
||||
<p className="text-[10px] text-[#6e83b4]">About 5 minutes</p>
|
||||
</div>
|
||||
<button
|
||||
className="ml-auto flex h-12 shrink-0 items-center gap-1 rounded-[19px] bg-[#c7ff00] px-4 text-[13px] font-semibold text-black transition-transform active:scale-[0.98]"
|
||||
onClick={onOpen}
|
||||
type="button"
|
||||
>
|
||||
Open unit
|
||||
<ChevronRight className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
|
||||
interface MobileStackedFocusProps extends Omit<
|
||||
ComponentProps<"main">,
|
||||
"onSelect"
|
||||
> {
|
||||
activeIndex: number;
|
||||
onOpen: () => void;
|
||||
onSelect: (index: number) => void;
|
||||
units: WorkUnitSummary[];
|
||||
}
|
||||
|
||||
const MobileStackedFocus = ({
|
||||
activeIndex,
|
||||
className,
|
||||
onOpen,
|
||||
onSelect,
|
||||
units,
|
||||
...props
|
||||
}: MobileStackedFocusProps) => {
|
||||
const activeUnit = units[activeIndex] ?? units[0];
|
||||
if (!activeUnit) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<main
|
||||
className={cn(
|
||||
"min-h-0 flex-1 overflow-y-auto bg-[#f7f8f5] px-5 pt-7",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<h2 className="text-[29px] font-semibold tracking-[-0.045em] text-[#11110f]">
|
||||
Daily focus
|
||||
</h2>
|
||||
<span className="ml-auto rounded-full bg-white px-3 py-1.5 text-[11px] font-semibold text-[#5f5b57]">
|
||||
MON 20
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 text-[14px] text-[#807b76]">
|
||||
One priority is moving. Two items need attention.
|
||||
</p>
|
||||
|
||||
<section
|
||||
aria-label="Active work units"
|
||||
className="relative mx-[-20px] mt-5 h-[502px]"
|
||||
>
|
||||
<button
|
||||
className="absolute inset-x-16 top-0 z-10 flex h-24 items-start gap-2 rounded-[26px] bg-[#f1e8ff] px-4 pt-4 text-left"
|
||||
onClick={() => onSelect(0)}
|
||||
type="button"
|
||||
>
|
||||
<WorkStatusBadge tone="research">RESEARCHING</WorkStatusBadge>
|
||||
<span className="pt-1 text-[10px] text-[#9a7ac5]">WORK-402</span>
|
||||
</button>
|
||||
<button
|
||||
className="absolute inset-x-11 top-[37px] z-20 flex h-24 items-start gap-2 rounded-[27px] bg-[#fff0e8] px-4 pt-4 text-left"
|
||||
onClick={() => onSelect(1)}
|
||||
type="button"
|
||||
>
|
||||
<WorkStatusBadge tone="blocked">BLOCKED</WorkStatusBadge>
|
||||
<span className="pt-1 text-[10px] text-[#c68168]">BUG-12</span>
|
||||
</button>
|
||||
<FocusWorkCard onOpen={onOpen} unit={activeUnit} />
|
||||
<div
|
||||
aria-label={`Work unit ${activeIndex + 1} of ${units.length}`}
|
||||
className="absolute inset-x-0 bottom-3 flex justify-center gap-2"
|
||||
>
|
||||
{units.map((unit, index) => (
|
||||
<button
|
||||
aria-label={`Show ${unit.title}`}
|
||||
className={cn(
|
||||
"size-1.5 rounded-full bg-[#d3d3cf]",
|
||||
index === activeIndex && "w-6 bg-[#11110f]"
|
||||
)}
|
||||
key={unit.id}
|
||||
onClick={() => onSelect(index)}
|
||||
type="button"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
interface MobileWorkFeedProps extends ComponentProps<"main"> {
|
||||
onOpen: () => void;
|
||||
}
|
||||
|
||||
const MobileWorkFeed = ({
|
||||
className,
|
||||
onOpen,
|
||||
...props
|
||||
}: MobileWorkFeedProps) => (
|
||||
<main
|
||||
className={cn(
|
||||
"min-h-0 flex-1 overflow-y-auto bg-[#f7f8f5] px-4 pt-3 pb-5",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<h2 className="text-[29px] font-semibold tracking-[-0.045em]">
|
||||
Good morning.
|
||||
</h2>
|
||||
<p className="mt-1 text-[14px] text-[#807b76]">
|
||||
Your work is moving. Two things need you.
|
||||
</p>
|
||||
<div className="mt-3 grid grid-cols-3 gap-2">
|
||||
{[
|
||||
["ACTIVE", "4 units", "bg-white text-black"],
|
||||
["NEEDS YOU", "2 blockers", "bg-[#fff0e8] text-[#9a3215]"],
|
||||
["SHIPPED", "3 this week", "bg-[#e8f7ef] text-[#23633d]"],
|
||||
].map(([label, value, color]) => (
|
||||
<div
|
||||
className={cn("h-14 rounded-[18px] px-2.5 py-2", color)}
|
||||
key={label}
|
||||
>
|
||||
<p className="text-[9px] font-semibold">{label}</p>
|
||||
<p className="mt-0.5 whitespace-nowrap text-[14px] font-semibold">
|
||||
{value}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-5 flex items-center">
|
||||
<h3 className="text-[14px] font-semibold">Now</h3>
|
||||
<span className="ml-auto text-[12px] text-[#807b76]">View all 6</span>
|
||||
</div>
|
||||
<article className="mt-3 rounded-[27px] bg-[#e8efff] p-3.5 text-[#14265f]">
|
||||
<div className="flex items-center text-[11px] font-semibold text-[#315dc0]">
|
||||
IN PROGRESS · 68%
|
||||
<ChevronRight className="ml-auto size-4" />
|
||||
</div>
|
||||
<h3 className="mt-3 text-[20px] font-semibold tracking-[-0.03em]">
|
||||
Launch the new onboarding flow
|
||||
</h3>
|
||||
<p className="mt-1 line-clamp-2 text-[13px] text-[#526482]">
|
||||
First-run flow mapped. Zopu is drafting the welcome sequence.
|
||||
</p>
|
||||
<div className="mt-4 h-2 rounded-full bg-[#315dc0]/15">
|
||||
<div className="h-full w-[68%] rounded-full bg-[#315dc0]" />
|
||||
</div>
|
||||
<div className="mt-3 flex gap-2">
|
||||
<div className="min-w-0 flex-1 rounded-[16px] bg-white px-3 py-2">
|
||||
<p className="text-[9px] font-semibold text-[#8a97b5]">NEXT ACTION</p>
|
||||
<p className="truncate text-[12px] font-semibold">
|
||||
Review the welcome copy
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
className="rounded-[16px] bg-[#c7ff00] px-4 text-[12px] font-semibold text-black active:scale-[0.98]"
|
||||
onClick={onOpen}
|
||||
type="button"
|
||||
>
|
||||
Open unit →
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
<article className="mt-3 rounded-[25px] bg-[#fff0e8] p-3.5 text-[#8a2e13]">
|
||||
<p className="text-[11px] font-semibold text-[#c53c08]">
|
||||
● WAITING ON YOU
|
||||
</p>
|
||||
<h3 className="mt-3 text-[18px] font-semibold">
|
||||
Fix GitHub authentication bug
|
||||
</h3>
|
||||
<p className="mt-1 text-[12px]">Blocked by missing Safari repro logs</p>
|
||||
<button
|
||||
className="mt-3 ml-auto block rounded-[14px] bg-white px-5 py-2 text-[11px] font-semibold"
|
||||
type="button"
|
||||
>
|
||||
Add logs
|
||||
</button>
|
||||
</article>
|
||||
<div className="mt-3 grid grid-cols-2 gap-2">
|
||||
<article className="rounded-[24px] bg-[#f1e8ff] p-4 text-[#3e0b74]">
|
||||
<p className="text-[10px] font-semibold text-[#7137ef]">RESEARCHING</p>
|
||||
<h3 className="mt-3 text-[15px] font-semibold">Pricing page rewrite</h3>
|
||||
<p className="mt-1 text-[11px] text-[#7f7190]">8 competitors</p>
|
||||
</article>
|
||||
<article className="rounded-[24px] bg-[#e8f7ef] p-4 text-[#105c35]">
|
||||
<p className="text-[10px] font-semibold text-[#238050]">READY</p>
|
||||
<h3 className="mt-3 text-[15px] font-semibold">Q3 launch brief</h3>
|
||||
<p className="mt-1 text-[11px] text-[#668678]">Ready for review</p>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
interface MobileVerticalWorkStackProps extends ComponentProps<"main"> {
|
||||
expanded: boolean;
|
||||
onOpen: () => void;
|
||||
onToggleExpanded: () => void;
|
||||
}
|
||||
|
||||
const MobileVerticalWorkStack = ({
|
||||
className,
|
||||
expanded,
|
||||
onOpen,
|
||||
onToggleExpanded,
|
||||
...props
|
||||
}: MobileVerticalWorkStackProps) => (
|
||||
<main
|
||||
className={cn(
|
||||
"min-h-0 flex-1 overflow-y-auto bg-[#f7f8f5] px-5 pt-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<h2 className="text-[29px] font-semibold tracking-[-0.045em]">
|
||||
Work in motion
|
||||
</h2>
|
||||
<span className="ml-auto rounded-full bg-white px-3 py-1.5 text-[11px] font-semibold text-[#5f5b57]">
|
||||
MON 20
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 text-[14px] text-[#807b76]">
|
||||
{expanded
|
||||
? "One work unit is expanded in the stack."
|
||||
: "Scroll vertically. Tap a card to expand it in place."}
|
||||
</p>
|
||||
<div className="mt-8 flex text-[12px]">
|
||||
<span className="font-semibold">ACTIVE WORK</span>
|
||||
<span className="ml-auto text-[#807b76]">4 units</span>
|
||||
</div>
|
||||
<section className="relative mx-[-4px] mt-3 h-[550px]">
|
||||
<button
|
||||
className="absolute inset-x-3 top-0 h-[150px] rounded-[28px] bg-[#f1e8ff] p-5 text-left text-[#3e0b74]"
|
||||
onClick={onToggleExpanded}
|
||||
type="button"
|
||||
>
|
||||
<span className="text-[10px] font-semibold text-[#7137ef]">
|
||||
RESEARCHING
|
||||
</span>
|
||||
<span className="float-right text-[10px] text-[#9a7ac5]">WORK-402</span>
|
||||
<strong className="mt-4 block text-[22px]">Rewrite pricing page</strong>
|
||||
</button>
|
||||
<button
|
||||
className="absolute inset-x-1 top-[70px] h-[150px] rounded-[28px] bg-[#fff0e8] p-5 text-left text-[#8a2e13]"
|
||||
onClick={onToggleExpanded}
|
||||
type="button"
|
||||
>
|
||||
<span className="text-[10px] font-semibold text-[#c53c08]">
|
||||
BLOCKED
|
||||
</span>
|
||||
<span className="float-right text-[10px] text-[#c68168]">BUG-12</span>
|
||||
<strong className="mt-4 block text-[22px]">
|
||||
Fix GitHub authentication
|
||||
</strong>
|
||||
</button>
|
||||
<article className="absolute inset-x-[-3px] top-[142px] h-[150px] rounded-[28px] bg-[#e8f7ef] p-5 text-[#105c35]">
|
||||
<span className="text-[10px] font-semibold text-[#238050]">
|
||||
READY FOR REVIEW
|
||||
</span>
|
||||
<span className="float-right text-[10px] text-[#61a17e]">BRIEF-03</span>
|
||||
<strong className="mt-4 block text-[22px]">Q3 launch brief</strong>
|
||||
</article>
|
||||
<article
|
||||
className={cn(
|
||||
"absolute inset-x-[-7px] top-[216px] rounded-[30px] bg-[#e8efff] p-5 text-[#14265f] transition-[height] duration-300",
|
||||
expanded ? "h-[490px]" : "h-[330px]"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<WorkStatusBadge tone="progress">IN PROGRESS</WorkStatusBadge>
|
||||
<span className="ml-auto text-[10px] text-[#6e83b4]">FLOW-08</span>
|
||||
</div>
|
||||
<h3 className="mt-4 text-[24px] leading-[1.08] font-semibold tracking-[-0.04em]">
|
||||
Launch onboarding flow
|
||||
</h3>
|
||||
<p className="mt-2 text-[13px] text-[#60718e]">
|
||||
Welcome copy and activation checklist are being drafted.
|
||||
</p>
|
||||
<div className="mt-4 h-2 rounded-full bg-[#315dc0]/15">
|
||||
<div className="h-full w-[68%] rounded-full bg-[#315dc0]" />
|
||||
</div>
|
||||
<div className="mt-2 flex text-[10px] font-semibold text-[#315dc0]">
|
||||
68% COMPLETE
|
||||
<span className="ml-auto font-normal text-[#6e83b4]">On track</span>
|
||||
</div>
|
||||
<button
|
||||
className="mt-5 w-full border-t border-[#315dc0]/15 pt-4 text-left"
|
||||
onClick={onOpen}
|
||||
type="button"
|
||||
>
|
||||
<span className="text-[10px] font-semibold text-[#6e83b4]">
|
||||
NEXT MILESTONE
|
||||
</span>
|
||||
<span className="mt-1 block text-[14px] font-semibold">
|
||||
Review welcome copy →
|
||||
</span>
|
||||
</button>
|
||||
{expanded ? (
|
||||
<div className="mt-4 grid grid-cols-2 gap-2">
|
||||
<div className="rounded-[18px] bg-[#dce6fc] p-3">
|
||||
<span className="text-[10px] text-[#6e83b4]">ARTIFACTS</span>
|
||||
<strong className="mt-1 block text-xl">2</strong>
|
||||
</div>
|
||||
<div className="rounded-[18px] bg-[#dce6fc] p-3">
|
||||
<span className="text-[10px] text-[#6e83b4]">ACTIVITY</span>
|
||||
<strong className="mt-1 block text-xl">12</strong>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
|
||||
interface MobileWorkUnitDetailProps extends ComponentProps<"main"> {
|
||||
unit: WorkUnitDetail;
|
||||
}
|
||||
|
||||
const MobileWorkUnitDetail = ({
|
||||
className,
|
||||
unit,
|
||||
...props
|
||||
}: MobileWorkUnitDetailProps) => (
|
||||
<main
|
||||
className={cn(
|
||||
"min-h-0 flex-1 overflow-y-auto bg-[#f7f8f5] px-4 py-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<article className="rounded-[30px] bg-[#e8efff] p-5 text-[#14265f]">
|
||||
<div className="flex items-center">
|
||||
<WorkStatusBadge tone="progress">{unit.status}</WorkStatusBadge>
|
||||
<span className="ml-auto text-[11px] text-[#6e83b4]">
|
||||
{unit.progress}%
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="mt-5 text-[29px] leading-[1.05] font-semibold tracking-[-0.045em]">
|
||||
{unit.title}
|
||||
</h1>
|
||||
<p className="mt-8 text-[14px] leading-5 text-[#60718e]">
|
||||
{unit.description}
|
||||
</p>
|
||||
<div className="mt-4 h-2 rounded-full bg-[#315dc0]/15">
|
||||
<div
|
||||
className="h-full rounded-full bg-[#315dc0]"
|
||||
style={{ width: `${unit.progress ?? 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2 flex text-[10px] font-semibold text-[#315dc0]">
|
||||
ON TRACK
|
||||
<span className="ml-auto font-normal text-[#6e83b4]">
|
||||
Updated 4m ago
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-5 border-t border-[#315dc0]/15 pt-4">
|
||||
<p className="text-[10px] font-semibold text-[#6e83b4]">
|
||||
CURRENT STATE
|
||||
</p>
|
||||
<p className="mt-1 text-[14px] leading-5 text-[#33405c]">
|
||||
{unit.currentState}
|
||||
</p>
|
||||
</div>
|
||||
<section className="mt-5 flex items-center rounded-[19px] bg-white p-3">
|
||||
<span className="flex size-10 items-center justify-center rounded-[13px] bg-[#c7ff00] text-black">
|
||||
<Check className="size-5" />
|
||||
</span>
|
||||
<div className="ml-3 min-w-0">
|
||||
<p className="text-[10px] font-semibold text-[#6e83b4]">
|
||||
NEXT MILESTONE
|
||||
</p>
|
||||
<p className="truncate text-[14px] font-semibold">
|
||||
{unit.nextMilestone}
|
||||
</p>
|
||||
<p className="text-[10px] text-[#6e83b4]">
|
||||
{unit.nextMilestoneDetail}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<div className="mt-3 grid grid-cols-2 gap-2">
|
||||
<div className="rounded-[19px] bg-[#dce6fc] p-3">
|
||||
<p className="text-[10px] font-semibold text-[#6e83b4]">ARTIFACTS</p>
|
||||
<strong className="mt-1 block text-xl">{unit.artifacts}</strong>
|
||||
<span className="text-[10px] text-[#60718e]">
|
||||
Flow map · Copy draft
|
||||
</span>
|
||||
</div>
|
||||
<div className="rounded-[19px] bg-[#dce6fc] p-3">
|
||||
<p className="text-[10px] font-semibold text-[#6e83b4]">ACTIVITY</p>
|
||||
<strong className="mt-1 block text-xl">{unit.weeklyActivity}</strong>
|
||||
<span className="text-[10px] text-[#60718e]">Actions this week</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex items-center text-[11px] font-semibold text-[#6e83b4]">
|
||||
RECENT ACTIVITY
|
||||
<button className="ml-auto font-normal text-[#315dc0]" type="button">
|
||||
View all
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-2 grid gap-2">
|
||||
{unit.activity.map((item) => (
|
||||
<div className="flex items-center gap-3" key={item.id}>
|
||||
<span className="flex size-8 shrink-0 items-center justify-center rounded-[11px] bg-white text-[#315dc0]">
|
||||
{item.id === "updated" ? "Z" : "↗"}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-[12px] font-semibold text-[#33405c]">
|
||||
{item.title}
|
||||
</p>
|
||||
<p className="text-[10px] text-[#6e83b4]">{item.detail}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
);
|
||||
|
||||
interface MobileWorkUnitHeaderProps extends ComponentProps<"header"> {
|
||||
onBack: () => void;
|
||||
unit: WorkUnitSummary;
|
||||
}
|
||||
|
||||
const MobileWorkUnitHeader = ({
|
||||
className,
|
||||
onBack,
|
||||
unit,
|
||||
...props
|
||||
}: MobileWorkUnitHeaderProps) => (
|
||||
<header
|
||||
className={cn(
|
||||
"flex h-[78px] shrink-0 items-center bg-[#fbfcf9] px-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<button
|
||||
aria-label="Back to work units"
|
||||
className="flex size-10 items-center justify-center rounded-full bg-white text-[#24231f] active:scale-95"
|
||||
onClick={onBack}
|
||||
type="button"
|
||||
>
|
||||
<ArrowLeft className="size-5" />
|
||||
</button>
|
||||
<div className="min-w-0 flex-1 text-center">
|
||||
<p className="text-[16px] font-semibold">Work unit</p>
|
||||
<p className="text-[11px] text-[#807b76]">
|
||||
{unit.code} · {unit.status}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
aria-label="More work unit actions"
|
||||
className="flex size-10 items-center justify-center rounded-full bg-white active:scale-95"
|
||||
type="button"
|
||||
>
|
||||
<MoreHorizontal className="size-5" />
|
||||
</button>
|
||||
</header>
|
||||
);
|
||||
|
||||
interface MobileCharacterChatProps extends Omit<
|
||||
ComponentProps<"main">,
|
||||
"onChange" | "onSubmit"
|
||||
> {
|
||||
onChange: (value: string) => void;
|
||||
onSubmit: (event: FormEvent<HTMLFormElement>) => void;
|
||||
statusMessage?: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const MobileCharacterChat = ({
|
||||
className,
|
||||
onChange,
|
||||
onSubmit,
|
||||
statusMessage,
|
||||
value,
|
||||
...props
|
||||
}: MobileCharacterChatProps) => (
|
||||
<main
|
||||
className={cn(
|
||||
"flex min-h-0 flex-1 flex-col overflow-y-auto bg-white px-4 pt-5",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<header className="flex items-center">
|
||||
<span className="flex size-10 items-center justify-center rounded-[14px] bg-[#c7ff00]">
|
||||
<Sparkles className="size-5" />
|
||||
</span>
|
||||
<div className="ml-3">
|
||||
<h1 className="text-[20px] font-semibold">Zopu</h1>
|
||||
<p className="flex items-center gap-2 text-[12px] text-[#64615d]">
|
||||
<span className="size-1.5 rounded-full bg-[#1acb72]" />
|
||||
Ready to help
|
||||
</p>
|
||||
</div>
|
||||
<MoreHorizontal className="ml-auto size-5" />
|
||||
</header>
|
||||
<div className="mt-10 w-fit rounded-full bg-[#f4f4f2] px-3 py-1.5 text-[10px] text-[#aaa7a3]">
|
||||
TODAY • 9:41 AM
|
||||
</div>
|
||||
<div className="mt-5 flex items-center gap-2 text-[14px] text-[#55524f]">
|
||||
<Sparkles className="size-4" />
|
||||
<strong>Zopu</strong>
|
||||
<span className="text-[#b5b2ae]">• a fresh start</span>
|
||||
</div>
|
||||
<p className="mt-3 text-[18px] leading-6">
|
||||
Good morning. What are we making clearer today?
|
||||
</p>
|
||||
<div className="mt-4 flex gap-6 text-[12px] font-semibold text-[#55524f]">
|
||||
<button className="flex items-center gap-2" type="button">
|
||||
<FileText className="size-4" />
|
||||
Summarize
|
||||
</button>
|
||||
<button type="button">☷ Plan</button>
|
||||
<button type="button">◉ Explore</button>
|
||||
</div>
|
||||
<div className="mt-7 ml-auto max-w-[275px] rounded-[22px] bg-[#0c0c0b] px-4 py-3 text-[17px] leading-6 text-white">
|
||||
Turn my messy notes into a focused plan.
|
||||
</div>
|
||||
<p className="mt-1 ml-auto text-[10px] text-[#b5b2ae]">
|
||||
9:42 AM <span className="text-[#1acb72]">✓</span>
|
||||
</p>
|
||||
<div className="mt-5 flex items-center gap-2">
|
||||
<span className="flex size-7 items-center justify-center rounded-[9px] bg-[#c7ff00]">
|
||||
<Sparkles className="size-4" />
|
||||
</span>
|
||||
<strong className="text-[14px]">Zopu</strong>
|
||||
<span className="rounded-full bg-[#f1f1ef] px-2 py-1 text-[9px] text-[#aaa7a3]">
|
||||
THINKING PARTNER
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-3 text-[17px] leading-6">
|
||||
Absolutely. I’ll turn the noise into a small set of next steps, then leave
|
||||
room for the unexpected.
|
||||
</p>
|
||||
<section className="mt-3 rounded-[22px] bg-[#f4f4f2] p-4">
|
||||
<div className="flex items-center">
|
||||
<span className="flex size-8 items-center justify-center rounded-[10px] bg-[#c7ff00]">
|
||||
↗
|
||||
</span>
|
||||
<div className="ml-3">
|
||||
<h2 className="text-[15px] font-semibold">Weekly reset</h2>
|
||||
<p className="text-[10px] text-[#b5b2ae]">
|
||||
3 focus areas · drafted just now
|
||||
</p>
|
||||
</div>
|
||||
<ChevronRight className="ml-auto size-4" />
|
||||
</div>
|
||||
<ul className="mt-3 space-y-1.5 text-[13px]">
|
||||
<li>🟢 Finish the launch brief</li>
|
||||
<li>● Block two hours for deep work</li>
|
||||
<li className="text-[#77736f]">● Leave an hour for cleanup</li>
|
||||
</ul>
|
||||
</section>
|
||||
<form
|
||||
className="sticky bottom-0 mt-auto bg-white pt-5 pb-[max(12px,env(safe-area-inset-bottom))]"
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
<div className="flex items-center rounded-[30px] bg-[#f4f4f2] p-2">
|
||||
<button
|
||||
aria-label="Attach file"
|
||||
className="flex size-10 items-center justify-center rounded-full bg-white"
|
||||
type="button"
|
||||
>
|
||||
<Paperclip className="size-5" />
|
||||
</button>
|
||||
<input
|
||||
className="min-w-0 flex-1 bg-transparent px-2 text-[14px] outline-none placeholder:text-[#b5b2ae]"
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
placeholder="Ask anything..."
|
||||
value={value}
|
||||
/>
|
||||
<button
|
||||
aria-label="Record voice message"
|
||||
className="flex size-10 items-center justify-center rounded-full bg-white"
|
||||
type="button"
|
||||
>
|
||||
<Mic className="size-5" />
|
||||
</button>
|
||||
<button
|
||||
aria-label="Send"
|
||||
className="ml-1 flex size-10 items-center justify-center rounded-full bg-black text-white disabled:bg-[#d7d7d2]"
|
||||
disabled={!value.trim()}
|
||||
type="submit"
|
||||
>
|
||||
<ArrowUp className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
<p className="mt-2 text-center text-[9px] text-[#b5b2ae]">
|
||||
{statusMessage ?? "Press Enter to send · Shift + Enter for a new line"}
|
||||
</p>
|
||||
</form>
|
||||
</main>
|
||||
);
|
||||
|
||||
interface MobileScreenFrameProps extends ComponentProps<"div"> {
|
||||
label?: ReactNode;
|
||||
}
|
||||
|
||||
const MobileScreenFrame = ({
|
||||
children,
|
||||
className,
|
||||
label,
|
||||
...props
|
||||
}: MobileScreenFrameProps) => (
|
||||
<div
|
||||
className={cn(
|
||||
"relative mx-auto flex h-[100dvh] min-h-0 w-full max-w-[402px] flex-col overflow-hidden bg-[#fbfcf9] text-[#11110f] sm:border-x sm:border-white/10",
|
||||
className
|
||||
)}
|
||||
data-slot="mobile-screen-frame"
|
||||
{...props}
|
||||
>
|
||||
{label}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
export {
|
||||
MobileCharacterChat,
|
||||
MobileCommandComposer,
|
||||
MobileScreenFrame,
|
||||
MobileStackedFocus,
|
||||
MobileVerticalWorkStack,
|
||||
MobileWorkFeed,
|
||||
MobileWorkspaceHeader,
|
||||
MobileWorkUnitDetail,
|
||||
MobileWorkUnitHeader,
|
||||
WorkStatusBadge,
|
||||
};
|
||||
export type {
|
||||
MobileCharacterChatProps,
|
||||
MobileCommandComposerProps,
|
||||
MobileScreenFrameProps,
|
||||
MobileStackedFocusProps,
|
||||
MobileVerticalWorkStackProps,
|
||||
MobileWorkFeedProps,
|
||||
MobileWorkUnitDetailProps,
|
||||
MobileWorkUnitHeaderProps,
|
||||
WorkUnitDetail,
|
||||
WorkUnitSummary,
|
||||
WorkUnitTone,
|
||||
};
|
||||
Reference in New Issue
Block a user