Show "WikiTree ID" menu when in WikiTree mode

src/app.tsx

@@ -595,7 +595,7 @@ export class App extends React.Component<RouteComponentProps, {}> {
                 onDownloadPng: this.onDownloadPng,
                 onDownloadSvg: this.onDownloadSvg,
               }}
-              showWikiTreeLogin={this.state.source === DataSourceEnum.WIKITREE}
+              showWikiTreeMenus={this.state.source === DataSourceEnum.WIKITREE}
             />
           )}
         />

src/index.css

@@ -131,3 +131,9 @@ div.ui.card.intro {
   color: #4183c4;
   cursor: pointer;
 }
+
+.ui.menu .item>img:not(.ui).menu-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 5px
+}

src/top_bar.tsx

@@ -67,8 +67,8 @@ interface Props {
   /** Whether to show the "All relatives" chart type in the menu. */
   allowAllRelativesChart: boolean;
   eventHandlers: EventHandlers;
-  /** Whether to show the 'Log in to WikiTree' button. */
+  /** Whether to show additional WikiTree menus. */
-  showWikiTreeLogin: boolean;
+  showWikiTreeMenus: boolean;
 }
 
 function loadFileAsText(file: File): Promise<string> {
@@ -381,6 +381,7 @@ export class TopBar extends React.Component<
       inputRef: HTMLInputElement;
     }).inputRef.value = id;
     this.handleWikiTreeIdChange(id);
+    this.wikiTreeIdInputRef.current!.focus();
   }
 
   private wikiTreeIdModal() {
@@ -403,7 +404,7 @@ export class TopBar extends React.Component<
           />
         </Header>
         <Modal.Content>
-          <Form onSubmit={() => this.handleLoad()}>
+          <Form onSubmit={() => this.handleSelectWikiTreeId()}>
             <p>
               <FormattedMessage
                 id="select_wikitree_id.comment"
@@ -643,9 +644,50 @@ export class TopBar extends React.Component<
   }
 
   private fileMenus(screenSize: ScreenSize) {
+    const loadWikiTreeItem = (
+      <>
+        <img
+          src={WIKITREE_LOGO_URL}
+          alt="WikiTree logo"
+          className="menu-icon"
+          />
+        <FormattedMessage
+          id="menu.select_wikitree_id"
+          defaultMessage="Select WikiTree ID"
+        />
+      </>
+    );
+
+    // In standalone WikiTree mode, show only the "Select WikiTree ID" menu.
+    if (!this.props.standalone && this.props.showWikiTreeMenus) {
+      switch (screenSize) {
+        case ScreenSize.LARGE:
+          return (
+            <>
+              <Menu.Item onClick={() => this.openWikiTreeIdDialog()}>
+                {loadWikiTreeItem}
+              </Menu.Item>
+              {this.wikiTreeIdModal()}
+            </>
+          );
+        case ScreenSize.SMALL:
+          return (
+            <>
+              <Dropdown.Item onClick={() => this.openWikiTreeIdDialog()}>
+                {loadWikiTreeItem}
+              </Dropdown.Item>
+              <Dropdown.Divider />
+              {this.wikiTreeIdModal()}
+            </>
+          );
+      }
+    }
+
+    // Don't show "open" menus in non-standalone mode.
     if (!this.props.standalone) {
       return null;
     }
+
     const openFileItem = (
       <>
         <Icon name="folder open" />
@@ -661,19 +703,6 @@ export class TopBar extends React.Component<
         />
       </>
     );
-    const loadWikiTreeItem = (
-      <>
-        <img
-          src={WIKITREE_LOGO_URL}
-          alt="WikiTree logo"
-          style={{width: '24px', height: '24px'}}
-        />
-        <FormattedMessage
-          id="menu.select_wikitree_id"
-          defaultMessage="Select WikiTree ID"
-        />
-      </>
-    );
     const commonElements = (
       <>
         {this.loadFromUrlModal()}
@@ -754,7 +783,7 @@ export class TopBar extends React.Component<
   }
 
   private wikiTreeLoginMenu(screenSize: ScreenSize) {
-    if (!this.props.showWikiTreeLogin) {
+    if (!this.props.showWikiTreeMenus) {
       return null;
     }
     switch (this.state.wikiTreeLoginState) {
@@ -781,7 +810,7 @@ export class TopBar extends React.Component<
                 <img
                   src={WIKITREE_LOGO_URL}
                   alt="WikiTree logo"
-                  style={{width: '24px', height: '24px'}}
+                  className="menu-icon"
                 />
                 <FormattedMessage
                   id="menu.wikitree_login"
@@ -798,8 +827,8 @@ export class TopBar extends React.Component<
                   <img
                     src={WIKITREE_LOGO_URL}
                     alt="WikiTree logo"
-                    style={{width: '24px', height: '24px'}}
+                    className="menu-icon"
-                  />
+                    />
                   <FormattedMessage
                     id="menu.wikitree_login"
                     defaultMessage="Log in to WikiTree"
@@ -832,7 +861,7 @@ export class TopBar extends React.Component<
                 <img
                   src={WIKITREE_LOGO_URL}
                   alt="WikiTree logo"
-                  style={{width: '24px', height: '24px'}}
+                  className="menu-icon"
                 />
                 <FormattedMessage
                   id="menu.wikitree_logged_in"
@@ -848,8 +877,8 @@ export class TopBar extends React.Component<
                   <img
                     src={WIKITREE_LOGO_URL}
                     alt="WikiTree logo"
-                    style={{width: '24px', height: '24px'}}
+                    className="menu-icon"
-                  />
+                    />
                   <FormattedMessage
                     id="menu.wikitree_logged_in"
                     defaultMessage="Logged in"

src/translations/pl.json

@@ -2,7 +2,7 @@
   "menu.open": "Otwórz",
   "menu.open_file": "Otwórz plik",
   "menu.load_from_url": "Otwórz URL",
-  "menu.select_wikitree_id": "WikiTree ID",
+  "menu.select_wikitree_id": "Wybierz WikiTree ID",
   "menu.print": "Drukuj",
   "menu.download": "Pobierz",
   "menu.pdf_file": "Plik PDF",