feat: Guide users to install PWA

package.json

@@ -18,4 +18,4 @@
   },
   "private": true,
   "packageManager": "[email protected]+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
-}
+}

packages/client/components/app/interface/settings/InstallInstructions.tsx

@@ -0,0 +1,140 @@
+import { Trans, useLingui } from "@lingui-solid/solid/macro";
+
+import { Button, Column, iconSize } from "@revolt/ui";
+import MdIosShare from "@material-design-icons/svg/outlined/ios_share.svg?component-solid";
+import MdRefresh from "@material-design-icons/svg/outlined/refresh.svg?component-solid";
+import { styled } from "styled-system/jsx";
+import { css } from "styled-system/css";
+import { useState } from "@revolt/state";
+import { createEffect, createMemo, createSignal, Show } from "solid-js";
+
+const Container = styled("div", {
+  base: {
+    minWidth: 0,
+
+    padding: "15px 0px",
+    color: "var(--md-sys-color-on-surface)",
+    fill: "var(--md-sys-color-on-surface)",
+  },
+});
+
+const SuperSectionHeading = styled("h1", {
+  base: {
+    fontSize: "22px",
+    paddingTop: "1.2em",
+    paddingBottom: "0.5em",
+  }
+});
+
+const SectionHeading = styled("h2", {
+  base: {
+    fontSize: "18px",
+    paddingTop: "1.2em",
+    paddingBottom: "0.5em",
+  }
+});
+
+const Steps = styled("ol", {
+  base: {
+    listStyleType: "decimal",
+    listStylePosition: "inside",
+  }
+});
+
+/**
+ * Installation Instructions Page
+ */
+export default function InstallInstructions() {
+  const state = useState();
+  const { t } = useLingui();
+
+  const [pwaPrompt,] = state.pwaPrompt;
+  const [pwaInstalled,] = state.pwaInstalled;
+
+  const [promptResult, setPromptResult] = createSignal<"accepted" | "dismissed">();
+  createEffect(() => {
+    pwaPrompt()?.userChoice?.then(choice => setPromptResult(choice.outcome));
+  });
+
+  return (
+    <Container>
+      <Show when={pwaInstalled()}>
+        <Trans>You've successfully installed Stoat!</Trans>
+      </Show>
+      <Show when={!pwaInstalled()}>
+        <p>
+          <Trans>Installing Stoat only takes a few taps. We'll guide you through it.</Trans>
+        </p>
+
+        <Show when={pwaPrompt()}>
+          <SuperSectionHeading>
+            <Trans>Easy Install</Trans>
+          </SuperSectionHeading>
+          <Show when={promptResult() === undefined}>
+            <Button
+              type="button"
+              onPress={() => pwaPrompt()!.prompt()}
+            >
+              <Trans>Install</Trans>
+            </Button>
+          </Show>
+          <Show when={promptResult() === "accepted"}>
+            <Trans>Installing...</Trans>
+          </Show>
+          <Show when={promptResult() === "dismissed"}>
+            <p>
+              <Trans>Looks like you declined the installation... You can refresh the page if you'd like to try again, or try the manual instructions below.</Trans>
+            </p>
+            <p>
+              <Button
+                type="button"
+                onPress={() => location.reload()}
+              >
+                <MdRefresh></MdRefresh>
+              </Button>
+            </p>
+          </Show>
+
+          <SuperSectionHeading>
+            <Trans>Manual Install</Trans>
+          </SuperSectionHeading>
+        </Show>
+        <SectionHeading>
+          <Trans>Android</Trans>
+        </SectionHeading>
+        <Steps>
+          <li>
+            <Trans>Open this page in Google Chrome</Trans>
+          </li>
+          <li>
+            <Trans>Click on the ⋮ button</Trans>
+          </li>
+          <li>
+            <Trans>Tap "Install app" or "Add to home screen"</Trans>
+          </li>
+          <li>
+            <Trans>Follow the prompts</Trans>
+          </li>
+        </Steps>
+
+        <SectionHeading>
+          <Trans>iOS / iPadOS</Trans>
+        </SectionHeading>
+        <Steps>
+          <li>
+            <Trans>Open this page in Safari</Trans>
+          </li>
+          <li>
+            <Trans>Click on the <MdIosShare {...iconSize(18)} style={{ display: 'inline-block' }} /> button</Trans>
+          </li>
+          <li>
+            <Trans>Tap "Add to Home Screen"</Trans>
+          </li>
+          <li>
+            <Trans>Follow the prompts</Trans>
+          </li>
+        </Steps>
+      </Show>
+    </Container>
+  );
+}

