@burdenoff/microfe-coolandlovely 2026.820.2 → 2026.820.4

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.
Files changed (17) hide show
  1. package/dist/coolandlovely/hooks/index.d.ts +2 -2
  2. package/dist/coolandlovely/hooks/index.d.ts.map +1 -1
  3. package/dist/coolandlovely/hooks/useCoolAndLovelyApi.d.ts +11 -1
  4. package/dist/coolandlovely/hooks/useCoolAndLovelyApi.d.ts.map +1 -1
  5. package/dist/coolandlovely/hooks/useCoolAndLovelyApi.js +43 -1
  6. package/dist/coolandlovely/hooks/useCoolAndLovelyApi.js.map +1 -1
  7. package/dist/coolandlovely/pages/discover/DiscoverPage.d.ts +7 -6
  8. package/dist/coolandlovely/pages/discover/DiscoverPage.d.ts.map +1 -1
  9. package/dist/coolandlovely/pages/discover/DiscoverPage.js +480 -165
  10. package/dist/coolandlovely/pages/discover/DiscoverPage.js.map +1 -1
  11. package/dist/coolandlovely/types/index.d.ts +17 -0
  12. package/dist/coolandlovely/types/index.d.ts.map +1 -1
  13. package/dist/stories/DiscoverPage.stories.d.ts +11 -0
  14. package/dist/stories/DiscoverPage.stories.d.ts.map +1 -0
  15. package/dist/stories/__fixtures__/coolandlovely.d.ts +3 -1
  16. package/dist/stories/__fixtures__/coolandlovely.d.ts.map +1 -1
  17. package/package.json +1 -1
package/dist/coolandlovely/pages/discover/DiscoverPage.js CHANGED
@@ -1,224 +1,539 @@
1
1
  import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
2
- import { PageLayout as t } from "../../components/PageLayout.js";
3
- import { ErrorView as n, LoadingView as r } from "../../components/StateViews.js";
4
- import { Thumbnail as i } from "../../components/Thumbnail.js";
5
- import { useLooks as a, useMyFollowing as o, useMyStyleProfile as s, useStyleItems as c } from "../../hooks/useCoolAndLovelyApi.js";
6
- import { titleCase as l } from "../../utils/formatters.js";
2
+ import { cn as t } from "../../utils/cn.js";
3
+ import { PageLayout as n } from "../../components/PageLayout.js";
4
+ import { StatusBadge as r } from "../../components/StatusBadge.js";
5
+ import { ErrorView as i, LoadingView as a } from "../../components/StateViews.js";
6
+ import { Thumbnail as o } from "../../components/Thumbnail.js";
7
+ import { useLooks as s, useMyFollowing as c, useMyStyleProfile as l, useSearchLooks as u, useSearchStyleItems as d, useStyleItems as f } from "../../hooks/useCoolAndLovelyApi.js";
8
+ import { formatPrice as ee, titleCase as p } from "../../utils/formatters.js";
9
+ import { LookCard as te } from "../../components/LookCard.js";
7
10
  import "../../hooks/index.js";
8
- import { EmptyState as u } from "../../components/EmptyState.js";
9
- import { ColourSwatchRow as d } from "../../components/ColourSwatchRow.js";
10
- import { useMemo as f } from "react";
11
- import { Compass as p, Heart as m, ShoppingBag as h, Sparkles as g, UserCheck as _, Users as v } from "lucide-react";
12
- import { jsx as y, jsxs as b } from "react/jsx-runtime";
13
- import { EmphasisPanel as x, PagePurpose as S } from "@burdenoff/fe-libs/ui";
11
+ import { STYLE_CATEGORIES as ne, categoryIcon as m } from "../../utils/icons.js";
12
+ import { EmptyState as h } from "../../components/EmptyState.js";
13
+ import { ColourSwatchRow as g } from "../../components/ColourSwatchRow.js";
14
+ import { useMemo as re, useState as _ } from "react";
15
+ import { ChevronLeft as v, ChevronRight as y, Compass as b, Heart as ie, Search as ae, Shirt as oe, ShoppingBag as x, Sparkles as S, UserCheck as se, Users as ce, X as C } from "lucide-react";
16
+ import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
17
+ import { EmphasisPanel as le, PagePurpose as ue } from "@burdenoff/fe-libs/ui";
14
18
  //#region src/coolandlovely/pages/discover/DiscoverPage.tsx
