feat: Multi-user account switching

Dockerfile

@@ -35,13 +35,9 @@ RUN pnpm --filter client exec lingui compile --typescript
 
 # Build the client with placeholder env vars for runtime injection 
 # these are replaced by inject.js at container run startup
+ENV VITE_HOST=__VITE_HOST__
 ENV VITE_API_URL=__VITE_API_URL__
-ENV VITE_WS_URL=__VITE_WS_URL__
-ENV VITE_MEDIA_URL=__VITE_MEDIA_URL__
-ENV VITE_PROXY_URL=__VITE_PROXY_URL__
 ENV VITE_HCAPTCHA_SITEKEY=__VITE_HCAPTCHA_SITEKEY__
-ENV VITE_CFG_ENABLE_VIDEO=__VITE_CFG_ENABLE_VIDEO__
-ENV VITE_GIFBOX_URL=__VITE_GIFBOX_URL__
 ENV VITE_RNNOISE_WORKLET_CDN_URL=__VITE_RNNOISE_WORKLET_CDN_URL__
 
 ARG BASE_PATH=/
@@ -67,12 +63,7 @@ EXPOSE 5000
 
 # Runtime env vars (overridden by Helm chart / docker run)
 ENV VITE_API_URL=""
-ENV VITE_WS_URL=""
-ENV VITE_MEDIA_URL=""
-ENV VITE_PROXY_URL=""
 ENV VITE_HCAPTCHA_SITEKEY=""
-ENV VITE_CFG_ENABLE_VIDEO=""
-ENV VITE_GIFBOX_URL=""
 ENV VITE_RNNOISE_WORKLET_CDN_URL=""
 
 CMD ["npm", "start"]

README.md

@@ -63,10 +63,6 @@ If you want the client to connect to the official hosted backend instead, open t
 ```env
 # connect to local Stoat instance
 #VITE_API_URL=http://localhost:14702
-#VITE_WS_URL=ws://localhost:14703
-#VITE_MEDIA_URL=http://localhost:14704
-#VITE_PROXY_URL=http://localhost:14705
-
 ```
 
 When these variables are not set, the client automatically falls back to the official backend. (See https://github.com/stoatchat/for-web/blob/main/packages/client/components/common/lib/env.ts)

docker/inject.js

@@ -14,14 +14,11 @@ const OUT_DIR = "dist_injected";
 // At build time, Vite replaces import.meta.env.VITE_X with the literal string value.
 // We build with placeholder values like "__VITE_API_URL__" so they appear in the output.
 const REPLACEMENTS = {
+  __VITE_HOST__: process.env.VITE_HOST || "",
   __VITE_API_URL__: process.env.VITE_API_URL || "",
-  __VITE_WS_URL__: process.env.VITE_WS_URL || "",
-  __VITE_MEDIA_URL__: process.env.VITE_MEDIA_URL || "",
-  __VITE_PROXY_URL__: process.env.VITE_PROXY_URL || "",
   __VITE_HCAPTCHA_SITEKEY__: process.env.VITE_HCAPTCHA_SITEKEY || "",
-  __VITE_CFG_ENABLE_VIDEO__: process.env.VITE_CFG_ENABLE_VIDEO || "",
-  __VITE_GIFBOX_URL__: process.env.VITE_GIFBOX_URL || "",
-  __VITE_RNNOISE_WORKLET_CDN_URL__: process.env.VITE_RNNOISE_WORKLET_CDN_URL || "",
+  __VITE_RNNOISE_WORKLET_CDN_URL__:
+    process.env.VITE_RNNOISE_WORKLET_CDN_URL || "",
 };
 
 console.log("Preparing injected build...");

packages/client/.env.example

@@ -1,16 +1,10 @@
 # connect to local Stoat instance
+VITE_HOST=localhost:4173
 VITE_API_URL=http://localhost:14702
-VITE_WS_URL=ws://localhost:14703
-VITE_MEDIA_URL=http://localhost:14704
-VITE_PROXY_URL=http://localhost:14705
-VITE_GIFBOX_URL=http://localhost:14706
 
 # specify hCaptcha sitekey
 VITE_HCAPTCHA_SITEKEY=
 
 # specify Sentry DSN
 VITE_SENTRY_DSN=
-VITE_SENTRY_TUNNEL=
-
-# configs
-VITE_CFG_ENABLE_VIDEO=
+VITE_SENTRY_TUNNEL=

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

@@ -147,7 +147,10 @@ export function Settings(props: SettingsProps & SettingsConfiguration<never>) {
                       easing: [0.17, 0.67, 0.58, 0.98],
                     }}
                   >
