Something went wrong. Try again.
objective categorical abstract machine language personal data server
Something went wrong. Try again.
5.6 kB · 145 lines
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146[@@@ocaml.warning "-26-27-33"]open Melange_json.Primitivesopen Reactmodule Aria = ReactArialet button_class_inline = "group inline-flex flex-row items-center px-1.5 py-1 -mx-0.75 -my-1 \ rounded-lg focus-visible:outline-none hover:bg-mist-20/40 \ active:bg-mist-20/40"let button_class_default = "group w-64 flex flex-row items-center gap-x-1 px-2 py-1.5 -mx-2 rounded-lg \ focus-visible:outline-none hover:bg-mist-20/40 active:bg-mist-20/40"let value_class_inline = "text-mana-100 font-serif inline-flex items-center gap-x-1"let value_class_default = "text-mana-100 font-serif flex items-center gap-x-1"type actor = {did: string; handle: string; avatar_data_uri: string option [@default None]}[@@deriving json]let fallback handle avatar inline = let button_class = if inline then button_class_inline else button_class_default in let value_class = if inline then value_class_inline else value_class_default in <button className=button_class> <span className=value_class> ( match avatar with | Some uri -> <img className="w-5 h-5 mr-1 rounded-md" src=uri /> | None -> null ) <span className="truncate self-baseline select-none max-w-48"> (string handle) </span> <ChevronDownIcon className="w-3 h-3 mt-0.5 text-mana-100" strokeWidth="3" /> </span> </button>let[@react.component] make ~current_user ~logged_in_users ~add_account_url ?(name = "did") ?(inline = false) ?onChange () = let handleAccountSwitch = [%browser_only fun newDid -> if newDid <> current_user.did then ( let body = Fetch.BodyInit.make ( Webapi.Url.URLSearchParams.makeWithArray [|("did", newDid)|] |> Webapi.Url.URLSearchParams.toString ) in let _ = Fetch.fetchWithInit "/account/switch" (Fetch.RequestInit.make ~method_:Fetch.Post ~headers: (Fetch.HeadersInit.makeWithArray [|("Content-Type", "application/x-www-form-urlencoded")|] ) ~body () ) |> Js.Promise.then_ (fun response -> if Fetch.Response.ok response then ( ignore ([%mel.raw {| window.location.reload() |}] : unit) ; Js.Promise.resolve () ) else Js.Promise.resolve () ) |> Js.Promise.catch (fun _ -> Js.Promise.resolve ()) in () ; match onChange with Some f -> f newDid | None -> () ) else ()] in let button_class = if inline then button_class_inline else button_class_default in let value_class = if inline then value_class_inline else value_class_default in <ClientOnly fallback=(fallback current_user.handle current_user.avatar_data_uri inline)> [%browser_only fun () -> <Aria.Select name className="inline" defaultValue=current_user.did placeholder="select account" onChange=handleAccountSwitch> <Aria.Button className=button_class> <Aria.SelectValue className=value_class /> </Aria.Button> <Aria.Popover style=(ReactDOM.Style.make ~minWidth: "max(var(--spacing) * 32, calc(var(--trigger-width) + \ var(--spacing) * 3))" () ) className="focus-visible:outline-none"> <Aria.ListBox className="w-full flex flex-col gap-y-1 p-1.5 -ml-1.5 rounded-lg \ bg-mist-20 font-light"> ( List.map (fun (user : actor) -> <Aria.ListBoxItem className="flex flex-row items-center py-1.5 px-2 \ gap-x-1 font-serif text-mist-100 rounded-md \ focus-visible:outline-none \ data-hovered:text-mist-20 \ data-focused:text-mist-20 \ data-hovered:bg-mana-100 \ data-focused:bg-mana-100" key=user.did id=user.did> ( match user.avatar_data_uri with | Some src -> <img src className="w-5 h-5 mr-1 rounded-md" /> | None -> null ) <span className="truncate self-baseline select-none max-w-48"> (string user.handle) </span> <ChevronDownIcon className="w-3 h-3 mt-0.5 text-mana-100 hidden \ group-aria-[haspopup]:inline" strokeWidth="3" /> </Aria.ListBoxItem> ) logged_in_users |> Array.of_list |> array ) <Aria.ListBoxItem className="flex flex-row items-center p-1 pl-2 text-mana-100 \ font-normal underline rounded-md \ focus-visible:outline-none \ data-hovered:text-mist-20 data-focused:text-mist-20 \ data-hovered:bg-mana-100 data-focused:bg-mana-100" href=add_account_url> (string "add account") </Aria.ListBoxItem> </Aria.ListBox> </Aria.Popover> </Aria.Select>] </ClientOnly>