packages/client/components/app/interface/settings/UserSettings.tsx

@@ -22,6 +22,7 @@ import MdScience from "@material-design-icons/svg/outlined/science.svg?component
 import MdSmartToy from "@material-design-icons/svg/outlined/smart_toy.svg?component-solid";
 import MdVerifiedUser from "@material-design-icons/svg/outlined/verified_user.svg?component-solid";
 import MdWorkspacePremium from "@material-design-icons/svg/outlined/workspace_premium.svg?component-solid";
+import MdInstallMobile from "@material-design-icons/svg/outlined/install_mobile.svg?component-solid";
 
 import pkg from "../../../../../../package.json";
 
@@ -38,6 +39,8 @@ import { MyBots, ViewBot } from "./user/bots";
 import { EditProfile } from "./user/profile";
 import { EditSubscription } from "./user/subscriptions";
 import { VoiceSettings } from "./user/voice/VoiceSettings";
+import InstallInstructions from "./InstallInstructions";
+import { useState } from "@revolt/state";
 
 const Config: SettingsConfiguration<{ server: Server }> = {
   /**
@@ -93,6 +96,8 @@ const Config: SettingsConfiguration<{ server: Server }> = {
         return <Native />;
       case "voice":
         return <VoiceSettings />;
+      case "install":
+        return <InstallInstructions />;
       default:
         return null;
     }
@@ -107,6 +112,8 @@ const Config: SettingsConfiguration<{ server: Server }> = {
   list() {
     const { pop } = useModals();
     const { logout } = useClientLifecycle();
+    const state = useState();
+    const [pwaInstalled,] = state.pwaInstalled;
 
     return {
       context: null!,
@@ -169,6 +176,12 @@ const Config: SettingsConfiguration<{ server: Server }> = {
         {
           title: "Stoat",
           entries: [
+            {
+              id: "install",
+              icon: <MdInstallMobile {...iconSize(20)} />,
+              title: <Trans>Install</Trans>,
+              hidden: (!state.isMobile && import.meta.env.PROD) || state.isPWA || pwaInstalled(),
+            },
             {
               id: "bots",
               icon: <MdSmartToy {...iconSize(20)} />,

packages/client/components/client/index.tsx

@@ -26,29 +26,33 @@ const clientContext = createContext(null! as ClientController);
  * Mount the modal controller
  */
 export function ClientContext(props: { state: State; children: JSXElement }) {
-  const { openModal } = useModals();
+  const { openModal, isOpen } = useModals();
 
   // eslint-disable-next-line solid/reactivity
   const controller = new ClientController(props.state);
   onCleanup(() => controller.dispose());
 
   createEffect(() => {
-    const lastIndex = props.state.settings.getValue("changelog:last_index");
-    if (controller.lifecycle.state() === LifecycleState.Ready) return;
-
-    if (
-      lastIndex !== CHANGELOG_MODAL_CONST.index &&
-      new Date() < CHANGELOG_MODAL_CONST.until
-    ) {
-      openModal({
-        type: "changelog",
-        initial: CHANGELOG_MODAL_CONST.index,
-      });
-
-      props.state.settings.setValue(
-        "changelog:last_index",
-        CHANGELOG_MODAL_CONST.index,
-      );
+    const cycleState = controller.lifecycle.state();
+
+    //Show Changelog modal
+    if (cycleState !== LifecycleState.Ready) {
+      const lastIndex = props.state.settings.getValue("changelog:last_index");
+
+      if (
+        lastIndex !== CHANGELOG_MODAL_CONST.index &&
+        new Date() < CHANGELOG_MODAL_CONST.until
+      ) {
+        openModal({
+          type: "changelog",
+          initial: CHANGELOG_MODAL_CONST.index,
+        });
+
+        props.state.settings.setValue(
+          "changelog:last_index",
+          CHANGELOG_MODAL_CONST.index,
+        );
+      }
     }
   });