New Onboarding Flow

app/UI/app.tsx

@@ -341,7 +341,7 @@ export class AppComponent extends Component<AppProps, {
     async componentDidMount() {
         await this.updateAdminState();
         for await (const update of this.props.eventBus.onChange()) {
-            if (update.type == "SelectRelay") {
+            if (update.type == "SelectSpace") {
                 this.updateAdminState();
             }
         }

app/UI/app_update.tsx

@@ -40,12 +40,12 @@ import { EventDetail, EventDetailItem } from "./event-detail.tsx";
 
 import { DirectMessagePanelUpdate, SendReaction } from "./message-panel.tsx";
 import { ChatMessage, parseContent } from "./message.ts";
-import { InstallPrompt, NavigationModel, NavigationUpdate, SelectRelay } from "./nav.tsx";
+import { InstallPrompt, NavigationModel, NavigationUpdate, SelectSpace } from "./nav.tsx";
 import { notify } from "./notification.ts";
 import { SpaceSetting } from "./relay-detail.tsx";
 import { Search } from "./search.tsx";
 import { SearchUpdate, SelectConversation } from "./search_model.ts";
-import { RelayConfigChange, ViewRecommendedRelaysList, ViewRelayDetail } from "./setting.tsx";
+import { RelayConfigChange, ViewRecommendedRelaysList, ViewSpaceSettings } from "./setting.tsx";
 import { SignInEvent } from "./sign-in.ts";
 import { TagSelected } from "./contact-tags.tsx";
 import { BlockUser, UnblockUser, UserDetail } from "./user-detail.tsx";
@@ -78,12 +78,12 @@ export type UI_Interaction_Event =
     | SignInEvent
     | RelayConfigChange
     | StartInvite
-    | ViewRelayDetail
+    | ViewSpaceSettings
     | ViewRecommendedRelaysList
     | TagSelected
     | BlockUser
     | UnblockUser
-    | SelectRelay
+    | SelectSpace
     | HidePopOver
     | SyncEvent
     | FilterContent
@@ -180,9 +180,9 @@ const handle_update_event = async (chan: PutChannel<true>, args: {
         }
 
         // All events below are only valid after signning in
-        if (event.type == "SelectRelay") {
-            rememberCurrentRelay(event.relay.url);
-            model.currentRelay = event.relay.url;
+        if (event.type == "SelectSpace") {
+            rememberCurrentRelay(event.spaceURL);
+            model.currentRelay = event.spaceURL;
         } //
         // Searchx
         //
@@ -204,7 +204,7 @@ const handle_update_event = async (chan: PutChannel<true>, args: {
         //
         // Setting
         //
-        else if (event.type == "ViewRelayDetail") {
+        else if (event.type == "ViewSpaceSettings") {
             const relay = pool.getRelay(event.url);
             if (relay) {
                 app.popOverInputChan.put({

app/UI/components/toast.tsx

@@ -5,7 +5,7 @@ import { LinkColor, PrimaryBackgroundColor, PrimaryTextColor } from "../style/co
 import { Channel, sleep } from "https://raw.githubusercontent.com/BlowaterNostr/csp/master/csp.ts";
 import { setState } from "../_helper.ts";
 import { emitFunc } from "../../event-bus.ts";
-import { ViewRelayDetail } from "../setting.tsx";
+import { ViewSpaceSettings } from "../setting.tsx";
 
 export type ToastChannel = Channel<() => ComponentChildren>;
 
@@ -47,23 +47,24 @@ export class Toast extends Component<Props, State> {
     }
 }
 
-export const SendingEventRejection = (emit: emitFunc<ViewRelayDetail>, url: string, reason: string) => () => (
-    <div
-        class="hover:cursor-pointer"
-        onClick={() => {
-            emit({
-                type: "ViewRelayDetail",
-                url: url,
-            });
-        }}
-    >
-        sending message is rejected
-        <div>reason: {reason}</div>
-        <div>please contact the admin of relay</div>
+export const SendingEventRejection =
+    (emit: emitFunc<ViewSpaceSettings>, url: string, reason: string) => () => (
         <div
-            class={`text-[${LinkColor}] hover:underline`}
+            class="hover:cursor-pointer"
+            onClick={() => {
+                emit({
+                    type: "ViewSpaceSettings",
+                    url: url,
+                });
+            }}
         >
-            {url}
+            sending message is rejected
+            <div>reason: {reason}</div>
+            <div>please contact the admin of relay</div>
+            <div
+                class={`text-[${LinkColor}] hover:underline`}
+            >
+                {url}
+            </div>
         </div>
-    </div>
-);
+    );

app/UI/nav.tsx

@@ -19,10 +19,11 @@ import { DownloadIcon } from "./icons/download-icon.tsx";
 import { Profile_Nostr_Event } from "../nostr.ts";
 import { ConnectionPool } from "../../libs/nostr.ts/relay-pool.ts";
 import { SingleRelayConnection } from "../../libs/nostr.ts/relay-single.ts";
-import { RelaySwitchList } from "./relay-switch-list.tsx";
+import { SpaceDropDownPanel } from "./space-drop-down-panel.tsx";
 import { SocialIcon } from "./icons/social-icon.tsx";
 import { SearchIcon } from "./icons/search-icon.tsx";
 import { StartSearch } from "./search_model.ts";
+import { ViewSpaceSettings } from "./setting.tsx";
 
 export type InstallPrompt = {
     event: Event | undefined;
@@ -33,9 +34,9 @@ export type NavigationUpdate = {
     id: NavTabID;
 };
 
-export type SelectRelay = {
-    type: "SelectRelay";
-    relay: SingleRelayConnection;
+export type SelectSpace = {
+    type: "SelectSpace";
+    spaceURL: string;
 };
 
 export type NavigationModel = {
@@ -45,7 +46,7 @@ export type NavigationModel = {
 type Props = {
     publicKey: PublicKey;
     profile: Profile_Nostr_Event | undefined;
-    emit: emitFunc<NavigationUpdate | SelectRelay | StartSearch>;
+    emit: emitFunc<NavigationUpdate | SelectSpace | StartSearch | ViewSpaceSettings>;
     installPrompt: InstallPrompt;
     pool: ConnectionPool;
     activeNav: NavTabID;
@@ -140,9 +141,9 @@ export class NavBar extends Component<Props, State> {
         return (
             <div class={this.styles.container}>
                 {
-                    <RelaySwitchList
+                    <SpaceDropDownPanel
                         emit={props.emit}
-                        pool={props.pool}
+                        spaceList={new Set(Array.from(props.pool.getRelays()).map((r) => r.url))}
                         currentRelay={props.currentRelay}
                     />
                 }

app/UI/relay-detail.tsx

@@ -202,6 +202,7 @@ export class RelayInformationComponent extends Component<Props, State> {
                 const pubkey = PublicKey.FromString(info.pubkey);
                 if (pubkey instanceof Error) {
                     // todo make a UI
+                    console.log(info);
                     console.error(pubkey);
                 } else {
                     nodes.push(