[{"_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","alexmcroberts","name","cratewalk-loggedin","path","frontend/shared/SessionBar.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/alexmcroberts/cratewalk-loggedin/code/frontend/shared/SessionBar.tsx","extension","id","9cdc2d61-691f-4820-86e2-4fbbeb42f6b6","SessionBar.tsx","fileId","5d5e327c-a890-11f1-b8d0-1607ee4eb77e","parentId","5cea8fc0-a890-11f1-8a9f-1607ee4eb77e","branchId","548f9140-a1c9-476c-84a6-0db44da905ac","branchVersion",38,"latest",true,"createdAt",["D",1789084522434],"version",3,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { AppConfig, FeedChoice, Session } from \"./types.ts\";\nimport { logout } from \"./api.ts\";\nimport { loadLoggedinRenderer } from \"./loggedin.ts\";\n\ntype Props = {\n config: AppConfig;\n session: Session;\n feeds: FeedChoice[];\n feedId: string;\n onFeed: (id: string) => void;\n};\n\ntype RememberPhase = \"ask\" | \"saving\" | \"needs-access\" | \"done\" | \"skipped\" | \"unavailable\";\n\nexport function SessionBar({ config, session, feeds, feedId, onFeed }: Props) {\n const iframeRef = useRef(null);\n const optedInRef = useRef(false);\n const needsAccessRef = useRef(false);\n const [phase, setPhase] = useState(\"ask\");\n const [showEmbed, setShowEmbed] = useState(false);\n const crate = config.slug === \"cratewalk\";\n const sisterName = crate ? \"Lightbox\" : \"Cratewalk\";\n\n useEffect(() => {\n const iframe = iframeRef.current;\n const did = session.did;\n if (!iframe || !did) return;\n\n let cancelled = false;\n optedInRef.current = false;\n needsAccessRef.current = false;\n\n (async () => {\n try {\n const Loggedin = await loadLoggedinRenderer(config.loggedinOrigin);\n Loggedin.mountEmbed(iframe, `${config.loggedinOrigin}/embed`, {\n onReady: () => {\n if (cancelled || !optedInRef.current) return;\n Loggedin.heartbeat(iframe, did, config.loggedinOrigin);\n setPhase(\"saving\");\n },\n onNeedsAccess: () => {\n if (cancelled) return;\n needsAccessRef.current = true;\n if (!optedInRef.current) return;\n setShowEmbed(true);\n setPhase(\"needs-access\");\n },\n onPopup: () => {\n if (cancelled || !optedInRef.current) return;\n Loggedin.heartbeat(iframe, did, config.loggedinOrigin);\n setPhase(\"saving\");\n },\n onUnavailable: () => {\n if (cancelled || !optedInRef.current) return;\n setPhase((current) => (current === \"skipped\" || current === \"done\" ? current : \"unavailable\"));\n },\n onSaved: () => {\n if (cancelled) return;\n setShowEmbed(false);\n setPhase(\"done\");\n },\n onAccounts: (accounts) => {\n if (cancelled) return;\n if (accounts.some((account) => account.did === did)) {\n setShowEmbed(false);\n setPhase(\"done\");\n }\n },\n });\n } catch {\n if (!cancelled) setPhase(\"unavailable\");\n }\n })();\n\n return () => {\n cancelled = true;\n iframe.removeAttribute(\"src\");\n };\n }, [config.loggedinOrigin, session.did]);\n\n function remember() {\n const iframe = iframeRef.current;\n if (!iframe || !session.did || !window.Loggedin) {\n setPhase(\"unavailable\");\n return;\n }\n optedInRef.current = true;\n if (needsAccessRef.current) {\n setShowEmbed(true);\n setPhase(\"needs-access\");\n return;\n }\n setPhase(\"saving\");\n window.Loggedin.heartbeat(iframe, session.did, config.loggedinOrigin);\n }\n\n async function onLogout() {\n const iframe = iframeRef.current;\n if (iframe && session.did && window.Loggedin) {\n window.Loggedin.logout(iframe, session.did, config.loggedinOrigin);\n }\n await logout();\n location.href = \"/\";\n }\n\n const showPrompt = phase === \"ask\" || phase === \"saving\" || phase === \"needs-access\" || phase === \"unavailable\";\n\n return (\n \n

\n \n {crate ? \"Demo B · Cratewalk\" : \"Demo A · Lightbox\"}\n

\n {config.appName}\n

\n \n Feed\n onFeed(event.target.value)}\n className={\n crate\n ? \"ml-2 border-4 border-black bg-[#fff6df] px-2 py-1 font-mono text-xs\"\n : \"ml-2 rounded-md border border-[#4a4336] bg-[#0e0c0a] px-2 py-1 text-sm text-[#f6efe2]\"\n }\n >\n {feeds.map((feed) => (\n \n ))}\n \n \n

\n {session.handle}\n

\n \n Log out\n \n {config.sisterAppUrl ? (\n \n {crate ? \"Open Lightbox\" : \"Open Cratewalk\"}\n \n ) : null}\n\n {showPrompt ? (\n \n

\n {phase === \"needs-access\"\n ? \"Allow access to remember this account\"\n : phase === \"saving\"\n ? \"Remembering this account…\"\n : phase === \"unavailable\"\n ? \"This browser couldn’t remember the account automatically\"\n : \"Remember this account across the Atmosphere?\"}\n

\n {phase === \"needs-access\"\n ? \"Continue below so other apps on this device can offer to sign you in.\"\n : phase === \"saving\"\n ? \"This only stays on this device, and you can forget it anytime by logging out.\"\n : phase === \"unavailable\"\n ? \"You can try again, or skip for now.\"\n : `Other apps on this device — like ${sisterName} — can offer to sign you in with ${session.handle}.`}\n

\n {phase === \"ask\" || phase === \"unavailable\" ? (\n

\n \n Remember Me\n \n {\n setShowEmbed(false);\n setPhase(\"skipped\");\n }}\n className={\n crate\n ? \"border-4 border-black bg-[#fff6df] px-3 py-1.5 font-mono text-[11px] uppercase text-[#1b1208]\"\n : \"rounded-full border border-[#4a4336] px-3.5 py-1.5 text-xs text-[#b8ad96]\"\n }\n >\n Not Now\n \n

\n ) : null}\n \n ) : null}\n\n \n \n );\n}\n","deleted",false,"label",[47,48,24],"frontend","shared","6e941c33-a65c-4d6d-9817-70d284ac3de5",["D",1788547090141],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","userId","4a195d61-960e-47fc-a2de-babac7864ff9","pinnedFileId","5d1d09f0-a890-11f1-a0db-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","4281254f-bfbc-421d-89b2-3fe0572f0e97","tursoName","6e941c33a65c4d6d981770d284ac3de5","tursoHostname","6e941c33a65c4d6d981770d284ac3de5-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789512647429],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_109":105},"org",{"_9":10,"_103":-5,"_104":105,"_59":60,"_106":107,"_108":44},"branch",{"_37":93,"_11":94,"_22":30,"_95":49,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":12,"_102":10},"isOwned",39,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJObXhUQ1k1VHlSUENxb1FtUlRYZUVXbWRNOSIsImluaXRpYWxzIjoiQU0ifQ","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":94,"_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"]