15
- function C(e) {
19
+ function D(e) {
16
20
  return new Set(e.map((e) => e.trim().toLowerCase()).filter(Boolean));
17
21
  }
18
- function w(e, t) {
22
+ function O(e, t) {
19
23
  let n = 0;
20
24
  for (let r of e) t.has(r.trim().toLowerCase()) && (n += 1);
21
25
  return n;
22
26
  }
23
- var T = ({ title: e, icon: t, sublabel: n, children: r }) => /* @__PURE__ */ b("section", {
27
+ var k = ({ title: e, icon: t, sublabel: n, children: r }) => /* @__PURE__ */ E("section", {
24
28
  className: "mt-8",
25
- children: [/* @__PURE__ */ b("div", {
29
+ children: [/* @__PURE__ */ E("div", {
26
30
  className: "mb-3",
27
- children: [/* @__PURE__ */ b("h2", {
31
+ children: [/* @__PURE__ */ E("h2", {
28
32
  className: "flex items-center gap-2 text-lg font-semibold text-text-primary",
29
33
  children: [
30
34
  t,
31
35
  " ",
32
36
  e
33
37
  ]
34
- }), n ? /* @__PURE__ */ y("p", {
38
+ }), n ? /* @__PURE__ */ T("p", {
35
39
  className: "mt-0.5 text-sm text-text-secondary",
36
40
  children: n
37
41
  }) : null]
38
42
  }), r]
39
- });
40
- function E() {
41
- let { navigateTo: E } = e(), D = s(), O = a({ pagination: {
43
+ }), de = [
44
+ {
45
+ value: "for-you",
46
+ label: "For you",
47
+ icon: /* @__PURE__ */ T(b, { className: "h-4 w-4" })
48
+ },
49
+ {
50
+ value: "items",
51
+ label: "Items",
52
+ icon: /* @__PURE__ */ T(x, { className: "h-4 w-4" })
53
+ },
54
+ {
55
+ value: "looks",
56
+ label: "Looks",
57
+ icon: /* @__PURE__ */ T(S, { className: "h-4 w-4" })
58
+ }
59
+ ], A = [
60
+ {
61
+ value: "ALL",
62
+ label: "All"
63
+ },
64
+ {
65
+ value: "ACTIVE",
66
+ label: "Active"
67
+ },
68
+ {
69
+ value: "DRAFT",
70
+ label: "Draft"
71
+ },
72
+ {
73
+ value: "OUT_OF_STOCK",
74
+ label: "Out of stock"
75
+ },
76
+ {
77
+ value: "RETIRED",
78
+ label: "Retired"
79
+ }
80
+ ], j = [
81
+ {
82
+ value: "ALL",
83
+ label: "All"
84
+ },
85
+ {
86
+ value: "EVERYDAY",
87
+ label: "Everyday"
88
+ },
89
+ {
90
+ value: "WORK",
91
+ label: "Work"
92
+ },
93
+ {
94
+ value: "EVENING",
95
+ label: "Evening"
96
+ },
97
+ {
98
+ value: "WEDDING_GUEST",
99
+ label: "Wedding guest"
100
+ },
101
+ {
102
+ value: "VACATION",
103
+ label: "Vacation"
104
+ },
105
+ {
106
+ value: "PARTY",
107
+ label: "Party"
108
+ },
109
+ {
110
+ value: "ACTIVE",
111
+ label: "Active"
112
+ },
113
+ {
114
+ value: "OTHER",
115
+ label: "Other"
116
+ }
117
+ ], M = 24;
118
+ function N() {
119
+ let { navigateTo: N } = e(), P = l(), F = s({ pagination: {
42
120
  limit: 100,
43
121
  offset: 0
44
- } }), k = c({ pagination: {
122
+ } }), I = f({ pagination: {
45
123
  limit: 100,
46
124
  offset: 0
47
- } }), A = o(), j = D.isLoading || O.isLoading || k.isLoading, M = O.isError && k.isError, N = f(() => {
48
- let e = D.data, t = O.data?.items ?? [], n = k.data?.items ?? [], r = new Set((A.data ?? []).map((e) => e.ownerId)), i = C([
125
+ } }), L = c(), [R, fe] = _("for-you"), [z, B] = _(""), [V, H] = _(0), [U, W] = _(0), [G, K] = _([]), [q, J] = _("ALL"), [Y, X] = _("ALL"), Z = d({
126
+ input: {
127
+ query: z.trim() || void 0,
128
+ categories: G.length > 0 ? G : void 0,
129
+ status: q === "ALL" ? void 0 : q
130
+ },
131
+ pagination: {
132
+ limit: M,
133
+ offset: V
134
+ }
135
+ }), Q = u({
136
+ input: {
137
+ query: z.trim() || void 0,
138
+ occasion: Y === "ALL" ? void 0 : Y
139
+ },
140
+ pagination: {
141
+ limit: M,
142
+ offset: U
143
+ }
144
+ }), pe = P.isLoading || F.isLoading || I.isLoading, me = F.isError && I.isError, $ = re(() => {
145
+ let e = P.data, t = F.data?.items ?? [], n = I.data?.items ?? [], r = new Set((L.data ?? []).map((e) => e.ownerId)), i = D([
49
146
  ...e?.stylePreferences ?? [],
50
147
  ...e?.palette ?? [],
51
148
  ...e?.favouriteBrands ?? []
52
- ]), a = C(e?.palette ?? []), o = C(e?.favouriteBrands ?? []), s = (e) => w(e.tags, i) * 2 + +!!i.has(e.occasion.toLowerCase()) + e.likeCount * .05 + e.saveCount * .05, c = (e) => w(e.tags, i) * 2 + w(e.colours, a) * 2 + +!!i.has(e.category.toLowerCase()) + (o.size && e.tags.some((e) => o.has(e.toLowerCase())) ? 1 : 0), l = i.size > 0, u = [...t].sort((e, t) => l ? s(t) - s(e) : t.likeCount + t.saveCount - (e.likeCount + e.saveCount)).slice(0, 8), d = [...n].filter((e) => l ? c(e) > 0 : !0).sort((e, t) => c(t) - c(e)).slice(0, 8), f = t.filter((e) => r.has(e.authorId)).sort((e, t) => t.likeCount + t.saveCount - (e.likeCount + e.saveCount)).slice(0, 8);
149
+ ]), a = D(e?.palette ?? []), o = D(e?.favouriteBrands ?? []), s = (e) => O(e.tags, i) * 2 + +!!i.has(e.occasion.toLowerCase()) + e.likeCount * .05 + e.saveCount * .05, c = (e) => O(e.tags, i) * 2 + O(e.colours, a) * 2 + +!!i.has(e.category.toLowerCase()) + (o.size && e.tags.some((e) => o.has(e.toLowerCase())) ? 1 : 0), l = i.size > 0, u = [...t].sort((e, t) => l ? s(t) - s(e) : t.likeCount + t.saveCount - (e.likeCount + e.saveCount)).slice(0, 8), d = [...n].filter((e) => l ? c(e) > 0 : !0).sort((e, t) => c(t) - c(e)).slice(0, 8), f = t.filter((e) => r.has(e.authorId)).sort((e, t) => t.likeCount + t.saveCount - (e.likeCount + e.saveCount)).slice(0, 8);
53
150
  return {
54
151
  hasProfile: !!e,
55
152
  hasTaste: l,
56
153
  madeForYou: u,
57
154
  inYourPalette: d,
58
155
  fromFollowing: f,
59
- followingProfiles: A.data ?? []
156
+ followingProfiles: L.data ?? []
60
157
  };
61
158
  }, [
62
- D.data,
63
- O.data,
64
- k.data,
65
- A.data
66
- ]);
67
- return j ? /* @__PURE__ */ y(t, {
159
+ P.data,
160
+ F.data,
161
+ I.data,
162
+ L.data
163
+ ]), he = (e) => {
164
+ K((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]), H(0);
165
+ };
166
+ return /* @__PURE__ */ E(n, {
68
167
  title: "Discover",
69
- children: /* @__PURE__ */ y(r, { label: "Curating your feed…" })
70
- }) : M ? /* @__PURE__ */ y(t, {
71
- title: "Discover",
72
- children: /* @__PURE__ */ y(n, { onRetry: () => {
73
- O.refetch(), k.refetch();
74
- } })
75
- }) : /* @__PURE__ */ b(t, {
76
- title: "Discover",
77
- description: "Looks and pieces tuned to your taste",
168
+ description: "Find looks and pieces tuned to your taste",
78
169
  hero: !0,
79
170
  children: [
80
- /* @__PURE__ */ y(S, {
81
- className: "mb-6",
82
- children: "Your personalised feed, computed live from your style profile against the pieces and looks on the platform — the closer a piece matches the aesthetics, palette and brands you follow, the higher it ranks. Nothing here is fabricated."
171
+ /* @__PURE__ */ T(ue, {
172
+ className: "mb-4",
173
+ children: "Your personalised feed, computed live from your style profile, plus search across every piece and look on the platform."
83
174
  }),
84
- N.hasProfile ? null : /* @__PURE__ */ y(x, {
85
- className: "mb-8",
86
- children: /* @__PURE__ */ b("div", {
87
- className: "flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between",
88
- children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h2", {
89
- className: "text-lg font-semibold text-text-primary",
90
- children: "Build your style profile"
91
- }), /* @__PURE__ */ y("p", {
92
- className: "mt-1 text-sm text-text-secondary",
93
- children: "Tell us your aesthetics, palette and favourite brands and this feed tunes itself to you."
94
- })] }), /* @__PURE__ */ b("button", {
95
- type: "button",
96
- onClick: () => E("/profile"),
97
- className: "inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-opacity hover:opacity-90",
98
- children: [/* @__PURE__ */ y(g, { className: "h-4 w-4" }), " Create profile"]
99
- })]
175
+ /* @__PURE__ */ T("div", {
176
+ className: "mb-4 flex items-center gap-2",
177
+ children: /* @__PURE__ */ E("div", {
178
+ className: "relative flex-1",
179
+ children: [
180
+ /* @__PURE__ */ T(ae, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }),
181
+ /* @__PURE__ */ T("input", {
182
+ type: "text",
183
+ value: z,
184
+ onChange: (e) => {
185
+ B(e.target.value), H(0), W(0);
186
+ },
187
+ placeholder: "Search style items and looks…",
188
+ className: "w-full rounded-lg border border-border-seam bg-bg-surface py-2.5 pl-9 pr-9 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
189
+ }),
190
+ z && /* @__PURE__ */ T("button", {
191
+ type: "button",
192
+ onClick: () => B(""),
193
+ className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-text-secondary hover:text-text-primary",
194
+ children: /* @__PURE__ */ T(C, { className: "h-4 w-4" })
195
+ })
196
+ ]
100
197
  })
101
198
  }),
102
- /* @__PURE__ */ y(T, {
103
- title: "Made for you",
104
- icon: /* @__PURE__ */ y(p, { className: "h-5 w-5" }),
105
- sublabel: N.hasTaste ? "Ranked to match your style profile" : "Most-loved looks on the platform",
106
- children: N.madeForYou.length === 0 ? /* @__PURE__ */ y(u, {
107
- title: "No looks yet",
108
- description: "Once looks are published they will appear here, tuned to your taste."
109
- }) : /* @__PURE__ */ y("div", {
110
- className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
111
- children: N.madeForYou.map((e) => /* @__PURE__ */ b("button", {
112
- type: "button",
113
- onClick: () => E(`/looks/${e.id}`),
114
- className: "group flex flex-col overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left transition-colors hover:border-accent-foreground/20 hover:shadow-md",
115
- children: [/* @__PURE__ */ y(i, {
116
- icon: /* @__PURE__ */ y(g, { className: "h-6 w-6" }),
117
- seed: e.id,
118
- fileId: e.image?.id,
119
- alt: e.title,
120
- className: "aspect-[4/5] w-full rounded-none"
121
- }), /* @__PURE__ */ b("div", {
122
- className: "min-w-0 p-3",
123
- children: [
124
- /* @__PURE__ */ y("p", {
199
+ /* @__PURE__ */ E("div", {
200
+ className: "mb-6 flex items-center gap-1 border-b border-border-seam",
201
+ children: [de.map((e) => /* @__PURE__ */ E("button", {
202
+ type: "button",
203
+ onClick: () => fe(e.value),
204
+ className: t("inline-flex items-center gap-1.5 border-b-2 px-3 py-2.5 text-sm font-medium transition-colors", R === e.value ? "border-action-primary-bg text-text-primary" : "border-transparent text-text-secondary hover:text-text-primary"),
205
+ children: [
206
+ e.icon,
207
+ " ",
208
+ e.label
209
+ ]
210
+ }, e.value)), (z || G.length > 0 || q !== "ALL" || Y !== "ALL") && /* @__PURE__ */ E("button", {
211
+ type: "button",
212
+ onClick: () => {
213
+ B(""), K([]), J("ALL"), X("ALL"), H(0), W(0);
214
+ },
215
+ className: "ml-auto inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-xs font-medium text-text-secondary transition-colors hover:bg-bg-sunken hover:text-text-primary",
216
+ children: [/* @__PURE__ */ T(C, { className: "h-3.5 w-3.5" }), " Clear"]
217
+ })]
218
+ }),
219
+ R === "for-you" && (pe ? /* @__PURE__ */ T(a, { label: "Curating your feed…" }) : me ? /* @__PURE__ */ T(i, { onRetry: () => {
220
+ F.refetch(), I.refetch();
221
+ } }) : /* @__PURE__ */ E(w, { children: [
222
+ $.hasProfile ? null : /* @__PURE__ */ T(le, {
223
+ className: "mb-8",
224
+ children: /* @__PURE__ */ E("div", {
225
+ className: "flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between",
226
+ children: [/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("h2", {
227
+ className: "text-lg font-semibold text-text-primary",
228
+ children: "Build your style profile"
229
+ }), /* @__PURE__ */ T("p", {
230
+ className: "mt-1 text-sm text-text-secondary",
231
+ children: "Tell us your aesthetics, palette and favourite brands and this feed tunes itself to you."
232
+ })] }), /* @__PURE__ */ E("button", {
233
+ type: "button",
234
+ onClick: () => N("/profile"),
235
+ className: "inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-opacity hover:opacity-90",
236
+ children: [/* @__PURE__ */ T(S, { className: "h-4 w-4" }), " Create profile"]
237
+ })]
238
+ })
239
+ }),
240
+ /* @__PURE__ */ T(k, {
241
+ title: "Made for you",
242
+ icon: /* @__PURE__ */ T(b, { className: "h-5 w-5" }),
243
+ sublabel: $.hasTaste ? "Ranked to match your style profile" : "Most-loved looks on the platform",
244
+ children: $.madeForYou.length === 0 ? /* @__PURE__ */ T(h, {
245
+ title: "No looks yet",
246
+ description: "Once looks are published they will appear here, tuned to your taste."
247
+ }) : /* @__PURE__ */ T("div", {
248
+ className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
249
+ children: $.madeForYou.map((e) => /* @__PURE__ */ E("button", {
250
+ type: "button",
251
+ onClick: () => N(`/looks/${e.id}`),
252
+ className: "group flex flex-col overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left transition-colors hover:border-accent-foreground/20 hover:shadow-md",
253
+ children: [/* @__PURE__ */ T(o, {
254
+ icon: /* @__PURE__ */ T(S, { className: "h-6 w-6" }),
255
+ seed: e.id,
256
+ fileId: e.image?.id,
257
+ alt: e.title,
258
+ className: "aspect-[4/5] w-full rounded-none"
259
+ }), /* @__PURE__ */ E("div", {
260
+ className: "min-w-0 p-3",
261
+ children: [
262
+ /* @__PURE__ */ T("p", {
263
+ className: "truncate text-sm font-medium text-text-primary",
264
+ children: e.title
265
+ }),
266
+ /* @__PURE__ */ T("p", {
267
+ className: "mt-0.5 text-xs text-text-secondary",
268
+ children: p(e.occasion)
269
+ }),
270
+ /* @__PURE__ */ E("span", {
271
+ className: "mt-2 inline-flex items-center gap-1 text-xs text-text-secondary",
272
+ children: [
273
+ /* @__PURE__ */ T(ie, { className: "h-3.5 w-3.5" }),
274
+ " ",
275
+ e.likeCount
276
+ ]
277
+ })
278
+ ]
279
+ })]
280
+ }, e.id))
281
+ })
282
+ }),
283
+ $.inYourPalette.length > 0 ? /* @__PURE__ */ T(k, {
284
+ title: "In your palette",
285
+ icon: /* @__PURE__ */ T(x, { className: "h-5 w-5" }),
286
+ sublabel: "Pieces that match your colours, categories and tags",
287
+ children: /* @__PURE__ */ T("div", {
288
+ className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
289
+ children: $.inYourPalette.map((e) => /* @__PURE__ */ E("button", {
290
+ type: "button",
291
+ onClick: () => N(`/items/${e.id}`),
292
+ className: "group flex flex-col overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left transition-colors hover:border-accent-foreground/20 hover:shadow-md",
293
+ children: [/* @__PURE__ */ T(o, {
294
+ icon: /* @__PURE__ */ T(x, { className: "h-6 w-6" }),
295
+ seed: e.id,
296
+ fileId: e.image?.id,
297
+ alt: e.name,
298
+ className: "aspect-[4/5] w-full rounded-none"
299
+ }), /* @__PURE__ */ E("div", {
300
+ className: "min-w-0 p-3",
301
+ children: [
302
+ /* @__PURE__ */ T("p", {
303
+ className: "truncate text-sm font-medium text-text-primary",
304
+ children: e.name
305
+ }),
306
+ /* @__PURE__ */ T("p", {
307
+ className: "mt-0.5 text-xs text-text-secondary",
308
+ children: p(e.category)
309
+ }),
310
+ /* @__PURE__ */ T(g, {
311
+ colours: e.colours,
312
+ max: 5,
313
+ className: "mt-2"
314
+ })
315
+ ]
316
+ })]
317
+ }, e.id))
318
+ })
319
+ }) : null,
320
+ /* @__PURE__ */ T(k, {
321
+ title: "From people you follow",
322
+ icon: /* @__PURE__ */ T(se, { className: "h-5 w-5" }),
323
+ sublabel: $.followingProfiles.length === 0 ? "Follow creators and shoppers to see their looks here" : `You follow ${$.followingProfiles.length} ${$.followingProfiles.length === 1 ? "person" : "people"}`,
324
+ children: $.followingProfiles.length === 0 ? /* @__PURE__ */ T(h, {
325
+ title: "You are not following anyone yet",
326
+ description: "Open a look or a style profile and tap Follow to build a feed from people whose taste you love.",
327
+ icon: /* @__PURE__ */ T(ce, { className: "h-8 w-8" })
328
+ }) : $.fromFollowing.length === 0 ? /* @__PURE__ */ T("div", {
329
+ className: "rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
330
+ children: "The people you follow have not published looks visible to you yet."
331
+ }) : /* @__PURE__ */ T("div", {
332
+ className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
333
+ children: $.fromFollowing.map((e) => /* @__PURE__ */ E("button", {
334
+ type: "button",
335
+ onClick: () => N(`/looks/${e.id}`),
336
+ className: "group flex flex-col overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left transition-colors hover:border-accent-foreground/20 hover:shadow-md",
337
+ children: [/* @__PURE__ */ T(o, {
338
+ icon: /* @__PURE__ */ T(S, { className: "h-6 w-6" }),
339
+ seed: e.id,
340
+ fileId: e.image?.id,
341
+ alt: e.title,
342
+ className: "aspect-[4/5] w-full rounded-none"
343
+ }), /* @__PURE__ */ E("div", {
344
+ className: "min-w-0 p-3",
345
+ children: [/* @__PURE__ */ T("p", {
125
346
  className: "truncate text-sm font-medium text-text-primary",
126
347
  children: e.title
127
- }),
128
- /* @__PURE__ */ y("p", {
348
+ }), /* @__PURE__ */ T("p", {
129
349
  className: "mt-0.5 text-xs text-text-secondary",
130
- children: l(e.occasion)
131
- }),
132
- /* @__PURE__ */ b("span", {
133
- className: "mt-2 inline-flex items-center gap-1 text-xs text-text-secondary",
350
+ children: p(e.occasion)
351
+ })]
352
+ })]
353
+ }, e.id))
354
+ })
355
+ })
356
+ ] })),
357
+ R === "items" && (() => {
358
+ let e = Z.data, n = e?.items ?? [], s = e?.pageInfo.hasMore ?? !1;
359
+ return /* @__PURE__ */ E("div", {
360
+ className: "space-y-4",
361
+ children: [
362
+ /* @__PURE__ */ T("div", {
363
+ className: "flex flex-wrap items-center gap-2",
364
+ children: ne.map((e) => /* @__PURE__ */ E("button", {
365
+ type: "button",
366
+ onClick: () => he(e),
367
+ className: t("inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium transition-colors", G.includes(e) ? "bg-accent-purple-subtle text-text-primary" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
368
+ children: [
369
+ m(e, 14),
370
+ " ",
371
+ p(e)
372
+ ]
373
+ }, e))
374
+ }),
375
+ /* @__PURE__ */ T("div", {
376
+ className: "flex flex-wrap items-center gap-2",
377
+ children: A.map((e) => /* @__PURE__ */ T("button", {
378
+ type: "button",
379
+ onClick: () => {
380
+ J(e.value), H(0);
381
+ },
382
+ className: t("rounded-full px-3 py-1.5 text-sm font-medium transition-colors", q === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
383
+ children: e.label
384
+ }, e.value))
385
+ }),
386
+ Z.isLoading ? /* @__PURE__ */ T(a, { label: "Searching items…" }) : Z.isError ? /* @__PURE__ */ T(i, { onRetry: () => void Z.refetch() }) : n.length === 0 ? /* @__PURE__ */ T(h, {
387
+ illustration: "empty-data",
388
+ icon: /* @__PURE__ */ T(oe, { className: "h-10 w-10" }),
389
+ title: "No items found",
390
+ description: "Try a different query or filters."
391
+ }) : /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("div", {
392
+ className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4",
393
+ children: n.map((e) => /* @__PURE__ */ E("button", {
394
+ type: "button",
395
+ onClick: () => N(`/items/${e.id}`),
396
+ className: "group overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-md",
397
+ children: [/* @__PURE__ */ E("div", {
398
+ className: "relative",
399
+ children: [/* @__PURE__ */ T(o, {
400
+ icon: m(e.category, 32),
401
+ seed: e.id,
402
+ fileId: e.image?.id,
403
+ alt: e.name,
404
+ className: "aspect-[3/4] w-full"
405
+ }), /* @__PURE__ */ T("div", {
406
+ className: "absolute right-2 top-2",
407
+ children: /* @__PURE__ */ T(r, {
408
+ status: e.status,
409
+ className: "shadow-sm"
410
+ })
411
+ })]
412
+ }), /* @__PURE__ */ E("div", {
413
+ className: "p-3",
134
414
  children: [
135
- /* @__PURE__ */ y(m, { className: "h-3.5 w-3.5" }),
136
- " ",
137
- e.likeCount
415
+ /* @__PURE__ */ T("p", {
416
+ className: "truncate text-sm font-medium text-text-primary",
417
+ children: e.name
418
+ }),
419
+ e.brand?.name && /* @__PURE__ */ T("p", {
420
+ className: "truncate text-xs text-text-secondary",
421
+ children: e.brand.name
422
+ }),
423
+ /* @__PURE__ */ E("div", {
424
+ className: "mt-1.5 flex items-center justify-between gap-2",
425
+ children: [/* @__PURE__ */ T("span", {
426
+ className: "text-sm font-semibold text-text-primary tabular-nums",
427
+ children: ee(e.price, e.currency)
428
+ }), /* @__PURE__ */ T("span", {
429
+ className: "text-xs text-text-secondary",
430
+ children: p(e.category)
431
+ })]
432
+ }),
433
+ e.colours.length > 0 && /* @__PURE__ */ T(g, {
434
+ colours: e.colours,
435
+ max: 5,
436
+ className: "mt-2"
437
+ })
138
438
  ]
139
- })
140
- ]
141
- })]
142
- }, e.id))
143
- })
144
- }),
145
- N.inYourPalette.length > 0 ? /* @__PURE__ */ y(T, {
146
- title: "In your palette",
147
- icon: /* @__PURE__ */ y(h, { className: "h-5 w-5" }),
148
- sublabel: "Pieces that match your colours, categories and tags",
149
- children: /* @__PURE__ */ y("div", {
150
- className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
151
- children: N.inYourPalette.map((e) => /* @__PURE__ */ b("button", {
152
- type: "button",
153
- onClick: () => E(`/items/${e.id}`),
154
- className: "group flex flex-col overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left transition-colors hover:border-accent-foreground/20 hover:shadow-md",
155
- children: [/* @__PURE__ */ y(i, {
156
- icon: /* @__PURE__ */ y(h, { className: "h-6 w-6" }),
157
- seed: e.id,
158
- fileId: e.image?.id,
159
- alt: e.name,
160
- className: "aspect-[4/5] w-full rounded-none"
161
- }), /* @__PURE__ */ b("div", {
162
- className: "min-w-0 p-3",
439
+ })]
440
+ }, e.id))
441
+ }), (V > 0 || s) && /* @__PURE__ */ E("div", {
442
+ className: "mt-6 flex items-center justify-center gap-2",
163
443
  children: [
164
- /* @__PURE__ */ y("p", {
165
- className: "truncate text-sm font-medium text-text-primary",
166
- children: e.name
444
+ /* @__PURE__ */ E("button", {
445
+ type: "button",
446
+ disabled: V === 0,
447
+ onClick: () => H((e) => Math.max(0, e - M)),
448
+ className: "inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40",
449
+ children: [/* @__PURE__ */ T(v, { className: "h-4 w-4" }), " Previous"]
167
450
  }),
168
- /* @__PURE__ */ y("p", {
169
- className: "mt-0.5 text-xs text-text-secondary",
170
- children: l(e.category)
451
+ /* @__PURE__ */ E("span", {
452
+ className: "text-sm text-text-secondary",
453
+ children: ["Page ", V / M + 1]
171
454
  }),
172
- /* @__PURE__ */ y(d, {
173
- colours: e.colours,
174
- max: 5,
175
- className: "mt-2"
455
+ /* @__PURE__ */ E("button", {
456
+ type: "button",
457
+ disabled: !s,
458
+ onClick: () => H((e) => e + M),
459
+ className: "inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40",
460
+ children: ["Next ", /* @__PURE__ */ T(y, { className: "h-4 w-4" })]
176
461
  })
177
462
  ]
178
- })]
179
- }, e.id))
180
- })
181
- }) : null,
182
- /* @__PURE__ */ y(T, {
183
- title: "From people you follow",
184
- icon: /* @__PURE__ */ y(_, { className: "h-5 w-5" }),
185
- sublabel: N.followingProfiles.length === 0 ? "Follow creators and shoppers to see their looks here" : `You follow ${N.followingProfiles.length} ${N.followingProfiles.length === 1 ? "person" : "people"}`,
186
- children: N.followingProfiles.length === 0 ? /* @__PURE__ */ y(u, {
187
- title: "You are not following anyone yet",
188
- description: "Open a look or a style profile and tap Follow to build a feed from people whose taste you love.",
189
- icon: /* @__PURE__ */ y(v, { className: "h-8 w-8" })
190
- }) : N.fromFollowing.length === 0 ? /* @__PURE__ */ y("div", {
191
- className: "rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
192
- children: "The people you follow have not published looks visible to you yet."
193
- }) : /* @__PURE__ */ y("div", {
194
- className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
195
- children: N.fromFollowing.map((e) => /* @__PURE__ */ b("button", {
196
- type: "button",
197
- onClick: () => E(`/looks/${e.id}`),
198
- className: "group flex flex-col overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left transition-colors hover:border-accent-foreground/20 hover:shadow-md",
199
- children: [/* @__PURE__ */ y(i, {
200
- icon: /* @__PURE__ */ y(g, { className: "h-6 w-6" }),
201
- seed: e.id,
202
- fileId: e.image?.id,
203
- alt: e.title,
204
- className: "aspect-[4/5] w-full rounded-none"
205
- }), /* @__PURE__ */ b("div", {
206
- className: "min-w-0 p-3",
207
- children: [/* @__PURE__ */ y("p", {
208
- className: "truncate text-sm font-medium text-text-primary",
209
- children: e.title
210
- }), /* @__PURE__ */ y("p", {
211
- className: "mt-0.5 text-xs text-text-secondary",
212
- children: l(e.occasion)
463
+ })] })
464
+ ]
465
+ });
466
+ })(),
467
+ R === "looks" && (() => {
468
+ let e = Q.data, n = e?.items ?? [], r = e?.pageInfo.hasMore ?? !1;
469
+ return /* @__PURE__ */ E("div", {
470
+ className: "space-y-4",
471
+ children: [/* @__PURE__ */ T("div", {
472
+ className: "flex flex-wrap items-center gap-2",
473
+ children: j.map((e) => /* @__PURE__ */ T("button", {
474
+ type: "button",
475
+ onClick: () => {
476
+ X(e.value), W(0);
477
+ },
478
+ className: t("rounded-full px-3 py-1.5 text-sm font-medium transition-colors", Y === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
479
+ children: e.label
480
+ }, e.value))
481
+ }), Q.isLoading ? /* @__PURE__ */ T(a, { label: "Searching looks…" }) : Q.isError ? /* @__PURE__ */ T(i, { onRetry: () => void Q.refetch() }) : n.length === 0 ? /* @__PURE__ */ T(h, {
482
+ illustration: "empty-data",
483
+ icon: /* @__PURE__ */ T(S, { className: "h-10 w-10" }),
484
+ title: "No looks found",
485
+ description: "Try a different query or occasion."
486
+ }) : /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("div", {
487
+ className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4",
488
+ children: n.map((e) => /* @__PURE__ */ E("div", {
489
+ className: "relative",
490
+ children: [/* @__PURE__ */ T(te, {
491
+ id: e.id,
492
+ title: e.title,
493
+ occasion: e.occasion,
494
+ imageFileId: e.image?.id,
495
+ likeCount: e.likeCount,
496
+ isLikedByMe: e.isLikedByMe,
497
+ isSavedByMe: e.isSavedByMe,
498
+ onOpen: () => N(`/looks/${e.id}`),
499
+ showActions: !0
500
+ }), e.isFeatured && /* @__PURE__ */ T("div", {
501
+ className: "pointer-events-none absolute left-2 top-2 z-10",
502
+ children: /* @__PURE__ */ E("span", {
503
+ className: "inline-flex items-center gap-1 rounded-full bg-status-warning-bg-subtle px-2 py-0.5 text-xs font-medium text-status-warning-text shadow-sm backdrop-blur",
504
+ children: [/* @__PURE__ */ T(S, { className: "h-3 w-3" }), " Featured"]
505
+ })
213
506
  })]
214
- })]
215
- }, e.id))
216
- })
217
- })
507
+ }, e.id))
508
+ }), (U > 0 || r) && /* @__PURE__ */ E("div", {
509
+ className: "mt-6 flex items-center justify-center gap-2",
510
+ children: [
511
+ /* @__PURE__ */ E("button", {
512
+ type: "button",
513
+ disabled: U === 0,
514
+ onClick: () => W((e) => Math.max(0, e - M)),
515
+ className: "inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40",
516
+ children: [/* @__PURE__ */ T(v, { className: "h-4 w-4" }), " Previous"]
517
+ }),
518
+ /* @__PURE__ */ E("span", {
519
+ className: "text-sm text-text-secondary",
520
+ children: ["Page ", U / M + 1]
521
+ }),
522
+ /* @__PURE__ */ E("button", {
523
+ type: "button",
524
+ disabled: !r,
525
+ onClick: () => W((e) => e + M),
526
+ className: "inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40",
527
+ children: ["Next ", /* @__PURE__ */ T(y, { className: "h-4 w-4" })]
528
+ })
529
+ ]
530
+ })] })]
531
+ });
532
+ })()
218
533
  ]
219
534
  });
220
535
  }
221
536
  //#endregion
222
- export { E as DiscoverPage };
537
+ export { N as DiscoverPage };
223
538
 
224
539
  //# sourceMappingURL=DiscoverPage.js.map