Factor the logged out warning to a separate component.

source/tours/interface/homepage.tsx

@@ -5,30 +5,11 @@ import {
   removeAllDatasetCounters,
   renderInContainer,
 } from "../utilities.js";
-
+import {LoggedOutWarning} from "../shared/logged-out-warning.js";
-const userIsLoggedIn =
-  document.querySelector(".logged-in-user-username") !== null;
 
 const step01 = renderInContainer(
   <>
-    {userIsLoggedIn ? (
+    <LoggedOutWarning />
-      ""
-    ) : (
-      <p class="tish-warning">
-        It looks like you aren't logged in to Tildes. Tildes Shepherd assumes
-        that you are logged in as a lot of the Tildes interface isn't shown to
-        logged out users.
-        <br />
-        To still let anyone without an account benefit from the extension you
-        may continue, however, know that certain parts of the tour <b>
-          will
-        </b>{" "}
-        break and look weird.
-        <br />
-        It's highly recommended that you exit the tour, log in and start it
-        again.
-      </p>
-    )}
 
     <h1>The Homepage</h1>
 

source/tours/shared/exports.ts

@@ -0,0 +1 @@
+export * from "./logged-out-warning.js";

source/tours/shared/logged-out-warning.tsx

@@ -0,0 +1,24 @@
+import {type JSX} from "preact";
+
+export function LoggedOutWarning(): JSX.Element {
+  const userIsLoggedIn =
+    document.querySelector(".logged-in-user-username") !== null;
+
+  if (userIsLoggedIn) {
+    return <></>;
+  }
+
+  return (
+    <p class="tish-warning">
+      It looks like you aren't logged in to Tildes. Tildes Shepherd assumes that
+      you are logged in as a lot of the Tildes interface isn't shown to logged
+      out users.
+      <br />
+      To still let anyone without an account benefit from the extension you may
+      continue, however, know that certain parts of the tour <b>will</b> break
+      and look weird.
+      <br />
+      It's highly recommended that you exit the tour, log in and start it again.
+    </p>
+  );
+}