-                    {props.render({ page }, props.context)}
+                    {props.render(
+                      { page, onClose: props.onClose },
+                      props.context,
+                    )}
                   </Motion.div>
                 </Rerun>
               </Presence>

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

@@ -5,7 +5,7 @@ import { Server } from "stoat.js";
 import { css } from "styled-system/css";
 
 import { useClient, useClientLifecycle } from "@revolt/client";
-import { CONFIGURATION } from "@revolt/common";
+import { useInstance } from "@revolt/instance";
 import { useUser } from "@revolt/markdown/users";
 import { useModals } from "@revolt/modal";
 import { fetchLatestChangelog } from "@revolt/modal/modals/Changelog";
@@ -77,7 +77,7 @@ const Config: SettingsConfiguration<{ server: Server }> = {
 
     switch (id) {
       case "account":
-        return <MyAccount />;
+        return <MyAccount onClose={props.onClose} />;
       case "appearance":
         return <AppearanceMenu />;
       case "advanced":
@@ -114,6 +114,7 @@ const Config: SettingsConfiguration<{ server: Server }> = {
   list(_, onClose) {
     const { pop, openModal } = useModals();
     const { logout } = useClientLifecycle();
+    const { limits } = useInstance();
 
     return {
       context: null!,
@@ -213,7 +214,7 @@ const Config: SettingsConfiguration<{ server: Server }> = {
             {
               id: "voice",
               icon: <MdMic {...iconSize(20)} />,
-              title: CONFIGURATION.ENABLE_VIDEO ? (
+              title: limits().video ? (
                 <Trans>Voice & Video</Trans>
               ) : (
                 <Trans>Voice</Trans>

packages/client/components/app/interface/settings/channel/Overview.tsx

@@ -5,7 +5,7 @@ import { Trans, useLingui } from "@lingui-solid/solid/macro";
 import type { API } from "stoat.js";
 
 import { useClient } from "@revolt/client";
-import { CONFIGURATION } from "@revolt/common";
+import { useInstance } from "@revolt/instance";
 import { useModals } from "@revolt/modal";
 import {
   Button,
@@ -26,6 +26,7 @@ export default function ChannelOverview(props: ChannelSettingsProps) {
   const { t } = useLingui();
   const client = useClient();
   const { openModal } = useModals();
+  const instance = useInstance();
 
   /* eslint-disable solid/reactivity */
   // we want to take the initial value only
@@ -77,16 +78,13 @@ export default function ChannelOverview(props: ChannelSettingsProps) {
         body.append("file", editGroup.controls.icon.value[0]);
 
         const [key, value] = client().authenticationHeader;
-        const data: { id: string } = await fetch(
-          `${CONFIGURATION.DEFAULT_MEDIA_URL}/icons`,
-          {
-            method: "POST",
-            body,
-            headers: {
-              [key]: value,
-            },
+        const data: { id: string } = await fetch(`${instance.mediaUrl}/icons`, {
+          method: "POST",
+          body,
+          headers: {
+            [key]: value,
           },
-        ).then((res) => res.json());
+        }).then((res) => res.json());
 
         changes.icon = data.id;
       }

packages/client/components/app/interface/settings/channel/webhooks/ViewWebhook.tsx

@@ -6,7 +6,7 @@ import { useMutation } from "@tanstack/solid-query";
 import { API, ChannelWebhook } from "stoat.js";
 
 import { useClient } from "@revolt/client";
-import { CONFIGURATION } from "@revolt/common";
+import { useInstance } from "@revolt/instance";
 import { useModals } from "@revolt/modal";
 import {
   CategoryButton,
@@ -29,6 +29,7 @@ export function ViewWebhook(props: { webhook: ChannelWebhook }) {
   const client = useClient();
   const { showError } = useModals();
   const { navigate } = useSettingsNavigation();
+  const instance = useInstance();
 
   /* eslint-disable solid/reactivity */
   const editGroup = createFormGroup({
@@ -63,7 +64,7 @@ export function ViewWebhook(props: { webhook: ChannelWebhook }) {
 
         const [key, value] = client().authenticationHeader;
         const data: { id: string } = await fetch(
-          `${CONFIGURATION.DEFAULT_MEDIA_URL}/avatars`,
+          `${instance.mediaUrl}/avatars`,
           {
             method: "POST",
             body,
@@ -120,7 +121,9 @@ export function ViewWebhook(props: { webhook: ChannelWebhook }) {
           icon={<MdContentCopy />}
           onClick={() =>
             navigator.clipboard.writeText(
-              `${CONFIGURATION.DEFAULT_API_URL}/webhooks/${props.webhook.id}/${props.webhook.token}`,
+              instance.href(
+                `/webhooks/${props.webhook.id}/${props.webhook.token}`,
+              ),
             )
           }
         >

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

@@ -26,7 +26,10 @@ export type SettingsConfiguration<T> = {
    * @param props State information
    */
   render: (
-    props: { page: Accessor<undefined | string> },
+    props: {
+      page: Accessor<undefined | string>;
+      onClose?: () => void;
+    },
     context: T,
   ) => JSX.Element;
 };

packages/client/components/app/interface/settings/server/Overview.tsx

@@ -5,7 +5,7 @@ import { Trans, useLingui } from "@lingui-solid/solid/macro";
 import type { API } from "stoat.js";
 
 import { useClient } from "@revolt/client";
-import { CONFIGURATION } from "@revolt/common";
+import { useInstance } from "@revolt/instance";
 import {
   CircularProgress,
   Column,
@@ -23,6 +23,7 @@ import { ServerSettingsProps } from "../ServerSettings";
 export default function ServerOverview(props: ServerSettingsProps) {
   const { t } = useLingui();
   const client = useClient();
+  const instance = useInstance();
 
   /* eslint-disable solid/reactivity */
   const editGroup = createFormGroup({
@@ -144,7 +145,7 @@ export default function ServerOverview(props: ServerSettingsProps) {
         changes.icon = await client().uploadFile(
           "icons",
           editGroup.controls.icon.value[0],
-          CONFIGURATION.DEFAULT_MEDIA_URL,
+          instance.mediaUrl,
         );
       }
     }
@@ -156,7 +157,7 @@ export default function ServerOverview(props: ServerSettingsProps) {
         changes.banner = await client().uploadFile(
           "banners",
           editGroup.controls.banner.value[0],
-          CONFIGURATION.DEFAULT_MEDIA_URL,
+          instance.mediaUrl,
         );
       }
     }

packages/client/components/app/interface/settings/server/emojis/EmojiList.tsx

@@ -6,8 +6,8 @@ import { Server } from "stoat.js";
 import { css } from "styled-system/css";
 
 import { useClient } from "@revolt/client";
-import { CONFIGURATION } from "@revolt/common";
 import { useError } from "@revolt/i18n";
+import { useInstance } from "@revolt/instance";
 import { useModals } from "@revolt/modal";
 import {
   Avatar,
@@ -27,9 +27,10 @@ export function EmojiList(props: { server: Server }) {
   const { t } = useLingui();
   const client = useClient();
   const { openModal } = useModals();
+  const instance = useInstance();
 
   function isDisabled() {
-    return props.server.emojis.length >= CONFIGURATION.MAX_EMOJI;
+    return props.server.emojis.length >= instance.globalLimits.server_emoji;
   }
 
   const editGroup = createFormGroup(
@@ -49,16 +50,13 @@ export function EmojiList(props: { server: Server }) {
     body.append("file", editGroup.controls.file.value![0]);
 
     const [key, value] = client().authenticationHeader;
-    const data: { id: string } = await fetch(
-      `${CONFIGURATION.DEFAULT_MEDIA_URL}/emojis`,
-      {
-        method: "POST",
-        body,
-        headers: {
-          [key]: value,
-        },
+    const data: { id: string } = await fetch(`${instance.mediaUrl}/emojis`, {
+      method: "POST",
+      body,
+      headers: {
+        [key]: value,
       },
-    ).then((res) => res.json());
+    }).then((res) => res.json());
 
     await props.server.createEmoji(data.id, {
       name: editGroup.controls.name.value,
@@ -102,7 +100,8 @@ export function EmojiList(props: { server: Server }) {
                 <Switch
                   fallback={
                     <Trans>
-                      {CONFIGURATION.MAX_EMOJI - props.server.emojis.length}{" "}
+                      {instance.globalLimits.server_emoji -
+                        props.server.emojis.length}{" "}
                       emoji slots remaining
                     </Trans>
                   }

packages/client/components/app/interface/settings/server/roles/ServerRoleEditor.tsx

@@ -1,9 +1,12 @@
+import { For, Show, createMemo, createSignal } from "solid-js";
+
 import { Trans, useLingui } from "@lingui-solid/solid/macro";
-import MdContentCopy from "@material-design-icons/svg/outlined/content_copy.svg?component-solid";
-import MdDelete from "@material-design-icons/svg/outlined/delete.svg?component-solid";
-import MDPalette from "@material-design-icons/svg/outlined/palette.svg?component-solid";
+import { createFormControl, createFormGroup } from "solid-forms";
+import { API, Server, ServerRole } from "stoat.js";
+import { styled } from "styled-system/jsx";
+
 import { useClient } from "@revolt/client";
-import { CONFIGURATION } from "@revolt/common";
+import { useInstance } from "@revolt/instance";
 import { useModals } from "@revolt/modal";
 import {
   Button,
@@ -15,10 +18,11 @@ import {
   Row,
   Text,
 } from "@revolt/ui";
-import { createFormControl, createFormGroup } from "solid-forms";
-import { For, Show, createMemo, createSignal } from "solid-js";
-import { API, Server, ServerRole } from "stoat.js";
-import { styled } from "styled-system/jsx";
+
+import MdContentCopy from "@material-design-icons/svg/outlined/content_copy.svg?component-solid";
+import MdDelete from "@material-design-icons/svg/outlined/delete.svg?component-solid";
+import MDPalette from "@material-design-icons/svg/outlined/palette.svg?component-solid";
+
 import { useSettingsNavigation } from "../../Settings";
 import { ChannelPermissionsEditor } from "../../channel/permissions/ChannelPermissionsEditor";
 
@@ -30,6 +34,7 @@ export function ServerRoleEditor(props: { context: Server; roleId: string }) {
   const client = useClient();
   const { openModal } = useModals();
   const { navigate } = useSettingsNavigation();
+  const instance = useInstance();
 
   const role = createMemo(
     () =>
@@ -65,7 +70,7 @@ export function ServerRoleEditor(props: { context: Server; roleId: string }) {
         changes.icon = await client().uploadFile(
           "icons",
           editGroup.controls.icon.value[0],
-          CONFIGURATION.DEFAULT_MEDIA_URL,
+          instance.mediaUrl,
         );
       }
     }