P379:[{"_394":99,"_395":103,"_396":397},"app1","app2","diffPatch","diff --git a/app/components/forms.tsx b/app/components/forms.tsx\nindex abaabf7..87cb4db 100644\n--- a/app/components/forms.tsx\n+++ b/app/components/forms.tsx\n@@ -1,6 +1,6 @@\n import { useInputControl } from '@conform-to/react'\n import { REGEXP_ONLY_DIGITS_AND_CHARS, type OTPInputProps } from 'input-otp'\n-import React, { useId } from 'react'\n+import React, { useCallback, useEffect, useId, useState } from 'react'\n import { Checkbox, type CheckboxProps } from './ui/checkbox.tsx'\n import {\n \tInputOTP,\n@@ -11,6 +11,13 @@ import {\n import { Input } from './ui/input.tsx'\n import { Label } from './ui/label.tsx'\n import { Textarea } from './ui/textarea.tsx'\n+import { cn } from '#app/utils/misc.tsx'\n+import {\n+\tCommand,\n+\tCommandItem,\n+\tCommandList,\n+\tCommandListProps,\n+} from './ui/command.tsx'\n \n export type ListOfErrors = Array | null | undefined\n \n@@ -200,3 +207,112 @@ export function CheckboxField({\n \t\t\n \t)\n }\n+\n+export function ComboboxField({\n+\tlabelProps,\n+\tinputProps,\n+\tlistboxProps = {},\n+\terrors,\n+\toptions,\n+\tclassName,\n+}: {\n+\tlabelProps: React.LabelHTMLAttributes\n+\tinputProps: React.TextareaHTMLAttributes & { key: any }\n+\tlistboxProps?: CommandListProps\n+\terrors?: ListOfErrors\n+\toptions: Array<{ id: string | number; label: string; value: string }>\n+\tclassName?: string\n+}) {\n+\tconst fallbackId = useId()\n+\tconst id = inputProps.id ?? fallbackId\n+\tconst control = useInputControl({\n+\t\tkey: inputProps.key,\n+\t\tname: inputProps.name!,\n+\t\tformId: inputProps.form!,\n+\t})\n+\tconst errorId = errors?.length ? `${id}-error` : undefined\n+\n+\tconst [isDirty, setDirty] = useState(false)\n+\tconst [isListOpen, setListOpen] = useState(false)\n+\tconst [query, setQuery] = useState('')\n+\n+\tconst [filtered, setFiltered] = useState<\n+\t\tArray<{ id: string | number; label: string; value: string }>\n+\t>([])\n+\n+\tconst filterOptions = useCallback(\n+\t\t(query: string) => {\n+\t\t\treturn query && query.length > 2\n+\t\t\t\t? options.filter((option) => {\n+\t\t\t\t\t\treturn (\n+\t\t\t\t\t\t\toption.value.toLowerCase().includes(query.toLowerCase()) ||\n+\t\t\t\t\t\t\toption.label.toLowerCase().includes(query.toLowerCase())\n+\t\t\t\t\t\t)\n+\t\t\t\t\t})\n+\t\t\t\t: []\n+\t\t},\n+\t\t[options],\n+\t)\n+\n+\tuseEffect(() => {\n+\t\tconst nextFiltered = filterOptions(query)\n+\t\tsetListOpen(isDirty ? nextFiltered.length > 0 : false)\n+\t\tsetFiltered(nextFiltered)\n+\t}, [query, options, isDirty, filterOptions])\n+\n+\treturn (\n+\t\t

\n+\t\t\t\n+\t\t\t {\n+\t\t\t\t\tcontrol.blur()\n+\n+\t\t\t\t\tsetTimeout(() => {\n+\t\t\t\t\t\tsetListOpen(false)\n+\t\t\t\t\t}, 75)\n+\t\t\t\t}}\n+\t\t\t\tonFocus={() => {\n+\t\t\t\t\tcontrol.focus()\n+\t\t\t\t\tsetListOpen(filtered.length > 0)\n+\t\t\t\t}}\n+\t\t\t\tonChange={(event) => {\n+\t\t\t\t\tsetDirty(true)\n+\t\t\t\t\tsetQuery(event.target.value)\n+\t\t\t\t}}\n+\t\t\t/>\n+\n+\t\t\t{isListOpen && filtered.length > 0 && (\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t{filtered.map((option) => (\n+\t\t\t\t\t\t\t\t {\n+\t\t\t\t\t\t\t\t\t\tcontrol.change(option.value)\n+\t\t\t\t\t\t\t\t\t\tsetQuery(option.value)\n+\t\t\t\t\t\t\t\t\t\tsetDirty(false)\n+\t\t\t\t\t\t\t\t\t}}\n+\t\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t\t{option.label}\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t)}\n+\n+\t\t\t

\n+\t\t\t\t{errorId ? : null}\n+\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/components/ui/combobox.tsx b/app/components/ui/combobox.tsx\nnew file mode 100644\nindex 0000000..8941fa2\n--- /dev/null\n+++ b/app/components/ui/combobox.tsx\n@@ -0,0 +1,50 @@\n+import {\n+\tCommand,\n+\tCommandEmpty,\n+\tCommandGroup,\n+\tCommandInput,\n+\tCommandItem,\n+\tCommandList,\n+} from '#app/components/ui/command'\n+\n+export function Combobox({\n+\tid,\n+\tname,\n+\tplaceholder,\n+\tclassName,\n+\titems,\n+\tvalue,\n+\tonChange,\n+}: Omit, 'value'> & {\n+\titems: Array<{ label: string; value: string }>\n+\tvalue: string\n+\tonChange: (nextValue: string) => void\n+}) {\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\t\n+\t\t\t\tNo framework found.\n+\t\t\t\t\n+\t\t\t\t\t{items.map((item) => (\n+\t\t\t\t\t\t {\n+\t\t\t\t\t\t\t\tonChange?.(nextValue === value ? '' : nextValue)\n+\t\t\t\t\t\t\t}}\n+\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t{item.label}\n+\t\t\t\t\t\t\n+\t\t\t\t\t))}\n+\t\t\t\t\n+\t\t\t\n+\t\t\n+\t)\n+}\ndiff --git a/app/components/ui/command.tsx b/app/components/ui/command.tsx\nnew file mode 100644\nindex 0000000..f444850\n--- /dev/null\n+++ b/app/components/ui/command.tsx\n@@ -0,0 +1,183 @@\n+import * as React from 'react'\n+import { Command as CommandPrimitive } from 'cmdk'\n+\n+import {\n+\tDialog,\n+\tDialogContent,\n+\tDialogDescription,\n+\tDialogHeader,\n+\tDialogTitle,\n+} from '#app/components/ui/dialog'\n+import { cn } from '#app/utils/misc'\n+import { Icon } from './icon'\n+\n+function Command({\n+\tclassName,\n+\t...props\n+}: React.ComponentProps) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+function CommandDialog({\n+\ttitle = 'Command Palette',\n+\tdescription = 'Search for a command to run...',\n+\tchildren,\n+\tclassName,\n+\tshowCloseButton = true,\n+\t...props\n+}: React.ComponentProps & {\n+\ttitle?: string\n+\tdescription?: string\n+\tclassName?: string\n+\tshowCloseButton?: boolean\n+}) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+function CommandInput({\n+\tclassName,\n+\t...props\n+}: React.ComponentProps) {\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\t\n+\t\t\n+\t)\n+}\n+\n+export type CommandListProps = React.ComponentProps<\n+\ttypeof CommandPrimitive.List\n+>\n+\n+function CommandList({ className, ...props }: CommandListProps) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+function CommandEmpty({\n+\t...props\n+}: React.ComponentProps) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+function CommandGroup({\n+\tclassName,\n+\t...props\n+}: React.ComponentProps) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+function CommandSeparator({\n+\tclassName,\n+\t...props\n+}: React.ComponentProps) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+function CommandItem({\n+\tclassName,\n+\t...props\n+}: React.ComponentProps) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+function CommandShortcut({\n+\tclassName,\n+\t...props\n+}: React.ComponentProps<'span'>) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+export {\n+\tCommand,\n+\tCommandDialog,\n+\tCommandInput,\n+\tCommandList,\n+\tCommandEmpty,\n+\tCommandGroup,\n+\tCommandItem,\n+\tCommandShortcut,\n+\tCommandSeparator,\n+}\ndiff --git a/app/components/ui/dialog.tsx b/app/components/ui/dialog.tsx\nnew file mode 100644\nindex 0000000..1229878\n--- /dev/null\n+++ b/app/components/ui/dialog.tsx\n@@ -0,0 +1,143 @@\n+'use client'\n+\n+import * as DialogPrimitive from '@radix-ui/react-dialog'\n+import * as React from 'react'\n+\n+import { cn } from '#app/utils/misc'\n+import { Icon } from './icon'\n+\n+function Dialog({\n+\t...props\n+}: React.ComponentProps) {\n+\treturn \n+}\n+\n+function DialogTrigger({\n+\t...props\n+}: React.ComponentProps) {\n+\treturn \n+}\n+\n+function DialogPortal({\n+\t...props\n+}: React.ComponentProps) {\n+\treturn \n+}\n+\n+function DialogClose({\n+\t...props\n+}: React.ComponentProps) {\n+\treturn \n+}\n+\n+function DialogOverlay({\n+\tclassName,\n+\t...props\n+}: React.ComponentProps) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+function DialogContent({\n+\tclassName,\n+\tchildren,\n+\tshowCloseButton = true,\n+\t...props\n+}: React.ComponentProps & {\n+\tshowCloseButton?: boolean\n+}) {\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\t\n+\t\t\t\t{children}\n+\t\t\t\t{showCloseButton && (\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\tClose\n+\t\t\t\t\t\n+\t\t\t\t)}\n+\t\t\t\n+\t\t\n+\t)\n+}\n+\n+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+function DialogTitle({\n+\tclassName,\n+\t...props\n+}: React.ComponentProps) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+function DialogDescription({\n+\tclassName,\n+\t...props\n+}: React.ComponentProps) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+export {\n+\tDialog,\n+\tDialogClose,\n+\tDialogContent,\n+\tDialogDescription,\n+\tDialogFooter,\n+\tDialogHeader,\n+\tDialogOverlay,\n+\tDialogPortal,\n+\tDialogTitle,\n+\tDialogTrigger,\n+}\ndiff --git a/app/components/ui/popover.tsx b/app/components/ui/popover.tsx\nnew file mode 100644\nindex 0000000..602069e\n--- /dev/null\n+++ b/app/components/ui/popover.tsx\n@@ -0,0 +1,46 @@\n+import * as PopoverPrimitive from '@radix-ui/react-popover'\n+import * as React from 'react'\n+\n+import { cn } from '#app/utils/misc'\n+\n+function Popover({\n+\t...props\n+}: React.ComponentProps) {\n+\treturn \n+}\n+\n+function PopoverTrigger({\n+\t...props\n+}: React.ComponentProps) {\n+\treturn \n+}\n+\n+function PopoverContent({\n+\tclassName,\n+\talign = 'center',\n+\tsideOffset = 4,\n+\t...props\n+}: React.ComponentProps) {\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\n+\t)\n+}\n+\n+function PopoverAnchor({\n+\t...props\n+}: React.ComponentProps) {\n+\treturn \n+}\n+\n+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\ndiff --git a/app/root.tsx b/app/root.tsx\nindex 0f0d1cb..c846ff1 100644\n--- a/app/root.tsx\n+++ b/app/root.tsx\n@@ -10,6 +10,7 @@ import {\n \tuseLoaderData,\n \tuseMatches,\n } from 'react-router'\n+import { QueryClientProvider, QueryClient } from '@tanstack/react-query'\n import { HoneypotProvider } from 'remix-utils/honeypot/react'\n import { type Route } from './+types/root.ts'\n import appleTouchIconAssetUrl from './assets/favicons/apple-touch-icon.png'\n@@ -247,11 +248,15 @@ function Logo() {\n \t)\n }\n \n+const queryClient = new QueryClient()\n+\n function AppWithProviders() {\n \tconst data = useLoaderData()\n \treturn (\n \t\t\n+\t\t\t\n \t\t\t\t\n+\t\t\t\n \t\t\n \t)\n }\ndiff --git a/app/routes/settings+/profile.index.tsx b/app/routes/settings+/profile.index.tsx\nindex d68a7a7..33d2a29 100644\n--- a/app/routes/settings+/profile.index.tsx\n+++ b/app/routes/settings+/profile.index.tsx\n@@ -2,7 +2,9 @@ import { getFormProps, getInputProps, useForm } from '@conform-to/react'\n import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n import { invariantResponse } from '@epic-web/invariant'\n import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import { useQueryClient } from '@tanstack/react-query'\n import { Img } from 'openimg/react'\n+import { useState } from 'react'\n import { data, Link, useFetcher } from 'react-router'\n import { z } from 'zod'\n import { ErrorList, Field } from '#app/components/forms.tsx'\n@@ -225,6 +227,7 @@ function UpdateProfile({\n \tloaderData: Route.ComponentProps['loaderData']\n }) {\n \tconst fetcher = useFetcher()\n+\tconst queryClient = useQueryClient()\n \n \tconst [form, fields] = useForm({\n \t\tid: 'edit-profile',\n@@ -239,6 +242,19 @@ function UpdateProfile({\n \t\t},\n \t})\n \n+\tconst [usernameErrors, setUsernameErrors] = useState([])\n+\tconst validateUsername = async () => {\n+\t\tconst errors = await queryClient.fetchQuery({\n+\t\t\tqueryKey: ['validate-username'],\n+\t\t\tasync queryFn() {\n+\t\t\t\t// const response = await fetch('/foo')\n+\t\t\t\treturn ['Hello!']\n+\t\t\t},\n+\t\t})\n+\n+\t\tsetUsernameErrors(errors)\n+\t}\n+\n \treturn (\n \t\t\n \t\t\t

\n@@ -248,8 +264,11 @@ function UpdateProfile({\n \t\t\t\t\t\thtmlFor: fields.username.id,\n \t\t\t\t\t\tchildren: 'Username',\n \t\t\t\t\t}}\n-\t\t\t\t\tinputProps={getInputProps(fields.username, { type: 'text' })}\n-\t\t\t\t\terrors={fields.username.errors}\n+\t\t\t\t\tinputProps={{\n+\t\t\t\t\t\t...getInputProps(fields.username, { type: 'text' }),\n+\t\t\t\t\t\tonBlur: validateUsername,\n+\t\t\t\t\t}}\n+\t\t\t\t\terrors={fields.username.errors || usernameErrors}\n \t\t\t\t/>\n \t\t\t\t i.id) } },\n \t\t\t\tupdateMany: imageUpdates.map((updates) => ({\ndiff --git a/app/routes/users+/$username_+/__note-editor.tsx b/app/routes/users+/$username_+/__note-editor.tsx\nindex 7df8c91..cfb580c 100644\n--- a/app/routes/users+/$username_+/__note-editor.tsx\n+++ b/app/routes/users+/$username_+/__note-editor.tsx\n@@ -8,13 +8,19 @@ import {\n \ttype FieldMetadata,\n } from '@conform-to/react'\n import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n+import { useQuery } from '@tanstack/react-query'\n import { Img } from 'openimg/react'\n import { useState } from 'react'\n import { Form } from 'react-router'\n import { z } from 'zod'\n import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'\n import { floatingToolbarClassName } from '#app/components/floating-toolbar.tsx'\n-import { ErrorList, Field, TextareaField } from '#app/components/forms.tsx'\n+import {\n+\tComboboxField,\n+\tErrorList,\n+\tField,\n+\tTextareaField,\n+} from '#app/components/forms.tsx'\n import { Button } from '#app/components/ui/button.tsx'\n import { Icon } from '#app/components/ui/icon.tsx'\n import { Label } from '#app/components/ui/label.tsx'\n@@ -48,8 +54,15 @@ export const NoteEditorSchema = z.object({\n \ttitle: z.string().min(titleMinLength).max(titleMaxLength),\n \tcontent: z.string().min(contentMinLength).max(contentMaxLength),\n \timages: z.array(ImageFieldsetSchema).max(5).optional(),\n+\tlocation: z.string().optional(),\n })\n \n+export type NominatimSearchResponse = Array<{\n+\tplace_id: number\n+\taddresstype: 'country' | 'city'\n+\tdisplay_name: string\n+}>\n+\n export function NoteEditor({\n \tnote,\n \tactionData,\n@@ -74,6 +87,29 @@ export function NoteEditor({\n \t})\n \tconst imageList = fields.images.getFieldList()\n \n+\tconst { data: locationSuggestions } = useQuery<\n+\t\tNominatimSearchResponse | undefined\n+\t>({\n+\t\tqueryKey: ['location-suggestions', fields.location.value],\n+\t\tqueryFn: async ({ signal }) => {\n+\t\t\tawait new Promise((resolve) => setTimeout(resolve, 300))\n+\n+\t\t\tif (!signal.aborted && fields.location.value) {\n+\t\t\t\tconst url = new URL('https://nominatim.openstreetmap.org/search')\n+\t\t\t\turl.searchParams.set('q', fields.location.value)\n+\t\t\t\turl.searchParams.set('format', 'jsonv2')\n+\t\t\t\tconst response = await fetch(url)\n+\t\t\t\tconst locations = (await response.json()) as NominatimSearchResponse\n+\t\t\t\treturn locations.filter(\n+\t\t\t\t\t(location) =>\n+\t\t\t\t\t\tlocation['addresstype'] === 'city' ||\n+\t\t\t\t\t\tlocation['addresstype'] === 'country',\n+\t\t\t\t)\n+\t\t\t}\n+\t\t},\n+\t\tenabled: !!fields.location.value,\n+\t})\n+\n \treturn (\n \t\t

\n \t\t\t\n@@ -106,6 +142,21 @@ export function NoteEditor({\n \t\t\t\t\t\t\t}}\n \t\t\t\t\t\t\terrors={fields.content.errors}\n \t\t\t\t\t\t/>\n+\t\t\t\t\t\t ({\n+\t\t\t\t\t\t\t\t\tid: location.place_id,\n+\t\t\t\t\t\t\t\t\tlabel: location.display_name,\n+\t\t\t\t\t\t\t\t\tvalue: location.display_name,\n+\t\t\t\t\t\t\t\t})) || []\n+\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t\tlabelProps={{ children: 'Location' }}\n+\t\t\t\t\t\t\tinputProps={{\n+\t\t\t\t\t\t\t\t...getInputProps(fields.location, { type: 'text' }),\n+\t\t\t\t\t\t\t\tplaceholder: 'Select a location...',\n+\t\t\t\t\t\t\t}}\n+\t\t\t\t\t\t\terrors={fields.location.errors}\n+\t\t\t\t\t\t/>\n \t\t\t\t\t\t

\n \t\t\t\t\t\t\tImages\n \t\t\t\t\t\t\t

\n \t\t\t\t{loaderData.note.title}\n \t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\t{loaderData.note.location}\n+\t\t\t\t\t

\n+\t\t\t\t

\n \t\t\t\t

}\n+ */\n+async function resolveMainClient(event) {\n+ const client = await self.clients.get(event.clientId)\n+\n+ if (activeClientIds.has(event.clientId)) {\n+ return client\n+ }\n+\n+ if (client?.frameType === 'top-level') {\n+ return client\n+ }\n+\n+ const allClients = await self.clients.matchAll({\n+ type: 'window',\n+ })\n+\n+ return allClients\n+ .filter((client) => {\n+ // Get only those clients that are currently visible.\n+ return client.visibilityState === 'visible'\n+ })\n+ .find((client) => {\n+ // Find the client ID that's recorded in the\n+ // set of clients that have registered the worker.\n+ return activeClientIds.has(client.id)\n+ })\n+}\n+\n+/**\n+ * @param {FetchEvent} event\n+ * @param {Client | undefined} client\n+ * @param {string} requestId\n+ * @returns {Promise}\n+ */\n+async function getResponse(event, client, requestId) {\n+ // Clone the request because it might've been already used\n+ // (i.e. its body has been read and sent to the client).\n+ const requestClone = event.request.clone()\n+\n+ function passthrough() {\n+ // Cast the request headers to a new Headers instance\n+ // so the headers can be manipulated with.\n+ const headers = new Headers(requestClone.headers)\n+\n+ // Remove the \"accept\" header value that marked this request as passthrough.\n+ // This prevents request alteration and also keeps it compliant with the\n+ // user-defined CORS policies.\n+ const acceptHeader = headers.get('accept')\n+ if (acceptHeader) {\n+ const values = acceptHeader.split(',').map((value) => value.trim())\n+ const filteredValues = values.filter(\n+ (value) => value !== 'msw/passthrough',\n+ )\n+\n+ if (filteredValues.length > 0) {\n+ headers.set('accept', filteredValues.join(', '))\n+ } else {\n+ headers.delete('accept')\n+ }\n+ }\n+\n+ return fetch(requestClone, { headers })\n+ }\n+\n+ // Bypass mocking when the client is not active.\n+ if (!client) {\n+ return passthrough()\n+ }\n+\n+ // Bypass initial page load requests (i.e. static assets).\n+ // The absence of the immediate/parent client in the map of the active clients\n+ // means that MSW hasn't dispatched the \"MOCK_ACTIVATE\" event yet\n+ // and is not ready to handle requests.\n+ if (!activeClientIds.has(client.id)) {\n+ return passthrough()\n+ }\n+\n+ // Notify the client that a request has been intercepted.\n+ const serializedRequest = await serializeRequest(event.request)\n+ const clientMessage = await sendToClient(\n+ client,\n+ {\n+ type: 'REQUEST',\n+ payload: {\n+ id: requestId,\n+ ...serializedRequest,\n+ },\n+ },\n+ [serializedRequest.body],\n+ )\n+\n+ switch (clientMessage.type) {\n+ case 'MOCK_RESPONSE': {\n+ return respondWithMock(clientMessage.data)\n+ }\n+\n+ case 'PASSTHROUGH': {\n+ return passthrough()\n+ }\n+ }\n+\n+ return passthrough()\n+}\n+\n+/**\n+ * @param {Client} client\n+ * @param {any} message\n+ * @param {Array} transferrables\n+ * @returns {Promise}\n+ */\n+function sendToClient(client, message, transferrables = []) {\n+ return new Promise((resolve, reject) => {\n+ const channel = new MessageChannel()\n+\n+ channel.port1.onmessage = (event) => {\n+ if (event.data && event.data.error) {\n+ return reject(event.data.error)\n+ }\n+\n+ resolve(event.data)\n+ }\n+\n+ client.postMessage(message, [\n+ channel.port2,\n+ ...transferrables.filter(Boolean),\n+ ])\n+ })\n+}\n+\n+/**\n+ * @param {Response} response\n+ * @returns {Response}\n+ */\n+function respondWithMock(response) {\n+ // Setting response status code to 0 is a no-op.\n+ // However, when responding with a \"Response.error()\", the produced Response\n+ // instance will have status code set to 0. Since it's not possible to create\n+ // a Response instance with status code 0, handle that use-case separately.\n+ if (response.status === 0) {\n+ return Response.error()\n+ }\n+\n+ const mockedResponse = new Response(response.body, response)\n+\n+ Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {\n+ value: true,\n+ enumerable: true,\n+ })\n+\n+ return mockedResponse\n+}\n+\n+/**\n+ * @param {Request} request\n+ */\n+async function serializeRequest(request) {\n+ return {\n+ url: request.url,\n+ mode: request.mode,\n+ method: request.method,\n+ headers: Object.fromEntries(request.headers.entries()),\n+ cache: request.cache,\n+ credentials: request.credentials,\n+ destination: request.destination,\n+ integrity: request.integrity,\n+ redirect: request.redirect,\n+ referrer: request.referrer,\n+ referrerPolicy: request.referrerPolicy,\n+ body: await request.arrayBuffer(),\n+ keepalive: request.keepalive,\n+ }\n+}\ndiff --git a/tests/e2e/notes-create.test.ts b/tests/e2e/notes-create.test.ts\nnew file mode 100644\nindex 0000000..4a05aa9\n--- /dev/null\n+++ b/tests/e2e/notes-create.test.ts\n@@ -0,0 +1,60 @@\n+// 🐨 import `http` and `HttpResponse` from \"msw\"\n+// 💰 import { this, that } from 'somewhere'\n+\n+import { type GoogleFindPlaceApiResponse } from '#app/routes/users+/$username_+/__note-editor.tsx'\n+import { test, expect } from '#tests/test-extend.ts'\n+\n+test('displays location suggestions when creating a new note', async ({\n+\tauthenticate,\n+\tnavigate,\n+\t// 🐨 Access the \"network\" fixture from the test context.\n+\tpage,\n+}) => {\n+\t// 🐨 Call `network.use()` to describe the network for this test.\n+\t// As the argument, provide the request handler matching the Google Places API call\n+\t// (\"https://maps.googleapis.com/maps/api/place/findplacefromtext/json\").\n+\t// 💰 network.use(http.get(path, resolver))\n+\t// 💰 http.get(path, resolver)\n+\t//\n+\t// 🐨 In the resolver function, return a mocked JSON response.\n+\t// Follow the inferred type definitions to produce a valid response from the\n+\t// Google Places API. List at least two places.\n+\t// 💰 return HttpResponse.json(payload)\n+\t// 💰 { candidates: [...] }\n+\t// 🦉 Use `crypto.randomUUID()` to generate `place_id` values.\n+\n+\tconst { user } = await authenticate({ as: 'user' })\n+\tawait navigate('/users/:username/notes/new', { username: user.username })\n+\n+\t// 🐨 Locate an element by label \"Title\" and type \"My note\" into it.\n+\t// 💰 await page.getByLabel(label).fill(text)\n+\n+\t// 🐨 Locate an element by label \"Content\" and type the note's content into it.\n+\t// (You can come up with your own content!)\n+\n+\t// 🐨 Declare a variable called \"locationInput\" and assign it a locator\n+\t// for the element by label \"Location\".\n+\t// 💰 const locationInput = locator\n+\n+\t// 🐨 Type the first three letter of any place from the Google Place API mocked response\n+\t// into the `locationInput`.\n+\t// For example, if you listed \"San Francisco\", type \"San\".\n+\t// 💰 await input.fill(value)\n+\n+\t// 🐨 Write an assertion that the elements by role \"Option\" must have a text content\n+\t// equal to the place suggestions you expect to see for the entered location.\n+\t// 💰 await expect(Locator).toHaveText([firstSuggestion, secondSuggestion])\n+\t// 🦉 If multiple elements match a locator, Playwright will assert on all of them.\n+\n+\t// 🐨 Click on the first suggestion from the list.\n+\t// 🦉 Note that the suggestions' accessible role is \"option\".\n+\t// 💰 await locator.click()\n+\n+\t// 🐨 Assert that the full location name has been filled into the `locationInput`.\n+\t// 💰 expect(locator).toHaveValue(value)\n+\n+\t// 🐨 Click on the \"Submit\" button to create a new note.\n+\n+\t// 🐨 Finally, assert that a heading with the new note's title is visible on the page.\n+\t// 💰 expect(locator)toBeVisible()\n+})\ndiff --git a/tests/e2e/profile-edit.test.ts b/tests/e2e/profile-edit.test.ts\ndeleted file mode 100644\nindex 422823e..0000000\n--- a/tests/e2e/profile-edit.test.ts\n+++ /dev/null\n@@ -1,17 +0,0 @@\n-import { test, expect } from '#tests/test-extend.ts'\n-\n-test('saves changes to the name of the user', async ({\n-\tnavigate,\n-\tauthenticate,\n-\tpage,\n-}) => {\n-\tawait authenticate({ as: 'user' })\n-\tawait navigate('/settings/profile')\n-\n-\tawait page.getByRole('textbox', { name: 'Username' }).click()\n-\tawait page.getByRole('textbox', { name: 'Username' }).press('ControlOrMeta+a')\n-\tawait page.getByRole('textbox', { name: 'Username' }).fill('new_username')\n-\tawait page.getByRole('button', { name: 'Save changes' }).click()\n-\n-\tawait expect(page.getByRole('textbox', { name: 'Username' })).toBeVisible()\n-})\ndiff --git a/tests/test-extend.ts b/tests/test-extend.ts\nindex 8b8eed1..95707be 100644\n--- a/tests/test-extend.ts\n+++ b/tests/test-extend.ts\n@@ -1,3 +1,6 @@\n+// 🐨 Import `createNetworkFixture` and `NetworkFixture` from \"@msw/playwright\".\n+// 💰 import { this, that } from 'somewhere'\n+\n import { test as testBase, expect } from '@playwright/test'\n import {\n \tdefinePersona,\n@@ -14,6 +17,9 @@ interface Fixtures {\n \t\t...args: Parameters>\n \t) => Promise\n \tauthenticate: AuthenticateFunction<[typeof user]>\n+\n+\t// 🐨 Add a new fixture called \"network\".\n+\t// Assign the `NetworkFixture` type you've imported earlier as its type.\n }\n \n const user = definePersona('user', {\n@@ -52,6 +58,11 @@ export const test = testBase.extend({\n \t\t})\n \t},\n \tauthenticate: combinePersonas(user),\n+\n+\t// 🐨 Add the \"network\" key to the fixtures.\n+\t// As the value for this key, assign it the result of calling the\n+\t// `createNetworkFixture` function.\n+\t// 💰 network: fn({})\n })\n \n export { expect }"]

app/components/forms.tsx-15+131App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/combobox.tsx-0+50App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/command.tsx-0+183App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/dialog.tsx-0+143App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/popover.tsx-0+46App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/root.tsx-17+22App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/settings+/profile.index.tsx-27+46App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/users+/$username_+/__note-editor.server.tsx-17+20App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/users+/$username_+/__note-editor.tsx-33+84App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/users+/$username_+/notes.$noteId.tsx-12+24App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

other/svg-icons/globe.svg-0+1App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

package.json-31+36App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/schema.prisma-6+7App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

public/mockServiceWorker.js-0+344App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tests/e2e/notes-create.test.ts-0+60App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tests/e2e/profile-edit.test.ts-17+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tests/test-extend.ts-15+26App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/forms.tsx-15+131App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/combobox.tsx-0+50App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/command.tsx-0+183App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/dialog.tsx-0+143App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/popover.tsx-0+46App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/root.tsx-17+22App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/settings+/profile.index.tsx-27+46App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/users+/$username_+/__note-editor.server.tsx-17+20App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/users+/$username_+/__note-editor.tsx-33+84App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/users+/$username_+/notes.$noteId.tsx-12+24App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

other/svg-icons/globe.svg-0+1App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

package.json-31+36App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

prisma/schema.prisma-6+7App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

public/mockServiceWorker.js-0+344App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tests/e2e/notes-create.test.ts-0+60App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tests/e2e/profile-edit.test.ts-17+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tests/test-extend.ts-15+26App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2