@burdenoff/microfe-coolandlovely 2026.720.2 → 2026.801.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/coolandlovely/CoolAndLovelyRoutes.js +1 -1
- package/dist/coolandlovely/CoolAndLovelyRoutes.js.map +1 -1
- package/dist/coolandlovely/context/CoolAndLovelyContext.js +1 -1
- package/dist/coolandlovely/context/CoolAndLovelyContext.js.map +1 -1
- package/dist/coolandlovely/pages/brands/BrandDetailPage.js +1 -1
- package/dist/coolandlovely/pages/brands/BrandDetailPage.js.map +1 -1
- package/dist/coolandlovely/pages/brands/BrandFormPage.js +1 -1
- package/dist/coolandlovely/pages/brands/BrandFormPage.js.map +1 -1
- package/dist/coolandlovely/pages/collaborations/CollaborationDetailPage.js +1 -1
- package/dist/coolandlovely/pages/collaborations/CollaborationDetailPage.js.map +1 -1
- package/dist/coolandlovely/pages/collaborations/CollaborationFormPage.js +1 -1
- package/dist/coolandlovely/pages/collaborations/CollaborationFormPage.js.map +1 -1
- package/dist/coolandlovely/pages/collections/CollectionDetailPage.js +1 -1
- package/dist/coolandlovely/pages/collections/CollectionDetailPage.js.map +1 -1
- package/dist/coolandlovely/pages/collections/CollectionFormPage.js +1 -1
- package/dist/coolandlovely/pages/collections/CollectionFormPage.js.map +1 -1
- package/dist/coolandlovely/pages/items/StyleItemDetailPage.js +1 -1
- package/dist/coolandlovely/pages/items/StyleItemDetailPage.js.map +1 -1
- package/dist/coolandlovely/pages/items/StyleItemFormPage.js +1 -1
- package/dist/coolandlovely/pages/items/StyleItemFormPage.js.map +1 -1
- package/dist/coolandlovely/pages/lookbooks/LookbookDetailPage.js +1 -1
- package/dist/coolandlovely/pages/lookbooks/LookbookDetailPage.js.map +1 -1
- package/dist/coolandlovely/pages/looks/LookDetailPage.js +1 -1
- package/dist/coolandlovely/pages/looks/LookDetailPage.js.map +1 -1
- package/dist/coolandlovely/pages/profile/StyleProfilePage.js +1 -1
- package/dist/coolandlovely/pages/profile/StyleProfilePage.js.map +1 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LookDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/looks/LookDetailPage.tsx"],"sourcesContent":["/**\n * Look Detail Page\n * @module coolandlovely/pages/looks\n *\n * Single look (`cooLook`) with its look items, a true-toggle like\n * (`cooLikeLook` / `cooUnlikeLook`), a true-toggle save (`cooSaveLook` /\n * `cooUnsaveLook`), publish (`cooPublishLook`) and delete (`cooDeleteLook`)\n * actions.\n */\n\nimport { useMemo, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, Heart, Bookmark, Rocket, Trash2, Loader2, Sparkles, Star } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { useActorProfiles, type ActorInput } from '@burdenoff/fe-libs/shared';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { TagList } from '../../components/TagList';\nimport { Comments } from '../../components/Comments';\nimport { FollowButton } from '../../components/FollowButton';\nimport { AddToLookbookButton } from '../../components/AddToLookbookButton';\nimport { ShopItemCard } from '../../components/ShopItemCard';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n useLook,\n useLikeLook,\n useUnlikeLook,\n useSaveLook,\n useUnsaveLook,\n usePublishLook,\n useDeleteLook,\n useUpdateLook,\n} from '../../hooks';\nimport { formatDate, titleCase } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\n\n/** Compute up-to-two-letter initials for the avatar fallback. */\nfunction initials(name: string): string {\n const parts = name.trim().split(/\\s+/).filter(Boolean);\n if (parts.length === 0) return '?';\n if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();\n return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n}\n\n/**\n * Author chip — avatar + display name resolved via fe-libs `useActorProfiles`\n * on the GLOBAL gateway (never select firstName on a federated wspace User).\n * Clicking it opens the author's public style profile (`/profile/:userId`).\n */\nfunction LookAuthor({ authorId }: { authorId: string }) {\n const { apiGatewayUrl, authToken, workspaceId, navigateTo } = useCoolAndLovely();\n const [avatarFailed, setAvatarFailed] = useState(false);\n const actors = useMemo<ActorInput[]>(\n () => [{ actorId: authorId, actorType: 'user' }],\n [authorId]\n );\n const profiles = useActorProfiles(actors, { apiGatewayUrl, authToken, workspaceId });\n const profile = profiles[authorId];\n const name = profile?.displayName ?? 'Creator';\n const avatarUrl = profile?.avatarUrl;\n\n return (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/profile/${authorId}`)}\n className=\"inline-flex items-center gap-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n >\n <span\n title={name}\n className=\"relative flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-bg-sunken ring-1 ring-border-seam\"\n >\n {avatarUrl && !avatarFailed ? (\n <img\n src={avatarUrl}\n alt={name}\n loading=\"lazy\"\n onError={() => setAvatarFailed(true)}\n className=\"h-full w-full object-cover\"\n />\n ) : (\n <span className=\"text-[10px] font-semibold text-text-secondary\">{initials(name)}</span>\n )}\n </span>\n <span\n className=\"font-medium text-text-primary hover:underline\"\n title={profile?.email ?? authorId}\n >\n {name}\n </span>\n </button>\n );\n}\n\nexport function LookDetailPage() {\n const { lookId } = useParams<{ lookId: string }>();\n const { navigateTo, currentUser } = useCoolAndLovely();\n const query = useLook(lookId);\n const like = useLikeLook();\n const unlike = useUnlikeLook();\n const save = useSaveLook();\n const unsave = useUnsaveLook();\n const publish = usePublishLook();\n const remove = useDeleteLook();\n const update = useUpdateLook();\n\n if (query.isLoading) {\n return (\n <PageLayout title=\"Look\">\n <LoadingView label=\"Loading look…\" />\n </PageLayout>\n );\n }\n\n if (query.isError || !query.data) {\n return (\n <PageLayout title=\"Look\">\n <ErrorView title=\"Look not found\" onRetry={() => void query.refetch()} />\n </PageLayout>\n );\n }\n\n const look = query.data;\n const items = look.items ?? [];\n const isPublished = look.publishedAt !== null;\n const isOwnLook = Boolean(currentUser?.id && currentUser.id === look.authorId);\n\n return (\n <PageLayout\n title={look.title}\n description={titleCase(look.occasion)}\n actions={\n <div className=\"flex flex-wrap items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => navigateTo('/looks')}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <ArrowLeft className=\"h-4 w-4\" /> Back\n </button>\n <AddToLookbookButton lookId={look.id} />\n <button\n type=\"button\"\n disabled={update.isPending}\n onClick={() => update.mutate({ id: look.id, input: { isFeatured: !look.isFeatured } })}\n aria-pressed={look.isFeatured}\n className={cn(\n 'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50',\n look.isFeatured\n ? 'border-status-warning-text/40 bg-status-warning-bg-subtle text-status-warning-text'\n : 'border-border-seam text-text-primary hover:bg-bg-sunken'\n )}\n >\n {update.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Star className={cn('h-4 w-4', look.isFeatured && 'fill-status-warning-text')} />\n )}\n {look.isFeatured ? 'Featured' : 'Feature'}\n </button>\n {!isPublished && (\n <button\n type=\"button\"\n disabled={publish.isPending}\n onClick={() => publish.mutate(look.id)}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n >\n {publish.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Rocket className=\"h-4 w-4\" />\n )}\n Publish\n </button>\n )}\n <button\n type=\"button\"\n disabled={remove.isPending}\n onClick={() => remove.mutate(look.id, { onSuccess: () => navigateTo('/looks') })}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-50\"\n >\n {remove.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Trash2 className=\"h-4 w-4\" />\n )}\n Delete\n </button>\n </div>\n }\n >\n <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n <div className=\"lg:col-span-2\">\n <GlassCard treatment=\"glass\" className=\"group overflow-hidden p-0\">\n <Thumbnail\n icon={<Sparkles className=\"h-14 w-14\" />}\n seed={look.id}\n fileId={look.image?.id}\n alt={look.title}\n className=\"aspect-[4/5] max-h-[38rem] w-full rounded-none\"\n />\n <div className=\"p-6\">\n <div className=\"flex items-center gap-2\">\n <h2 className=\"text-xl font-semibold text-text-primary\">{look.title}</h2>\n {look.isFeatured && (\n <Star className=\"h-4 w-4 fill-status-warning-text text-status-warning-text\" />\n )}\n <StatusBadge status={isPublished ? 'published' : 'draft'} className=\"ml-auto\" />\n </div>\n {look.caption && <p className=\"mt-3 text-sm text-text-secondary\">{look.caption}</p>}\n {look.tags.length > 0 && <TagList tags={look.tags} className=\"mt-4\" tone=\"accent\" />}\n\n <div className=\"mt-4 flex flex-wrap items-center gap-3 text-sm text-text-secondary\">\n <LookAuthor authorId={look.authorId} />\n {!isOwnLook && <FollowButton followeeId={look.authorId} size=\"sm\" />}\n </div>\n\n <div className=\"mt-5 flex items-center gap-3\">\n <button\n type=\"button\"\n disabled={like.isPending || unlike.isPending}\n aria-pressed={Boolean(look.isLikedByMe)}\n onClick={() => (look.isLikedByMe ? unlike : like).mutate(look.id)}\n className={cn(\n 'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50',\n look.isLikedByMe\n ? 'border-status-error-text/40 bg-status-error-bg-subtle text-status-error-text'\n : 'border-border-seam text-text-primary hover:bg-status-error-bg-subtle'\n )}\n >\n {like.isPending || unlike.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Heart className={cn('h-4 w-4', look.isLikedByMe && 'fill-current')} />\n )}\n {look.isLikedByMe ? 'Liked' : 'Like'} · {look.likeCount}\n </button>\n <button\n type=\"button\"\n disabled={save.isPending || unsave.isPending}\n aria-pressed={Boolean(look.isSavedByMe)}\n onClick={() => (look.isSavedByMe ? unsave : save).mutate(look.id)}\n className={cn(\n 'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50',\n look.isSavedByMe\n ? 'border-accent-primary/40 bg-accent-primary/10 text-accent-primary'\n : 'border-border-seam text-text-secondary hover:bg-bg-sunken'\n )}\n >\n {save.isPending || unsave.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Bookmark className={cn('h-4 w-4', look.isSavedByMe && 'fill-current')} />\n )}\n {look.isSavedByMe ? 'Saved' : 'Save'} · {look.saveCount}\n </button>\n </div>\n </div>\n </GlassCard>\n\n {/* Shop the look */}\n <section className=\"mt-6\">\n <h3 className=\"mb-3 text-lg font-semibold text-text-primary\">\n Shop the look ({items.length})\n </h3>\n {items.length === 0 ? (\n <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n No items tagged in this look yet.\n </p>\n ) : (\n <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n {[...items]\n .sort((a, b) => a.position - b.position)\n .map((li) =>\n li.styleItem ? (\n <ShopItemCard\n key={li.id}\n id={li.styleItem.id}\n name={li.styleItem.name}\n brandName={li.styleItem.brand?.name}\n price={li.styleItem.price}\n currency={li.styleItem.currency}\n imageFileId={li.styleItem.image?.id}\n onOpen={() => navigateTo(`/items/${li.styleItem?.id}`)}\n />\n ) : (\n <div\n key={li.id}\n className=\"flex flex-col justify-center rounded-xl border border-border-seam bg-bg-surface p-4\"\n >\n <p className=\"truncate text-sm font-medium text-text-primary\">\n Catalogue piece\n </p>\n {li.styling && (\n <p className=\"mt-0.5 truncate text-xs text-text-secondary\">\n {li.styling}\n </p>\n )}\n </div>\n )\n )}\n </div>\n )}\n </section>\n\n <Comments entityType=\"CooLook\" entityId={look.id} />\n </div>\n\n <div className=\"space-y-4\">\n <GlassCard treatment=\"plain\" className=\"p-5\">\n <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">Details</h3>\n <dl className=\"space-y-2 text-sm\">\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Occasion</dt>\n <dd className=\"text-text-primary\">{titleCase(look.occasion)}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Visibility</dt>\n <dd className=\"text-text-primary\">{titleCase(look.visibility)}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Published</dt>\n <dd className=\"text-text-primary\">\n {look.publishedAt\n ? formatDate(look.publishedAt, { hour: undefined, minute: undefined })\n : '—'}\n </dd>\n </div>\n </dl>\n </GlassCard>\n\n {look.collaborationId && (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/collaborations/${look.collaborationId}`)}\n className=\"flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50\"\n >\n <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-status-warning-bg-subtle text-status-warning-text\">\n <Sparkles className=\"h-5 w-5\" />\n </div>\n <div className=\"min-w-0\">\n <p className=\"truncate text-sm font-medium text-text-primary\">\n Part of a collaboration\n </p>\n <p className=\"truncate text-xs text-text-secondary\">View collaboration</p>\n </div>\n </button>\n )}\n\n {(publish.isError ||\n remove.isError ||\n like.isError ||\n unlike.isError ||\n save.isError ||\n unsave.isError) && (\n <p className=\"rounded-lg bg-status-error-bg-subtle px-3 py-2 text-xs text-status-error-text\">\n {(publish.error ??\n remove.error ??\n like.error ??\n unlike.error ??\n save.error ??\n unsave.error) instanceof Error\n ? (\n publish.error ??\n remove.error ??\n like.error ??\n unlike.error ??\n save.error ??\n unsave.error\n )?.message\n : 'Action failed'}\n </p>\n )}\n </div>\n </div>\n </PageLayout>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LookDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/looks/LookDetailPage.tsx"],"sourcesContent":["/**\n * Look Detail Page\n * @module coolandlovely/pages/looks\n *\n * Single look (`cooLook`) with its look items, a true-toggle like\n * (`cooLikeLook` / `cooUnlikeLook`), a true-toggle save (`cooSaveLook` /\n * `cooUnsaveLook`), publish (`cooPublishLook`) and delete (`cooDeleteLook`)\n * actions.\n */\n\nimport { useMemo, useState } from 'react';\nimport { useParams } from 'react-router';\nimport { ArrowLeft, Heart, Bookmark, Rocket, Trash2, Loader2, Sparkles, Star } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { useActorProfiles, type ActorInput } from '@burdenoff/fe-libs/shared';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { TagList } from '../../components/TagList';\nimport { Comments } from '../../components/Comments';\nimport { FollowButton } from '../../components/FollowButton';\nimport { AddToLookbookButton } from '../../components/AddToLookbookButton';\nimport { ShopItemCard } from '../../components/ShopItemCard';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n useLook,\n useLikeLook,\n useUnlikeLook,\n useSaveLook,\n useUnsaveLook,\n usePublishLook,\n useDeleteLook,\n useUpdateLook,\n} from '../../hooks';\nimport { formatDate, titleCase } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\n\n/** Compute up-to-two-letter initials for the avatar fallback. */\nfunction initials(name: string): string {\n const parts = name.trim().split(/\\s+/).filter(Boolean);\n if (parts.length === 0) return '?';\n if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();\n return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n}\n\n/**\n * Author chip — avatar + display name resolved via fe-libs `useActorProfiles`\n * on the GLOBAL gateway (never select firstName on a federated wspace User).\n * Clicking it opens the author's public style profile (`/profile/:userId`).\n */\nfunction LookAuthor({ authorId }: { authorId: string }) {\n const { apiGatewayUrl, authToken, workspaceId, navigateTo } = useCoolAndLovely();\n const [avatarFailed, setAvatarFailed] = useState(false);\n const actors = useMemo<ActorInput[]>(\n () => [{ actorId: authorId, actorType: 'user' }],\n [authorId]\n );\n const profiles = useActorProfiles(actors, { apiGatewayUrl, authToken, workspaceId });\n const profile = profiles[authorId];\n const name = profile?.displayName ?? 'Creator';\n const avatarUrl = profile?.avatarUrl;\n\n return (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/profile/${authorId}`)}\n className=\"inline-flex items-center gap-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n >\n <span\n title={name}\n className=\"relative flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-bg-sunken ring-1 ring-border-seam\"\n >\n {avatarUrl && !avatarFailed ? (\n <img\n src={avatarUrl}\n alt={name}\n loading=\"lazy\"\n onError={() => setAvatarFailed(true)}\n className=\"h-full w-full object-cover\"\n />\n ) : (\n <span className=\"text-[10px] font-semibold text-text-secondary\">{initials(name)}</span>\n )}\n </span>\n <span\n className=\"font-medium text-text-primary hover:underline\"\n title={profile?.email ?? authorId}\n >\n {name}\n </span>\n </button>\n );\n}\n\nexport function LookDetailPage() {\n const { lookId } = useParams<{ lookId: string }>();\n const { navigateTo, currentUser } = useCoolAndLovely();\n const query = useLook(lookId);\n const like = useLikeLook();\n const unlike = useUnlikeLook();\n const save = useSaveLook();\n const unsave = useUnsaveLook();\n const publish = usePublishLook();\n const remove = useDeleteLook();\n const update = useUpdateLook();\n\n if (query.isLoading) {\n return (\n <PageLayout title=\"Look\">\n <LoadingView label=\"Loading look…\" />\n </PageLayout>\n );\n }\n\n if (query.isError || !query.data) {\n return (\n <PageLayout title=\"Look\">\n <ErrorView title=\"Look not found\" onRetry={() => void query.refetch()} />\n </PageLayout>\n );\n }\n\n const look = query.data;\n const items = look.items ?? [];\n const isPublished = look.publishedAt !== null;\n const isOwnLook = Boolean(currentUser?.id && currentUser.id === look.authorId);\n\n return (\n <PageLayout\n title={look.title}\n description={titleCase(look.occasion)}\n actions={\n <div className=\"flex flex-wrap items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => navigateTo('/looks')}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <ArrowLeft className=\"h-4 w-4\" /> Back\n </button>\n <AddToLookbookButton lookId={look.id} />\n <button\n type=\"button\"\n disabled={update.isPending}\n onClick={() => update.mutate({ id: look.id, input: { isFeatured: !look.isFeatured } })}\n aria-pressed={look.isFeatured}\n className={cn(\n 'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50',\n look.isFeatured\n ? 'border-status-warning-text/40 bg-status-warning-bg-subtle text-status-warning-text'\n : 'border-border-seam text-text-primary hover:bg-bg-sunken'\n )}\n >\n {update.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Star className={cn('h-4 w-4', look.isFeatured && 'fill-status-warning-text')} />\n )}\n {look.isFeatured ? 'Featured' : 'Feature'}\n </button>\n {!isPublished && (\n <button\n type=\"button\"\n disabled={publish.isPending}\n onClick={() => publish.mutate(look.id)}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n >\n {publish.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Rocket className=\"h-4 w-4\" />\n )}\n Publish\n </button>\n )}\n <button\n type=\"button\"\n disabled={remove.isPending}\n onClick={() => remove.mutate(look.id, { onSuccess: () => navigateTo('/looks') })}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-50\"\n >\n {remove.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Trash2 className=\"h-4 w-4\" />\n )}\n Delete\n </button>\n </div>\n }\n >\n <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n <div className=\"lg:col-span-2\">\n <GlassCard treatment=\"glass\" className=\"group overflow-hidden p-0\">\n <Thumbnail\n icon={<Sparkles className=\"h-14 w-14\" />}\n seed={look.id}\n fileId={look.image?.id}\n alt={look.title}\n className=\"aspect-[4/5] max-h-[38rem] w-full rounded-none\"\n />\n <div className=\"p-6\">\n <div className=\"flex items-center gap-2\">\n <h2 className=\"text-xl font-semibold text-text-primary\">{look.title}</h2>\n {look.isFeatured && (\n <Star className=\"h-4 w-4 fill-status-warning-text text-status-warning-text\" />\n )}\n <StatusBadge status={isPublished ? 'published' : 'draft'} className=\"ml-auto\" />\n </div>\n {look.caption && <p className=\"mt-3 text-sm text-text-secondary\">{look.caption}</p>}\n {look.tags.length > 0 && <TagList tags={look.tags} className=\"mt-4\" tone=\"accent\" />}\n\n <div className=\"mt-4 flex flex-wrap items-center gap-3 text-sm text-text-secondary\">\n <LookAuthor authorId={look.authorId} />\n {!isOwnLook && <FollowButton followeeId={look.authorId} size=\"sm\" />}\n </div>\n\n <div className=\"mt-5 flex items-center gap-3\">\n <button\n type=\"button\"\n disabled={like.isPending || unlike.isPending}\n aria-pressed={Boolean(look.isLikedByMe)}\n onClick={() => (look.isLikedByMe ? unlike : like).mutate(look.id)}\n className={cn(\n 'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50',\n look.isLikedByMe\n ? 'border-status-error-text/40 bg-status-error-bg-subtle text-status-error-text'\n : 'border-border-seam text-text-primary hover:bg-status-error-bg-subtle'\n )}\n >\n {like.isPending || unlike.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Heart className={cn('h-4 w-4', look.isLikedByMe && 'fill-current')} />\n )}\n {look.isLikedByMe ? 'Liked' : 'Like'} · {look.likeCount}\n </button>\n <button\n type=\"button\"\n disabled={save.isPending || unsave.isPending}\n aria-pressed={Boolean(look.isSavedByMe)}\n onClick={() => (look.isSavedByMe ? unsave : save).mutate(look.id)}\n className={cn(\n 'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50',\n look.isSavedByMe\n ? 'border-accent-primary/40 bg-accent-primary/10 text-accent-primary'\n : 'border-border-seam text-text-secondary hover:bg-bg-sunken'\n )}\n >\n {save.isPending || unsave.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Bookmark className={cn('h-4 w-4', look.isSavedByMe && 'fill-current')} />\n )}\n {look.isSavedByMe ? 'Saved' : 'Save'} · {look.saveCount}\n </button>\n </div>\n </div>\n </GlassCard>\n\n {/* Shop the look */}\n <section className=\"mt-6\">\n <h3 className=\"mb-3 text-lg font-semibold text-text-primary\">\n Shop the look ({items.length})\n </h3>\n {items.length === 0 ? (\n <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n No items tagged in this look yet.\n </p>\n ) : (\n <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n {[...items]\n .sort((a, b) => a.position - b.position)\n .map((li) =>\n li.styleItem ? (\n <ShopItemCard\n key={li.id}\n id={li.styleItem.id}\n name={li.styleItem.name}\n brandName={li.styleItem.brand?.name}\n price={li.styleItem.price}\n currency={li.styleItem.currency}\n imageFileId={li.styleItem.image?.id}\n onOpen={() => navigateTo(`/items/${li.styleItem?.id}`)}\n />\n ) : (\n <div\n key={li.id}\n className=\"flex flex-col justify-center rounded-xl border border-border-seam bg-bg-surface p-4\"\n >\n <p className=\"truncate text-sm font-medium text-text-primary\">\n Catalogue piece\n </p>\n {li.styling && (\n <p className=\"mt-0.5 truncate text-xs text-text-secondary\">\n {li.styling}\n </p>\n )}\n </div>\n )\n )}\n </div>\n )}\n </section>\n\n <Comments entityType=\"CooLook\" entityId={look.id} />\n </div>\n\n <div className=\"space-y-4\">\n <GlassCard treatment=\"plain\" className=\"p-5\">\n <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">Details</h3>\n <dl className=\"space-y-2 text-sm\">\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Occasion</dt>\n <dd className=\"text-text-primary\">{titleCase(look.occasion)}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Visibility</dt>\n <dd className=\"text-text-primary\">{titleCase(look.visibility)}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Published</dt>\n <dd className=\"text-text-primary\">\n {look.publishedAt\n ? formatDate(look.publishedAt, { hour: undefined, minute: undefined })\n : '—'}\n </dd>\n </div>\n </dl>\n </GlassCard>\n\n {look.collaborationId && (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/collaborations/${look.collaborationId}`)}\n className=\"flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50\"\n >\n <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-status-warning-bg-subtle text-status-warning-text\">\n <Sparkles className=\"h-5 w-5\" />\n </div>\n <div className=\"min-w-0\">\n <p className=\"truncate text-sm font-medium text-text-primary\">\n Part of a collaboration\n </p>\n <p className=\"truncate text-xs text-text-secondary\">View collaboration</p>\n </div>\n </button>\n )}\n\n {(publish.isError ||\n remove.isError ||\n like.isError ||\n unlike.isError ||\n save.isError ||\n unsave.isError) && (\n <p className=\"rounded-lg bg-status-error-bg-subtle px-3 py-2 text-xs text-status-error-text\">\n {(publish.error ??\n remove.error ??\n like.error ??\n unlike.error ??\n save.error ??\n unsave.error) instanceof Error\n ? (\n publish.error ??\n remove.error ??\n like.error ??\n unlike.error ??\n save.error ??\n unsave.error\n )?.message\n : 'Action failed'}\n </p>\n )}\n </div>\n </div>\n </PageLayout>\n );\n}\n"],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@ import { VisibilityChip as y } from "../../components/VisibilityChip.js";
|
|
|
15
15
|
import { FollowButton as b } from "../../components/FollowButton.js";
|
|
16
16
|
import { useEffect as x, useState as S } from "react";
|
|
17
17
|
import { Loader2 as C, Pencil as ne, Save as re, Shirt as ie, Sparkles as ae, UserCircle as w, Users as T, X as E } from "lucide-react";
|
|
18
|
-
import { useParams as D } from "react-router
|
|
18
|
+
import { useParams as D } from "react-router";
|
|
19
19
|
import { jsx as O, jsxs as k } from "react/jsx-runtime";
|
|
20
20
|
import { GlassCard as A } from "@burdenoff/fe-libs/ui";
|
|
21
21
|
//#region src/coolandlovely/pages/profile/StyleProfilePage.tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyleProfilePage.js","names":[],"sources":["../../../../src/coolandlovely/pages/profile/StyleProfilePage.tsx"],"sourcesContent":["/**\n * Style Profile Page\n * @module coolandlovely/pages/profile\n *\n * Two routes share this component:\n * - `/profile` — the calling shopper's own profile (`cooMyStyleProfile` +\n * `cooUpsertStyleProfile`), editable, with a self-scoped wardrobe preview\n * and \"people you follow\" list.\n * - `/profile/:userId` — any other shopper's PUBLIC profile\n * (`cooStyleProfileByOwner`), reached by clicking an author's name/avatar\n * on a Look/Discover/Collaboration card. Read-only: no edit affordance, no\n * wardrobe preview (wardrobe stays self-scoped server-side), and shows a\n * Follow button instead. Server-side CooVisibility (PRIVATE/FOLLOWERS)\n * gates whether the profile resolves at all.\n */\n\nimport { useEffect, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { Loader2, Save, UserCircle, Pencil, X, Users, Sparkles, Shirt } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { EmptyState } from '../../components/EmptyState';\nimport { TextField, TextAreaField, SelectField } from '../../components/Field';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { ColourSwatchRow } from '../../components/ColourSwatchRow';\nimport { VisibilityChip } from '../../components/VisibilityChip';\nimport { ActorName } from '../../components/ActorName';\nimport { FollowButton } from '../../components/FollowButton';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n useMyStyleProfile,\n useStyleProfileByOwner,\n useUpsertStyleProfile,\n useMyFollowing,\n useWardrobeItems,\n useLooks,\n} from '../../hooks';\nimport { categoryIcon } from '../../utils/icons';\nimport { parseCsv, titleCase } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\nimport type { CooVisibility } from '../../types';\n\nconst VISIBILITIES: CooVisibility[] = ['PUBLIC', 'FOLLOWERS', 'PRIVATE'];\n\n/** Common size rows offered in the editor (existing custom keys are preserved). */\nconst SIZE_KEYS = ['Tops', 'Bottoms', 'Dresses', 'Shoes', 'Outerwear'];\n\ninterface FormState {\n displayName: string;\n bio: string;\n visibility: CooVisibility;\n stylePreferences: string;\n palette: string;\n favouriteBrands: string;\n sizes: Record<string, string>;\n}\n\nconst EMPTY: FormState = {\n displayName: '',\n bio: '',\n visibility: 'PRIVATE',\n stylePreferences: '',\n palette: '',\n favouriteBrands: '',\n sizes: {},\n};\n\n/** Monogram from a free-text brand name (real brand logos are unavailable). */\nfunction brandInitials(name: string): string {\n const words = name.trim().split(/\\s+/).filter(Boolean);\n if (words.length === 0) return '?';\n if (words.length === 1) return words[0].slice(0, 2).toUpperCase();\n return (words[0][0] + words[1][0]).toUpperCase();\n}\n\nfunction BentoCard({\n title,\n children,\n className,\n}: {\n title: string;\n children: React.ReactNode;\n className?: string;\n}) {\n return (\n <GlassCard treatment=\"plain\" className={cn('p-5', className)}>\n <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">{title}</h3>\n {children}\n </GlassCard>\n );\n}\n\nexport function StyleProfilePage() {\n const { userId } = useParams<{ userId?: string }>();\n const { navigateTo, currentUser } = useCoolAndLovely();\n const isOwnProfile = !userId || userId === currentUser?.id;\n\n const myQuery = useMyStyleProfile();\n const otherQuery = useStyleProfileByOwner(isOwnProfile ? undefined : userId);\n const query = isOwnProfile ? myQuery : otherQuery;\n\n const upsert = useUpsertStyleProfile();\n // Both self-scoped — meaningful only on the caller's own profile page, but\n // called unconditionally (rules of hooks) and simply not rendered otherwise.\n const following = useMyFollowing();\n const wardrobe = useWardrobeItems();\n\n const profile = query.data;\n const recentLooks = useLooks({\n authorId: profile?.ownerId,\n pagination: { limit: 6, offset: 0 },\n });\n\n const [editing, setEditing] = useState(false);\n const [form, setForm] = useState<FormState>(EMPTY);\n\n const hasProfile = Boolean(profile);\n const followingList = following.data ?? [];\n\n useEffect(() => {\n if (isOwnProfile && profile) {\n setForm({\n displayName: profile.displayName ?? '',\n bio: profile.bio ?? '',\n visibility: profile.visibility,\n stylePreferences: profile.stylePreferences.join(', '),\n palette: profile.palette.join(', '),\n favouriteBrands: profile.favouriteBrands.join(', '),\n sizes: Object.fromEntries(\n Object.entries(profile.sizes ?? {}).map(([k, v]) => [k, String(v ?? '')])\n ),\n });\n }\n }, [isOwnProfile, profile]);\n\n // If there is no profile yet, drop straight into edit mode — own profile only.\n useEffect(() => {\n if (isOwnProfile && !query.isLoading && !hasProfile) {\n setEditing(true);\n }\n }, [isOwnProfile, query.isLoading, hasProfile]);\n\n const setField = <K extends keyof FormState>(key: K, value: FormState[K]) =>\n setForm((f) => ({ ...f, [key]: value }));\n\n const setSize = (key: string, value: string) =>\n setForm((f) => ({ ...f, sizes: { ...f.sizes, [key]: value } }));\n\n const visibilityOptions = VISIBILITIES.map((v) => ({ value: v, label: titleCase(v) }));\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n const cleanedSizes = Object.fromEntries(\n Object.entries(form.sizes)\n .map(([k, v]) => [k, v.trim()] as const)\n .filter(([, v]) => v.length > 0)\n );\n upsert.mutate(\n {\n displayName: form.displayName.trim() || undefined,\n bio: form.bio.trim() || undefined,\n visibility: form.visibility,\n stylePreferences: parseCsv(form.stylePreferences),\n palette: parseCsv(form.palette),\n favouriteBrands: parseCsv(form.favouriteBrands),\n sizes: cleanedSizes,\n },\n { onSuccess: () => setEditing(false) }\n );\n };\n\n if (query.isLoading) {\n return (\n <PageLayout title=\"Style Profile\">\n <LoadingView label=\"Loading style profile…\" />\n </PageLayout>\n );\n }\n\n if (query.isError) {\n return (\n <PageLayout title=\"Style Profile\">\n <ErrorView onRetry={() => void query.refetch()} />\n </PageLayout>\n );\n }\n\n // Public view of someone else's profile that does not exist, or whose\n // CooVisibility (PRIVATE / FOLLOWERS-not-following) hides it from us — the\n // svc returns null in both cases so a caller cannot tell them apart.\n if (!isOwnProfile && !profile) {\n return (\n <PageLayout title=\"Style Profile\">\n <EmptyState\n title=\"Profile not available\"\n description=\"This style profile doesn't exist, or its owner hasn't shared it with you.\"\n icon={<UserCircle className=\"h-8 w-8\" />}\n />\n </PageLayout>\n );\n }\n\n const canEdit = isOwnProfile;\n\n // ----- View mode (own profile in view state, or any visible public profile) -----\n if ((!editing || !canEdit) && profile) {\n const avatarUrl = isOwnProfile ? currentUser?.profilePicture || currentUser?.avatar : undefined;\n const wardrobeItems = isOwnProfile ? (wardrobe.data ?? []).slice(0, 6) : [];\n const looksList = recentLooks.data?.items ?? [];\n const sizeEntries = Object.entries(profile.sizes ?? {});\n const headerName = profile.displayName || (isOwnProfile ? currentUser?.name : undefined);\n\n return (\n <PageLayout\n title={isOwnProfile ? 'Style Profile' : headerName || 'Style Profile'}\n description={\n isOwnProfile\n ? 'Your taste, palette and sizing — the spine of personalised discovery'\n : undefined\n }\n actions={\n canEdit ? (\n <button\n type=\"button\"\n onClick={() => setEditing(true)}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90\"\n >\n <Pencil className=\"h-4 w-4\" /> Edit\n </button>\n ) : (\n <FollowButton followeeId={profile.ownerId} />\n )\n }\n >\n <div className=\"mx-auto max-w-5xl\">\n {/* Header */}\n <GlassCard treatment=\"glass\" className=\"p-6\">\n <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n {avatarUrl ? (\n <img\n src={avatarUrl}\n alt={headerName || 'Avatar'}\n className=\"h-16 w-16 shrink-0 rounded-full object-cover ring-2 ring-bg-surface\"\n />\n ) : (\n <div className=\"flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-accent-purple-subtle text-text-primary\">\n <UserCircle className=\"h-8 w-8\" />\n </div>\n )}\n <div className=\"min-w-0 flex-1\">\n <div className=\"flex flex-wrap items-center gap-2\">\n <h2 className=\"truncate text-xl font-semibold text-text-primary\">\n {headerName || <ActorName id={profile.ownerId} fallback=\"Style profile\" />}\n </h2>\n <VisibilityChip visibility={profile.visibility} />\n </div>\n {profile.bio && (\n <p className=\"mt-1 line-clamp-2 text-sm text-text-secondary\">{profile.bio}</p>\n )}\n <div className=\"mt-2 flex items-center gap-6\">\n <span className=\"text-sm text-text-secondary\">\n <span className=\"font-semibold text-text-primary tabular-nums\">\n {profile.followerCount ?? 0}\n </span>{' '}\n {profile.followerCount === 1 ? 'follower' : 'followers'}\n </span>\n <span className=\"text-sm text-text-secondary\">\n <span className=\"font-semibold text-text-primary tabular-nums\">\n {profile.followingCount ?? 0}\n </span>{' '}\n following\n </span>\n </div>\n </div>\n </div>\n </GlassCard>\n\n {/* Bento */}\n <div className=\"mt-6 grid gap-6 lg:grid-cols-5\">\n {/* Left: taste detail */}\n <div className=\"space-y-6 lg:col-span-3\">\n <BentoCard title=\"Style preferences\">\n {profile.stylePreferences.length ? (\n <div className=\"flex flex-wrap gap-2\">\n {profile.stylePreferences.map((pref, i) => (\n <span\n key={`${pref}-${i}`}\n className={cn(\n 'rounded-full px-3 py-1 text-sm font-medium',\n i === 0\n ? 'bg-accent-purple-subtle text-text-primary ring-1 ring-[var(--color-accent-soft)]'\n : 'bg-bg-sunken text-text-secondary'\n )}\n >\n {pref}\n </span>\n ))}\n </div>\n ) : (\n <p className=\"text-sm text-text-secondary\">\n {isOwnProfile\n ? 'No preferences yet — add a few in Edit.'\n : 'No preferences shared yet.'}\n </p>\n )}\n </BentoCard>\n\n <BentoCard title=\"Palette\">\n {profile.palette.length ? (\n <ColourSwatchRow colours={profile.palette} max={12} className=\"gap-2.5\" />\n ) : (\n <p className=\"text-sm text-text-secondary\">No palette yet.</p>\n )}\n </BentoCard>\n\n <div className=\"grid gap-6 sm:grid-cols-2\">\n <BentoCard title=\"Favourite brands\">\n {profile.favouriteBrands.length ? (\n <div className=\"grid grid-cols-1 gap-2\">\n {profile.favouriteBrands.map((brand, i) => (\n <div\n key={`${brand}-${i}`}\n className=\"flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface px-3 py-2\"\n >\n <span className=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-accent-purple-subtle text-xs font-bold text-text-primary\">\n {brandInitials(brand)}\n </span>\n <span className=\"truncate text-sm font-medium text-text-primary\">\n {brand}\n </span>\n </div>\n ))}\n </div>\n ) : (\n <p className=\"text-sm text-text-secondary\">No brands yet.</p>\n )}\n </BentoCard>\n\n {isOwnProfile && (\n <BentoCard title=\"Sizes\">\n {sizeEntries.length ? (\n <dl className=\"space-y-0\">\n {sizeEntries.map(([key, value]) => (\n <div\n key={key}\n className=\"flex items-center justify-between border-b border-border-seam/60 py-1.5 last:border-0\"\n >\n <dt className=\"text-sm text-text-secondary\">{titleCase(key)}</dt>\n <dd className=\"text-sm font-medium text-text-primary tabular-nums\">\n {String(value)}\n </dd>\n </div>\n ))}\n </dl>\n ) : (\n <p className=\"text-sm text-text-secondary\">No sizes recorded yet.</p>\n )}\n </BentoCard>\n )}\n </div>\n </div>\n\n {/* Right: wardrobe (own profile only — self-scoped server-side) + recent looks */}\n <div className=\"space-y-6 lg:col-span-2\">\n {isOwnProfile && (\n <BentoCard title=\"Her wardrobe\">\n {wardrobe.isLoading ? (\n <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n <Loader2 className=\"h-4 w-4 animate-spin\" /> Loading…\n </div>\n ) : wardrobeItems.length ? (\n <div className=\"grid grid-cols-3 gap-2\">\n {wardrobeItems.map((w) => (\n <button\n key={w.id}\n type=\"button\"\n onClick={() => navigateTo('/wardrobe')}\n aria-label={w.name}\n className=\"group overflow-hidden rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n >\n <Thumbnail\n icon={categoryIcon(w.category, 18)}\n seed={w.id}\n fileId={w.image?.id}\n alt={w.name}\n className=\"aspect-square w-full rounded-lg\"\n />\n </button>\n ))}\n </div>\n ) : (\n <button\n type=\"button\"\n onClick={() => navigateTo('/wardrobe/new')}\n className=\"flex w-full items-center gap-2 rounded-lg border border-dashed border-border-seam px-3 py-3 text-left text-sm text-text-secondary transition-colors hover:text-text-primary\"\n >\n <Shirt className=\"h-4 w-4\" /> Add pieces to your wardrobe\n </button>\n )}\n </BentoCard>\n )}\n\n <BentoCard title=\"Recent looks\">\n {recentLooks.isLoading ? (\n <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n <Loader2 className=\"h-4 w-4 animate-spin\" /> Loading…\n </div>\n ) : looksList.length ? (\n <div className=\"-mx-1 flex gap-3 overflow-x-auto px-1 pb-1\">\n {looksList.map((look) => (\n <button\n key={look.id}\n type=\"button\"\n onClick={() => navigateTo(`/looks/${look.id}`)}\n className=\"group w-24 shrink-0 text-left focus-visible:outline-none\"\n >\n <Thumbnail\n icon={<Sparkles className=\"h-5 w-5\" />}\n seed={look.id}\n fileId={look.image?.id}\n alt={look.title}\n className=\"aspect-[3/4] w-full rounded-lg\"\n />\n <p className=\"mt-1 truncate text-xs text-text-secondary\">{look.title}</p>\n </button>\n ))}\n </div>\n ) : (\n <p className=\"text-sm text-text-secondary\">\n {isOwnProfile\n ? 'You have not published any looks yet.'\n : 'No looks published yet.'}\n </p>\n )}\n </BentoCard>\n </div>\n </div>\n\n {/* People you follow (own profile only) */}\n {isOwnProfile && (\n <section className=\"mt-6\">\n <h3 className=\"mb-3 flex items-center gap-2 text-lg font-semibold text-text-primary\">\n <Users className=\"h-5 w-5\" /> People you follow ({followingList.length})\n </h3>\n {following.isLoading ? (\n <div className=\"flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n <Loader2 className=\"h-4 w-4 animate-spin\" /> Loading…\n </div>\n ) : followingList.length === 0 ? (\n <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n You are not following anyone yet. Follow creators from their looks to see their\n latest in Discover.\n </p>\n ) : (\n <ul className=\"divide-y divide-border-seam rounded-lg border border-border-seam bg-bg-surface\">\n {followingList.map((p) => (\n <li key={p.id} className=\"flex items-center gap-3 px-4 py-3\">\n <button\n type=\"button\"\n onClick={() => navigateTo(`/profile/${p.ownerId}`)}\n className=\"flex min-w-0 flex-1 items-center gap-3 text-left focus-visible:outline-none\"\n >\n <div className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent-purple-subtle text-text-primary\">\n <UserCircle className=\"h-5 w-5\" />\n </div>\n <div className=\"min-w-0 flex-1\">\n <p className=\"truncate text-sm font-medium text-text-primary hover:underline\">\n {p.displayName || <ActorName id={p.ownerId} />}\n </p>\n {p.bio && <p className=\"truncate text-xs text-text-secondary\">{p.bio}</p>}\n </div>\n </button>\n <FollowButton followeeId={p.ownerId} size=\"sm\" />\n </li>\n ))}\n </ul>\n )}\n </section>\n )}\n </div>\n </PageLayout>\n );\n }\n\n // ----- Edit / create mode (own profile only) -----\n const sizeKeys = Array.from(new Set([...SIZE_KEYS, ...Object.keys(form.sizes)]));\n\n return (\n <PageLayout\n title={hasProfile ? 'Edit style profile' : 'Create your style profile'}\n description=\"This powers your personalised discovery feed\"\n actions={\n hasProfile ? (\n <button\n type=\"button\"\n onClick={() => setEditing(false)}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <X className=\"h-4 w-4\" /> Cancel\n </button>\n ) : undefined\n }\n >\n <form onSubmit={handleSubmit} className=\"mx-auto max-w-2xl\">\n <GlassCard treatment=\"plain\" className=\"p-6\">\n <TextField\n id=\"displayName\"\n label=\"Display name\"\n value={form.displayName}\n onChange={(v) => setField('displayName', v)}\n placeholder=\"How you want to appear\"\n />\n <TextAreaField\n id=\"bio\"\n label=\"Bio\"\n value={form.bio}\n onChange={(v) => setField('bio', v)}\n placeholder=\"A sentence about your style…\"\n rows={3}\n className=\"mt-4\"\n />\n <SelectField\n id=\"visibility\"\n label=\"Visibility\"\n value={form.visibility}\n onChange={(v) => setField('visibility', v as CooVisibility)}\n options={visibilityOptions}\n className=\"mt-4\"\n />\n <TextField\n id=\"stylePreferences\"\n label=\"Style preferences\"\n value={form.stylePreferences}\n onChange={(v) => setField('stylePreferences', v)}\n placeholder=\"minimal, tailored, vintage\"\n hint=\"Comma-separated\"\n className=\"mt-4\"\n />\n <TextField\n id=\"palette\"\n label=\"Palette\"\n value={form.palette}\n onChange={(v) => setField('palette', v)}\n placeholder=\"neutrals, navy, rust\"\n hint=\"Comma-separated colour names — shown as swatches\"\n className=\"mt-4\"\n />\n <TextField\n id=\"favouriteBrands\"\n label=\"Favourite brands\"\n value={form.favouriteBrands}\n onChange={(v) => setField('favouriteBrands', v)}\n placeholder=\"Aurora Atelier, …\"\n hint=\"Comma-separated\"\n className=\"mt-4\"\n />\n\n <div className=\"mt-4\">\n <span className=\"mb-2 block text-sm font-medium text-text-primary\">Sizes</span>\n <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n {sizeKeys.map((key) => (\n <TextField\n key={key}\n id={`size-${key}`}\n label={titleCase(key)}\n value={form.sizes[key] ?? ''}\n onChange={(v) => setSize(key, v)}\n placeholder=\"e.g. M · 26 · 39\"\n />\n ))}\n </div>\n </div>\n\n {upsert.isError && (\n <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n {upsert.error instanceof Error ? upsert.error.message : 'Something went wrong'}\n </p>\n )}\n\n <div className=\"mt-6 flex justify-end gap-2\">\n <button\n type=\"submit\"\n disabled={upsert.isPending}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n >\n {upsert.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Save className=\"h-4 w-4\" />\n )}\n {hasProfile ? 'Save changes' : 'Create profile'}\n </button>\n </div>\n </GlassCard>\n </form>\n </PageLayout>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"StyleProfilePage.js","names":[],"sources":["../../../../src/coolandlovely/pages/profile/StyleProfilePage.tsx"],"sourcesContent":["/**\n * Style Profile Page\n * @module coolandlovely/pages/profile\n *\n * Two routes share this component:\n * - `/profile` — the calling shopper's own profile (`cooMyStyleProfile` +\n * `cooUpsertStyleProfile`), editable, with a self-scoped wardrobe preview\n * and \"people you follow\" list.\n * - `/profile/:userId` — any other shopper's PUBLIC profile\n * (`cooStyleProfileByOwner`), reached by clicking an author's name/avatar\n * on a Look/Discover/Collaboration card. Read-only: no edit affordance, no\n * wardrobe preview (wardrobe stays self-scoped server-side), and shows a\n * Follow button instead. Server-side CooVisibility (PRIVATE/FOLLOWERS)\n * gates whether the profile resolves at all.\n */\n\nimport { useEffect, useState } from 'react';\nimport { useParams } from 'react-router';\nimport { Loader2, Save, UserCircle, Pencil, X, Users, Sparkles, Shirt } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { EmptyState } from '../../components/EmptyState';\nimport { TextField, TextAreaField, SelectField } from '../../components/Field';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { ColourSwatchRow } from '../../components/ColourSwatchRow';\nimport { VisibilityChip } from '../../components/VisibilityChip';\nimport { ActorName } from '../../components/ActorName';\nimport { FollowButton } from '../../components/FollowButton';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n useMyStyleProfile,\n useStyleProfileByOwner,\n useUpsertStyleProfile,\n useMyFollowing,\n useWardrobeItems,\n useLooks,\n} from '../../hooks';\nimport { categoryIcon } from '../../utils/icons';\nimport { parseCsv, titleCase } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\nimport type { CooVisibility } from '../../types';\n\nconst VISIBILITIES: CooVisibility[] = ['PUBLIC', 'FOLLOWERS', 'PRIVATE'];\n\n/** Common size rows offered in the editor (existing custom keys are preserved). */\nconst SIZE_KEYS = ['Tops', 'Bottoms', 'Dresses', 'Shoes', 'Outerwear'];\n\ninterface FormState {\n displayName: string;\n bio: string;\n visibility: CooVisibility;\n stylePreferences: string;\n palette: string;\n favouriteBrands: string;\n sizes: Record<string, string>;\n}\n\nconst EMPTY: FormState = {\n displayName: '',\n bio: '',\n visibility: 'PRIVATE',\n stylePreferences: '',\n palette: '',\n favouriteBrands: '',\n sizes: {},\n};\n\n/** Monogram from a free-text brand name (real brand logos are unavailable). */\nfunction brandInitials(name: string): string {\n const words = name.trim().split(/\\s+/).filter(Boolean);\n if (words.length === 0) return '?';\n if (words.length === 1) return words[0].slice(0, 2).toUpperCase();\n return (words[0][0] + words[1][0]).toUpperCase();\n}\n\nfunction BentoCard({\n title,\n children,\n className,\n}: {\n title: string;\n children: React.ReactNode;\n className?: string;\n}) {\n return (\n <GlassCard treatment=\"plain\" className={cn('p-5', className)}>\n <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">{title}</h3>\n {children}\n </GlassCard>\n );\n}\n\nexport function StyleProfilePage() {\n const { userId } = useParams<{ userId?: string }>();\n const { navigateTo, currentUser } = useCoolAndLovely();\n const isOwnProfile = !userId || userId === currentUser?.id;\n\n const myQuery = useMyStyleProfile();\n const otherQuery = useStyleProfileByOwner(isOwnProfile ? undefined : userId);\n const query = isOwnProfile ? myQuery : otherQuery;\n\n const upsert = useUpsertStyleProfile();\n // Both self-scoped — meaningful only on the caller's own profile page, but\n // called unconditionally (rules of hooks) and simply not rendered otherwise.\n const following = useMyFollowing();\n const wardrobe = useWardrobeItems();\n\n const profile = query.data;\n const recentLooks = useLooks({\n authorId: profile?.ownerId,\n pagination: { limit: 6, offset: 0 },\n });\n\n const [editing, setEditing] = useState(false);\n const [form, setForm] = useState<FormState>(EMPTY);\n\n const hasProfile = Boolean(profile);\n const followingList = following.data ?? [];\n\n useEffect(() => {\n if (isOwnProfile && profile) {\n setForm({\n displayName: profile.displayName ?? '',\n bio: profile.bio ?? '',\n visibility: profile.visibility,\n stylePreferences: profile.stylePreferences.join(', '),\n palette: profile.palette.join(', '),\n favouriteBrands: profile.favouriteBrands.join(', '),\n sizes: Object.fromEntries(\n Object.entries(profile.sizes ?? {}).map(([k, v]) => [k, String(v ?? '')])\n ),\n });\n }\n }, [isOwnProfile, profile]);\n\n // If there is no profile yet, drop straight into edit mode — own profile only.\n useEffect(() => {\n if (isOwnProfile && !query.isLoading && !hasProfile) {\n setEditing(true);\n }\n }, [isOwnProfile, query.isLoading, hasProfile]);\n\n const setField = <K extends keyof FormState>(key: K, value: FormState[K]) =>\n setForm((f) => ({ ...f, [key]: value }));\n\n const setSize = (key: string, value: string) =>\n setForm((f) => ({ ...f, sizes: { ...f.sizes, [key]: value } }));\n\n const visibilityOptions = VISIBILITIES.map((v) => ({ value: v, label: titleCase(v) }));\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n const cleanedSizes = Object.fromEntries(\n Object.entries(form.sizes)\n .map(([k, v]) => [k, v.trim()] as const)\n .filter(([, v]) => v.length > 0)\n );\n upsert.mutate(\n {\n displayName: form.displayName.trim() || undefined,\n bio: form.bio.trim() || undefined,\n visibility: form.visibility,\n stylePreferences: parseCsv(form.stylePreferences),\n palette: parseCsv(form.palette),\n favouriteBrands: parseCsv(form.favouriteBrands),\n sizes: cleanedSizes,\n },\n { onSuccess: () => setEditing(false) }\n );\n };\n\n if (query.isLoading) {\n return (\n <PageLayout title=\"Style Profile\">\n <LoadingView label=\"Loading style profile…\" />\n </PageLayout>\n );\n }\n\n if (query.isError) {\n return (\n <PageLayout title=\"Style Profile\">\n <ErrorView onRetry={() => void query.refetch()} />\n </PageLayout>\n );\n }\n\n // Public view of someone else's profile that does not exist, or whose\n // CooVisibility (PRIVATE / FOLLOWERS-not-following) hides it from us — the\n // svc returns null in both cases so a caller cannot tell them apart.\n if (!isOwnProfile && !profile) {\n return (\n <PageLayout title=\"Style Profile\">\n <EmptyState\n title=\"Profile not available\"\n description=\"This style profile doesn't exist, or its owner hasn't shared it with you.\"\n icon={<UserCircle className=\"h-8 w-8\" />}\n />\n </PageLayout>\n );\n }\n\n const canEdit = isOwnProfile;\n\n // ----- View mode (own profile in view state, or any visible public profile) -----\n if ((!editing || !canEdit) && profile) {\n const avatarUrl = isOwnProfile ? currentUser?.profilePicture || currentUser?.avatar : undefined;\n const wardrobeItems = isOwnProfile ? (wardrobe.data ?? []).slice(0, 6) : [];\n const looksList = recentLooks.data?.items ?? [];\n const sizeEntries = Object.entries(profile.sizes ?? {});\n const headerName = profile.displayName || (isOwnProfile ? currentUser?.name : undefined);\n\n return (\n <PageLayout\n title={isOwnProfile ? 'Style Profile' : headerName || 'Style Profile'}\n description={\n isOwnProfile\n ? 'Your taste, palette and sizing — the spine of personalised discovery'\n : undefined\n }\n actions={\n canEdit ? (\n <button\n type=\"button\"\n onClick={() => setEditing(true)}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90\"\n >\n <Pencil className=\"h-4 w-4\" /> Edit\n </button>\n ) : (\n <FollowButton followeeId={profile.ownerId} />\n )\n }\n >\n <div className=\"mx-auto max-w-5xl\">\n {/* Header */}\n <GlassCard treatment=\"glass\" className=\"p-6\">\n <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n {avatarUrl ? (\n <img\n src={avatarUrl}\n alt={headerName || 'Avatar'}\n className=\"h-16 w-16 shrink-0 rounded-full object-cover ring-2 ring-bg-surface\"\n />\n ) : (\n <div className=\"flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-accent-purple-subtle text-text-primary\">\n <UserCircle className=\"h-8 w-8\" />\n </div>\n )}\n <div className=\"min-w-0 flex-1\">\n <div className=\"flex flex-wrap items-center gap-2\">\n <h2 className=\"truncate text-xl font-semibold text-text-primary\">\n {headerName || <ActorName id={profile.ownerId} fallback=\"Style profile\" />}\n </h2>\n <VisibilityChip visibility={profile.visibility} />\n </div>\n {profile.bio && (\n <p className=\"mt-1 line-clamp-2 text-sm text-text-secondary\">{profile.bio}</p>\n )}\n <div className=\"mt-2 flex items-center gap-6\">\n <span className=\"text-sm text-text-secondary\">\n <span className=\"font-semibold text-text-primary tabular-nums\">\n {profile.followerCount ?? 0}\n </span>{' '}\n {profile.followerCount === 1 ? 'follower' : 'followers'}\n </span>\n <span className=\"text-sm text-text-secondary\">\n <span className=\"font-semibold text-text-primary tabular-nums\">\n {profile.followingCount ?? 0}\n </span>{' '}\n following\n </span>\n </div>\n </div>\n </div>\n </GlassCard>\n\n {/* Bento */}\n <div className=\"mt-6 grid gap-6 lg:grid-cols-5\">\n {/* Left: taste detail */}\n <div className=\"space-y-6 lg:col-span-3\">\n <BentoCard title=\"Style preferences\">\n {profile.stylePreferences.length ? (\n <div className=\"flex flex-wrap gap-2\">\n {profile.stylePreferences.map((pref, i) => (\n <span\n key={`${pref}-${i}`}\n className={cn(\n 'rounded-full px-3 py-1 text-sm font-medium',\n i === 0\n ? 'bg-accent-purple-subtle text-text-primary ring-1 ring-[var(--color-accent-soft)]'\n : 'bg-bg-sunken text-text-secondary'\n )}\n >\n {pref}\n </span>\n ))}\n </div>\n ) : (\n <p className=\"text-sm text-text-secondary\">\n {isOwnProfile\n ? 'No preferences yet — add a few in Edit.'\n : 'No preferences shared yet.'}\n </p>\n )}\n </BentoCard>\n\n <BentoCard title=\"Palette\">\n {profile.palette.length ? (\n <ColourSwatchRow colours={profile.palette} max={12} className=\"gap-2.5\" />\n ) : (\n <p className=\"text-sm text-text-secondary\">No palette yet.</p>\n )}\n </BentoCard>\n\n <div className=\"grid gap-6 sm:grid-cols-2\">\n <BentoCard title=\"Favourite brands\">\n {profile.favouriteBrands.length ? (\n <div className=\"grid grid-cols-1 gap-2\">\n {profile.favouriteBrands.map((brand, i) => (\n <div\n key={`${brand}-${i}`}\n className=\"flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface px-3 py-2\"\n >\n <span className=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-accent-purple-subtle text-xs font-bold text-text-primary\">\n {brandInitials(brand)}\n </span>\n <span className=\"truncate text-sm font-medium text-text-primary\">\n {brand}\n </span>\n </div>\n ))}\n </div>\n ) : (\n <p className=\"text-sm text-text-secondary\">No brands yet.</p>\n )}\n </BentoCard>\n\n {isOwnProfile && (\n <BentoCard title=\"Sizes\">\n {sizeEntries.length ? (\n <dl className=\"space-y-0\">\n {sizeEntries.map(([key, value]) => (\n <div\n key={key}\n className=\"flex items-center justify-between border-b border-border-seam/60 py-1.5 last:border-0\"\n >\n <dt className=\"text-sm text-text-secondary\">{titleCase(key)}</dt>\n <dd className=\"text-sm font-medium text-text-primary tabular-nums\">\n {String(value)}\n </dd>\n </div>\n ))}\n </dl>\n ) : (\n <p className=\"text-sm text-text-secondary\">No sizes recorded yet.</p>\n )}\n </BentoCard>\n )}\n </div>\n </div>\n\n {/* Right: wardrobe (own profile only — self-scoped server-side) + recent looks */}\n <div className=\"space-y-6 lg:col-span-2\">\n {isOwnProfile && (\n <BentoCard title=\"Her wardrobe\">\n {wardrobe.isLoading ? (\n <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n <Loader2 className=\"h-4 w-4 animate-spin\" /> Loading…\n </div>\n ) : wardrobeItems.length ? (\n <div className=\"grid grid-cols-3 gap-2\">\n {wardrobeItems.map((w) => (\n <button\n key={w.id}\n type=\"button\"\n onClick={() => navigateTo('/wardrobe')}\n aria-label={w.name}\n className=\"group overflow-hidden rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n >\n <Thumbnail\n icon={categoryIcon(w.category, 18)}\n seed={w.id}\n fileId={w.image?.id}\n alt={w.name}\n className=\"aspect-square w-full rounded-lg\"\n />\n </button>\n ))}\n </div>\n ) : (\n <button\n type=\"button\"\n onClick={() => navigateTo('/wardrobe/new')}\n className=\"flex w-full items-center gap-2 rounded-lg border border-dashed border-border-seam px-3 py-3 text-left text-sm text-text-secondary transition-colors hover:text-text-primary\"\n >\n <Shirt className=\"h-4 w-4\" /> Add pieces to your wardrobe\n </button>\n )}\n </BentoCard>\n )}\n\n <BentoCard title=\"Recent looks\">\n {recentLooks.isLoading ? (\n <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n <Loader2 className=\"h-4 w-4 animate-spin\" /> Loading…\n </div>\n ) : looksList.length ? (\n <div className=\"-mx-1 flex gap-3 overflow-x-auto px-1 pb-1\">\n {looksList.map((look) => (\n <button\n key={look.id}\n type=\"button\"\n onClick={() => navigateTo(`/looks/${look.id}`)}\n className=\"group w-24 shrink-0 text-left focus-visible:outline-none\"\n >\n <Thumbnail\n icon={<Sparkles className=\"h-5 w-5\" />}\n seed={look.id}\n fileId={look.image?.id}\n alt={look.title}\n className=\"aspect-[3/4] w-full rounded-lg\"\n />\n <p className=\"mt-1 truncate text-xs text-text-secondary\">{look.title}</p>\n </button>\n ))}\n </div>\n ) : (\n <p className=\"text-sm text-text-secondary\">\n {isOwnProfile\n ? 'You have not published any looks yet.'\n : 'No looks published yet.'}\n </p>\n )}\n </BentoCard>\n </div>\n </div>\n\n {/* People you follow (own profile only) */}\n {isOwnProfile && (\n <section className=\"mt-6\">\n <h3 className=\"mb-3 flex items-center gap-2 text-lg font-semibold text-text-primary\">\n <Users className=\"h-5 w-5\" /> People you follow ({followingList.length})\n </h3>\n {following.isLoading ? (\n <div className=\"flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n <Loader2 className=\"h-4 w-4 animate-spin\" /> Loading…\n </div>\n ) : followingList.length === 0 ? (\n <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n You are not following anyone yet. Follow creators from their looks to see their\n latest in Discover.\n </p>\n ) : (\n <ul className=\"divide-y divide-border-seam rounded-lg border border-border-seam bg-bg-surface\">\n {followingList.map((p) => (\n <li key={p.id} className=\"flex items-center gap-3 px-4 py-3\">\n <button\n type=\"button\"\n onClick={() => navigateTo(`/profile/${p.ownerId}`)}\n className=\"flex min-w-0 flex-1 items-center gap-3 text-left focus-visible:outline-none\"\n >\n <div className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent-purple-subtle text-text-primary\">\n <UserCircle className=\"h-5 w-5\" />\n </div>\n <div className=\"min-w-0 flex-1\">\n <p className=\"truncate text-sm font-medium text-text-primary hover:underline\">\n {p.displayName || <ActorName id={p.ownerId} />}\n </p>\n {p.bio && <p className=\"truncate text-xs text-text-secondary\">{p.bio}</p>}\n </div>\n </button>\n <FollowButton followeeId={p.ownerId} size=\"sm\" />\n </li>\n ))}\n </ul>\n )}\n </section>\n )}\n </div>\n </PageLayout>\n );\n }\n\n // ----- Edit / create mode (own profile only) -----\n const sizeKeys = Array.from(new Set([...SIZE_KEYS, ...Object.keys(form.sizes)]));\n\n return (\n <PageLayout\n title={hasProfile ? 'Edit style profile' : 'Create your style profile'}\n description=\"This powers your personalised discovery feed\"\n actions={\n hasProfile ? (\n <button\n type=\"button\"\n onClick={() => setEditing(false)}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <X className=\"h-4 w-4\" /> Cancel\n </button>\n ) : undefined\n }\n >\n <form onSubmit={handleSubmit} className=\"mx-auto max-w-2xl\">\n <GlassCard treatment=\"plain\" className=\"p-6\">\n <TextField\n id=\"displayName\"\n label=\"Display name\"\n value={form.displayName}\n onChange={(v) => setField('displayName', v)}\n placeholder=\"How you want to appear\"\n />\n <TextAreaField\n id=\"bio\"\n label=\"Bio\"\n value={form.bio}\n onChange={(v) => setField('bio', v)}\n placeholder=\"A sentence about your style…\"\n rows={3}\n className=\"mt-4\"\n />\n <SelectField\n id=\"visibility\"\n label=\"Visibility\"\n value={form.visibility}\n onChange={(v) => setField('visibility', v as CooVisibility)}\n options={visibilityOptions}\n className=\"mt-4\"\n />\n <TextField\n id=\"stylePreferences\"\n label=\"Style preferences\"\n value={form.stylePreferences}\n onChange={(v) => setField('stylePreferences', v)}\n placeholder=\"minimal, tailored, vintage\"\n hint=\"Comma-separated\"\n className=\"mt-4\"\n />\n <TextField\n id=\"palette\"\n label=\"Palette\"\n value={form.palette}\n onChange={(v) => setField('palette', v)}\n placeholder=\"neutrals, navy, rust\"\n hint=\"Comma-separated colour names — shown as swatches\"\n className=\"mt-4\"\n />\n <TextField\n id=\"favouriteBrands\"\n label=\"Favourite brands\"\n value={form.favouriteBrands}\n onChange={(v) => setField('favouriteBrands', v)}\n placeholder=\"Aurora Atelier, …\"\n hint=\"Comma-separated\"\n className=\"mt-4\"\n />\n\n <div className=\"mt-4\">\n <span className=\"mb-2 block text-sm font-medium text-text-primary\">Sizes</span>\n <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n {sizeKeys.map((key) => (\n <TextField\n key={key}\n id={`size-${key}`}\n label={titleCase(key)}\n value={form.sizes[key] ?? ''}\n onChange={(v) => setSize(key, v)}\n placeholder=\"e.g. M · 26 · 39\"\n />\n ))}\n </div>\n </div>\n\n {upsert.isError && (\n <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n {upsert.error instanceof Error ? upsert.error.message : 'Something went wrong'}\n </p>\n )}\n\n <div className=\"mt-6 flex justify-end gap-2\">\n <button\n type=\"submit\"\n disabled={upsert.isPending}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n >\n {upsert.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Save className=\"h-4 w-4\" />\n )}\n {hasProfile ? 'Save changes' : 'Create profile'}\n </button>\n </div>\n </GlassCard>\n </form>\n </PageLayout>\n );\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@burdenoff/microfe-coolandlovely",
|
|
3
|
-
"version": "2026.
|
|
3
|
+
"version": "2026.801.1",
|
|
4
4
|
"description": "Burdenoff CoolAndLovely Microfrontend",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -26,15 +26,15 @@
|
|
|
26
26
|
"types": "./dist/index.d.ts",
|
|
27
27
|
"scripts": {
|
|
28
28
|
"dev": "vite",
|
|
29
|
-
"build": "tsc && vite build",
|
|
29
|
+
"build": "tsc && bash scripts/build-limits.sh --gate vite build",
|
|
30
30
|
"schema:pull": "graphql-codegen --project schema-wspace && graphql-codegen --project schema-global",
|
|
31
31
|
"codegen": "graphql-codegen --project wspace && graphql-codegen --project global",
|
|
32
32
|
"codegen:all": "bun run schema:pull && bun run codegen",
|
|
33
33
|
"lint": "eslint .",
|
|
34
34
|
"lint:sanity": "if [ \"${CI:-}\" = \"true\" ]; then bun run lint; else bun run lint -- --cache --cache-location .eslintcache; fi",
|
|
35
35
|
"format": "prettier --write \"src/**/*.{ts,tsx}\"",
|
|
36
|
-
"type:check": "tsc --noEmit",
|
|
37
|
-
"sanity": "bun run codegen && bun run lint:sanity && bun run format && bun run type:check && bun run build",
|
|
36
|
+
"type:check": "bash scripts/build-limits.sh tsc --noEmit",
|
|
37
|
+
"sanity": "bash scripts/build-limits.sh --gate bash -c 'bun run codegen && bun run lint:sanity && bun run format && bun run type:check && bun run build'",
|
|
38
38
|
"storybook": "storybook dev -p 6006",
|
|
39
39
|
"build-storybook": "storybook build",
|
|
40
40
|
"test:storybook": "test-storybook",
|
|
@@ -47,14 +47,14 @@
|
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@apollo/client": "^4.0.11",
|
|
50
|
-
"@burdenoff/fe-libs": "2026.
|
|
50
|
+
"@burdenoff/fe-libs": "2026.801.1",
|
|
51
51
|
"@tanstack/react-query": "^5.90.16",
|
|
52
52
|
"clsx": "^2.1.1",
|
|
53
53
|
"graphql": "^16.12.0",
|
|
54
54
|
"lucide-react": "^0.468.0",
|
|
55
55
|
"react": "^19.0.0",
|
|
56
56
|
"react-dom": "^19.0.0",
|
|
57
|
-
"react-router
|
|
57
|
+
"react-router": "^8.3.0",
|
|
58
58
|
"tailwind-merge": "^3.4.0",
|
|
59
59
|
"zustand": "^5.0.7"
|
|
60
60
|
},
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
"access": "restricted"
|
|
102
102
|
},
|
|
103
103
|
"overrides": {
|
|
104
|
-
"@burdenoff/fe-libs": "2026.
|
|
104
|
+
"@burdenoff/fe-libs": "2026.801.1",
|
|
105
105
|
"lodash": ">=4.17.21",
|
|
106
106
|
"lodash-es": ">=4.17.21",
|
|
107
107
|
"dompurify": ">=3.3.4",
|