[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","dominik1","name","lista-zakupow","path","frontend/components/App.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/dominik1/lista-zakupow/code/frontend/components/App.tsx","extension","id","4944c05b-fead-4621-a1c1-950e85ff2c28","App.tsx","fileId","01a09c76-d794-7474-b4e3-4e86ae6ae9c3","parentId","01a09c76-d794-7474-b4e3-554c0e384659","branchId","2b7f7d5b-efff-44e5-9962-373315ac0749","branchVersion",27,"latest",true,"createdAt",["D",1789333870539],"version",3,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { type Person, PEOPLE } from \"../../shared/people.ts\";\nimport { type Item, keyOf } from \"../../shared/types.ts\";\nimport { loadMe, saveMe } from \"../people.ts\";\nimport { enablePush, pushPermission, syncPush } from \"../push.ts\";\nimport { load, save } from \"../storage.ts\";\nimport { useSyncedList } from \"../sync.ts\";\nimport { AddBar } from \"./AddBar.tsx\";\nimport { ItemRow } from \"./ItemRow.tsx\";\nimport { NotifyCard, NotifySettings } from \"./Notifications.tsx\";\nimport { PinScreen } from \"./PinScreen.tsx\";\nimport { ShoppingStatus } from \"./ShoppingStatus.tsx\";\nimport { Sticker } from \"./Sticker.tsx\";\nimport { Toast } from \"./Toast.tsx\";\nimport { WhoPicker } from \"./WhoPicker.tsx\";\n\n// how long a freshly ticked item stays in place so the marker stroke is visible\nconst SETTLE_MS = 650;\n// deletions wait this long before they are sent, so they can be undone\nconst UNDO_MS = 5000;\nconst NOTIFY_DISMISSED_KEY = \"zakupy:notify-dismissed\";\n\nfunction plural(n: number, one: string, few: string, many: string) {\n if (n === 1) return one;\n const mod10 = n % 10;\n const mod100 = n % 100;\n return mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14) ? few : many;\n}\n\nconst countLabel = (n: number) =>\n n === 0 ? \"Nic do kupienia\" : `${n} ${plural(n, \"produkt\", \"produkty\", \"produktów\")} do kupienia`;\n\nconst pendingLabel = (n: number) => `${n} ${plural(n, \"zmiana czeka\", \"zmiany czekają\", \"zmian czeka\")} na wysłanie`;\n\nexport function App() {\n const list = useSyncedList();\n const { state } = list;\n const [me, setMe] = useState(loadMe);\n const [picking, setPicking] = useState(false);\n const [settling, setSettling] = useState>(new Set());\n const [toast, setToast] = useState<{ id: string; message: string } | null>(null);\n const [permission, setPermission] = useState(pushPermission);\n const [notifyDismissed, setNotifyDismissed] = useState(() => load(NOTIFY_DISMISSED_KEY, false));\n\n // keep this phone's push subscription assigned to the right person\n useEffect(() => {\n if (me && state.vapidPublicKey) syncPush(me, state.vapidPublicKey).catch(() => {});\n }, [me, state.vapidPublicKey]);\n\n const suggestions = useMemo(() => {\n const onList = new Set(state.items.filter((i) => i.bought_at == null).map((i) => keyOf(i.name)));\n return state.history.filter((h) => !onList.has(keyOf(h)));\n }, [state.items, state.history]);\n\n if (list.locked) return ;\n\n const toBuy = state.items.filter((i) => i.bought_at == null || settling.has(i.uid));\n const bought = state.items\n .filter((i) => i.bought_at != null && !settling.has(i.uid))\n .sort((a, b) => (b.bought_at ?? 0) - (a.bought_at ?? 0));\n const remaining = state.items.filter((i) => i.bought_at == null).length;\n const other = PEOPLE.find((p) => p !== me) ?? PEOPLE[0];\n\n function add(name: string) {\n if (!me) return;\n list.enqueue({ type: \"add\", uid: crypto.randomUUID(), name: name.trim(), by: me, at: Date.now() });\n }\n\n function toggle(item: Item) {\n if (!me) return;\n const nowBought = item.bought_at == null;\n if (nowBought) {\n setSettling((s) => new Set(s).add(item.uid));\n setTimeout(() => {\n setSettling((s) => {\n const next = new Set(s);\n next.delete(item.uid);\n return next;\n });\n }, SETTLE_MS);\n }\n list.enqueue({ type: \"set_bought\", uid: item.uid, bought: nowBought, by: me, at: Date.now() });\n }\n\n function remove(item: Item) {\n const id = list.enqueue({ type: \"delete\", uids: [item.uid], at: Date.now() }, UNDO_MS);\n setToast({ id, message: `Usunięto: ${item.name}` });\n }\n\n function clearBought() {\n const uids = bought.map((i) => i.uid);\n const id = list.enqueue({ type: \"delete\", uids, at: Date.now() }, UNDO_MS);\n setToast({ id, message: `Usunięto kupione (${uids.length})` });\n }\n\n function undo() {\n if (toast) list.cancel(toast.id);\n setToast(null);\n }\n\n function toggleShopping() {\n if (!me) return;\n list.enqueue({ type: \"shopping\", by: me, on: state.shopping[me] == null, at: Date.now() });\n }\n\n function pick(p: Person) {\n saveMe(p);\n setMe(p);\n setPicking(false);\n }\n\n async function enableNotifications() {\n if (!me || !state.vapidPublicKey) return;\n try {\n setPermission(await enablePush(me, state.vapidPublicKey));\n } catch {\n setPermission(pushPermission());\n }\n }\n\n function dismissNotify() {\n save(NOTIFY_DISMISSED_KEY, true);\n setNotifyDismissed(true);\n }\n\n const showNotifyCard = me && permission === \"default\" && state.vapidPublicKey && !notifyDismissed;\n\n return (\n

Zakupy

{list.loaded ? countLabel(remaining) : \" \"}

\n {me && (\n \n )}\n

\n\n {me && }\n\n {list.offline && (\n

\n {!list.loaded\n ? \"Brak połączenia. Lista wczyta się, gdy wróci sieć.\"\n : list.pending > 0\n ? `Brak połączenia · ${pendingLabel(list.pending)}. Wyślę je, gdy wróci sieć.`\n : \"Brak połączenia. Pokazuję ostatnio zapisaną listę.\"}\n

\n )}\n\n {showNotifyCard && }\n\n {!list.loaded && !list.offline &&

Wczytuję listę…

}\n\n {list.loaded && toBuy.length === 0 && (\n

\n {bought.length === 0\n ? (\n <>\n Lista jest pusta\n Dopisz na dole, czego brakuje w domu.\n \n )\n : (\n <>\n Wszystko kupione\n Usuń kupione produkty albo dopisz kolejne.\n \n )}\n

\n )}\n\n {toBuy.length > 0 && (\n

toggle(item)}\n onRemove={() => remove(item)}\n />\n ))}\n

\n )}\n\n {bought.length > 0 && (\n

W koszyku · {bought.length}

\n \n

toggle(item)} onRemove={() => remove(item)} />\n ))}\n

\n )}\n\n {toast && (\n setToast(null)}\n />\n )}\n\n \n\n {(!me || picking) && (\n setPicking(false) : undefined}>\n {me && }\n \n )}\n

\n );\n}\n","deleted",false,"label",[47,48,24],"frontend","components","f99be336-a8c3-4900-9595-c5bea7024466",["D",1789331428995],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Wspólna lista zakupów Agi i Dominika (mobile)","imageUrl","userId","5dd5cdfa-b36a-42e1-a911-81ba86e3b64c","pinnedFileId","01a09c76-d795-72a1-be82-f37a11bb083f","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a09aab-d118-725d-b44f-c12d328bfdc6","tursoName","f99be336a8c349009595c5bea7024466","tursoHostname","f99be336a8c349009595c5bea7024466-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789504321592],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_109":105},"org",{"_9":10,"_102":103,"_104":105,"_59":60,"_106":107,"_108":44},"branch",{"_37":32,"_11":93,"_22":30,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":12,"_101":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Dominik","avatar","","tier","free","canRestrictVals","profileImageUrl","ctx",{"_86":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":34,"_153":-5,"_154":-7,"_155":-7,"_156":67,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":93,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]