From faa3e3fbd43cd2e5129bc44561a50a4a97478cba Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Sat, 14 Feb 2026 12:08:51 -0500
Subject: [PATCH 01/24] fix: Fix for #541, add call button to header bar
 instead Shrink home-screen flex layout to single-column for mobile

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../features/voice/callCard/VoiceCallCard.tsx | 15 ++--
 .../voice/callCard/VoiceCallCardPreview.tsx   | 69 -------------------
 packages/client/src/interface/Home.tsx        |  2 +
 .../src/interface/channels/ChannelHeader.tsx  | 16 +++++
 4 files changed, 24 insertions(+), 78 deletions(-)
 delete mode 100644 packages/client/components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx

diff --git a/packages/client/components/ui/components/features/voice/callCard/VoiceCallCard.tsx b/packages/client/components/ui/components/features/voice/callCard/VoiceCallCard.tsx
index 7ba327be7..f2d066d56 100644
--- a/packages/client/components/ui/components/features/voice/callCard/VoiceCallCard.tsx
+++ b/packages/client/components/ui/components/features/voice/callCard/VoiceCallCard.tsx
@@ -279,16 +279,13 @@ function VoiceCallCard(props: { channel: Channel }) {
   const inCall = () => voice.channel()?.id === props.channel.id;
 
   return (
-    <Base>
-      <Card active={inCall()}>
-        <Show
-          when={inCall()}
-          fallback={<VoiceCallCardPreview channel={props.channel} />}
-        >
+    <Show when={inCall()}>
+      <Base>
+        <Card active={inCall()}>
           <VoiceCallCardActiveRoom />
-        </Show>
-      </Card>
-    </Base>
+        </Card>
+      </Base>
+    </Show>
   );
 }
 
diff --git a/packages/client/components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx b/packages/client/components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
deleted file mode 100644
index 948589bcd..000000000
--- a/packages/client/components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { For, Show } from "solid-js";
-
-import { Trans, useLingui } from "@lingui-solid/solid/macro";
-import { Channel } from "stoat.js";
-import { styled } from "styled-system/jsx";
-
-import { useUsers } from "@revolt/markdown/users";
-import { useVoice } from "@revolt/rtc";
-import { Avatar, Ripple, Text } from "@revolt/ui/components/design";
-import { Row } from "@revolt/ui/components/layout";
-import { Symbol } from "@revolt/ui/components/utils/Symbol";
-
-/**
- * Call card (preview)
- */
-export function VoiceCallCardPreview(props: { channel: Channel }) {
-  const voice = useVoice();
-  const { t } = useLingui();
-
-  const ids = () => [...props.channel.voiceParticipants.keys()];
-  const users = useUsers(ids);
-
-  function subtext() {
-    const names = users()
-      .map((user) => user?.username)
-      .filter((x) => x);
-
-    return names.length ? t`With ${names.join(", ")}` : t`Start the call`;
-  }
-
-  return (
-    <Preview onClick={() => voice.connect(props.channel)}>
-      <Ripple />
-      <Row>
-        <For each={users()} fallback={<Symbol size={24}>voice_chat</Symbol>}>
-          {(user) => (
-            <Avatar size={24} src={user?.avatar} fallback={user?.username} />
-          )}
-        </For>
-      </Row>
-      <Text class="title" size="large">
-        <Show
-          when={voice.state() === "READY"}
-          fallback={<Trans>Switch to this voice channel</Trans>}
-        >
-          <Trans>Join the voice channel</Trans>
-        </Show>
-      </Text>
-      <Text class="body">{subtext()}</Text>
-    </Preview>
-  );
-}
-
-const Preview = styled("div", {
-  base: {
-    position: "relative", // <Ripple />
-    borderRadius: "var(--borderRadius-lg)",
-
-    height: "100%",
-    justifyContent: "center",
-
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--gap-sm)",
-    padding: "var(--gap-lg)",
-
-    color: "var(--md-sys-color-on-surface)",
-  },
-});
diff --git a/packages/client/src/interface/Home.tsx b/packages/client/src/interface/Home.tsx
index 4801b4bf3..fe5569c0b 100644
--- a/packages/client/src/interface/Home.tsx
+++ b/packages/client/src/interface/Home.tsx
@@ -66,6 +66,8 @@ const Buttons = styled("div", {
     gap: "8px",
     padding: "8px",
     display: "flex",
+    flexWrap: "wrap",
+    justifyContent: "center",
     borderRadius: "var(--borderRadius-lg)",
 
     color: "var(--md-sys-color-on-surface-variant)",
diff --git a/packages/client/src/interface/channels/ChannelHeader.tsx b/packages/client/src/interface/channels/ChannelHeader.tsx
index c7dfcb0f4..2aabad491 100644
--- a/packages/client/src/interface/channels/ChannelHeader.tsx
+++ b/packages/client/src/interface/channels/ChannelHeader.tsx
@@ -9,6 +9,7 @@ import { useClient } from "@revolt/client";
 import { TextWithEmoji } from "@revolt/markdown";
 import { useModals } from "@revolt/modal";
 import { useState } from "@revolt/state";
+import { useVoice } from "@revolt/rtc";
 import { LAYOUT_SECTIONS } from "@revolt/state/stores/Layout";
 import {
   Button,
@@ -55,6 +56,7 @@ export function ChannelHeader(props: Props) {
   const client = useClient();
   const { t } = useLingui();
   const state = useState();
+  const voice = useVoice();
 
   const searchValue = () => {
     if (!props.sidebarState) return null;
@@ -134,6 +136,20 @@ export function ChannelHeader(props: Props) {
 
       <Spacer />
 
+      <Show when={props.channel.isVoice}>
+        <IconButton
+          onPress={() => voice.connect(props.channel)}
+          use:floating={{
+            tooltip: {
+              placement: "bottom",
+              content: t`Join the voice channel`,
+            },
+          }}
+        >
+          <Symbol>voice_chat</Symbol>
+        </IconButton>
+      </Show>
+
       <Show
         when={
           (props.channel.type === "Group" || props.channel.serverId) &&

From 4420084d1c709bec306e08c119d4e2b915a82297 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Sat, 14 Feb 2026 18:01:17 -0500
Subject: [PATCH 02/24] fix: More mobile UI fixes - Settings menu margin shrink
 and use "Back" button in sidebar instead of "Esc" button on right when screen
 width < 800px - Message box doesn't grow from placeholder,  overflow with ...
 instead - Hide GIF button when typing

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../app/interface/settings/Settings.tsx        | 12 ++++++++----
 .../app/interface/settings/UserSettings.tsx    |  5 +++--
 .../app/interface/settings/_layout/Content.tsx |  8 ++++++++
 .../app/interface/settings/_layout/Sidebar.tsx | 14 +++++++++-----
 .../settings/_layout/SidebarButton.tsx         |  5 +++++
 .../app/interface/settings/index.tsx           |  6 +++++-
 .../interface/settings/user/_AccountCard.tsx   | 18 ++++++++++++++++++
 .../messaging/composition/MessageBox.tsx       | 11 +++++++++++
 .../features/texteditor/TextEditor2.tsx        |  3 +++
 .../interface/channels/text/Composition.tsx    | 13 +++++++------
 10 files changed, 77 insertions(+), 18 deletions(-)

diff --git a/packages/client/components/app/interface/settings/Settings.tsx b/packages/client/components/app/interface/settings/Settings.tsx
index bd60cadc8..43e71a98a 100644
--- a/packages/client/components/app/interface/settings/Settings.tsx
+++ b/packages/client/components/app/interface/settings/Settings.tsx
@@ -89,7 +89,11 @@ export function Settings(props: SettingsProps & SettingsConfiguration<never>) {
         navigate,
       }}
     >
-      <MemoisedList context={props.context} list={props.list}>
+      <MemoisedList
+        context={props.context}
+        list={props.list}
+        onClose={props.onClose}
+      >
         {(list) => (
           <>
             <SettingsSidebar list={list} page={page} setPage={setPage} />
@@ -156,14 +160,14 @@ export function Settings(props: SettingsProps & SettingsConfiguration<never>) {
  */
 function MemoisedList(props: {
   context: never;
-  list: (context: never) => SettingsList<unknown>;
+  onClose?: () => void;
+  list: (context: never, onClose?: () => void) => SettingsList<unknown>;
   children: (list: Accessor<SettingsList<unknown>>) => JSX.Element;
 }) {
   /**
    * Generate list of categories / links
    */
-  const list = createMemo(() => props.list(props.context));
-
+  const list = createMemo(() => props.list(props.context, props.onClose));
   return <>{props.children(list)}</>;
 }
 
diff --git a/packages/client/components/app/interface/settings/UserSettings.tsx b/packages/client/components/app/interface/settings/UserSettings.tsx
index c6e2e6789..c42ceec22 100644
--- a/packages/client/components/app/interface/settings/UserSettings.tsx
+++ b/packages/client/components/app/interface/settings/UserSettings.tsx
@@ -34,7 +34,7 @@ import { Feedback } from "./user/Feedback";
 import { LanguageSettings } from "./user/Language";
 import Native from "./user/Native";
 import { Sessions } from "./user/Sessions";
-import { AccountCard } from "./user/_AccountCard";
+import { AccountCard, BackCard } from "./user/_AccountCard";
 import { AppearanceMenu } from "./user/appearance";
 import { MyBots, ViewBot } from "./user/bots";
 import { EditProfile } from "./user/profile";
@@ -112,7 +112,7 @@ const Config: SettingsConfiguration<{ server: Server }> = {
    * Generate list of categories / entries for client settings
    * @returns List
    */
-  list() {
+  list(_, onClose) {
     const { pop } = useModals();
     const { logout } = useClientLifecycle();
 
@@ -120,6 +120,7 @@ const Config: SettingsConfiguration<{ server: Server }> = {
       context: null!,
       prepend: (
         <Column gap="s">
+          <BackCard onClose={onClose} />
           <AccountCard />
           <div />
         </Column>
diff --git a/packages/client/components/app/interface/settings/_layout/Content.tsx b/packages/client/components/app/interface/settings/_layout/Content.tsx
index 75d0fc1de..adf17a331 100644
--- a/packages/client/components/app/interface/settings/_layout/Content.tsx
+++ b/packages/client/components/app/interface/settings/_layout/Content.tsx
@@ -88,6 +88,10 @@ const InnerContent = styled("div", {
     padding: "80px 32px",
     justifyContent: "stretch",
     zIndex: 1,
+
+    "@media (max-width: 800px)": {
+      padding: "12px"
+    }
   },
 });
 
@@ -126,5 +130,9 @@ const CloseAction = styled("div", {
       color: "var(--md-sys-color-on-surface)",
       fontSize: "0.75rem",
     },
+
+    "@media (max-width: 800px)": {
+      display: "none"
+    }
   },
 });
diff --git a/packages/client/components/app/interface/settings/_layout/Sidebar.tsx b/packages/client/components/app/interface/settings/_layout/Sidebar.tsx
index c39509023..3aa3f0879 100644
--- a/packages/client/components/app/interface/settings/_layout/Sidebar.tsx
+++ b/packages/client/components/app/interface/settings/_layout/Sidebar.tsx
@@ -20,18 +20,18 @@ import {
  */
 export function SettingsSidebar(props: {
   list: Accessor<SettingsList<unknown>>;
-
   setPage: Setter<string | undefined>;
   page: Accessor<string | undefined>;
 }) {
   const { navigate } = useSettingsNavigation();
+  const list = props.list();
 
   /**
    * Select first page on load
    */
   onMount(() => {
     if (!props.page()) {
-      props.setPage(props.list().entries[0].entries[0].id);
+      props.setPage(list.entries[0].entries[0].id);
     }
   });
 
@@ -40,8 +40,8 @@ export function SettingsSidebar(props: {
       <div use:invisibleScrollable>
         <Content>
           <Column gap="lg">
-            {props.list().prepend}
-            <For each={props.list().entries}>
+            {list.prepend}
+            <For each={list.entries}>
               {(category) => (
                 <Show when={!category.hidden}>
                   <Column>
@@ -87,7 +87,7 @@ export function SettingsSidebar(props: {
                 </Show>
               )}
             </For>
-            {props.list().append}
+            {list.append}
           </Column>
         </Content>
       </div>
@@ -123,6 +123,10 @@ const Content = styled("div", {
     "& a > div": {
       margin: 0,
     },
+
+    "@media (max-width: 800px)": {
+      padding: "12px 0"
+    }
   },
 });
 
diff --git a/packages/client/components/app/interface/settings/_layout/SidebarButton.tsx b/packages/client/components/app/interface/settings/_layout/SidebarButton.tsx
index a24c27149..acb2528de 100644
--- a/packages/client/components/app/interface/settings/_layout/SidebarButton.tsx
+++ b/packages/client/components/app/interface/settings/_layout/SidebarButton.tsx
@@ -33,6 +33,11 @@ export const SidebarButton = styled("a", {
         background: "var(--md-sys-color-primary-container)",
       },
     },
+    mobileOnly: {
+      true: {
+        "@media (min-width: 800px)": {display: "none"}
+      }
+    }
   },
 });
 
diff --git a/packages/client/components/app/interface/settings/index.tsx b/packages/client/components/app/interface/settings/index.tsx
index 78f574a63..82be8caf6 100644
--- a/packages/client/components/app/interface/settings/index.tsx
+++ b/packages/client/components/app/interface/settings/index.tsx
@@ -9,9 +9,13 @@ export { Settings } from "./Settings";
 export type SettingsConfiguration<T> = {
   /**
    * Generate list of categories and entries
+   * @param props State information
    * @returns List
    */
-  list: (context: T) => SettingsList<T>;
+  list: (
+    context: T,
+    onClose?: () => void
+  ) => SettingsList<T>;
 
   /**
    * Render the title of the current breadcrumb key
diff --git a/packages/client/components/app/interface/settings/user/_AccountCard.tsx b/packages/client/components/app/interface/settings/user/_AccountCard.tsx
index 209ef601b..f0ffdf0a8 100644
--- a/packages/client/components/app/interface/settings/user/_AccountCard.tsx
+++ b/packages/client/components/app/interface/settings/user/_AccountCard.tsx
@@ -3,6 +3,8 @@ import { Trans } from "@lingui-solid/solid/macro";
 import { useClient } from "@revolt/client";
 import { Avatar, OverflowingText, Ripple, typography } from "@revolt/ui";
 
+import MdArrowBack from "@material-design-icons/svg/outlined/arrow_back.svg?component-solid";
+
 import { useSettingsNavigation } from "../Settings";
 import {
   SidebarButton,
@@ -40,3 +42,19 @@ export function AccountCard() {
     </SidebarButton>
   );
 }
+
+export function BackCard(props: {
+  onClose?: () => void;
+}) {
+  return (
+    <SidebarButton mobileOnly onClick={props.onClose}>
+      <Ripple />
+      <SidebarButtonTitle>
+        <MdArrowBack />
+        <SidebarButtonContent>
+          <Trans>Back</Trans>
+        </SidebarButtonContent>
+      </SidebarButtonTitle>
+    </SidebarButton>
+  );
+}
\ No newline at end of file
diff --git a/packages/client/components/ui/components/features/messaging/composition/MessageBox.tsx b/packages/client/components/ui/components/features/messaging/composition/MessageBox.tsx
index 71ad88af1..4a4c1df55 100644
--- a/packages/client/components/ui/components/features/messaging/composition/MessageBox.tsx
+++ b/packages/client/components/ui/components/features/messaging/composition/MessageBox.tsx
@@ -95,6 +95,7 @@ interface Props {
 const Base = styled("div", {
   base: {
     flexGrow: 1,
+    minWidth: 0,
 
     paddingInlineEnd: "var(--gap-md)",
     paddingBlock: "var(--gap-sm)",
@@ -103,6 +104,16 @@ const Base = styled("div", {
     display: "flex",
     background: "var(--md-sys-color-surface-container-high)",
     color: "var(--md-sys-color-on-surface)",
+
+    "& .cm-content": {
+      minWidth: 0
+    },
+    "& .cm-placeholder": {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      width: "100%"
+    }
   },
   variants: {
     hasActionsAppend: {
diff --git a/packages/client/components/ui/components/features/texteditor/TextEditor2.tsx b/packages/client/components/ui/components/features/texteditor/TextEditor2.tsx
index 31ef9e5d1..045bb3b65 100644
--- a/packages/client/components/ui/components/features/texteditor/TextEditor2.tsx
+++ b/packages/client/components/ui/components/features/texteditor/TextEditor2.tsx
@@ -73,6 +73,9 @@ export function TextEditor2(props: Props) {
   const codeMirror = document.createElement("div");
   codeMirror.className = editor;
 
+  //Custom CSS
+  codeMirror.style.minWidth = '0';
+
   /**
    * Handle 'Enter' key presses
    * Submit only if not currently in a code block
diff --git a/packages/client/src/interface/channels/text/Composition.tsx b/packages/client/src/interface/channels/text/Composition.tsx
index 7f5dc9e33..9abb7de31 100644
--- a/packages/client/src/interface/channels/text/Composition.tsx
+++ b/packages/client/src/interface/channels/text/Composition.tsx
@@ -345,17 +345,18 @@ export function MessageComposition(props: Props) {
           >
             {(triggerProps) => (
               <>
-                <MessageBox.InlineIcon size="normal">
-                  <IconButton onPress={triggerProps.onClickGif}>
-                    <Symbol>gif</Symbol>
-                  </IconButton>
-                </MessageBox.InlineIcon>
+                <Show when={!canSend()}>
+                  <MessageBox.InlineIcon size="normal">
+                    <IconButton onPress={triggerProps.onClickGif}>
+                      <Symbol>gif</Symbol>
+                    </IconButton>
+                  </MessageBox.InlineIcon>
+                </Show>
                 <MessageBox.InlineIcon size="normal">
                   <IconButton onPress={triggerProps.onClickEmoji}>
                     <Symbol>emoticon</Symbol>
                   </IconButton>
                 </MessageBox.InlineIcon>
-
                 <div ref={triggerProps.ref} />
               </>
             )}

From abf0f076c76e8172f8d455c2e5a00b9f4cc68b2b Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Sat, 14 Feb 2026 22:31:26 -0500
Subject: [PATCH 03/24] fix: Mobile UI marches onwards - Disable hover action
 buttons for DMs, server list, and messages on mobile because these are too
 easy to accidentially tap - Move the text editor fixes from MessageBox.tsx to
 codeMirrorLineWrap.ts to make it act as a CodeMirror extension - Allow
 newlines with enter key on mobile instead of sending (Attempted send with
 Ctrl + Enter on mobile, but this doesn't work for some reason. Eg. this would
 matter for mobile external keyboard or Android Desktop mode.) - Fix stoat
 assets from submodule not syncing

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 packages/client/components/state/index.tsx    |  3 ++
 .../messaging/composition/MessageBox.tsx      | 10 ------
 .../features/messaging/elements/Container.tsx |  9 +++++-
 .../features/texteditor/TextEditor2.tsx       |  7 +++--
 .../features/texteditor/codeMirrorLineWrap.ts | 19 +++++++++---
 .../navigation/channels/HomeSidebar.tsx       | 31 +++++++++++--------
 .../navigation/channels/ServerSidebar.tsx     |  9 ++----
 7 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/packages/client/components/state/index.tsx b/packages/client/components/state/index.tsx
index bfdbb55db..6296c5b58 100644
--- a/packages/client/components/state/index.tsx
+++ b/packages/client/components/state/index.tsx
@@ -11,6 +11,7 @@ import { SetStoreFunction, createStore } from "solid-js/store";
 import equal from "fast-deep-equal";
 import localforage from "localforage";
 
+import { isMobileBrowser } from "@livekit/components-core";
 import { AbstractStore, Store } from "./stores";
 import { Auth } from "./stores/Auth";
 import { Draft } from "./stores/Draft";
@@ -46,6 +47,7 @@ export class State {
   private store: Store;
   private setStore: SetStoreFunction<Store>;
   private writeQueue: Record<string, number>;
+  isMobile: boolean;
 
   // define all stores
   auth = new Auth(this);
@@ -99,6 +101,7 @@ export class State {
     this.store = store as never;
     this.setStore = setStore;
     this.writeQueue = {};
+    this.isMobile = isMobileBrowser();
   }
 
   /**
diff --git a/packages/client/components/ui/components/features/messaging/composition/MessageBox.tsx b/packages/client/components/ui/components/features/messaging/composition/MessageBox.tsx
index 4a4c1df55..61f6e61b0 100644
--- a/packages/client/components/ui/components/features/messaging/composition/MessageBox.tsx
+++ b/packages/client/components/ui/components/features/messaging/composition/MessageBox.tsx
@@ -104,16 +104,6 @@ const Base = styled("div", {
     display: "flex",
     background: "var(--md-sys-color-surface-container-high)",
     color: "var(--md-sys-color-on-surface)",
-
-    "& .cm-content": {
-      minWidth: 0
-    },
-    "& .cm-placeholder": {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap",
-      width: "100%"
-    }
   },
   variants: {
     hasActionsAppend: {
diff --git a/packages/client/components/ui/components/features/messaging/elements/Container.tsx b/packages/client/components/ui/components/features/messaging/elements/Container.tsx
index 74e68851a..efa29157a 100644
--- a/packages/client/components/ui/components/features/messaging/elements/Container.tsx
+++ b/packages/client/components/ui/components/features/messaging/elements/Container.tsx
@@ -13,6 +13,7 @@ import {
   Time,
 } from "@revolt/ui/components/utils";
 
+import { useState } from "@revolt/state";
 import { MessageToolbar } from "./MessageToolbar";
 
 interface CommonProps {
@@ -307,6 +308,7 @@ const CompactInfo = styled(Row, {
  */
 export function MessageContainer(props: Props) {
   const { t } = useLingui();
+  const { isMobile } = useState();
 
   return (
     <div
@@ -326,7 +328,12 @@ export function MessageContainer(props: Props) {
       use:floating={{ contextMenu: props.contextMenu }}
     >
       <Show
-        when={props.message && props.isLink !== true && props.isLink !== "hide"}
+        when={
+          !isMobile &&
+          props.message &&
+          props.isLink !== true &&
+          props.isLink !== "hide"
+        }
       >
         <MessageToolbar message={props.message} />
       </Show>
diff --git a/packages/client/components/ui/components/features/texteditor/TextEditor2.tsx b/packages/client/components/ui/components/features/texteditor/TextEditor2.tsx
index 045bb3b65..09679d212 100644
--- a/packages/client/components/ui/components/features/texteditor/TextEditor2.tsx
+++ b/packages/client/components/ui/components/features/texteditor/TextEditor2.tsx
@@ -8,6 +8,7 @@ import { css } from "styled-system/css";
 
 import { AutoCompleteSearchSpace } from "../../utils/autoComplete";
 
+import { useState } from "@revolt/state";
 import { codeMirrorAutoComplete } from "./codeMirrorAutoComplete";
 import { isInFencedCodeBlock } from "./codeMirrorCommon";
 import { smartLineWrapping } from "./codeMirrorLineWrap";
@@ -70,11 +71,12 @@ const placeholderCompartment = new Compartment();
  * Text editor powered by CodeMirror
  */
 export function TextEditor2(props: Props) {
+  const { isMobile } = useState();
   const codeMirror = document.createElement("div");
   codeMirror.className = editor;
 
   //Custom CSS
-  codeMirror.style.minWidth = '0';
+  codeMirror.style.minWidth = "0";
 
   /**
    * Handle 'Enter' key presses
@@ -82,7 +84,8 @@ export function TextEditor2(props: Props) {
    */
   const enterKeymap = keymap.of([
     {
-      key: "Enter",
+      key: isMobile ? "Ctrl-Enter" : "Enter",
+      //TODO: This is not working right, mobile seems to not trigger the function
       run: (view) => {
         if (!props.onComplete) return false;
 
diff --git a/packages/client/components/ui/components/features/texteditor/codeMirrorLineWrap.ts b/packages/client/components/ui/components/features/texteditor/codeMirrorLineWrap.ts
index 428e376fc..d8e9fdae4 100644
--- a/packages/client/components/ui/components/features/texteditor/codeMirrorLineWrap.ts
+++ b/packages/client/components/ui/components/features/texteditor/codeMirrorLineWrap.ts
@@ -155,18 +155,27 @@ const lineWrapStyles = EditorView.theme({
   ".cm-line.linewrap-indent": {
     // The tiny offset appears to make the indent more reliable,
     // for unknown reasons.
-    "text-indent": "calc(-1 * var(--indented) - 0.1px)",
-    "padding-left": "calc(var(--indented) + var(--cm-left-padding, 4px))",
+    textIndent: "calc(-1 * var(--indented) - 0.1px)",
+    paddingLeft: "calc(var(--indented) + var(--cm-left-padding, 4px))",
   },
   ".linewrap-whitespace": {
-    "font-family": "monospace, monospace",
+    fontFamily: "monospace, monospace",
     // Prevent slightly-oversided monospace fonts from changing line heights
     // when indented, but also changes the height of lines with only whitespace...
-    // "font-size": "0.9em",
+    // fontSize: ".9em",
   },
   ".cm-line > *": {
-    "text-indent": "0",
+    textIndent: 0,
   },
+  ".cm-content": {
+      minWidth: 0
+  },
+  ".cm-placeholder": {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    width: "100%"
+  }
 });
 
 export const smartLineWrapping = [
diff --git a/packages/client/src/interface/navigation/channels/HomeSidebar.tsx b/packages/client/src/interface/navigation/channels/HomeSidebar.tsx
index de8579e53..fbfb8dbb0 100644
--- a/packages/client/src/interface/navigation/channels/HomeSidebar.tsx
+++ b/packages/client/src/interface/navigation/channels/HomeSidebar.tsx
@@ -25,6 +25,7 @@ import { Symbol } from "@revolt/ui/components/utils/Symbol";
 
 import MdClose from "@material-design-icons/svg/outlined/close.svg?component-solid";
 
+import { useState } from "@revolt/state";
 import { SidebarBase } from "./common";
 
 interface Props {
@@ -55,6 +56,7 @@ export const HomeSidebar = (props: Props) => {
   const navigate = useNavigate();
   const location = useLocation();
   const { openModal } = useModals();
+  const { isMobile } = useState();
 
   const savedNotesChannelId = createMemo(() => props.openSavedNotes());
 
@@ -186,6 +188,7 @@ export const HomeSidebar = (props: Props) => {
                     style={item.style}
                     channel={item.item}
                     active={item.item.id === props.channelId}
+                    isMobile={isMobile}
                   />
                 </div>
               )}
@@ -261,12 +264,12 @@ const NameStatusStack = styled("div", {
  * Single conversation entry
  */
 function Entry(
-  props: { channel: Channel; active: boolean } /*& Omit<
+  props: { channel: Channel; active: boolean; isMobile: boolean } /*& Omit<
     ComponentProps<typeof Link>,
     "href"
   >*/,
 ) {
-  const [local, remote] = splitProps(props, ["channel", "active"]);
+  const [local, remote] = splitProps(props, ["channel", "active", "isMobile"]);
 
   const { t } = useLingui();
   const { openModal } = useModals();
@@ -331,17 +334,19 @@ function Entry(
           </Switch>
         }
         actions={
-          <a
-            onClick={(e) => {
-              e.preventDefault();
-              openModal({
-                type: "delete_channel",
-                channel: local.channel,
-              });
-            }}
-          >
-            <MdClose {...iconSize("18px")} />
-          </a>
+          <Show when={!local.isMobile}>
+            <a
+              onClick={(e) => {
+                e.preventDefault();
+                openModal({
+                  type: "delete_channel",
+                  channel: local.channel,
+                });
+              }}
+            >
+              <MdClose {...iconSize("18px")} />
+            </a>
+          </Show>
         }
         use:floating={{
           contextMenu: () =>
diff --git a/packages/client/src/interface/navigation/channels/ServerSidebar.tsx b/packages/client/src/interface/navigation/channels/ServerSidebar.tsx
index 2b0b857ee..507cc8ecc 100644
--- a/packages/client/src/interface/navigation/channels/ServerSidebar.tsx
+++ b/packages/client/src/interface/navigation/channels/ServerSidebar.tsx
@@ -112,9 +112,7 @@ export const ServerSidebar = (props: Props) => {
   // TODO: we want it to feel smooth when navigating through channels, so we'll want to select channels immediately but not actually navigate until we're done moving through them
   /** Navigates to the channel offset from the current one, wrapping around if needed */
   const _navigateChannel = (byOffset: number) => {
-    if (props.channelId == null) {
-      return;
-    }
+    if (props.channelId == null) return;
 
     const channels = visibleChannels();
 
@@ -510,7 +508,7 @@ function Entry(
             </>
           }
           actions={
-            <>
+            <Show when={!state.isMobile}>
               <Show when={canInvite()}>
                 <a
                   use:floating={{
@@ -529,7 +527,6 @@ function Entry(
                   </Symbol>
                 </a>
               </Show>
-
               <Show when={canEditChannel()}>
                 <a
                   use:floating={{
@@ -549,7 +546,7 @@ function Entry(
                   </Symbol>
                 </a>
               </Show>
-            </>
+            </Show>
           }
         >
           <OverflowingText>

From 54ea8eb7cd4d34239d0b5c711ff61642b6c85754 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Sat, 14 Feb 2026 23:22:17 -0500
Subject: [PATCH 04/24] fix: Add back button to Channel & Server settings

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../components/app/interface/settings/ChannelSettings.tsx     | 4 +++-
 .../components/app/interface/settings/ServerSettings.tsx      | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/client/components/app/interface/settings/ChannelSettings.tsx b/packages/client/components/app/interface/settings/ChannelSettings.tsx
index d00fa6937..9b39b37e7 100644
--- a/packages/client/components/app/interface/settings/ChannelSettings.tsx
+++ b/packages/client/components/app/interface/settings/ChannelSettings.tsx
@@ -19,6 +19,7 @@ import { ChannelPermissionsEditor } from "./channel/permissions/ChannelPermissio
 import { ChannelPermissionsOverview } from "./channel/permissions/ChannelPermissionsOverview";
 import { ViewWebhook } from "./channel/webhooks/ViewWebhook";
 import { WebhooksList } from "./channel/webhooks/WebhooksList";
+import { BackCard } from "./user/_AccountCard";
 
 const Config: SettingsConfiguration<Channel> = {
   /**
@@ -98,11 +99,12 @@ const Config: SettingsConfiguration<Channel> = {
    * Generate list of categories / entries for channel settings
    * @returns List
    */
-  list(channel) {
+  list(channel, onClose) {
     const { openModal } = useModals();
 
     return {
       context: channel,
+      prepend: <BackCard onClose={onClose} />,
       entries: [
         {
           title: <TextWithEmoji content={channel.name} />,
diff --git a/packages/client/components/app/interface/settings/ServerSettings.tsx b/packages/client/components/app/interface/settings/ServerSettings.tsx
index c7b48002e..28d880332 100644
--- a/packages/client/components/app/interface/settings/ServerSettings.tsx
+++ b/packages/client/components/app/interface/settings/ServerSettings.tsx
@@ -24,6 +24,7 @@ import { EmojiList } from "./server/emojis/EmojiList";
 import { ListServerInvites } from "./server/invites/ListServerInvites";
 import { ServerRoleEditor } from "./server/roles/ServerRoleEditor";
 import { ServerRoleOverview } from "./server/roles/ServerRoleOverview";
+import { BackCard } from "./user/_AccountCard";
 
 const Config: SettingsConfiguration<Server> = {
   /**
@@ -89,12 +90,13 @@ const Config: SettingsConfiguration<Server> = {
    * Generate list of categories / entries for server settings
    * @returns List
    */
-  list(server) {
+  list(server, onClose) {
     const user = useUser();
     const { openModal } = useModals();
 
     return {
       context: server,
+      prepend: <BackCard onClose={onClose} />,
       entries: [
         {
           title: <TextWithEmoji content={server.name} />,

From 7c009fc50ba409286724d48d34f1f3497a1973de Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Sun, 15 Feb 2026 14:59:32 -0500
Subject: [PATCH 05/24] fix: Simplified CSS - Found a better spot to put the
 @media query so that it's all in one place for easier maintence - Hide
 breadcrums at top in "My Account" panel to fix visual bug where there's still
 a gap there despite no title - Center ESC button text properly

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../interface/settings/_layout/Content.tsx    | 34 ++++++++-----------
 .../interface/settings/_layout/Sidebar.tsx    |  6 +---
 .../settings/_layout/SidebarButton.tsx        |  7 ----
 .../interface/settings/user/_AccountCard.tsx  |  8 ++---
 .../components/modal/modals/Settings.tsx      | 31 ++++++++++++-----
 5 files changed, 40 insertions(+), 46 deletions(-)

diff --git a/packages/client/components/app/interface/settings/_layout/Content.tsx b/packages/client/components/app/interface/settings/_layout/Content.tsx
index adf17a331..efe91ef8c 100644
--- a/packages/client/components/app/interface/settings/_layout/Content.tsx
+++ b/packages/client/components/app/interface/settings/_layout/Content.tsx
@@ -29,24 +29,26 @@ export function SettingsContent(props: {
       }}
     >
       <Show when={props.page()}>
-        <InnerContent>
+        <InnerContent class="setCont">
           <InnerColumn>
-            <Text class="title" size="large">
-              <Breadcrumbs
-                elements={props.page()!.split("/")}
-                renderElement={(key) =>
-                  props.title(props.list() as SettingsList<never>, key)
-                }
-                navigate={(keys) => navigate(keys.join("/"))}
-              />
-            </Text>
+            <Show when={props.page() !== "account"}>
+              <Text class="title" size="large">
+                <Breadcrumbs
+                  elements={props.page()!.split("/")}
+                  renderElement={(key) =>
+                    props.title(props.list() as SettingsList<never>, key)
+                  }
+                  navigate={(keys) => navigate(keys.join("/"))}
+                />
+              </Text>
+            </Show>
             {props.children}
             <div class={css({ minHeight: "80px" })} />
           </InnerColumn>
         </InnerContent>
       </Show>
       <Show when={props.onClose}>
-        <CloseAction>
+        <CloseAction class="setClose">
           <IconButton variant="tonal" onPress={props.onClose}>
             <MdClose />
           </IconButton>
@@ -88,10 +90,6 @@ const InnerContent = styled("div", {
     padding: "80px 32px",
     justifyContent: "stretch",
     zIndex: 1,
-
-    "@media (max-width: 800px)": {
-      padding: "12px"
-    }
   },
 });
 
@@ -125,14 +123,10 @@ const CloseAction = styled("div", {
       marginTop: "4px",
       display: "flex",
       justifyContent: "center",
-      width: "36px",
+      width: "40px",
       fontWeight: 600,
       color: "var(--md-sys-color-on-surface)",
       fontSize: "0.75rem",
     },
-
-    "@media (max-width: 800px)": {
-      display: "none"
-    }
   },
 });
diff --git a/packages/client/components/app/interface/settings/_layout/Sidebar.tsx b/packages/client/components/app/interface/settings/_layout/Sidebar.tsx
index 3aa3f0879..c366dbf08 100644
--- a/packages/client/components/app/interface/settings/_layout/Sidebar.tsx
+++ b/packages/client/components/app/interface/settings/_layout/Sidebar.tsx
@@ -38,7 +38,7 @@ export function SettingsSidebar(props: {
   return (
     <Base>
       <div use:invisibleScrollable>
-        <Content>
+        <Content class="setSidebar">
           <Column gap="lg">
             {list.prepend}
             <For each={list.entries}>
@@ -123,10 +123,6 @@ const Content = styled("div", {
     "& a > div": {
       margin: 0,
     },
-
-    "@media (max-width: 800px)": {
-      padding: "12px 0"
-    }
   },
 });
 
diff --git a/packages/client/components/app/interface/settings/_layout/SidebarButton.tsx b/packages/client/components/app/interface/settings/_layout/SidebarButton.tsx
index acb2528de..9cfafa668 100644
--- a/packages/client/components/app/interface/settings/_layout/SidebarButton.tsx
+++ b/packages/client/components/app/interface/settings/_layout/SidebarButton.tsx
@@ -7,9 +7,7 @@ export const SidebarButton = styled("a", {
   base: {
     // for <Ripple />:
     position: "relative",
-
     minWidth: 0,
-
     display: "flex",
     alignItems: "center",
     padding: "6px 8px",
@@ -33,11 +31,6 @@ export const SidebarButton = styled("a", {
         background: "var(--md-sys-color-primary-container)",
       },
     },
-    mobileOnly: {
-      true: {
-        "@media (min-width: 800px)": {display: "none"}
-      }
-    }
   },
 });
 
diff --git a/packages/client/components/app/interface/settings/user/_AccountCard.tsx b/packages/client/components/app/interface/settings/user/_AccountCard.tsx
index f0ffdf0a8..f93b10faa 100644
--- a/packages/client/components/app/interface/settings/user/_AccountCard.tsx
+++ b/packages/client/components/app/interface/settings/user/_AccountCard.tsx
@@ -43,11 +43,9 @@ export function AccountCard() {
   );
 }
 
-export function BackCard(props: {
-  onClose?: () => void;
-}) {
+export function BackCard(props: { onClose?: () => void }) {
   return (
-    <SidebarButton mobileOnly onClick={props.onClose}>
+    <SidebarButton class="setMobileBack" onClick={props.onClose}>
       <Ripple />
       <SidebarButtonTitle>
         <MdArrowBack />
@@ -57,4 +55,4 @@ export function BackCard(props: {
       </SidebarButtonTitle>
     </SidebarButton>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/client/components/modal/modals/Settings.tsx b/packages/client/components/modal/modals/Settings.tsx
index eb9343d4b..a47a87770 100644
--- a/packages/client/components/modal/modals/Settings.tsx
+++ b/packages/client/components/modal/modals/Settings.tsx
@@ -5,6 +5,7 @@ import { Motion, Presence } from "solid-motionone";
 import { Settings, SettingsConfigurations } from "@revolt/app";
 import { DialogProps } from "@revolt/ui";
 
+import { styled } from "styled-system/jsx";
 import { Modals } from "../types";
 
 /**
@@ -31,14 +32,7 @@ export function SettingsModal(
       >
         <Presence>
           <Show when={props?.show}>
-            <Motion.div
-              style={{
-                height: "100%",
-                "pointer-events": "all",
-                display: "flex",
-                color: "var(--md-sys-color-on-surface)",
-                background: "var(--md-sys-color-surface-container-highest)",
-              }}
+            <Base
               initial={{ opacity: 0, scale: 1.1 }}
               animate={{ opacity: 1, scale: 1 }}
               exit={{ opacity: 0, scale: 1.1 }}
@@ -54,10 +48,29 @@ export function SettingsModal(
                 list={config.list}
                 context={props.context as never}
               />
-            </Motion.div>
+            </Base>
           </Show>
         </Presence>
       </div>
     </Portal>
   );
 }
+
+const Base = styled(Motion.div, {
+  base: {
+    height: "100%",
+    pointerEvents: "all",
+    display: "flex",
+    color: "var(--md-sys-color-on-surface)",
+    background: "var(--md-sys-color-surface-container-highest)",
+
+    //Tablet view
+    "& .setMobileBack": { display: "none" },
+    "@media (max-width: 800px)": {
+      "& .setCont": { padding: "12px" },
+      "& .setSidebar": { padding: "12px 0" },
+      "& .setClose": { display: "none" },
+      "& .setMobileBack": { display: "flex" },
+    },
+  },
+});

From eef94606d83a5f482dbe180ed08f0d280815a18e Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Mon, 16 Feb 2026 01:15:22 -0500
Subject: [PATCH 06/24] fix: Move the CSS again & misc - I swear this is the
 last time lol. Now using classes for everything instead of just some of it,
 will also help with changes for phone view - Change threshold for tablet view
 to 900px - Fix modal button touch event prorogation bug causing touches to
 glitch through as it closes

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../interface/settings/_layout/Content.tsx    |  6 +---
 .../interface/settings/_layout/Sidebar.tsx    |  3 +-
 .../components/modal/modals/Settings.tsx      | 25 ++------------
 .../ui/components/design/Button.tsx           |  8 +++++
 .../ui/components/design/IconButton.tsx       |  8 +++++
 packages/client/components/ui/styles.css      | 33 +++++++++++++++++--
 packages/client/src/Interface.tsx             | 12 ++-----
 packages/client/src/interface/Sidebar.tsx     |  2 +-
 .../navigation/channels/HomeSidebar.tsx       |  2 +-
 .../navigation/channels/ServerSidebar.tsx     |  5 ++-
 10 files changed, 61 insertions(+), 43 deletions(-)

diff --git a/packages/client/components/app/interface/settings/_layout/Content.tsx b/packages/client/components/app/interface/settings/_layout/Content.tsx
index efe91ef8c..d1bbce27a 100644
--- a/packages/client/components/app/interface/settings/_layout/Content.tsx
+++ b/packages/client/components/app/interface/settings/_layout/Content.tsx
@@ -23,11 +23,7 @@ export function SettingsContent(props: {
   const { navigate } = useSettingsNavigation();
 
   return (
-    <div
-      use:scrollable={{
-        class: base(),
-      }}
-    >
+    <div class="setBase" use:scrollable={{ class: base() }}>
       <Show when={props.page()}>
         <InnerContent class="setCont">
           <InnerColumn>
diff --git a/packages/client/components/app/interface/settings/_layout/Sidebar.tsx b/packages/client/components/app/interface/settings/_layout/Sidebar.tsx
index c366dbf08..1635b0a73 100644
--- a/packages/client/components/app/interface/settings/_layout/Sidebar.tsx
+++ b/packages/client/components/app/interface/settings/_layout/Sidebar.tsx
@@ -36,7 +36,7 @@ export function SettingsSidebar(props: {
   });
 
   return (
-    <Base>
+    <Base class="setSbBase">
       <div use:invisibleScrollable>
         <Content class="setSidebar">
           <Column gap="lg">
@@ -104,6 +104,7 @@ const Base = styled("div", {
     flex: "1 0 218px",
     paddingLeft: "8px",
     justifyContent: "flex-end",
+    height: "100%",
   },
 });
 
diff --git a/packages/client/components/modal/modals/Settings.tsx b/packages/client/components/modal/modals/Settings.tsx
index a47a87770..9a14aae5c 100644
--- a/packages/client/components/modal/modals/Settings.tsx
+++ b/packages/client/components/modal/modals/Settings.tsx
@@ -5,7 +5,6 @@ import { Motion, Presence } from "solid-motionone";
 import { Settings, SettingsConfigurations } from "@revolt/app";
 import { DialogProps } from "@revolt/ui";
 
-import { styled } from "styled-system/jsx";
 import { Modals } from "../types";
 
 /**
@@ -32,7 +31,8 @@ export function SettingsModal(
       >
         <Presence>
           <Show when={props?.show}>
-            <Base
+            <Motion.div
+              class="setMain"
               initial={{ opacity: 0, scale: 1.1 }}
               animate={{ opacity: 1, scale: 1 }}
               exit={{ opacity: 0, scale: 1.1 }}
@@ -48,29 +48,10 @@ export function SettingsModal(
                 list={config.list}
                 context={props.context as never}
               />
-            </Base>
+            </Motion.div>
           </Show>
         </Presence>
       </div>
     </Portal>
   );
 }
-
-const Base = styled(Motion.div, {
-  base: {
-    height: "100%",
-    pointerEvents: "all",
-    display: "flex",
-    color: "var(--md-sys-color-on-surface)",
-    background: "var(--md-sys-color-surface-container-highest)",
-
-    //Tablet view
-    "& .setMobileBack": { display: "none" },
-    "@media (max-width: 800px)": {
-      "& .setCont": { padding: "12px" },
-      "& .setSidebar": { padding: "12px 0" },
-      "& .setClose": { display: "none" },
-      "& .setMobileBack": { display: "flex" },
-    },
-  },
-});
diff --git a/packages/client/components/ui/components/design/Button.tsx b/packages/client/components/ui/components/design/Button.tsx
index c142304a0..e75dac45e 100644
--- a/packages/client/components/ui/components/design/Button.tsx
+++ b/packages/client/components/ui/components/design/Button.tsx
@@ -119,10 +119,18 @@ export function Button(props: Props) {
   );
 
   const { buttonProps } = createButton(rest, () => ref);
+
+  function stopProp(e: TouchEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
   return (
     <button
       {...passthrough}
       {...buttonProps}
+      onTouchStart={stopProp}
+      onTouchEnd={stopProp}
       ref={ref}
       class={button({
         shape: shape(),
diff --git a/packages/client/components/ui/components/design/IconButton.tsx b/packages/client/components/ui/components/design/IconButton.tsx
index ae8953dc8..d156b2a48 100644
--- a/packages/client/components/ui/components/design/IconButton.tsx
+++ b/packages/client/components/ui/components/design/IconButton.tsx
@@ -40,10 +40,18 @@ export function IconButton(props: Props) {
   let ref: HTMLButtonElement | undefined;
 
   const { buttonProps } = createButton(rest, () => ref);
+
+  function stopProp(e: TouchEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
   return (
     <button
       {...passthrough}
       {...buttonProps}
+      onTouchStart={stopProp}
+      onTouchEnd={stopProp}
       ref={ref}
       class={iconButton2({
         ...style,
diff --git a/packages/client/components/ui/styles.css b/packages/client/components/ui/styles.css
index 4e2598524..98afbd1a7 100644
--- a/packages/client/components/ui/styles.css
+++ b/packages/client/components/ui/styles.css
@@ -6,9 +6,7 @@
 @import "@fontsource/inter/800";
 @import "@fontsource/jetbrains-mono";
 
-* {
-  box-sizing: border-box;
-}
+* { box-sizing: border-box }
 
 body {
   margin: 0;
@@ -24,6 +22,35 @@ body {
   bottom: env(safe-area-inset-bottom);
 }
 
+/* App: Desktop view */
+.appRoot {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.appSidebar {
+  display: flex;
+  flex-shrink: 0;
+}
+
+/* Settings: Desktop view */
+.setMain {
+  display: flex;
+  height: 100%;
+  pointer-events: all;
+  color: var(--md-sys-color-on-surface);
+  background: var(--md-sys-color-surface-container-highest);
+}
+
+/* Settings: Tablet view */
+.setMobileBack { display: none }
+@media (max-width: 900px) {
+  .setCont { padding: 12px }
+  .setSidebar { padding: 8px 0 }
+  .setClose { display: none }
+  .setMobileBack { display: flex }
+}
+
 /* HighlightJs */
 /*!
   Theme: GitHub Dark
diff --git a/packages/client/src/Interface.tsx b/packages/client/src/Interface.tsx
index 5efe073e0..f66af90b7 100644
--- a/packages/client/src/Interface.tsx
+++ b/packages/client/src/Interface.tsx
@@ -1,4 +1,4 @@
-import { JSX, Match, Switch, createEffect } from "solid-js";
+import { createEffect, JSX, Match, Switch } from "solid-js";
 
 import { Server } from "stoat.js";
 import { styled } from "styled-system/jsx";
@@ -59,13 +59,7 @@ const Interface = (props: { children: JSX.Element }) => {
 
   return (
     <MessageCache client={client()}>
-      <div
-        style={{
-          display: "flex",
-          "flex-direction": "column",
-          height: "100%",
-        }}
-      >
+      <div class="appRoot">
         <Titlebar />
         <Switch fallback={<CircularProgress />}>
           <Match when={!isLoggedIn()}>
@@ -96,6 +90,7 @@ const Interface = (props: { children: JSX.Element }) => {
                 })}
               />
               <Content
+                class="appCont"
                 sidebar={state.layout.getSectionState(
                   LAYOUT_SECTIONS.PRIMARY_SIDEBAR,
                   true,
@@ -142,7 +137,6 @@ const Layout = styled("div", {
 const Content = styled("div", {
   base: {
     background: "var(--md-sys-color-surface-container-low)",
-
     display: "flex",
     width: "100%",
     minWidth: 0,
diff --git a/packages/client/src/interface/Sidebar.tsx b/packages/client/src/interface/Sidebar.tsx
index 16e555324..1de945671 100644
--- a/packages/client/src/interface/Sidebar.tsx
+++ b/packages/client/src/interface/Sidebar.tsx
@@ -33,7 +33,7 @@ export const Sidebar = (props: {
   const location = useLocation();
 
   return (
-    <div style={{ display: "flex", "flex-shrink": 0 }}>
+    <div class="appSidebar">
       <ServerList
         orderedServers={state.ordering.orderedServers(client())}
         setServerOrder={state.ordering.setServerOrder}
diff --git a/packages/client/src/interface/navigation/channels/HomeSidebar.tsx b/packages/client/src/interface/navigation/channels/HomeSidebar.tsx
index fbfb8dbb0..d07477aa7 100644
--- a/packages/client/src/interface/navigation/channels/HomeSidebar.tsx
+++ b/packages/client/src/interface/navigation/channels/HomeSidebar.tsx
@@ -68,7 +68,7 @@ export const HomeSidebar = (props: Props) => {
   });
 
   return (
-    <SidebarBase>
+    <SidebarBase class="appSbBase">
       <div ref={scrollTargetElement} use:invisibleScrollable>
         <List>
           <SidebarTitle>
diff --git a/packages/client/src/interface/navigation/channels/ServerSidebar.tsx b/packages/client/src/interface/navigation/channels/ServerSidebar.tsx
index 507cc8ecc..17576d8e8 100644
--- a/packages/client/src/interface/navigation/channels/ServerSidebar.tsx
+++ b/packages/client/src/interface/navigation/channels/ServerSidebar.tsx
@@ -190,7 +190,10 @@ export const ServerSidebar = (props: Props) => {
   }
 
   return (
-    <SidebarBase use:floating={props.menuGenerator(props.server)}>
+    <SidebarBase
+      class="appSbBase"
+      use:floating={props.menuGenerator(props.server)}
+    >
       <Switch
         fallback={
           <Header placement="secondary">

From 845724202000e6e0230e391d341a9dcaeb4ebc45 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Mon, 16 Feb 2026 22:27:34 -0500
Subject: [PATCH 07/24] revert: Undo propagation bugfix due to issues on
 non-Chromium browsers

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 packages/client/components/ui/components/design/Button.tsx | 7 -------
 .../client/components/ui/components/design/IconButton.tsx  | 7 -------
 2 files changed, 14 deletions(-)

diff --git a/packages/client/components/ui/components/design/Button.tsx b/packages/client/components/ui/components/design/Button.tsx
index e75dac45e..b7b80a939 100644
--- a/packages/client/components/ui/components/design/Button.tsx
+++ b/packages/client/components/ui/components/design/Button.tsx
@@ -120,17 +120,10 @@ export function Button(props: Props) {
 
   const { buttonProps } = createButton(rest, () => ref);
 
-  function stopProp(e: TouchEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
   return (
     <button
       {...passthrough}
       {...buttonProps}
-      onTouchStart={stopProp}
-      onTouchEnd={stopProp}
       ref={ref}
       class={button({
         shape: shape(),
diff --git a/packages/client/components/ui/components/design/IconButton.tsx b/packages/client/components/ui/components/design/IconButton.tsx
index d156b2a48..01e0687cd 100644
--- a/packages/client/components/ui/components/design/IconButton.tsx
+++ b/packages/client/components/ui/components/design/IconButton.tsx
@@ -41,17 +41,10 @@ export function IconButton(props: Props) {
 
   const { buttonProps } = createButton(rest, () => ref);
 
-  function stopProp(e: TouchEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
   return (
     <button
       {...passthrough}
       {...buttonProps}
-      onTouchStart={stopProp}
-      onTouchEnd={stopProp}
       ref={ref}
       class={iconButton2({
         ...style,

From e8df2277b2c18f4099fb794bef680f50aa52672f Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Mon, 16 Feb 2026 23:01:43 -0500
Subject: [PATCH 08/24] feat: Mobile UI - Phone UI triggers at < 600px width -
 Animated, swipable drawer slider, inspired by Discord app - Viewport
 interactive-widget specifier to force keyboard to resize content window
 instead of awkwardly panning it

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../app/interface/settings/Settings.tsx       |   4 +
 .../interface/settings/_layout/Content.tsx    |   5 +-
 .../components/modal/modals/Settings.tsx      |  18 +-
 .../ui/components/navigation/SlideDrawer.ts   | 169 ++++++++++++++++++
 packages/client/components/ui/styles.css      |  26 +++
 packages/client/index.html                    |  12 +-
 packages/client/src/Interface.tsx             |  27 ++-
 7 files changed, 248 insertions(+), 13 deletions(-)
 create mode 100644 packages/client/components/ui/components/navigation/SlideDrawer.ts

diff --git a/packages/client/components/app/interface/settings/Settings.tsx b/packages/client/components/app/interface/settings/Settings.tsx
index 43e71a98a..d7504d46c 100644
--- a/packages/client/components/app/interface/settings/Settings.tsx
+++ b/packages/client/components/app/interface/settings/Settings.tsx
@@ -4,6 +4,7 @@ import {
   createContext,
   createMemo,
   createSignal,
+  Setter,
   untrack,
   useContext,
 } from "solid-js";
@@ -25,6 +26,8 @@ export interface SettingsProps {
    * Settings context
    */
   context: never;
+
+  contentRef: Setter<HTMLDivElement | undefined>;
 }
 
 /**
@@ -98,6 +101,7 @@ export function Settings(props: SettingsProps & SettingsConfiguration<never>) {
           <>
             <SettingsSidebar list={list} page={page} setPage={setPage} />
             <SettingsContent
+              ref={props.contentRef}
               page={page}
               list={list}
               title={props.title}
diff --git a/packages/client/components/app/interface/settings/_layout/Content.tsx b/packages/client/components/app/interface/settings/_layout/Content.tsx
index d1bbce27a..f9f1c4a97 100644
--- a/packages/client/components/app/interface/settings/_layout/Content.tsx
+++ b/packages/client/components/app/interface/settings/_layout/Content.tsx
@@ -1,4 +1,4 @@
-import { Accessor, JSX, Show } from "solid-js";
+import { Accessor, JSX, Setter, Show } from "solid-js";
 
 import { css, cva } from "styled-system/css";
 import { styled } from "styled-system/jsx";
@@ -19,11 +19,12 @@ export function SettingsContent(props: {
   list: Accessor<SettingsList<unknown>>;
   title: (ctx: SettingsList<never>, key: string) => string;
   page: Accessor<string | undefined>;
+  ref: Setter<HTMLDivElement | undefined>;
 }) {
   const { navigate } = useSettingsNavigation();
 
   return (
-    <div class="setBase" use:scrollable={{ class: base() }}>
+    <div ref={props.ref} class="setBase" use:scrollable={{ class: base() }}>
       <Show when={props.page()}>
         <InnerContent class="setCont">
           <InnerColumn>
diff --git a/packages/client/components/modal/modals/Settings.tsx b/packages/client/components/modal/modals/Settings.tsx
index 9a14aae5c..38a67de4f 100644
--- a/packages/client/components/modal/modals/Settings.tsx
+++ b/packages/client/components/modal/modals/Settings.tsx
@@ -1,10 +1,11 @@
-import { Show } from "solid-js";
+import { createEffect, createSignal, on, onCleanup, Show } from "solid-js";
 import { Portal } from "solid-js/web";
 import { Motion, Presence } from "solid-motionone";
 
 import { Settings, SettingsConfigurations } from "@revolt/app";
 import { DialogProps } from "@revolt/ui";
 
+import { SlideDrawer } from "@revolt/ui/components/navigation/SlideDrawer";
 import { Modals } from "../types";
 
 /**
@@ -16,6 +17,19 @@ export function SettingsModal(
   // eslint-disable-next-line solid/reactivity
   const config = SettingsConfigurations[props.config];
 
+  //Drawer slider for mobile
+  let rootRef, sDrawer: SlideDrawer | null;
+  const [contRef, setContRef] = createSignal<HTMLDivElement>();
+  createEffect(
+    on(contRef, (cont) => {
+      if (cont) sDrawer = new SlideDrawer(cont, rootRef!);
+    }),
+  );
+  onCleanup(() => {
+    sDrawer?.delete();
+    sDrawer = null;
+  });
+
   return (
     <Portal mount={document.getElementById("floating")!}>
       <div
@@ -32,6 +46,7 @@ export function SettingsModal(
         <Presence>
           <Show when={props?.show}>
             <Motion.div
+              ref={rootRef}
               class="setMain"
               initial={{ opacity: 0, scale: 1.1 }}
               animate={{ opacity: 1, scale: 1 }}
@@ -47,6 +62,7 @@ export function SettingsModal(
                 title={config.title}
                 list={config.list}
                 context={props.context as never}
+                contentRef={setContRef}
               />
             </Motion.div>
           </Show>
diff --git a/packages/client/components/ui/components/navigation/SlideDrawer.ts b/packages/client/components/ui/components/navigation/SlideDrawer.ts
new file mode 100644
index 000000000..8f8072b9d
--- /dev/null
+++ b/packages/client/components/ui/components/navigation/SlideDrawer.ts
@@ -0,0 +1,169 @@
+const ANIM_MS = 500,
+  TRIG_X = 20,
+  CANCEL_Y = 20;
+
+type TrackTouch = {
+  id: number;
+  x: number;
+  y: number;
+  newX?: number;
+  newT?: number;
+  prevX?: number;
+  prevT?: number;
+  trig?: boolean;
+};
+
+export class SlideDrawer {
+  enabled = false;
+  private media;
+  private touch: TrackTouch | null = null;
+  private tTmr: NodeJS.Timeout | null = null;
+  private ofs = 0;
+
+  constructor(
+    private drawer: HTMLElement,
+    private root: HTMLElement,
+  ) {
+    console.log("INIT", drawer, root);
+    root.ontouchstart = this.start.bind(this);
+    root.ontouchmove = root.ontouchend = this.move.bind(this);
+
+    //Auto-enable based on device width
+    const pwMax = getComputedStyle(document.body).getPropertyValue(
+      "--phone-max-width",
+    );
+    this.media = matchMedia(`(max-width: ${pwMax}`);
+    this.media.onchange = (e) => this.setEnabled(e.matches);
+    this.setEnabled(this.media.matches);
+  }
+
+  private start(e: TouchEvent) {
+    //Cancel if more than one finger
+    if (e.touches.length > 1) {
+      this.touch = null;
+      return;
+    }
+    if (this.touch || !this.enabled) return;
+
+    //Track this touch
+    const t = e.touches[0];
+    this.touch = {
+      id: t.identifier,
+      x: t.screenX,
+      y: t.screenY,
+    };
+
+    console.log("TSTART", this.touch.x, this.touch.y);
+  }
+
+  private move(e: TouchEvent) {
+    if (!this.touch) return;
+    const isEnd = e.type === "touchend";
+    let t, tNew;
+    for (t of e.changedTouches)
+      if (t.identifier === this.touch.id) {
+        tNew = t;
+        break;
+      }
+    if (!tNew) return;
+
+    t = this.touch;
+    const dy = tNew.screenY - t.y,
+      ds = this.drawer.style,
+      max = -innerWidth;
+    let dx = tNew.screenX - t.x,
+      trig = t.trig;
+
+    if (!trig && Math.abs(dy) > CANCEL_Y) {
+      console.log("CANCEL at Y", dy);
+      this.touch = null;
+    } else if (trig || Math.abs(dx) > TRIG_X) {
+      if (!trig) {
+        console.log("TRIG at X", dx);
+        t.trig = trig = true;
+        this.tfTimer();
+      }
+
+      dx = Math.max(Math.min(this.ofs + dx, 0), max);
+      ds.transform = `translateX(${dx}px)`;
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    if (isEnd) {
+      console.log("END at X", dx);
+
+      //TODO: Calc avg velocity and smooth w/ moving avg or something
+      //If velocity at touchend is higher than threshold,
+      //overrides the show/hide result regardless of drawer position
+
+      //Finalize show/hide state
+      if (trig) this.tfTimer(true, dx < max / 2);
+      this.touch = null;
+    }
+  }
+
+  private tfTimer(set = false, show = false) {
+    //Animate transition
+    const ds = this.drawer.style;
+    this.setElState(false);
+    if (set) {
+      this.ofs = show ? -innerWidth : 0;
+      ds.transition = `transform ${ANIM_MS}ms`;
+      ds.transform = `translateX(${this.ofs}px)`;
+    } else {
+      ds.transition = ds.transform = "";
+    }
+
+    //Finalize after delay
+    clearTimeout(this.tTmr!);
+    this.tTmr = set
+      ? setTimeout(() => {
+          ds.transition = ds.transform = "";
+          this.setElState(show);
+          this.tTmr = null;
+        }, ANIM_MS + 50)
+      : null;
+  }
+
+  private setElState(show: boolean) {
+    const ds = this.drawer.style;
+    this.root.style.width = show ? "" : "200vw";
+    ds.marginLeft = show ? "" : "100vw";
+  }
+
+  delete() {
+    console.log("DEL");
+    this.setEnabled(false);
+    this.root.ontouchstart =
+      this.root.ontouchmove =
+      this.root.ontouchend =
+      this.media.onchange =
+        null;
+  }
+
+  setEnabled(en: boolean) {
+    if (this.enabled !== en) {
+      this.drawer.style.zIndex = en ? "1" : "";
+      this.tfTimer();
+      this.touch = null;
+      if (!en) this.setElState(true);
+      this.ofs = 0;
+    }
+    this.enabled = en;
+  }
+
+  isShown() {
+    return this.ofs !== 0;
+  }
+
+  setShown(show: boolean) {
+    if (!this.enabled || this.touch?.trig || this.tTmr) return false;
+    if (this.isShown() !== show) {
+      this.setElState(false);
+      this.drawer.style.transform = `translateX(${this.ofs}px)`;
+      setTimeout(() => this.tfTimer(true, show), 0);
+    }
+    return true;
+  }
+}
diff --git a/packages/client/components/ui/styles.css b/packages/client/components/ui/styles.css
index 98afbd1a7..afdb50cd2 100644
--- a/packages/client/components/ui/styles.css
+++ b/packages/client/components/ui/styles.css
@@ -12,6 +12,7 @@ body {
   margin: 0;
   background: #191919;
   font-family: var(--fonts-primary);
+  --phone-max-width: 600px;
 }
 
 #root {
@@ -33,6 +34,17 @@ body {
   flex-shrink: 0;
 }
 
+/* Main: Phone view */
+@media (max-width: 600px) {
+  .appSbBase { flex-grow: 1 }
+  .appSidebar {
+    --layout-width-channel-sidebar: auto;
+    position: absolute;
+    width: 100vw;
+    height: 100%;
+  }
+}
+
 /* Settings: Desktop view */
 .setMain {
   display: flex;
@@ -51,6 +63,20 @@ body {
   .setMobileBack { display: flex }
 }
 
+/* Settings: Phone view */
+@media (max-width: 600px) {
+  .setSbBase {
+    position: absolute;
+    width: 100vw;
+    height: 100%;
+    padding-left: 12px;
+  }
+  .setSbBase > * { width: 100% }
+  .setSidebar { max-width: unset }
+  .setBase { border-radius: 0 }
+  .setCont { height: 100vh }
+}
+
 /* HighlightJs */
 /*!
   Theme: GitHub Dark
diff --git a/packages/client/index.html b/packages/client/index.html
index 0b0342828..92c7fe3af 100644
--- a/packages/client/index.html
+++ b/packages/client/index.html
@@ -1,13 +1,10 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, user-scalable=no"
-    />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="theme-color" content="#000000" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, interactive-widget=resizes-content">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="theme-color" content="#000000">
     <link
       rel="shortcut icon"
       type="image/png"
@@ -19,7 +16,6 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <div id="floating"></div>
-
     <script src="/src/index.tsx" type="module"></script>
   </body>
 </html>
diff --git a/packages/client/src/Interface.tsx b/packages/client/src/Interface.tsx
index f66af90b7..72b501eed 100644
--- a/packages/client/src/Interface.tsx
+++ b/packages/client/src/Interface.tsx
@@ -1,4 +1,12 @@
-import { createEffect, JSX, Match, Switch } from "solid-js";
+import {
+  createEffect,
+  createSignal,
+  JSX,
+  Match,
+  on,
+  onCleanup,
+  Switch,
+} from "solid-js";
 
 import { Server } from "stoat.js";
 import { styled } from "styled-system/jsx";
@@ -15,6 +23,7 @@ import { useState } from "@revolt/state";
 import { LAYOUT_SECTIONS } from "@revolt/state/stores/Layout";
 import { CircularProgress } from "@revolt/ui";
 
+import { SlideDrawer } from "../components/ui/components/navigation/SlideDrawer";
 import { Sidebar } from "./interface/Sidebar";
 
 /**
@@ -57,9 +66,22 @@ const Interface = (props: { children: JSX.Element }) => {
     ].includes(lifecycle.state());
   }
 
+  //Drawer slider for mobile
+  let rootRef, sDrawer: SlideDrawer | null;
+  const [contRef, setContRef] = createSignal<HTMLDivElement>();
+  createEffect(
+    on(contRef, (cont) => {
+      if (cont) sDrawer = new SlideDrawer(cont, rootRef!);
+    }),
+  );
+  onCleanup(() => {
+    sDrawer?.delete();
+    sDrawer = null;
+  });
+
   return (
     <MessageCache client={client()}>
-      <div class="appRoot">
+      <div ref={rootRef} class="appRoot">
         <Titlebar />
         <Switch fallback={<CircularProgress />}>
           <Match when={!isLoggedIn()}>
@@ -90,6 +112,7 @@ const Interface = (props: { children: JSX.Element }) => {
                 })}
               />
               <Content
+                ref={setContRef}
                 class="appCont"
                 sidebar={state.layout.getSectionState(
                   LAYOUT_SECTIONS.PRIMARY_SIDEBAR,

From 0c5f6f9b14e17a26f84f03d043f19f80ee6cf277 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Tue, 17 Feb 2026 21:13:32 -0500
Subject: [PATCH 09/24] feat: Slide that SlideDrawer real smooth-like -
 Inertia-based snapping for SlideDrawer! We mustelids are experts in speed so
 this was inevitable - Fix bug that could cause a SlideDrawer race condition
 if openning and closing settings menu super fast - Add appDrawer to app state
 to update things when the state of the UI changes between mobile/non-mobile -
 Don't trigger floating tooltops when input is touched, otherwise they get
 stuck in a showing state on touchscreens - Reset layout to member sidebar
 being hidden when mobile view is shown (otherwise how to close it seems to
 cause some confusion among those who helped test so far) - Replace primary
 sidebar collapse button with a "back" button for mobie view

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../components/modal/modals/Settings.tsx      |  2 +-
 packages/client/components/state/index.tsx    |  8 ++
 .../ui/components/floating/Tooltip.tsx        |  8 +-
 .../ui/components/navigation/SlideDrawer.ts   | 93 ++++++++++++++-----
 .../components/ui/directives/floating.ts      | 13 ++-
 packages/client/src/Interface.tsx             | 19 ++--
 .../src/interface/common/CommonHeader.tsx     | 29 +++++-
 7 files changed, 131 insertions(+), 41 deletions(-)

diff --git a/packages/client/components/modal/modals/Settings.tsx b/packages/client/components/modal/modals/Settings.tsx
index 38a67de4f..ecee45609 100644
--- a/packages/client/components/modal/modals/Settings.tsx
+++ b/packages/client/components/modal/modals/Settings.tsx
@@ -22,7 +22,7 @@ export function SettingsModal(
   const [contRef, setContRef] = createSignal<HTMLDivElement>();
   createEffect(
     on(contRef, (cont) => {
-      if (cont) sDrawer = new SlideDrawer(cont, rootRef!);
+      if (cont && !sDrawer) sDrawer = new SlideDrawer(cont, rootRef!);
     }),
   );
   onCleanup(() => {
diff --git a/packages/client/components/state/index.tsx b/packages/client/components/state/index.tsx
index 6296c5b58..08eac543b 100644
--- a/packages/client/components/state/index.tsx
+++ b/packages/client/components/state/index.tsx
@@ -12,6 +12,7 @@ import equal from "fast-deep-equal";
 import localforage from "localforage";
 
 import { isMobileBrowser } from "@livekit/components-core";
+import { SlideDrawer } from "@revolt/ui/components/navigation/SlideDrawer";
 import { AbstractStore, Store } from "./stores";
 import { Auth } from "./stores/Auth";
 import { Draft } from "./stores/Draft";
@@ -47,7 +48,10 @@ export class State {
   private store: Store;
   private setStore: SetStoreFunction<Store>;
   private writeQueue: Record<string, number>;
+
   isMobile: boolean;
+  appDrawer;
+  setAppDrawer;
 
   // define all stores
   auth = new Auth(this);
@@ -102,6 +106,10 @@ export class State {
     this.setStore = setStore;
     this.writeQueue = {};
     this.isMobile = isMobileBrowser();
+
+    const [ad, setAd] = createSignal<SlideDrawer | null>();
+    this.appDrawer = ad;
+    this.setAppDrawer = setAd;
   }
 
   /**
diff --git a/packages/client/components/ui/components/floating/Tooltip.tsx b/packages/client/components/ui/components/floating/Tooltip.tsx
index c8228e6e6..2b212d3dc 100644
--- a/packages/client/components/ui/components/floating/Tooltip.tsx
+++ b/packages/client/components/ui/components/floating/Tooltip.tsx
@@ -35,12 +35,6 @@ export function Tooltip(props: Props) {
   const [local, remote] = splitProps(props, ["children"]);
 
   return (
-    <div
-      use:floating={{
-        tooltip: remote as never,
-      }}
-    >
-      {local.children}
-    </div>
+    <div use:floating={{ tooltip: remote as never }}>{local.children}</div>
   );
 }
diff --git a/packages/client/components/ui/components/navigation/SlideDrawer.ts b/packages/client/components/ui/components/navigation/SlideDrawer.ts
index 8f8072b9d..a38c1415c 100644
--- a/packages/client/components/ui/components/navigation/SlideDrawer.ts
+++ b/packages/client/components/ui/components/navigation/SlideDrawer.ts
@@ -1,4 +1,7 @@
-const ANIM_MS = 500,
+const ANIM_MS = 200,
+  VEL_MS = 33, //30Hz velocity update
+  VEL_AVG = 5, //Moving avg smoothing
+  VEL_TRIG = 0.5, //Override drawer pos if over
   TRIG_X = 20,
   CANCEL_Y = 20;
 
@@ -11,6 +14,8 @@ type TrackTouch = {
   prevX?: number;
   prevT?: number;
   trig?: boolean;
+  vAvg?: Array<number>;
+  vOfs?: number;
 };
 
 export class SlideDrawer {
@@ -18,15 +23,21 @@ export class SlideDrawer {
   private media;
   private touch: TrackTouch | null = null;
   private tTmr: NodeJS.Timeout | null = null;
+  private vTmr: NodeJS.Timeout | null = null;
   private ofs = 0;
 
   constructor(
     private drawer: HTMLElement,
     private root: HTMLElement,
+    public onStateChanged: ((en: boolean) => void) | null = null,
   ) {
     console.log("INIT", drawer, root);
-    root.ontouchstart = this.start.bind(this);
-    root.ontouchmove = root.ontouchend = this.move.bind(this);
+
+    this.start = this.start.bind(this);
+    this.move = this.move.bind(this);
+    root.addEventListener("touchstart", this.start);
+    root.addEventListener("touchmove", this.move);
+    root.addEventListener("touchend", this.move);
 
     //Auto-enable based on device width
     const pwMax = getComputedStyle(document.body).getPropertyValue(
@@ -39,10 +50,7 @@ export class SlideDrawer {
 
   private start(e: TouchEvent) {
     //Cancel if more than one finger
-    if (e.touches.length > 1) {
-      this.touch = null;
-      return;
-    }
+    if (e.touches.length > 1) return this.endTouch();
     if (this.touch || !this.enabled) return;
 
     //Track this touch
@@ -76,12 +84,18 @@ export class SlideDrawer {
 
     if (!trig && Math.abs(dy) > CANCEL_Y) {
       console.log("CANCEL at Y", dy);
-      this.touch = null;
+      this.endTouch();
     } else if (trig || Math.abs(dx) > TRIG_X) {
+      //Store new/prev X for vel calc
+      const type = trig ? "new" : "prev";
+      t[`${type}X`] = dx;
+      t[`${type}T`] = performance.now();
+
       if (!trig) {
         console.log("TRIG at X", dx);
         t.trig = trig = true;
         this.tfTimer();
+        this.velTimer();
       }
 
       dx = Math.max(Math.min(this.ofs + dx, 0), max);
@@ -92,15 +106,52 @@ export class SlideDrawer {
 
     if (isEnd) {
       console.log("END at X", dx);
+      if (trig) {
+        //Calc avg vel
+        let vel = 0;
+        if (t.vAvg) {
+          let v;
+          for (v of t.vAvg) vel += v;
+          vel /= t.vAvg.length;
+        }
+        //Finalize show/hide state
+        let show = dx < max / 2;
+        if (vel > VEL_TRIG) show = false;
+        else if (vel < -VEL_TRIG) show = true;
+        this.tfTimer(true, show);
+      }
+      this.endTouch();
+    }
+  }
 
-      //TODO: Calc avg velocity and smooth w/ moving avg or something
-      //If velocity at touchend is higher than threshold,
-      //overrides the show/hide result regardless of drawer position
+  private velTimer() {
+    if (this.vTmr) return;
+    this.vTmr = setInterval(() => {
+      const t = this.touch;
+      if (!t || !t.newT) return;
+
+      //Velocity since last update
+      const stale = t.prevT === t.newT,
+        vel = stale ? 0 : (t.newX! - t.prevX!) / (t.newT! - t.prevT!);
+
+      t.prevX = t.newX;
+      t.prevT = t.newT;
+
+      if (t.vAvg) {
+        //Insert at vOfs
+        t.vAvg[t.vOfs!] = vel;
+        if (++t.vOfs! === VEL_AVG) t.vOfs = 0;
+      } else {
+        //Fill with first data
+        t.vAvg = [vel];
+        t.vOfs = 1;
+      }
+    }, VEL_MS);
+  }
 
-      //Finalize show/hide state
-      if (trig) this.tfTimer(true, dx < max / 2);
-      this.touch = null;
-    }
+  private endTouch() {
+    clearInterval(this.vTmr!);
+    this.touch = this.vTmr = null;
   }
 
   private tfTimer(set = false, show = false) {
@@ -135,22 +186,22 @@ export class SlideDrawer {
   delete() {
     console.log("DEL");
     this.setEnabled(false);
-    this.root.ontouchstart =
-      this.root.ontouchmove =
-      this.root.ontouchend =
-      this.media.onchange =
-        null;
+    this.root.removeEventListener("touchstart", this.start);
+    this.root.removeEventListener("touchmove", this.move);
+    this.root.removeEventListener("touchend", this.move);
+    this.media.onchange = null;
   }
 
   setEnabled(en: boolean) {
     if (this.enabled !== en) {
       this.drawer.style.zIndex = en ? "1" : "";
       this.tfTimer();
-      this.touch = null;
+      this.endTouch();
       if (!en) this.setElState(true);
       this.ofs = 0;
     }
     this.enabled = en;
+    if (this.onStateChanged) this.onStateChanged(en);
   }
 
   isShown() {
diff --git a/packages/client/components/ui/directives/floating.ts b/packages/client/components/ui/directives/floating.ts
index d745be7eb..3171623d8 100644
--- a/packages/client/components/ui/directives/floating.ts
+++ b/packages/client/components/ui/directives/floating.ts
@@ -125,11 +125,13 @@ export function floating(element: HTMLElement, accessor: Accessor<Props>) {
     trigger("contextMenu");
   }
 
+  let isTouch = false;
+
   /**
    * Handle mouse entering
    */
   function onMouseEnter() {
-    trigger("tooltip", true);
+    if (!isTouch) trigger("tooltip", true);
   }
 
   /**
@@ -139,6 +141,11 @@ export function floating(element: HTMLElement, accessor: Accessor<Props>) {
     trigger("tooltip", false);
   }
 
+  function onTouch() {
+    isTouch = true;
+    setTimeout(() => (isTouch = false), 100);
+  }
+
   createEffect(
     on(
       () => accessor().userCard,
@@ -166,10 +173,14 @@ export function floating(element: HTMLElement, accessor: Accessor<Props>) {
 
           element.addEventListener("mouseenter", onMouseEnter);
           element.addEventListener("mouseleave", onMouseLeave);
+          element.addEventListener("touchstart", onTouch);
+          element.addEventListener("touchend", onTouch);
 
           onCleanup(() => {
             element.removeEventListener("mouseenter", onMouseEnter);
             element.removeEventListener("mouseleave", onMouseLeave);
+            element.addEventListener("touchstart", onTouch);
+            element.addEventListener("touchend", onTouch);
           });
         }
       },
diff --git a/packages/client/src/Interface.tsx b/packages/client/src/Interface.tsx
index 72b501eed..22dc07f82 100644
--- a/packages/client/src/Interface.tsx
+++ b/packages/client/src/Interface.tsx
@@ -40,10 +40,7 @@ const Interface = (props: { children: JSX.Element }) => {
     if (!e.defaultPrevented) {
       if (e.to === "/settings") {
         e.preventDefault();
-        openModal({
-          type: "settings",
-          config: "user",
-        });
+        openModal({ type: "settings", config: "user" });
       } else if (typeof e.to === "string") {
         state.layout.setLastActivePath(e.to);
       }
@@ -69,14 +66,24 @@ const Interface = (props: { children: JSX.Element }) => {
   //Drawer slider for mobile
   let rootRef, sDrawer: SlideDrawer | null;
   const [contRef, setContRef] = createSignal<HTMLDivElement>();
+  function rstLayout() {
+    state.layout.setSectionState(LAYOUT_SECTIONS.PRIMARY_SIDEBAR, false, false);
+    state.layout.setSectionState(LAYOUT_SECTIONS.MEMBER_SIDEBAR, false, true);
+  }
   createEffect(
     on(contRef, (cont) => {
-      if (cont) sDrawer = new SlideDrawer(cont, rootRef!);
+      if (!cont || sDrawer) return;
+      sDrawer = new SlideDrawer(cont, rootRef!, (en) => {
+        setTimeout(() => {
+          state.setAppDrawer(en ? sDrawer : null);
+          if (en) rstLayout();
+        }, 1);
+      });
     }),
   );
   onCleanup(() => {
     sDrawer?.delete();
-    sDrawer = null;
+    state.setAppDrawer((sDrawer = null));
   });
 
   return (
diff --git a/packages/client/src/interface/common/CommonHeader.tsx b/packages/client/src/interface/common/CommonHeader.tsx
index 3659db902..27235f3df 100644
--- a/packages/client/src/interface/common/CommonHeader.tsx
+++ b/packages/client/src/interface/common/CommonHeader.tsx
@@ -1,6 +1,9 @@
 import { BiRegularChevronLeft, BiRegularChevronRight } from "solid-icons/bi";
+
 import { JSX, Match, Switch } from "solid-js";
 
+import MdArrowBack from "@material-design-icons/svg/outlined/arrow_back.svg?component-solid";
+
 import { useLingui } from "@lingui-solid/solid/macro";
 import { css } from "styled-system/css";
 
@@ -19,9 +22,15 @@ export function HeaderIcon(props: { children: JSX.Element }) {
   return (
     <div
       class={container}
-      onClick={() =>
-        state.layout.toggleSectionState(LAYOUT_SECTIONS.PRIMARY_SIDEBAR, true)
-      }
+      onClick={() => {
+        const ad = state.appDrawer();
+        if (ad) ad.setShown(false);
+        else
+          state.layout.toggleSectionState(
+            LAYOUT_SECTIONS.PRIMARY_SIDEBAR,
+            true,
+          );
+      }}
       use:floating={{
         tooltip: {
           placement: "bottom",
@@ -29,7 +38,17 @@ export function HeaderIcon(props: { children: JSX.Element }) {
         },
       }}
     >
-      <Switch fallback={<BiRegularChevronRight size={20} />}>
+      <Switch
+        fallback={
+          <>
+            <BiRegularChevronRight size={20} />
+            {props.children}
+          </>
+        }
+      >
+        <Match when={state.appDrawer()}>
+          <MdArrowBack />
+        </Match>
         <Match
           when={state.layout.getSectionState(
             LAYOUT_SECTIONS.PRIMARY_SIDEBAR,
@@ -37,9 +56,9 @@ export function HeaderIcon(props: { children: JSX.Element }) {
           )}
         >
           <BiRegularChevronLeft size={20} />
+          {props.children}
         </Match>
       </Switch>
-      {props.children}
     </div>
   );
 }

From ec8a9544b8a2a9141301d2ec28212f327ee3a1dc Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Tue, 17 Feb 2026 21:13:51 -0500
Subject: [PATCH 10/24] fix: Enable mobile autocorrect and autocapitalize on
 text input

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../ui/components/features/texteditor/TextEditor2.tsx     | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/client/components/ui/components/features/texteditor/TextEditor2.tsx b/packages/client/components/ui/components/features/texteditor/TextEditor2.tsx
index 09679d212..a45f54729 100644
--- a/packages/client/components/ui/components/features/texteditor/TextEditor2.tsx
+++ b/packages/client/components/ui/components/features/texteditor/TextEditor2.tsx
@@ -85,7 +85,7 @@ export function TextEditor2(props: Props) {
   const enterKeymap = keymap.of([
     {
       key: isMobile ? "Ctrl-Enter" : "Enter",
-      //TODO: This is not working right, mobile seems to not trigger the function
+      //TODO Ctrl-Enter is only detected on Firefox mobile, not Chrome mobile
       run: (view) => {
         if (!props.onComplete) return false;
 
@@ -123,7 +123,11 @@ export function TextEditor2(props: Props) {
       doc: props.initialValue?.[0],
       extensions: [
         /* Enable browser spellchecking */
-        EditorView.contentAttributes.of({ spellcheck: "true" }),
+        EditorView.contentAttributes.of({
+          spellcheck: "true",
+          autocorrect: "true",
+          autocapitalize: "true",
+        }),
 
         /* Mount keymaps */
         enterKeymap,

From 33756e60bfc0169db8f62527e2e0c054bfa14dc9 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Thu, 19 Feb 2026 12:58:39 -0500
Subject: [PATCH 11/24] fix: Un-round them corners for portrait phone view

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 packages/client/components/ui/styles.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/client/components/ui/styles.css b/packages/client/components/ui/styles.css
index afdb50cd2..16e56f353 100644
--- a/packages/client/components/ui/styles.css
+++ b/packages/client/components/ui/styles.css
@@ -36,6 +36,10 @@ body {
 
 /* Main: Phone view */
 @media (max-width: 600px) {
+  main {
+    margin: 0;
+    border-radius: 0;
+  }
   .appSbBase { flex-grow: 1 }
   .appSidebar {
     --layout-width-channel-sidebar: auto;

From e9361e0cb1265c676737f4449957d82a6820052e Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Sat, 21 Feb 2026 11:48:56 -0500
Subject: [PATCH 12/24] fix: Hide message content when message is image link
 (not only for GIFs) - Remove redundant Show than For's in Message.tsx -
 Refine SlideDrawer inertia detection by always recalculating final velocity
 at end - Enable PWA for dev build for testing - Update assets

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 packages/client/assets                        |  2 +-
 .../app/interface/channels/text/Message.tsx   | 88 +++++++++----------
 .../ui/components/navigation/SlideDrawer.ts   | 53 ++++++-----
 packages/client/vite.config.ts                |  3 +
 4 files changed, 77 insertions(+), 69 deletions(-)

diff --git a/packages/client/assets b/packages/client/assets
index f10694665..bd432f229 160000
--- a/packages/client/assets
+++ b/packages/client/assets
@@ -1 +1 @@
-Subproject commit f106946659af67ad4f008588ac51570029b2fd47
+Subproject commit bd432f2298901a8566a092636eef0c35a3a80fbc
diff --git a/packages/client/components/app/interface/channels/text/Message.tsx b/packages/client/components/app/interface/channels/text/Message.tsx
index 67997ed34..103eee128 100644
--- a/packages/client/components/app/interface/channels/text/Message.tsx
+++ b/packages/client/components/app/interface/channels/text/Message.tsx
@@ -77,16 +77,18 @@ export function Message(props: Props) {
   const [isHovering, setIsHovering] = createSignal(false);
 
   /**
-   * Determine whether this message only contains a GIF
+   * Determine if this message only contains an image
    */
-  const isOnlyGIF = () =>
+  const isOnlyImg = () =>
     props.message.embeds &&
     props.message.embeds.length === 1 &&
-    props.message.embeds[0].type === "Website" &&
-    ((props.message.embeds[0] as WebsiteEmbed).specialContent?.type === "GIF" ||
-      (props.message.embeds[0] as WebsiteEmbed).originalUrl?.startsWith(
-        "https://tenor.com",
-      )) &&
+    (props.message.embeds[0].type === "Image" ||
+      (props.message.embeds[0].type === "Website" &&
+        ((props.message.embeds[0] as WebsiteEmbed).specialContent?.type ===
+          "GIF" ||
+          (props.message.embeds[0] as WebsiteEmbed).originalUrl?.startsWith(
+            "https://tenor.com",
+          )))) &&
     props.message.content &&
     !props.message.content.replace(RE_URL, "").length;
 
@@ -135,7 +137,11 @@ export function Message(props: Props) {
           />
         </div>
       }
-      contextMenu={() => <MessageContextMenu message={props.message} />}
+      contextMenu={() =>
+        props.editing ? undefined : (
+          <MessageContextMenu message={props.message} />
+        )
+      }
       timestamp={props.message.createdAt}
       edited={props.message.editedAt}
       mentioned={props.message.mentioned}
@@ -144,31 +150,29 @@ export function Message(props: Props) {
       isLink={props.isLink}
       tail={props.tail || state.settings.getValue("appearance:compact_mode")}
       header={
-        <Show when={props.message.replyIds}>
-          <For each={props.message.replyIds}>
-            {(reply_id) => {
-              /**
-               * Signal the actual message
-               */
-              const message = () => client().messages.get(reply_id);
+        <For each={props.message.replyIds}>
+          {(reply_id) => {
+            /**
+             * Signal the actual message
+             */
+            const message = () => client().messages.get(reply_id);
 
-              onMount(() => {
-                if (!message()) {
-                  props.message.channel!.fetchMessage(reply_id);
-                }
-              });
+            onMount(() => {
+              if (!message()) {
+                props.message.channel!.fetchMessage(reply_id);
+              }
+            });
 
-              return (
-                <MessageReply
-                  mention={props.message.mentionIds?.includes(
-                    message()!.authorId!,
-                  )}
-                  message={message()}
-                />
-              );
-            }}
-          </For>
-        </Show>
+            return (
+              <MessageReply
+                mention={props.message.mentionIds?.includes(
+                  message()!.authorId!,
+                )}
+                message={message()}
+              />
+            );
+          }}
+        </For>
       }
       info={
         <Switch fallback={<div />}>
@@ -276,24 +280,20 @@ export function Message(props: Props) {
         <Match when={props.editing}>
           <EditMessage message={props.message} />
         </Match>
-        <Match when={props.message.content && !isOnlyGIF()}>
+        <Match when={props.message.content && !isOnlyImg()}>
           <BreakText>
             <Markdown content={props.message.content!} />
           </BreakText>
         </Match>
       </Switch>
-      <Show when={props.message.attachments}>
-        <For each={props.message.attachments}>
-          {(attachment) => (
-            <Attachment message={props.message} file={attachment} />
-          )}
-        </For>
-      </Show>
-      <Show when={props.message.embeds}>
-        <For each={props.message.embeds}>
-          {(embed) => <Embed embed={embed} />}
-        </For>
-      </Show>
+      <For each={props.message.attachments}>
+        {(attachment) => (
+          <Attachment message={props.message} file={attachment} />
+        )}
+      </For>
+      <For each={props.message.embeds}>
+        {(embed) => <Embed embed={embed} />}
+      </For>
       <Reactions
         reactions={props.message.reactions as never as Map<string, Set<string>>}
         interactions={props.message.interactions}
diff --git a/packages/client/components/ui/components/navigation/SlideDrawer.ts b/packages/client/components/ui/components/navigation/SlideDrawer.ts
index a38c1415c..43a1e7f30 100644
--- a/packages/client/components/ui/components/navigation/SlideDrawer.ts
+++ b/packages/client/components/ui/components/navigation/SlideDrawer.ts
@@ -1,8 +1,8 @@
 const ANIM_MS = 200,
   VEL_MS = 33, //30Hz velocity update
   VEL_AVG = 5, //Moving avg smoothing
-  VEL_TRIG = 0.5, //Override drawer pos if over
-  TRIG_X = 20,
+  VEL_TRIG = 0.3, //Override drawer pos if over
+  TRIG_X = 10,
   CANCEL_Y = 20;
 
 type TrackTouch = {
@@ -105,8 +105,8 @@ export class SlideDrawer {
     }
 
     if (isEnd) {
-      console.log("END at X", dx);
       if (trig) {
+        this.addVel();
         //Calc avg vel
         let vel = 0;
         if (t.vAvg) {
@@ -119,6 +119,7 @@ export class SlideDrawer {
         if (vel > VEL_TRIG) show = false;
         else if (vel < -VEL_TRIG) show = true;
         this.tfTimer(true, show);
+        console.log("END at X", dx, vel);
       }
       this.endTouch();
     }
@@ -126,27 +127,31 @@ export class SlideDrawer {
 
   private velTimer() {
     if (this.vTmr) return;
-    this.vTmr = setInterval(() => {
-      const t = this.touch;
-      if (!t || !t.newT) return;
-
-      //Velocity since last update
-      const stale = t.prevT === t.newT,
-        vel = stale ? 0 : (t.newX! - t.prevX!) / (t.newT! - t.prevT!);
-
-      t.prevX = t.newX;
-      t.prevT = t.newT;
-
-      if (t.vAvg) {
-        //Insert at vOfs
-        t.vAvg[t.vOfs!] = vel;
-        if (++t.vOfs! === VEL_AVG) t.vOfs = 0;
-      } else {
-        //Fill with first data
-        t.vAvg = [vel];
-        t.vOfs = 1;
-      }
-    }, VEL_MS);
+    this.vTmr = setInterval(this.addVel.bind(this), VEL_MS);
+  }
+
+  private addVel(skipStale = false) {
+    const t = this.touch;
+    if (!t || !t.newT) return;
+
+    //Velocity since last update
+    const stale = t.prevT === t.newT,
+      vel = stale ? 0 : (t.newX! - t.prevX!) / (t.newT! - t.prevT!);
+
+    if (stale && skipStale) return;
+
+    t.prevX = t.newX;
+    t.prevT = t.newT;
+
+    if (t.vAvg) {
+      //Insert at vOfs
+      t.vAvg[t.vOfs!] = vel;
+      if (++t.vOfs! === VEL_AVG) t.vOfs = 0;
+    } else {
+      //Fill with first data
+      t.vAvg = [vel];
+      t.vOfs = 1;
+    }
   }
 
   private endTouch() {
diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index ff6df4a38..7f18e5d0b 100644
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -33,6 +33,9 @@ export default defineConfig({
       injectManifest: {
         maximumFileSizeToCacheInBytes: 4000000,
       },
+      devOptions: {
+        enabled: true,
+      },
       manifest: {
         name: "Stoat",
         short_name: "Stoat",

From 4f02b2864b33adbaa2d52122605204d92b96d0c8 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Sat, 21 Feb 2026 15:20:47 -0500
Subject: [PATCH 13/24] fix: Sensible margains for modals on mobile to prevent
 weird scroll behavior - On mobile, skip UserCard preview (which doesn't look
 right on small displays) when tapping user icon and go straight to full
 UserProfile modal

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../ui/components/design/Dialog.tsx           |  1 +
 .../ui/components/floating/UserCard.tsx       | 57 +++++++++++--------
 packages/client/components/ui/styles.css      |  1 +
 3 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/packages/client/components/ui/components/design/Dialog.tsx b/packages/client/components/ui/components/design/Dialog.tsx
index 20f5a1926..5e290c909 100644
--- a/packages/client/components/ui/components/design/Dialog.tsx
+++ b/packages/client/components/ui/components/design/Dialog.tsx
@@ -43,6 +43,7 @@ export function Dialog(props: Props) {
       <Dialog.Scrim
         show={props.show}
         onClick={props.onClose}
+        class="dialogScrim"
         style={{
           "--background": props.scrimBackground
             ? `url('${props.scrimBackground}'), rgba(0, 0, 0, 0.6)`
diff --git a/packages/client/components/ui/components/floating/UserCard.tsx b/packages/client/components/ui/components/floating/UserCard.tsx
index 9a76c0ffa..3c15a2765 100644
--- a/packages/client/components/ui/components/floating/UserCard.tsx
+++ b/packages/client/components/ui/components/floating/UserCard.tsx
@@ -1,4 +1,4 @@
-import { JSX } from "solid-js";
+import { JSX, Show } from "solid-js";
 
 import { useQuery } from "@tanstack/solid-query";
 import { cva } from "styled-system/css";
@@ -6,6 +6,7 @@ import { styled } from "styled-system/jsx";
 
 import { useModals } from "@revolt/modal";
 
+import { useState } from "@revolt/state";
 import { Profile } from "../features";
 
 /**
@@ -33,42 +34,48 @@ export function UserCard(
   props: JSX.Directives["floating"]["userCard"] &
     object & { onClose: () => void },
 ) {
+  const { isMobile } = useState();
   const { openModal } = useModals();
   const query = useQuery(() => ({
     queryKey: ["profile", props.user.id],
     queryFn: () => props.user.fetchProfile(),
   }));
 
-  function openFull() {
+  function openProfile() {
     openModal({ type: "user_profile", user: props.user });
+  }
+  function openFull() {
+    openProfile();
     props.onClose();
   }
 
   return (
-    <div
-      use:invisibleScrollable={{ class: base() }}
-      onMouseDown={(e) => {
-        e.preventDefault();
-        e.stopImmediatePropagation();
-      }}
-    >
-      <Grid>
-        <Profile.Banner
-          width={2}
-          user={props.user}
-          member={props.member}
-          bannerUrl={query.data?.animatedBannerURL}
-          onClick={openFull}
-        />
+    <Show when={!isMobile || openProfile()}>
+      <div
+        use:invisibleScrollable={{ class: base() }}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+        }}
+      >
+        <Grid>
+          <Profile.Banner
+            width={2}
+            user={props.user}
+            member={props.member}
+            bannerUrl={query.data?.animatedBannerURL}
+            onClick={openFull}
+          />
 
-        <Profile.Actions user={props.user} member={props.member} width={2} />
-        <Profile.Roles member={props.member} />
-        <Profile.Badges user={props.user} />
-        <Profile.Status user={props.user} />
-        <Profile.Joined user={props.user} member={props.member} />
-        <Profile.Bio content={query.data?.content} onClick={openFull} />
-      </Grid>
-    </div>
+          <Profile.Actions user={props.user} member={props.member} width={2} />
+          <Profile.Roles member={props.member} />
+          <Profile.Badges user={props.user} />
+          <Profile.Status user={props.user} />
+          <Profile.Joined user={props.user} member={props.member} />
+          <Profile.Bio content={query.data?.content} onClick={openFull} />
+        </Grid>
+      </div>
+    </Show>
   );
 }
 
diff --git a/packages/client/components/ui/styles.css b/packages/client/components/ui/styles.css
index 16e56f353..a0dcae40a 100644
--- a/packages/client/components/ui/styles.css
+++ b/packages/client/components/ui/styles.css
@@ -40,6 +40,7 @@ body {
     margin: 0;
     border-radius: 0;
   }
+  .dialogScrim { padding: 30px }
   .appSbBase { flex-grow: 1 }
   .appSidebar {
     --layout-width-channel-sidebar: auto;

From 3d3531741c4999971c398a13ed17233384bc95d9 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Sat, 21 Feb 2026 15:26:33 -0500
Subject: [PATCH 14/24] feat: TryPWA install dialog

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 packages/client/components/client/index.tsx   | 45 +++++++++++------
 packages/client/components/modal/modals.tsx   |  3 ++
 .../client/components/modal/modals/TryPWA.tsx | 49 +++++++++++++++++++
 packages/client/components/modal/types.ts     |  3 ++
 packages/client/components/state/index.tsx    |  1 +
 .../components/state/stores/Settings.ts       |  6 +++
 packages/client/src/index.tsx                 |  4 ++
 7 files changed, 95 insertions(+), 16 deletions(-)
 create mode 100644 packages/client/components/modal/modals/TryPWA.tsx

diff --git a/packages/client/components/client/index.tsx b/packages/client/components/client/index.tsx
index 47741e438..007780dc9 100644
--- a/packages/client/components/client/index.tsx
+++ b/packages/client/components/client/index.tsx
@@ -26,30 +26,43 @@ 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;
+    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,
+        );
+      }
+    }
 
+    //Show TryPWA modal
     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,
-      );
-    }
+      props.state.isMobile &&
+      cycleState === LifecycleState.Connected &&
+      !props.state.settings.getValue("pwa:shown") &&
+      !isOpen("try_pwa")
+    )
+      openModal({ type: "try_pwa" });
   });
 
   createEffect(
diff --git a/packages/client/components/modal/modals.tsx b/packages/client/components/modal/modals.tsx
index 9da2b50ee..0ddacd3be 100644
--- a/packages/client/components/modal/modals.tsx
+++ b/packages/client/components/modal/modals.tsx
@@ -53,6 +53,7 @@ import { ServerInfoModal } from "./modals/ServerInfo";
 import { SettingsModal } from "./modals/Settings";
 import { SignOutSessionsModal } from "./modals/SignOutSessions";
 import { SignedOutModal } from "./modals/SignedOut";
+import { TryPWAModal } from "./modals/TryPWA";
 import { UserProfileModal } from "./modals/UserProfile";
 import { UserProfileMutualFriendsModal } from "./modals/UserProfileMutualFriends";
 import { UserProfileMutualGroupsModal } from "./modals/UserProfileMutualGroups";
@@ -183,6 +184,8 @@ export function RenderModal(props: ActiveModal & { onClose: () => void }) {
       return <ResetBotTokenModal {...modalProps} />;
     case "edit_category":
       return <EditCategoryModal {...modalProps} />;
+    case "try_pwa":
+      return <TryPWAModal {...modalProps} />;
 
     default:
       console.error(
diff --git a/packages/client/components/modal/modals/TryPWA.tsx b/packages/client/components/modal/modals/TryPWA.tsx
new file mode 100644
index 000000000..62ead9097
--- /dev/null
+++ b/packages/client/components/modal/modals/TryPWA.tsx
@@ -0,0 +1,49 @@
+import { Trans } from "@lingui-solid/solid/macro";
+
+import { Dialog, DialogProps, iconSize } from "@revolt/ui";
+
+import MdInfo from "@material-design-icons/svg/outlined/error.svg?component-solid";
+
+import { t } from "@lingui/core/macro";
+import { useState } from "@revolt/state";
+import { Modals } from "../types";
+
+export function TryPWAModal(props: DialogProps & Modals & { type: "try_pwa" }) {
+  const state = useState();
+
+  return (
+    <Dialog
+      icon={<MdInfo {...iconSize(24)} />}
+      show={props.show}
+      onClose={() => {
+        state.settings.setValue("pwa:shown", true);
+        props.onClose();
+      }}
+      title={<Trans>Did you know?</Trans>}
+      actions={[
+        { text: <Trans>Close</Trans> },
+        {
+          text: <Trans>Install</Trans>,
+          onClick: () => {
+            // @ts-expect-error PWA event not recognized
+            if (state.pwaPrompt) state.pwaPrompt.prompt();
+            else
+              alert(
+                t`Sorry, your device doesn't support auto-install. Check your browser's menu for the 'Add to Home Screen' option.`,
+              );
+          },
+        },
+      ]}
+    >
+      <Trans>
+        You can <b>install</b> this Web App on your devive for conveient access
+        from the Home Screen, just like a real app. It even hides the huge menu
+        bar!
+        <br />
+        <br />
+        To install, tap the button below or open your browser's menu and choose
+        <b> Add to Home Screen</b>.
+      </Trans>
+    </Dialog>
+  );
+}
diff --git a/packages/client/components/modal/types.ts b/packages/client/components/modal/types.ts
index a6c6a020e..48c7cc048 100644
--- a/packages/client/components/modal/types.ts
+++ b/packages/client/components/modal/types.ts
@@ -314,4 +314,7 @@ export type Modals =
       type: "edit_category";
       server: Server;
       category: CategoryData;
+    }
+  | {
+      type: "try_pwa";
     };
diff --git a/packages/client/components/state/index.tsx b/packages/client/components/state/index.tsx
index 08eac543b..c77638f56 100644
--- a/packages/client/components/state/index.tsx
+++ b/packages/client/components/state/index.tsx
@@ -50,6 +50,7 @@ export class State {
   private writeQueue: Record<string, number>;
 
   isMobile: boolean;
+  pwaPrompt: Event | undefined;
   appDrawer;
   setAppDrawer;
 
diff --git a/packages/client/components/state/stores/Settings.ts b/packages/client/components/state/stores/Settings.ts
index 1aee0a92e..8748d890d 100644
--- a/packages/client/components/state/stores/Settings.ts
+++ b/packages/client/components/state/stores/Settings.ts
@@ -68,6 +68,11 @@ interface SettingsDefinition {
    * Last read changelog index
    */
   "changelog:last_index": number;
+
+  /**
+   * Whether the user has seen the TryPWA dialog
+   */
+  "pwa:shown": boolean;
 }
 
 /**
@@ -95,6 +100,7 @@ const EXPECTED_TYPES: { [K in keyof SettingsDefinition]: ValueType<K> } = {
   "advanced:copy_id": "boolean",
   "advanced:admin_panel": "boolean",
   "changelog:last_index": "number",
+  "pwa:shown": "boolean",
 };
 
 /**
diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx
index 28ab542a4..7b5b506b6 100644
--- a/packages/client/src/index.tsx
+++ b/packages/client/src/index.tsx
@@ -108,8 +108,12 @@ function BotRedirect() {
   return <PWARedirect />;
 }
 
+let pwaPrompt: Event;
+addEventListener("beforeinstallprompt", (e) => (pwaPrompt = e));
+
 function MountContext(props: { children?: JSX.Element }) {
   const state = useState();
+  state.pwaPrompt = pwaPrompt;
 
   /**
    * Tanstack Query client

From 020aa179277d4b9ad11fa8589e62d19fc70a2fe2 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Sun, 22 Feb 2026 02:37:37 -0500
Subject: [PATCH 15/24] fix: Small chance that two modals have the same ID
 using Math.random for ID

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 packages/client/components/modal/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/components/modal/index.tsx b/packages/client/components/modal/index.tsx
index 5bedbb8dd..3f9838839 100644
--- a/packages/client/components/modal/index.tsx
+++ b/packages/client/components/modal/index.tsx
@@ -60,11 +60,11 @@ export class ModalController {
    * @param props Modal parameters
    */
   openModal(props: Modals) {
-    const id = Math.random().toString();
+    //Unique ID from clock that can't run backwards
+    const id = performance.now().toString();
     this.setModals((modals) => [
       ...modals,
       {
-        // just need something unique
         id,
         show: true,
         props,

From 077f2a113fd7e521de1cc57dafb8c48fb16802e8 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Sun, 22 Feb 2026 04:18:51 -0500
Subject: [PATCH 16/24] fix: Clicking channels/DMs/settings buttons opens slide
 drawer on mobile

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../settings/_layout/SidebarButton.tsx        |  20 +-
 .../app/interface/settings/index.tsx          |   5 +-
 .../interface/settings/user/_AccountCard.tsx  |   2 +-
 .../components/modal/modals/Settings.tsx      |   8 +-
 packages/client/components/state/index.tsx    |   6 +
 .../ui/components/design/MenuButton.tsx       |  69 ++++-
 .../navigation/channels/HomeSidebar.tsx       | 288 +++++++++---------
 .../navigation/channels/ServerSidebar.tsx     | 147 +++++----
 8 files changed, 299 insertions(+), 246 deletions(-)

diff --git a/packages/client/components/app/interface/settings/_layout/SidebarButton.tsx b/packages/client/components/app/interface/settings/_layout/SidebarButton.tsx
index 9cfafa668..8cac2b552 100644
--- a/packages/client/components/app/interface/settings/_layout/SidebarButton.tsx
+++ b/packages/client/components/app/interface/settings/_layout/SidebarButton.tsx
@@ -1,9 +1,27 @@
+import { useState } from "@revolt/state";
+import { JSX, splitProps } from "solid-js";
 import { styled } from "styled-system/jsx";
 
 /**
  * Sidebar button
  */
-export const SidebarButton = styled("a", {
+export function SidebarButton(
+  props: JSX.HTMLAttributes<HTMLAnchorElement> & { noDrawer?: boolean },
+) {
+  const { diagDrawer } = useState();
+  const [local, other] = splitProps(props, ["onClick"]);
+
+  function onClick(e: Event) {
+    if (!props.noDrawer) diagDrawer()?.setShown(true);
+    // @ts-expect-error callable listener
+    if (local.onClick) local.onClick(e);
+  }
+
+  // @ts-expect-error todo dunno about this error
+  return <SidebarButtonBase {...other} onClick={onClick} />;
+}
+
+const SidebarButtonBase = styled("a", {
   base: {
     // for <Ripple />:
     position: "relative",
diff --git a/packages/client/components/app/interface/settings/index.tsx b/packages/client/components/app/interface/settings/index.tsx
index 82be8caf6..d41573f79 100644
--- a/packages/client/components/app/interface/settings/index.tsx
+++ b/packages/client/components/app/interface/settings/index.tsx
@@ -12,10 +12,7 @@ export type SettingsConfiguration<T> = {
    * @param props State information
    * @returns List
    */
-  list: (
-    context: T,
-    onClose?: () => void
-  ) => SettingsList<T>;
+  list: (context: T, onClose?: () => void) => SettingsList<T>;
 
   /**
    * Render the title of the current breadcrumb key
diff --git a/packages/client/components/app/interface/settings/user/_AccountCard.tsx b/packages/client/components/app/interface/settings/user/_AccountCard.tsx
index f93b10faa..e3fac3675 100644
--- a/packages/client/components/app/interface/settings/user/_AccountCard.tsx
+++ b/packages/client/components/app/interface/settings/user/_AccountCard.tsx
@@ -45,7 +45,7 @@ export function AccountCard() {
 
 export function BackCard(props: { onClose?: () => void }) {
   return (
-    <SidebarButton class="setMobileBack" onClick={props.onClose}>
+    <SidebarButton class="setMobileBack" onClick={props.onClose} noDrawer>
       <Ripple />
       <SidebarButtonTitle>
         <MdArrowBack />
diff --git a/packages/client/components/modal/modals/Settings.tsx b/packages/client/components/modal/modals/Settings.tsx
index ecee45609..39f9b91e0 100644
--- a/packages/client/components/modal/modals/Settings.tsx
+++ b/packages/client/components/modal/modals/Settings.tsx
@@ -5,6 +5,7 @@ import { Motion, Presence } from "solid-motionone";
 import { Settings, SettingsConfigurations } from "@revolt/app";
 import { DialogProps } from "@revolt/ui";
 
+import { useState } from "@revolt/state";
 import { SlideDrawer } from "@revolt/ui/components/navigation/SlideDrawer";
 import { Modals } from "../types";
 
@@ -14,6 +15,7 @@ import { Modals } from "../types";
 export function SettingsModal(
   props: DialogProps & Modals & { type: "settings" },
 ) {
+  const { setDiagDrawer } = useState();
   // eslint-disable-next-line solid/reactivity
   const config = SettingsConfigurations[props.config];
 
@@ -22,12 +24,14 @@ export function SettingsModal(
   const [contRef, setContRef] = createSignal<HTMLDivElement>();
   createEffect(
     on(contRef, (cont) => {
-      if (cont && !sDrawer) sDrawer = new SlideDrawer(cont, rootRef!);
+      if (!cont || sDrawer) return;
+      sDrawer = new SlideDrawer(cont, rootRef!);
+      setDiagDrawer(sDrawer);
     }),
   );
   onCleanup(() => {
     sDrawer?.delete();
-    sDrawer = null;
+    setDiagDrawer((sDrawer = null));
   });
 
   return (
diff --git a/packages/client/components/state/index.tsx b/packages/client/components/state/index.tsx
index c77638f56..0e95d7f31 100644
--- a/packages/client/components/state/index.tsx
+++ b/packages/client/components/state/index.tsx
@@ -53,6 +53,8 @@ export class State {
   pwaPrompt: Event | undefined;
   appDrawer;
   setAppDrawer;
+  diagDrawer;
+  setDiagDrawer;
 
   // define all stores
   auth = new Auth(this);
@@ -111,6 +113,10 @@ export class State {
     const [ad, setAd] = createSignal<SlideDrawer | null>();
     this.appDrawer = ad;
     this.setAppDrawer = setAd;
+
+    const [dd, setDd] = createSignal<SlideDrawer | null>();
+    this.diagDrawer = dd;
+    this.setDiagDrawer = setDd;
   }
 
   /**
diff --git a/packages/client/components/ui/components/design/MenuButton.tsx b/packages/client/components/ui/components/design/MenuButton.tsx
index 29d18a87e..37f24d447 100644
--- a/packages/client/components/ui/components/design/MenuButton.tsx
+++ b/packages/client/components/ui/components/design/MenuButton.tsx
@@ -3,6 +3,7 @@ import { JSX, Show, splitProps } from "solid-js";
 import { cva } from "styled-system/css";
 import { styled } from "styled-system/jsx";
 
+import { useState } from "@revolt/state";
 import { Ripple } from "./Ripple";
 import { Unreads } from "./Unreads";
 
@@ -43,8 +44,14 @@ export type Props = {
 /**
  * Button intended for sidebar contexts
  */
-export function MenuButton(props: Props & JSX.HTMLAttributes<HTMLDivElement>) {
+export function MenuButton(
+  props: Props &
+    JSX.HTMLAttributes<HTMLAnchorElement> &
+    JSX.HTMLAttributes<HTMLDivElement> & { href?: string },
+) {
+  const { appDrawer } = useState();
   const [local, other] = splitProps(props, [
+    "onClick",
     "attention",
     "size",
     "icon",
@@ -53,20 +60,15 @@ export function MenuButton(props: Props & JSX.HTMLAttributes<HTMLDivElement>) {
     "actions",
   ]);
 
-  return (
-    // TODO: port to panda-css to merge down components
-    <div
-      {...other}
-      classList={{
-        [base({
-          attention: local.attention,
-          size: local.size,
-        })]: true,
-      }}
-      // @codegen directives props=other include=floating
-    >
+  function onClick(e: Event) {
+    appDrawer()?.setShown(true);
+    // @ts-expect-error callable listener
+    if (local.onClick) local.onClick(e);
+  }
+
+  const cont = (
+    <>
       <Ripple />
-      {/* <Base {...other} align> */}
       {local.icon}
       <Content>{local.children}</Content>
       <Show when={local.alert}>
@@ -83,8 +85,43 @@ export function MenuButton(props: Props & JSX.HTMLAttributes<HTMLDivElement>) {
           {local.actions}
         </Actions>
       )}
-      {/* </Base> */}
-    </div>
+    </>
+  );
+
+  return (
+    // TODO: port to panda-css to merge down components
+    <Show
+      when={other.href}
+      fallback={
+        <div
+          {...other}
+          onClick={onClick}
+          classList={{
+            [base({
+              attention: local.attention,
+              size: local.size,
+            })]: true,
+          }}
+          // @codegen directives props=other include=floating
+        >
+          {cont}
+        </div>
+      }
+    >
+      <a
+        {...other}
+        onClick={onClick}
+        classList={{
+          [base({
+            attention: local.attention,
+            size: local.size,
+          })]: true,
+        }}
+        // @codegen directives props=other include=floating
+      >
+        {cont}
+      </a>
+    </Show>
   );
 }
 
diff --git a/packages/client/src/interface/navigation/channels/HomeSidebar.tsx b/packages/client/src/interface/navigation/channels/HomeSidebar.tsx
index d07477aa7..82879e7e9 100644
--- a/packages/client/src/interface/navigation/channels/HomeSidebar.tsx
+++ b/packages/client/src/interface/navigation/channels/HomeSidebar.tsx
@@ -75,37 +75,33 @@ export const HomeSidebar = (props: Props) => {
             <Trans>Conversations</Trans>
           </SidebarTitle>
 
-          <a href="/app">
-            <MenuButton
-              size="normal"
-              icon={<Symbol>home</Symbol>}
-              attention={location.pathname === "/app" ? "selected" : "normal"}
-            >
-              <ButtonTitle>
-                <Trans>Home</Trans>
-              </ButtonTitle>
-            </MenuButton>
-          </a>
+          <MenuButton
+            href="/app"
+            size="normal"
+            icon={<Symbol>home</Symbol>}
+            attention={location.pathname === "/app" ? "selected" : "normal"}
+          >
+            <ButtonTitle>
+              <Trans>Home</Trans>
+            </ButtonTitle>
+          </MenuButton>
 
           <div style={{ height: "5px" }} />
 
-          <a href="/friends">
-            <MenuButton
-              size="normal"
-              icon={<Symbol>group</Symbol>}
-              attention={
-                location.pathname === "/friends" ? "selected" : "normal"
-              }
-            >
-              <ButtonTitle>
-                <Trans>Friends</Trans>
-                <div style={{ flex: "1 1 auto" }} />
-                <Show when={pendingRequests()}>
-                  <PendingBadge>{pendingRequests()} requests</PendingBadge>
-                </Show>
-              </ButtonTitle>
-            </MenuButton>
-          </a>
+          <MenuButton
+            href="/friends"
+            size="normal"
+            icon={<Symbol>group</Symbol>}
+            attention={location.pathname === "/friends" ? "selected" : "normal"}
+          >
+            <ButtonTitle>
+              <Trans>Friends</Trans>
+              <div style={{ flex: "1 1 auto" }} />
+              <Show when={pendingRequests()}>
+                <PendingBadge>{pendingRequests()} requests</PendingBadge>
+              </Show>
+            </ButtonTitle>
+          </MenuButton>
 
           <div style={{ height: "5px" }} />
 
@@ -124,30 +120,27 @@ export const HomeSidebar = (props: Props) => {
             }
           >
             <Match when={savedNotesChannelId()}>
-              <a href={`/channel/${savedNotesChannelId()}`}>
-                <MenuButton
-                  size="normal"
-                  icon={<Symbol>note_stack</Symbol>}
-                  attention={
-                    props.channelId && savedNotesChannelId() === props.channelId
-                      ? "selected"
-                      : "normal"
-                  }
-                >
-                  <ButtonTitle>
-                    <Trans>Saved Notes</Trans>
-                  </ButtonTitle>
-                </MenuButton>
-              </a>
+              <MenuButton
+                href={`/channel/${savedNotesChannelId()}`}
+                size="normal"
+                icon={<Symbol>note_stack</Symbol>}
+                attention={
+                  props.channelId && savedNotesChannelId() === props.channelId
+                    ? "selected"
+                    : "normal"
+                }
+              >
+                <ButtonTitle>
+                  <Trans>Saved Notes</Trans>
+                </ButtonTitle>
+              </MenuButton>
             </Match>
           </Switch>
 
           <Category>
             Direct Messages
             <a
-              class={css({
-                cursor: "pointer",
-              })}
+              class={css({ cursor: "pointer" })}
               onClick={() =>
                 openModal({
                   type: "create_group",
@@ -185,7 +178,6 @@ export const HomeSidebar = (props: Props) => {
                     // @ts-expect-error missing type on Entry
                     role="listitem"
                     tabIndex={item.tabIndex}
-                    style={item.style}
                     channel={item.item}
                     active={item.item.id === props.channelId}
                     isMobile={isMobile}
@@ -291,111 +283,111 @@ function Entry(
     );
 
   return (
-    <a {...remote} href={`/channel/${local.channel.id}`}>
-      <MenuButton
-        size="normal"
-        alert={
-          !local.active &&
-          local.channel.unread &&
-          (local.channel.mentions?.size || true)
-        }
-        attention={
-          local.active
-            ? "selected"
-            : local.channel.muted
-              ? "muted"
-              : local.channel.unread
-                ? "active"
-                : "normal"
-        }
-        icon={
-          <Switch>
-            <Match when={local.channel.type === "Group"}>
-              <Avatar
-                size={32}
-                shape="rounded-square"
-                fallback={local.channel.name}
-                src={local.channel.iconURL}
-                primaryContrast
-              />
-            </Match>
-            <Match when={local.channel.type === "DirectMessage"}>
-              <Avatar
-                size={32}
-                src={local.channel.iconURL}
-                holepunch="bottom-right"
-                overlay={
-                  <UserStatus.Graphic
-                    status={local.channel?.recipient?.presence}
-                  />
-                }
-              />
-            </Match>
-          </Switch>
-        }
-        actions={
-          <Show when={!local.isMobile}>
-            <a
-              onClick={(e) => {
-                e.preventDefault();
-                openModal({
-                  type: "delete_channel",
-                  channel: local.channel,
-                });
-              }}
-            >
-              <MdClose {...iconSize("18px")} />
-            </a>
-          </Show>
-        }
-        use:floating={{
-          contextMenu: () =>
-            local.channel.type === "DirectMessage" ? (
-              <UserContextMenu
-                user={local.channel.recipient!}
-                channel={local.channel}
-              />
-            ) : (
-              <ChannelContextMenu channel={local.channel} />
-            ),
-        }}
-      >
-        <NameStatusStack>
-          <Switch>
-            <Match when={local.channel.type === "Group"}>
-              <OverflowingText>
-                <TextWithEmoji content={local.channel.name!} />
-              </OverflowingText>
-              <span class={typography({ class: "_status" })}>
-                {/* <Plural
+    <MenuButton
+      {...remote}
+      href={`/channel/${local.channel.id}`}
+      size="normal"
+      alert={
+        !local.active &&
+        local.channel.unread &&
+        (local.channel.mentions?.size || true)
+      }
+      attention={
+        local.active
+          ? "selected"
+          : local.channel.muted
+            ? "muted"
+            : local.channel.unread
+              ? "active"
+              : "normal"
+      }
+      icon={
+        <Switch>
+          <Match when={local.channel.type === "Group"}>
+            <Avatar
+              size={32}
+              shape="rounded-square"
+              fallback={local.channel.name}
+              src={local.channel.iconURL}
+              primaryContrast
+            />
+          </Match>
+          <Match when={local.channel.type === "DirectMessage"}>
+            <Avatar
+              size={32}
+              src={local.channel.iconURL}
+              holepunch="bottom-right"
+              overlay={
+                <UserStatus.Graphic
+                  status={local.channel?.recipient?.presence}
+                />
+              }
+            />
+          </Match>
+        </Switch>
+      }
+      actions={
+        <Show when={!local.isMobile}>
+          <a
+            onClick={(e) => {
+              e.preventDefault();
+              openModal({
+                type: "delete_channel",
+                channel: local.channel,
+              });
+            }}
+          >
+            <MdClose {...iconSize("18px")} />
+          </a>
+        </Show>
+      }
+      use:floating={{
+        contextMenu: () =>
+          local.channel.type === "DirectMessage" ? (
+            <UserContextMenu
+              user={local.channel.recipient!}
+              channel={local.channel}
+            />
+          ) : (
+            <ChannelContextMenu channel={local.channel} />
+          ),
+      }}
+    >
+      <NameStatusStack>
+        <Switch>
+          <Match when={local.channel.type === "Group"}>
+            <OverflowingText>
+              <TextWithEmoji content={local.channel.name!} />
+            </OverflowingText>
+            <span class={typography({ class: "_status" })}>
+              {/* <Plural
                   value={local.channel.recipientIds.size}
                   one="# Member"
                   other="# Members"
                 /> */}
-                {local.channel.recipientIds.size}{" "}
-                {local.channel.recipientIds.size > 1 ? `Members` : "Member"}
-              </span>
-            </Match>
-            <Match when={local.channel.type === "DirectMessage"}>
-              <OverflowingText>
-                {local.channel?.recipient?.displayName}
-              </OverflowingText>
-              <Show when={status()}>
-                <Tooltip
-                  content={() => <TextWithEmoji content={status()!} />}
-                  placement="top-start"
-                  aria={status()!}
-                >
-                  <OverflowingText class={typography({ class: "_status" })}>
-                    <TextWithEmoji content={status()!} />
-                  </OverflowingText>
-                </Tooltip>
-              </Show>
-            </Match>
-          </Switch>
-        </NameStatusStack>
-      </MenuButton>
-    </a>
+              {local.channel.recipientIds.size}{" "}
+              {local.channel.recipientIds.size > 1 ? `Members` : "Member"}
+            </span>
+          </Match>
+          <Match when={local.channel.type === "DirectMessage"}>
+            <OverflowingText>
+              {local.channel?.recipient?.displayName}
+            </OverflowingText>
+            <Show when={status()}>
+              <Tooltip
+                content={() => <TextWithEmoji content={status()!} />}
+                placement="top-start"
+                aria={status()!}
+              >
+                <OverflowingText class={typography({ class: "_status" })}>
+                  <TextWithEmoji content={status()!} />
+                </OverflowingText>
+              </Tooltip>
+            </Show>
+          </Match>
+        </Switch>
+      </NameStatusStack>
+    </MenuButton>
   );
 }
 
diff --git a/packages/client/src/interface/navigation/channels/ServerSidebar.tsx b/packages/client/src/interface/navigation/channels/ServerSidebar.tsx
index 17576d8e8..766ded06b 100644
--- a/packages/client/src/interface/navigation/channels/ServerSidebar.tsx
+++ b/packages/client/src/interface/navigation/channels/ServerSidebar.tsx
@@ -484,82 +484,81 @@ function Entry(
   );
 
   return (
-    <a href={`/server/${props.channel.serverId}/channel/${props.channel.id}`}>
-      <Column gap="sm">
-        <MenuButton
-          use:floating={props.menuGenerator(props.channel)}
-          size="normal"
-          alert={alertState()}
-          attention={attentionState()}
-          icon={
-            <>
-              <Switch fallback={<Symbol>grid_3x3</Symbol>}>
-                <Match when={props.channel.isVoice}>
-                  <Symbol
-                    color={inCall() ? "var(--md-sys-color-primary)" : undefined}
-                  >
-                    headset_mic
-                  </Symbol>
-                </Match>
-              </Switch>
-              <Show when={props.channel.icon}>
-                <ChannelIcon
-                  src={props.channel.iconURL}
-                  css={{ marginEnd: "0.2em" }}
-                />
-              </Show>
-            </>
-          }
-          actions={
-            <Show when={!state.isMobile}>
-              <Show when={canInvite()}>
-                <a
-                  use:floating={{
-                    tooltip: { placement: "top", content: "Create Invite" },
-                  }}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    openModal({
-                      type: "create_invite",
-                      channel: props.channel,
-                    });
-                  }}
-                >
-                  <Symbol size={16} fill>
-                    person_add
-                  </Symbol>
-                </a>
-              </Show>
-              <Show when={canEditChannel()}>
-                <a
-                  use:floating={{
-                    tooltip: { placement: "top", content: "Edit Channel" },
-                  }}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    openModal({
-                      type: "settings",
-                      config: "channel",
-                      context: props.channel,
-                    });
-                  }}
+    <Column gap="sm">
+      <MenuButton
+        href={`/server/${props.channel.serverId}/channel/${props.channel.id}`}
+        use:floating={props.menuGenerator(props.channel)}
+        size="normal"
+        alert={alertState()}
+        attention={attentionState()}
+        icon={
+          <>
+            <Switch fallback={<Symbol>grid_3x3</Symbol>}>
+              <Match when={props.channel.isVoice}>
+                <Symbol
+                  color={inCall() ? "var(--md-sys-color-primary)" : undefined}
                 >
-                  <Symbol size={16} fill>
-                    settings
-                  </Symbol>
-                </a>
-              </Show>
+                  headset_mic
+                </Symbol>
+              </Match>
+            </Switch>
+            <Show when={props.channel.icon}>
+              <ChannelIcon
+                src={props.channel.iconURL}
+                css={{ marginEnd: "0.2em" }}
+              />
             </Show>
-          }
-        >
-          <OverflowingText>
-            <TextWithEmoji content={props.channel.name!} />
-          </OverflowingText>
-        </MenuButton>
-
-        <VoiceChannelPreview channel={props.channel} />
-      </Column>
-    </a>
+          </>
+        }
+        actions={
+          <Show when={!state.isMobile}>
+            <Show when={canInvite()}>
+              <a
+                use:floating={{
+                  tooltip: { placement: "top", content: "Create Invite" },
+                }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  openModal({
+                    type: "create_invite",
+                    channel: props.channel,
+                  });
+                }}
+              >
+                <Symbol size={16} fill>
+                  person_add
+                </Symbol>
+              </a>
+            </Show>
+            <Show when={canEditChannel()}>
+              <a
+                use:floating={{
+                  tooltip: { placement: "top", content: "Edit Channel" },
+                }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  openModal({
+                    type: "settings",
+                    config: "channel",
+                    context: props.channel,
+                  });
+                }}
+              >
+                <Symbol size={16} fill>
+                  settings
+                </Symbol>
+              </a>
+            </Show>
+          </Show>
+        }
+      >
+        <OverflowingText>
+          <TextWithEmoji content={props.channel.name!} />
+        </OverflowingText>
+      </MenuButton>
+
+      <VoiceChannelPreview channel={props.channel} />
+    </Column>
   );
 }
 

From 8c03d29859c48892999b8dcedd33b43694ac3e72 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Sun, 22 Feb 2026 18:59:50 -0500
Subject: [PATCH 17/24] fix: Cease this madness - Fix #883 text overflow out of
 dialog modals - Remove old "error" type modal - Fix invite embed going past
 edge of screen on mobile

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .vscode/settings.json                                    | 5 ++++-
 packages/client/components/modal/types.ts                | 9 ---------
 packages/client/components/ui/components/design/Text.tsx | 3 +++
 .../ui/components/features/messaging/elements/Invite.tsx | 2 +-
 packages/client/scripts/copyAssets.mjs                   | 3 +++
 packages/client/src/index.tsx                            | 3 +--
 6 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index d499920ea..552b5cc37 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -20,5 +20,8 @@
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
   // Nix environment settings
-  "nixEnvSelector.nixFile": "${workspaceFolder}/default.nix"
+  "nixEnvSelector.nixFile": "${workspaceFolder}/default.nix",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
diff --git a/packages/client/components/modal/types.ts b/packages/client/components/modal/types.ts
index 48c7cc048..7e0868fd8 100644
--- a/packages/client/components/modal/types.ts
+++ b/packages/client/components/modal/types.ts
@@ -148,15 +148,6 @@ export type Modals =
       type: "emoji_preview";
       emoji: Emoji;
     }
-  | {
-      /**
-       * @deprecated build proper error handling!
-       */
-      type: "error";
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      error: any;
-    }
   | {
       type: "error2";
 
diff --git a/packages/client/components/ui/components/design/Text.tsx b/packages/client/components/ui/components/design/Text.tsx
index 74472f7fd..3134da836 100644
--- a/packages/client/components/ui/components/design/Text.tsx
+++ b/packages/client/components/ui/components/design/Text.tsx
@@ -143,6 +143,7 @@ export const typography = cva({
       class: "body",
       size: "large",
       css: {
+        overflowWrap: "anywhere",
         lineHeight: "1.5rem",
         fontSize: "1rem",
         letterSpacing: "0.009375rem",
@@ -153,6 +154,7 @@ export const typography = cva({
       class: "body",
       size: "medium",
       css: {
+        overflowWrap: "anywhere",
         lineHeight: "1.25rem",
         fontSize: "0.875rem",
         letterSpacing: "0.015625rem",
@@ -163,6 +165,7 @@ export const typography = cva({
       class: "body",
       size: "small",
       css: {
+        overflowWrap: "anywhere",
         lineHeight: "1rem",
         fontSize: "0.75rem",
         letterSpacing: "0.025rem",
diff --git a/packages/client/components/ui/components/features/messaging/elements/Invite.tsx b/packages/client/components/ui/components/features/messaging/elements/Invite.tsx
index f9b8b1660..2f1a72e1a 100644
--- a/packages/client/components/ui/components/features/messaging/elements/Invite.tsx
+++ b/packages/client/components/ui/components/features/messaging/elements/Invite.tsx
@@ -97,7 +97,7 @@ const Base = styled("div", {
     display: "flex",
     alignItems: "center",
 
-    width: "320px",
+    maxWidth: "320px",
     height: "64px",
     gap: "var(--gap-md)",
     padding: "var(--gap-md)",
diff --git a/packages/client/scripts/copyAssets.mjs b/packages/client/scripts/copyAssets.mjs
index 5002ec935..d93d9dfee 100644
--- a/packages/client/scripts/copyAssets.mjs
+++ b/packages/client/scripts/copyAssets.mjs
@@ -47,6 +47,9 @@ try {
 } catch (error) {
   if (error.code === "ENOENT") {
     createSymlink();
+  } else if (error.code === "ENOTEMPTY") {
+    //TODO TEMP for testing
+    console.info(`Left assets in-place.`);
   } else {
     console.error(error);
     process.exit(-1);
diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx
index 7b5b506b6..02736a217 100644
--- a/packages/client/src/index.tsx
+++ b/packages/client/src/index.tsx
@@ -6,7 +6,6 @@ import "./sentry";
 import { JSX, onMount } from "solid-js";
 import { render } from "solid-js/web";
 
-import { attachDevtoolsOverlay } from "@solid-devtools/overlay";
 import { Navigate, Route, Router, useParams } from "@solidjs/router";
 import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
 import "material-symbols";
@@ -44,7 +43,7 @@ import { ServerHome } from "./interface/ServerHome";
 import { ChannelPage } from "./interface/channels/ChannelPage";
 import "./serviceWorkerInterface";
 
-attachDevtoolsOverlay();
+//TODO TEMP
 
 /**
  * Redirect PWA start to the last active path

From b78b8bbf9f8adc055c08814e8bfa93cc8e4ebd39 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Sun, 22 Feb 2026 19:29:32 -0500
Subject: [PATCH 18/24] revert: Undo committed temp changes

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .vscode/settings.json                  | 5 +----
 packages/client/scripts/copyAssets.mjs | 3 ---
 packages/client/src/index.tsx          | 3 ++-
 packages/stoat.js                      | 2 +-
 4 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 552b5cc37..d499920ea 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -20,8 +20,5 @@
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
   // Nix environment settings
-  "nixEnvSelector.nixFile": "${workspaceFolder}/default.nix",
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  "nixEnvSelector.nixFile": "${workspaceFolder}/default.nix"
 }
diff --git a/packages/client/scripts/copyAssets.mjs b/packages/client/scripts/copyAssets.mjs
index d93d9dfee..5002ec935 100644
--- a/packages/client/scripts/copyAssets.mjs
+++ b/packages/client/scripts/copyAssets.mjs
@@ -47,9 +47,6 @@ try {
 } catch (error) {
   if (error.code === "ENOENT") {
     createSymlink();
-  } else if (error.code === "ENOTEMPTY") {
-    //TODO TEMP for testing
-    console.info(`Left assets in-place.`);
   } else {
     console.error(error);
     process.exit(-1);
diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx
index 02736a217..7b5b506b6 100644
--- a/packages/client/src/index.tsx
+++ b/packages/client/src/index.tsx
@@ -6,6 +6,7 @@ import "./sentry";
 import { JSX, onMount } from "solid-js";
 import { render } from "solid-js/web";
 
+import { attachDevtoolsOverlay } from "@solid-devtools/overlay";
 import { Navigate, Route, Router, useParams } from "@solidjs/router";
 import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
 import "material-symbols";
@@ -43,7 +44,7 @@ import { ServerHome } from "./interface/ServerHome";
 import { ChannelPage } from "./interface/channels/ChannelPage";
 import "./serviceWorkerInterface";
 
-//TODO TEMP
+attachDevtoolsOverlay();
 
 /**
  * Redirect PWA start to the last active path
diff --git a/packages/stoat.js b/packages/stoat.js
index b8b305c78..e1a9c8a85 160000
--- a/packages/stoat.js
+++ b/packages/stoat.js
@@ -1 +1 @@
-Subproject commit b8b305c78ba7f599ff40047b7cb2f789b8fe4dd6
+Subproject commit e1a9c8a85661e7c543e42175f62f0369596dabc0

From 65fa48de5b00e65c480fe2755209511420884837 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Sun, 22 Feb 2026 22:37:49 -0500
Subject: [PATCH 19/24] fix: Disable context menu when editing message, so you
 can accept OS spellcheck suggestions - Remove debug print from SlideDrawer

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../components/app/interface/channels/text/Message.tsx    | 8 ++++----
 .../components/ui/components/navigation/SlideDrawer.ts    | 8 --------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/packages/client/components/app/interface/channels/text/Message.tsx b/packages/client/components/app/interface/channels/text/Message.tsx
index 103eee128..0b214c949 100644
--- a/packages/client/components/app/interface/channels/text/Message.tsx
+++ b/packages/client/components/app/interface/channels/text/Message.tsx
@@ -137,10 +137,10 @@ export function Message(props: Props) {
           />
         </div>
       }
-      contextMenu={() =>
-        props.editing ? undefined : (
-          <MessageContextMenu message={props.message} />
-        )
+      contextMenu={
+        props.editing
+          ? undefined
+          : () => <MessageContextMenu message={props.message} />
       }
       timestamp={props.message.createdAt}
       edited={props.message.editedAt}
diff --git a/packages/client/components/ui/components/navigation/SlideDrawer.ts b/packages/client/components/ui/components/navigation/SlideDrawer.ts
index 43a1e7f30..40b4439c5 100644
--- a/packages/client/components/ui/components/navigation/SlideDrawer.ts
+++ b/packages/client/components/ui/components/navigation/SlideDrawer.ts
@@ -31,8 +31,6 @@ export class SlideDrawer {
     private root: HTMLElement,
     public onStateChanged: ((en: boolean) => void) | null = null,
   ) {
-    console.log("INIT", drawer, root);
-
     this.start = this.start.bind(this);
     this.move = this.move.bind(this);
     root.addEventListener("touchstart", this.start);
@@ -60,8 +58,6 @@ export class SlideDrawer {
       x: t.screenX,
       y: t.screenY,
     };
-
-    console.log("TSTART", this.touch.x, this.touch.y);
   }
 
   private move(e: TouchEvent) {
@@ -83,7 +79,6 @@ export class SlideDrawer {
       trig = t.trig;
 
     if (!trig && Math.abs(dy) > CANCEL_Y) {
-      console.log("CANCEL at Y", dy);
       this.endTouch();
     } else if (trig || Math.abs(dx) > TRIG_X) {
       //Store new/prev X for vel calc
@@ -92,7 +87,6 @@ export class SlideDrawer {
       t[`${type}T`] = performance.now();
 
       if (!trig) {
-        console.log("TRIG at X", dx);
         t.trig = trig = true;
         this.tfTimer();
         this.velTimer();
@@ -119,7 +113,6 @@ export class SlideDrawer {
         if (vel > VEL_TRIG) show = false;
         else if (vel < -VEL_TRIG) show = true;
         this.tfTimer(true, show);
-        console.log("END at X", dx, vel);
       }
       this.endTouch();
     }
@@ -189,7 +182,6 @@ export class SlideDrawer {
   }
 
   delete() {
-    console.log("DEL");
     this.setEnabled(false);
     this.root.removeEventListener("touchstart", this.start);
     this.root.removeEventListener("touchmove", this.move);

From eb94aef629aff833049406f20a9f1de4157c8a5e Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Fri, 27 Feb 2026 11:14:08 -0500
Subject: [PATCH 20/24] fix: Second ':' should auto-relace the typed emoji -
 Add shorthand names for some emojis

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../texteditor/codeMirrorAutoComplete.ts         |  7 ++++---
 packages/client/components/ui/emojiMapping.json  | 16 ++++++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/client/components/ui/components/features/texteditor/codeMirrorAutoComplete.ts b/packages/client/components/ui/components/features/texteditor/codeMirrorAutoComplete.ts
index f1d8c8d9c..3eca54172 100644
--- a/packages/client/components/ui/components/features/texteditor/codeMirrorAutoComplete.ts
+++ b/packages/client/components/ui/components/features/texteditor/codeMirrorAutoComplete.ts
@@ -1,6 +1,6 @@
 import {
+  acceptCompletion,
   autocompletion,
-  closeCompletion,
   currentCompletions,
 } from "@codemirror/autocomplete";
 import { EditorView, keymap } from "@codemirror/view";
@@ -141,8 +141,9 @@ export function codeMirrorAutoComplete(
     {
       key: ":",
       run: (view) => {
-        closeCompletion(view as never);
-        return false;
+        const completions = currentCompletions(view.state);
+        acceptCompletion(view as never);
+        return completions.length > 0;
       },
     },
   ]);
diff --git a/packages/client/components/ui/emojiMapping.json b/packages/client/components/ui/emojiMapping.json
index 32b1be562..5d7a23806 100644
--- a/packages/client/components/ui/emojiMapping.json
+++ b/packages/client/components/ui/emojiMapping.json
@@ -1252,8 +1252,10 @@
   "no-under-eighteen": "🔞",
   "no-sound": "🔕",
   "mute": "🔇",
+  "a": "🅰️",
   "a-button": "🅰️",
   "ab-button": "🆎",
+  "b": "🅱️",
   "b-button": "🅱️",
   "o-button": "🅾️",
   "cl-button": "🆑",
@@ -1364,6 +1366,17 @@
   "numbers": "🔢",
   "number-sign": "#️⃣",
   "asterisk": "*️⃣",
+  "0": "0️⃣",
+  "1": "1️⃣",
+  "2": "2️⃣",
+  "3": "3️⃣",
+  "4": "4️⃣",
+  "5": "5️⃣",
+  "6": "6️⃣",
+  "7": "7️⃣",
+  "8": "8️⃣",
+  "9": "9️⃣",
+  "10": "🔟",
   "zero": "0️⃣",
   "one": "1️⃣",
   "two": "2️⃣",
@@ -1426,8 +1439,11 @@
   "curly-loop": "➰",
   "curly-loop-double": "➿",
   "wavy-dash": "〰️",
+  "c": "©️",
   "copyright": "©️",
+  "r": "®️",
   "registered": "®️",
+  "tm": "™️",
   "trade-mark": "™️",
   "radio-button": "🔘",
   "white-square-button": "🔳",

From 0e38155e65ddfcd513e239f9a9e2ee856ff13a98 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Fri, 27 Feb 2026 15:21:10 -0500
Subject: [PATCH 21/24] fix: Off-center loading progress wheel is now nice n
 centered - Replace depricated meta 'apple-mobile-web-app-capable' with
 'mobile-web-app-capable'

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../ui/components/design/LoadingProgress.tsx  | 27 ++++++++++++++++++-
 packages/client/index.html                    |  2 +-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/packages/client/components/ui/components/design/LoadingProgress.tsx b/packages/client/components/ui/components/design/LoadingProgress.tsx
index 43374cab4..193078df5 100644
--- a/packages/client/components/ui/components/design/LoadingProgress.tsx
+++ b/packages/client/components/ui/components/design/LoadingProgress.tsx
@@ -1,4 +1,6 @@
 import "mdui/components/circular-progress.js";
+import { cva } from "styled-system/css";
+import { styled } from "styled-system/jsx";
 
 /**
  * Progress indicators express an unspecified wait time or display the duration of a process
@@ -7,5 +9,28 @@ import "mdui/components/circular-progress.js";
  * @specification https://m3.material.io/components/progress-indicators
  */
 export function CircularProgress() {
-  return <mdui-circular-progress />;
+  return (
+    <Base>
+      <mdui-circular-progress class={loader()} />
+    </Base>
+  );
 }
+
+const Base = styled("div", {
+  base: {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    minWidth: "40px",
+    minHeight: "40px",
+  },
+});
+
+const loader = cva({
+  base: {
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+  },
+});
diff --git a/packages/client/index.html b/packages/client/index.html
index 92c7fe3af..a98736439 100644
--- a/packages/client/index.html
+++ b/packages/client/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, interactive-widget=resizes-content">
-    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#000000">
     <link
       rel="shortcut icon"

From c08200426d3b974f34811071c37693d9f92a26f6 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Fri, 27 Feb 2026 19:20:50 -0500
Subject: [PATCH 22/24] feat: Adding a react button to the context menu was
 harder than anticipated - Also streamlined the Media Picker menu in the
 process, should now be much more efficent by generating a lot less stray DOM
 elements, and using only one Media Picker instance per message - Only show
 member sidebar when in server or group DM, because it's blank in normal DMs
 which causes confusion

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../app/interface/channels/text/Message.tsx   | 50 +++++++++++++++---
 .../app/menus/MessageContextMenu.tsx          | 21 +++++++-
 .../ui/components/design/MenuButton.tsx       |  5 +-
 .../picker/CompositionMediaPicker.tsx         | 49 ++++++++++-------
 .../messaging/elements/Attachment.tsx         | 22 ++++++--
 .../features/messaging/elements/Container.tsx | 13 ++++-
 .../messaging/elements/MessageToolbar.tsx     | 52 +++++++------------
 .../features/messaging/elements/Reactions.tsx | 43 +++++----------
 .../src/interface/channels/ChannelHeader.tsx  | 15 +++---
 .../interface/channels/text/TextChannel.tsx   |  7 ++-
 10 files changed, 169 insertions(+), 108 deletions(-)

diff --git a/packages/client/components/app/interface/channels/text/Message.tsx b/packages/client/components/app/interface/channels/text/Message.tsx
index 0b214c949..9eca03a83 100644
--- a/packages/client/components/app/interface/channels/text/Message.tsx
+++ b/packages/client/components/app/interface/channels/text/Message.tsx
@@ -13,6 +13,7 @@ import { useState } from "@revolt/state";
 import {
   Attachment,
   Avatar,
+  CompositionMediaPicker,
   Embed,
   MessageContainer,
   MessageReply,
@@ -30,6 +31,8 @@ import {
   floatingUserMenusFromMessage,
 } from "../../../menus/UserContextMenu";
 
+import { startsWithPackPUA } from "@revolt/markdown/emoji/UnicodeEmoji";
+import { MediaPickerProps } from "@revolt/ui/components/features/messaging/composition/picker/CompositionMediaPicker";
 import { EditMessage } from "./EditMessage";
 
 /**
@@ -75,6 +78,8 @@ export function Message(props: Props) {
   const client = useClient();
 
   const [isHovering, setIsHovering] = createSignal(false);
+  const [reactPicker, setReactPicker] = createSignal<MediaPickerProps>();
+  let msgRef;
 
   /**
    * Determine if this message only contains an image
@@ -106,6 +111,8 @@ export function Message(props: Props) {
 
   return (
     <MessageContainer
+      ref={msgRef}
+      reactPicker={reactPicker}
       message={props.message}
       onHover={setIsHovering}
       username={
@@ -140,7 +147,12 @@ export function Message(props: Props) {
       contextMenu={
         props.editing
           ? undefined
-          : () => <MessageContextMenu message={props.message} />
+          : () => (
+              <MessageContextMenu
+                message={props.message}
+                reactPicker={reactPicker}
+              />
+            )
       }
       timestamp={props.message.createdAt}
       edited={props.message.editedAt}
@@ -261,6 +273,29 @@ export function Message(props: Props) {
         </Match>
       }
     >
+      <CompositionMediaPicker
+        onMessage={(content) =>
+          props.message?.channel?.sendMessage({
+            content,
+            replies: [{ id: props.message.id, mention: true }],
+          })
+        }
+        onTextReplacement={(emoji) =>
+          react(
+            emoji.startsWith(":")
+              ? emoji.slice(1, emoji.length - 1)
+              : startsWithPackPUA(emoji)
+                ? emoji.slice(1)
+                : emoji,
+          )
+        }
+      >
+        {(trigProps) => {
+          trigProps.ref(msgRef);
+          setReactPicker(trigProps);
+          return <></>;
+        }}
+      </CompositionMediaPicker>
       <Show when={props.message.systemMessage}>
         <SystemMessage
           systemMessage={props.message.systemMessage!}
@@ -288,7 +323,11 @@ export function Message(props: Props) {
       </Switch>
       <For each={props.message.attachments}>
         {(attachment) => (
-          <Attachment message={props.message} file={attachment} />
+          <Attachment
+            message={props.message}
+            file={attachment}
+            reactPicker={reactPicker}
+          />
         )}
       </For>
       <For each={props.message.embeds}>
@@ -300,12 +339,7 @@ export function Message(props: Props) {
         userId={client().user!.id}
         addReaction={react}
         removeReaction={unreact}
-        sendGIF={(content) =>
-          props.message?.channel?.sendMessage({
-            content,
-            replies: [{ id: props.message.id, mention: true }],
-          })
-        }
+        reactPicker={reactPicker}
       />
     </MessageContainer>
   );
diff --git a/packages/client/components/app/menus/MessageContextMenu.tsx b/packages/client/components/app/menus/MessageContextMenu.tsx
index 63d0625ac..b20ec059c 100644
--- a/packages/client/components/app/menus/MessageContextMenu.tsx
+++ b/packages/client/components/app/menus/MessageContextMenu.tsx
@@ -1,4 +1,4 @@
-import { For, Match, Show, Switch } from "solid-js";
+import { Accessor, For, Match, Show, Switch } from "solid-js";
 
 import { Trans } from "@lingui-solid/solid/macro";
 import { File, Message } from "stoat.js";
@@ -14,6 +14,7 @@ import MdDelete from "@material-design-icons/svg/outlined/delete.svg?component-s
 import MdDeleteSweep from "@material-design-icons/svg/outlined/delete_sweep.svg?component-solid";
 import MdDownload from "@material-design-icons/svg/outlined/download.svg?component-solid";
 import MdEdit from "@material-design-icons/svg/outlined/edit.svg?component-solid";
+import MdEmojiEmotions from "@material-design-icons/svg/outlined/emoji_emotions.svg?component-solid";
 import MdLink from "@material-design-icons/svg/outlined/link.svg?component-solid";
 import MdMarkChatUnread from "@material-design-icons/svg/outlined/mark_chat_unread.svg?component-solid";
 import MdOpenInNew from "@material-design-icons/svg/outlined/open_in_new.svg?component-solid";
@@ -25,6 +26,7 @@ import MdShield from "@material-design-icons/svg/outlined/shield.svg?component-s
 
 import MdSentimentContent from "@material-symbols/svg-400/outlined/sentiment_content.svg?component-solid";
 
+import { MediaPickerProps } from "@revolt/ui/components/features/messaging/composition/picker/CompositionMediaPicker";
 import {
   ContextMenu,
   ContextMenuButton,
@@ -35,7 +37,11 @@ import {
 /**
  * Context menu for messages
  */
-export function MessageContextMenu(props: { message?: Message; file?: File }) {
+export function MessageContextMenu(props: {
+  message?: Message;
+  file?: File;
+  reactPicker: Accessor<MediaPickerProps | undefined>;
+}) {
   const user = useUser();
   const state = useState();
   const client = useClient();
@@ -162,7 +168,18 @@ export function MessageContextMenu(props: { message?: Message; file?: File }) {
         <ContextMenuButton icon={MdContentCopy} onClick={copyText}>
           <Trans>Copy text</Trans>
         </ContextMenuButton>
+
         <ContextMenuDivider />
+
+        <Show when={props.message?.channel?.havePermission("React")}>
+          <ContextMenuButton
+            icon={MdEmojiEmotions}
+            onClick={(e) => props.reactPicker()?.onClickEmoji(e)}
+          >
+            <Trans>React</Trans>
+          </ContextMenuButton>
+        </Show>
+
         <Show
           when={
             props.message!.author?.self &&
diff --git a/packages/client/components/ui/components/design/MenuButton.tsx b/packages/client/components/ui/components/design/MenuButton.tsx
index 37f24d447..ff6a337ef 100644
--- a/packages/client/components/ui/components/design/MenuButton.tsx
+++ b/packages/client/components/ui/components/design/MenuButton.tsx
@@ -39,6 +39,8 @@ export type Props = {
    * Hover actions
    */
   readonly actions?: JSX.Element;
+
+  readonly noDrawer?: boolean;
 };
 
 /**
@@ -52,6 +54,7 @@ export function MenuButton(
   const { appDrawer } = useState();
   const [local, other] = splitProps(props, [
     "onClick",
+    "noDrawer",
     "attention",
     "size",
     "icon",
@@ -61,7 +64,7 @@ export function MenuButton(
   ]);
 
   function onClick(e: Event) {
-    appDrawer()?.setShown(true);
+    if (!local.noDrawer) appDrawer()?.setShown(true);
     // @ts-expect-error callable listener
     if (local.onClick) local.onClick(e);
   }
diff --git a/packages/client/components/ui/components/features/messaging/composition/picker/CompositionMediaPicker.tsx b/packages/client/components/ui/components/features/messaging/composition/picker/CompositionMediaPicker.tsx
index f409d857d..cca01bdbd 100644
--- a/packages/client/components/ui/components/features/messaging/composition/picker/CompositionMediaPicker.tsx
+++ b/packages/client/components/ui/components/features/messaging/composition/picker/CompositionMediaPicker.tsx
@@ -25,17 +25,21 @@ import { Row } from "@revolt/ui/components/layout";
 import { EmojiPicker } from "./EmojiPicker";
 import { GifPicker } from "./GifPicker";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyRef = Ref<any>;
+
+export type MediaPickerProps = {
+  ref: AnyRef;
+  onClickGif: (_: MouseEvent, ref?: AnyRef) => void;
+  onClickEmoji: (_: MouseEvent, ref?: AnyRef) => void;
+};
+
 interface Props {
   /**
    * User card trigger area
-   * @param triggerProps Props that need to be applied to the trigger area
+   * @param trigProps Props that need to be applied to the trigger area
    */
-  children: (triggerProps: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ref: Ref<any>;
-    onClickGif: () => void;
-    onClickEmoji: () => void;
-  }) => JSX.Element;
+  children: (trigProps: MediaPickerProps) => JSX.Element;
 
   /**
    * Send a message
@@ -55,19 +59,24 @@ export const CompositionMediaPickerContext = createContext(
 export function CompositionMediaPicker(props: Props) {
   const [anchor, setAnchor] = createSignal<HTMLElement>();
   const [show, setShow] = createSignal<"gif" | "emoji">();
+  let altRef: AnyRef | undefined;
 
   return (
     <CompositionMediaPickerContext.Provider value={props}>
       {props.children({
         ref: setAnchor,
-        onClickGif: () =>
-          setShow((current) => (current === "gif" ? undefined : "gif")),
-        onClickEmoji: () =>
-          setShow((current) => (current === "emoji" ? undefined : "emoji")),
+        onClickGif: (_, ref) => {
+          altRef = ref;
+          setShow((current) => (current === "gif" ? undefined : "gif"));
+        },
+        onClickEmoji: (_, ref) => {
+          altRef = ref;
+          setShow((current) => (current === "emoji" ? undefined : "emoji"));
+        },
       })}
-      <Portal mount={document.getElementById("floating")!}>
-        <Presence>
-          <Show when={show()}>
+      <Presence>
+        <Show when={show()}>
+          <Portal mount={document.getElementById("floating")!}>
             <Motion
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
@@ -75,16 +84,16 @@ export function CompositionMediaPicker(props: Props) {
               transition={{ duration: 0.2, easing: [0.87, 0, 0.13, 1] }}
             >
               <Picker
-                anchor={anchor}
+                anchor={() => altRef || anchor()}
                 show={show}
                 setShow={setShow}
                 onMessage={props.onMessage}
                 onTextReplacement={props.onTextReplacement}
               />
             </Motion>
-          </Show>
-        </Presence>
-      </Portal>
+          </Portal>
+        </Show>
+      </Presence>
     </CompositionMediaPickerContext.Provider>
   );
 }
@@ -103,8 +112,8 @@ function Picker(
     middleware: [offset(5), flip(), shift()],
   });
 
-  function onMouseDown() {
-    props.setShow();
+  function onMouseDown(ev: MouseEvent) {
+    if (!floating()?.contains(ev.target as never)) props.setShow();
   }
 
   onMount(() => document.addEventListener("mousedown", onMouseDown));
diff --git a/packages/client/components/ui/components/features/messaging/elements/Attachment.tsx b/packages/client/components/ui/components/features/messaging/elements/Attachment.tsx
index bc0273d7b..38b97983e 100644
--- a/packages/client/components/ui/components/features/messaging/elements/Attachment.tsx
+++ b/packages/client/components/ui/components/features/messaging/elements/Attachment.tsx
@@ -1,4 +1,4 @@
-import { Match, Show, Switch } from "solid-js";
+import { Accessor, Match, Show, Switch } from "solid-js";
 
 import { File, ImageEmbed, Message, VideoEmbed } from "stoat.js";
 import { css } from "styled-system/css";
@@ -9,6 +9,7 @@ import { useModals } from "@revolt/modal";
 import { Column } from "@revolt/ui/components/layout";
 import { SizedContent, Spoiler } from "@revolt/ui/components/utils";
 
+import { MediaPickerProps } from "../composition/picker/CompositionMediaPicker";
 import { FileInfo } from "./FileInfo";
 import { TextFile } from "./TextFile";
 
@@ -27,7 +28,11 @@ export const AttachmentContainer = styled(Column, {
 /**
  * Render a given list of files
  */
-export function Attachment(props: { file: File; message?: Message }) {
+export function Attachment(props: {
+  file: File;
+  message?: Message;
+  reactPicker: Accessor<MediaPickerProps | undefined>;
+}) {
   const { openModal } = useModals();
 
   return (
@@ -52,7 +57,11 @@ export function Attachment(props: { file: File; message?: Message }) {
             src={props.file.createFileURL()}
             use:floating={{
               contextMenu: () => (
-                <MessageContextMenu message={props.message} file={props.file} />
+                <MessageContextMenu
+                  message={props.message}
+                  file={props.file}
+                  reactPicker={props.reactPicker}
+                />
               ),
             }}
           />
@@ -72,7 +81,11 @@ export function Attachment(props: { file: File; message?: Message }) {
             src={props.file.originalUrl}
             use:floating={{
               contextMenu: () => (
-                <MessageContextMenu message={props.message} file={props.file} />
+                <MessageContextMenu
+                  message={props.message}
+                  file={props.file}
+                  reactPicker={props.reactPicker}
+                />
               ),
             }}
           />
@@ -90,6 +103,7 @@ export function Attachment(props: { file: File; message?: Message }) {
                   <MessageContextMenu
                     message={props.message}
                     file={props.file}
+                    reactPicker={props.reactPicker}
                   />
                 ),
               }}
diff --git a/packages/client/components/ui/components/features/messaging/elements/Container.tsx b/packages/client/components/ui/components/features/messaging/elements/Container.tsx
index efa29157a..d0fc544f3 100644
--- a/packages/client/components/ui/components/features/messaging/elements/Container.tsx
+++ b/packages/client/components/ui/components/features/messaging/elements/Container.tsx
@@ -1,4 +1,4 @@
-import { JSX, Match, Show, Switch } from "solid-js";
+import { Accessor, JSX, Match, Ref, Show, Switch } from "solid-js";
 
 import { useLingui } from "@lingui-solid/solid/macro";
 import { Message } from "stoat.js";
@@ -14,6 +14,7 @@ import {
 } from "@revolt/ui/components/utils";
 
 import { useState } from "@revolt/state";
+import { MediaPickerProps } from "../composition/picker/CompositionMediaPicker";
 import { MessageToolbar } from "./MessageToolbar";
 
 interface CommonProps {
@@ -103,6 +104,10 @@ type Props = CommonProps & {
    */
   contextMenu?: () => JSX.Element;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ref?: Ref<any>;
+  reactPicker: Accessor<MediaPickerProps | undefined>;
+
   /**
    * Additional match cases for the inline-start information element
    */
@@ -313,6 +318,7 @@ export function MessageContainer(props: Props) {
   return (
     <div
       id={props.message?.id}
+      ref={props.ref}
       onMouseEnter={() => props.onHover && props.onHover(true)}
       onMouseLeave={() => props.onHover && props.onHover(false)}
       class={
@@ -335,7 +341,10 @@ export function MessageContainer(props: Props) {
           props.isLink !== "hide"
         }
       >
-        <MessageToolbar message={props.message} />
+        <MessageToolbar
+          message={props.message}
+          reactPicker={props.reactPicker}
+        />
       </Show>
 
       <Show when={props.isLink}>
diff --git a/packages/client/components/ui/components/features/messaging/elements/MessageToolbar.tsx b/packages/client/components/ui/components/features/messaging/elements/MessageToolbar.tsx
index 067aede7d..e88646061 100644
--- a/packages/client/components/ui/components/features/messaging/elements/MessageToolbar.tsx
+++ b/packages/client/components/ui/components/features/messaging/elements/MessageToolbar.tsx
@@ -1,4 +1,4 @@
-import { Show } from "solid-js";
+import { Accessor, Show } from "solid-js";
 
 import { Message } from "stoat.js";
 import { cva } from "styled-system/css";
@@ -17,13 +17,16 @@ import MdEmojiEmotions from "@material-design-icons/svg/outlined/emoji_emotions.
 import MdMoreVert from "@material-design-icons/svg/outlined/more_vert.svg?component-solid";
 import MdReply from "@material-design-icons/svg/outlined/reply.svg?component-solid";
 
-import { startsWithPackPUA } from "@revolt/markdown/emoji/UnicodeEmoji";
-import { CompositionMediaPicker } from "../composition";
+import { MediaPickerProps } from "../composition/picker/CompositionMediaPicker";
 
-export function MessageToolbar(props: { message?: Message }) {
+export function MessageToolbar(props: {
+  message?: Message;
+  reactPicker: Accessor<MediaPickerProps | undefined>;
+}) {
   const user = useUser();
   const state = useState();
   const { openModal } = useModals();
+  let reactRef;
 
   // todo: a11y for buttons; tabindex
 
@@ -53,34 +56,14 @@ export function MessageToolbar(props: { message?: Message }) {
         </div>
       </Show>
       <Show when={props.message?.channel?.havePermission("React")}>
-        <CompositionMediaPicker
-          onMessage={(content) =>
-            props.message?.channel?.sendMessage({
-              content,
-              replies: [{ id: props.message.id, mention: true }],
-            })
-          }
-          onTextReplacement={(emoji) =>
-            props.message!.react(
-              emoji.startsWith(":")
-                ? emoji.slice(1, emoji.length - 1)
-                : startsWithPackPUA(emoji)
-                  ? emoji.slice(1)
-                  : emoji,
-            )
-          }
+        <div
+          ref={reactRef}
+          class={tool()}
+          onClick={(e) => props.reactPicker()?.onClickEmoji(e, reactRef)}
         >
-          {(triggerProps) => (
-            <div
-              ref={triggerProps.ref}
-              class={tool()}
-              onClick={triggerProps.onClickEmoji}
-            >
-              <Ripple />
-              <MdEmojiEmotions {...iconSize(20)} />
-            </div>
-          )}
-        </CompositionMediaPicker>
+          <Ripple />
+          <MdEmojiEmotions {...iconSize(20)} />
+        </div>
       </Show>
       <Show when={props.message?.author?.self}>
         <div
@@ -105,7 +88,12 @@ export function MessageToolbar(props: { message?: Message }) {
       <div
         class={tool()}
         use:floating={{
-          contextMenu: () => <MessageContextMenu message={props.message!} />,
+          contextMenu: () => (
+            <MessageContextMenu
+              message={props.message!}
+              reactPicker={props.reactPicker}
+            />
+          ),
           contextMenuHandler: "click",
         }}
       >
diff --git a/packages/client/components/ui/components/features/messaging/elements/Reactions.tsx b/packages/client/components/ui/components/features/messaging/elements/Reactions.tsx
index 37cb595e0..ce0891572 100644
--- a/packages/client/components/ui/components/features/messaging/elements/Reactions.tsx
+++ b/packages/client/components/ui/components/features/messaging/elements/Reactions.tsx
@@ -1,4 +1,4 @@
-import { For, Show, createMemo } from "solid-js";
+import { Accessor, For, Show, createMemo } from "solid-js";
 
 import { useLingui } from "@lingui-solid/solid/macro";
 import { API } from "stoat.js";
@@ -12,8 +12,7 @@ import { Row } from "@revolt/ui/components/layout";
 
 import MdAdd from "@material-design-icons/svg/outlined/add.svg?component-solid";
 
-import { startsWithPackPUA } from "@revolt/markdown/emoji/UnicodeEmoji";
-import { CompositionMediaPicker } from "../composition";
+import { MediaPickerProps } from "../composition/picker/CompositionMediaPicker";
 
 interface Props {
   /**
@@ -37,17 +36,13 @@ interface Props {
    */
   addReaction(reaction: string): void;
 
-  /**
-   * Send a GIF reaction
-   * @param text Message
-   */
-  sendGIF(text: string): void;
-
   /**
    * Remove a reaction
    * @param reaction ID
    */
   removeReaction(reaction: string): void;
+
+  reactPicker: Accessor<MediaPickerProps | undefined>;
 }
 
 /**
@@ -93,6 +88,8 @@ export function Reactions(props: Props) {
       : required.length || optional.length;
   };
 
+  let reactRef;
+
   return (
     <Show when={hasReactions()}>
       <List>
@@ -121,27 +118,15 @@ export function Reactions(props: Props) {
             />
           )}
         </For>
-        <CompositionMediaPicker
-          onMessage={props.sendGIF}
-          onTextReplacement={(emoji) =>
-            props.addReaction(
-              emoji.startsWith(":")
-                ? emoji.slice(1, emoji.length - 1)
-                : startsWithPackPUA(emoji)
-                  ? emoji.slice(1)
-                  : emoji,
-            )
-          }
+        <div
+          ref={reactRef}
+          onClick={(e) => props.reactPicker()?.onClickEmoji(e, reactRef)}
         >
-          {(triggerProps) => (
-            <div ref={triggerProps.ref} onClick={triggerProps.onClickEmoji}>
-              <AddReaction class="add">
-                <Ripple />
-                <MdAdd />
-              </AddReaction>
-            </div>
-          )}
-        </CompositionMediaPicker>
+          <AddReaction class="add">
+            <Ripple />
+            <MdAdd />
+          </AddReaction>
+        </div>
       </List>
     </Show>
   );
diff --git a/packages/client/src/interface/channels/ChannelHeader.tsx b/packages/client/src/interface/channels/ChannelHeader.tsx
index 2aabad491..1fc4f174d 100644
--- a/packages/client/src/interface/channels/ChannelHeader.tsx
+++ b/packages/client/src/interface/channels/ChannelHeader.tsx
@@ -8,8 +8,8 @@ import { styled } from "styled-system/jsx";
 import { useClient } from "@revolt/client";
 import { TextWithEmoji } from "@revolt/markdown";
 import { useModals } from "@revolt/modal";
-import { useState } from "@revolt/state";
 import { useVoice } from "@revolt/rtc";
+import { useState } from "@revolt/state";
 import { LAYOUT_SECTIONS } from "@revolt/state/stores/Layout";
 import {
   Button,
@@ -17,8 +17,8 @@ import {
   NonBreakingText,
   OverflowingText,
   Spacer,
-  UserStatus,
   typography,
+  UserStatus,
 } from "@revolt/ui";
 import { Symbol } from "@revolt/ui/components/utils/Symbol";
 
@@ -29,7 +29,7 @@ import MdSettings from "@material-design-icons/svg/outlined/settings.svg?compone
 import MdKeep from "../../svg/keep.svg?component-solid";
 import { HeaderIcon } from "../common/CommonHeader";
 
-import { SidebarState } from "./text/TextChannel";
+import { canIHasSidebar, SidebarState } from "./text/TextChannel";
 
 interface Props {
   /**
@@ -62,11 +62,8 @@ export function ChannelHeader(props: Props) {
     if (!props.sidebarState) return null;
 
     const state = props.sidebarState();
-    if (state.state === "search") {
-      return state.query;
-    } else {
-      return "";
-    }
+    if (state.state === "search") return state.query;
+    return "";
   };
 
   return (
@@ -219,7 +216,7 @@ export function ChannelHeader(props: Props) {
         </IconButton>
       </Show>
 
-      <Show when={props.sidebarState && props.channel.type !== "SavedMessages"}>
+      <Show when={props.sidebarState && canIHasSidebar(props.channel)}>
         <IconButton
           onPress={() => {
             if (props.sidebarState!().state === "default") {
diff --git a/packages/client/src/interface/channels/text/TextChannel.tsx b/packages/client/src/interface/channels/text/TextChannel.tsx
index b16f66d30..7469cccd1 100644
--- a/packages/client/src/interface/channels/text/TextChannel.tsx
+++ b/packages/client/src/interface/channels/text/TextChannel.tsx
@@ -31,6 +31,7 @@ import { VoiceChannelCallCardMount } from "@revolt/ui/components/features/voice/
 import { ChannelHeader } from "../ChannelHeader";
 import { ChannelPageProps } from "../ChannelPage";
 
+import { Channel } from "stoat.js";
 import { MessageComposition } from "./Composition";
 import { MemberSidebar } from "./MemberSidebar";
 import { TextSearchSidebar } from "./TextSearchSidebar";
@@ -50,6 +51,10 @@ export type SidebarState =
       state: "default";
     };
 
+export function canIHasSidebar(ch: Channel) {
+  return !["SavedMessages", "DirectMessage"].includes(ch.type);
+}
+
 /**
  * Channel component
  */
@@ -214,7 +219,7 @@ export function TextChannel(props: ChannelPageProps) {
               LAYOUT_SECTIONS.MEMBER_SIDEBAR,
               true,
             ) &&
-              props.channel.type !== "SavedMessages") ||
+              canIHasSidebar(props.channel)) ||
             sidebarState().state !== "default"
           }
         >

From e950b436811e9e4ceca4df327c2051f5dd7644e5 Mon Sep 17 00:00:00 2001
From: ajlittle <ajlittle98@gmail.com>
Date: Sun, 1 Mar 2026 19:35:41 -0600
Subject: [PATCH 23/24] fix: dismiss other open user cards when opening a new
 one

Prevents multiple user cards from stacking when clicking
different users in the voice channel preview.
---
 packages/client/components/ui/directives/floating.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/client/components/ui/directives/floating.ts b/packages/client/components/ui/directives/floating.ts
index 3171623d8..5b2277c5b 100644
--- a/packages/client/components/ui/directives/floating.ts
+++ b/packages/client/components/ui/directives/floating.ts
@@ -72,6 +72,13 @@ export function floating(element: HTMLElement, accessor: Accessor<Props>) {
     const config = accessor();
 
     if (target === "userCard" && config.userCard) {
+      // Dismiss any other open user cards first
+      for (const el of floatingElements()) {
+        if (el.element !== element && el.show()?.userCard) {
+          el.hide();
+        }
+      }
+
       if (current?.userCard) {
         setShow(undefined);
       } else if (!current) {

From 5a8f45e9c4a80fb8850fe4d110f3519c5f3912f7 Mon Sep 17 00:00:00 2001
From: Stoat CI <stoat-ci@users.noreply.github.com>
Date: Mon, 2 Mar 2026 01:37:48 +0000
Subject: [PATCH 24/24] chore: generate i18n catalog

---
 .../components/i18n/catalogs/ar/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/as/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/az/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/be/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/bg/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/bn/messages.po   | 30 ++++++++++++++-----
 .../i18n/catalogs/bottom/messages.po          | 30 ++++++++++++++-----
 .../components/i18n/catalogs/br/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/ca/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/ceb/messages.po  | 30 ++++++++++++++-----
 .../components/i18n/catalogs/ckb/messages.po  | 30 ++++++++++++++-----
 .../components/i18n/catalogs/cs/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/da/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/de/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/dev/messages.po  | 30 ++++++++++++++-----
 .../components/i18n/catalogs/el/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/en/messages.po   | 30 ++++++++++++++-----
 .../i18n/catalogs/en_US/messages.po           | 30 ++++++++++++++-----
 .../i18n/catalogs/enchantment/messages.po     | 30 ++++++++++++++-----
 .../components/i18n/catalogs/eo/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/es/messages.po   | 30 ++++++++++++++-----
 .../i18n/catalogs/es_419/messages.po          | 30 ++++++++++++++-----
 .../components/i18n/catalogs/et/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/fa/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/fi/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/fil/messages.po  | 30 ++++++++++++++-----
 .../components/i18n/catalogs/fr/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/ga/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/hi/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/hr/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/hu/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/hy/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/id/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/is/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/it/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/ja/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/ko/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/lb/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/leet/messages.po | 30 ++++++++++++++-----
 .../components/i18n/catalogs/lt/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/lv/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/mk/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/ms/messages.po   | 30 ++++++++++++++-----
 .../i18n/catalogs/nb_NO/messages.po           | 30 ++++++++++++++-----
 .../components/i18n/catalogs/nl/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/owo/messages.po  | 30 ++++++++++++++-----
 .../i18n/catalogs/piglatin/messages.po        | 30 ++++++++++++++-----
 .../components/i18n/catalogs/pl/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/pr/messages.po   | 30 ++++++++++++++-----
 .../i18n/catalogs/pt_BR/messages.po           | 30 ++++++++++++++-----
 .../i18n/catalogs/pt_PT/messages.po           | 30 ++++++++++++++-----
 .../components/i18n/catalogs/ro/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/ru/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/si/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/sk/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/sl/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/sq/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/sr/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/sv/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/ta/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/th/messages.po   | 30 ++++++++++++++-----
 .../i18n/catalogs/tokipona/messages.po        | 30 ++++++++++++++-----
 .../components/i18n/catalogs/tr/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/uk/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/ur/messages.po   | 30 ++++++++++++++-----
 .../components/i18n/catalogs/vec/messages.po  | 30 ++++++++++++++-----
 .../components/i18n/catalogs/vi/messages.po   | 30 ++++++++++++++-----
 .../i18n/catalogs/zh_Hans/messages.po         | 30 ++++++++++++++-----
 .../i18n/catalogs/zh_Hant/messages.po         | 30 ++++++++++++++-----
 69 files changed, 1518 insertions(+), 552 deletions(-)

diff --git a/packages/client/components/i18n/catalogs/ar/messages.po b/packages/client/components/i18n/catalogs/ar/messages.po
index 6bdb3d00f..7cda6139d 100644
--- a/packages/client/components/i18n/catalogs/ar/messages.po
+++ b/packages/client/components/i18n/catalogs/ar/messages.po
@@ -405,6 +405,7 @@ msgstr "الصورة الرمزية"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "إعدادات التطبيق"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "تعطيل الحساب"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "ادعم المشروع بالتبرع - شكرًا لك!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "أهلًا!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/as/messages.po b/packages/client/components/i18n/catalogs/as/messages.po
index f835a704a..dd2b0553b 100644
--- a/packages/client/components/i18n/catalogs/as/messages.po
+++ b/packages/client/components/i18n/catalogs/as/messages.po
@@ -405,6 +405,7 @@ msgstr ""
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "ক্লায়েন্টৰ ছেটিংছ"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr ""
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "দান কৰি প্ৰকল্পটো সমৰ্থন কৰক - ধন্যবাদ!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "স্বাগতম!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/az/messages.po b/packages/client/components/i18n/catalogs/az/messages.po
index 8a3b3bd15..7cb743787 100644
--- a/packages/client/components/i18n/catalogs/az/messages.po
+++ b/packages/client/components/i18n/catalogs/az/messages.po
@@ -405,6 +405,7 @@ msgstr "Profil"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Müştəri parametrləri"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Hesabı deaktiv edin"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Layihəni ianə ilə dəstəkləyin - təşəkkür edirəm!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Xoşgəldiniz!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/be/messages.po b/packages/client/components/i18n/catalogs/be/messages.po
index 2b5fccde5..0af6db834 100644
--- a/packages/client/components/i18n/catalogs/be/messages.po
+++ b/packages/client/components/i18n/catalogs/be/messages.po
@@ -405,6 +405,7 @@ msgstr "Аватар"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Налады кліента"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Адключыць уліковы запіс"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Падтрымайце праект ахвяраваннем - дзякуй!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Вітаем!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/bg/messages.po b/packages/client/components/i18n/catalogs/bg/messages.po
index f4f2a6e51..f5f62de19 100644
--- a/packages/client/components/i18n/catalogs/bg/messages.po
+++ b/packages/client/components/i18n/catalogs/bg/messages.po
@@ -405,6 +405,7 @@ msgstr "Аватар"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Настройки на приложението"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Деактивиране на акаунта ви"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Подкрепете проекта чрез дарение - благодарим ви!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Добре дошли!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/bn/messages.po b/packages/client/components/i18n/catalogs/bn/messages.po
index 6ad5b595d..386a7858a 100644
--- a/packages/client/components/i18n/catalogs/bn/messages.po
+++ b/packages/client/components/i18n/catalogs/bn/messages.po
@@ -405,6 +405,7 @@ msgstr "প্রোফাইলের ছবি"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "ক্লায়েন্ট সেটিংস"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "অ্যাকাউন্টকে সাময়িকভাবে নিস্ক্রিয় করুন"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "অনুদানের মাধ্যমে আপনি আমাদের সাহায্য করতে পারেন - ধন্যবাদ!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "আপনাকে স্বাগত জানাই!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/bottom/messages.po b/packages/client/components/i18n/catalogs/bottom/messages.po
index 6ccbc5cd8..7fecd0487 100644
--- a/packages/client/components/i18n/catalogs/bottom/messages.po
+++ b/packages/client/components/i18n/catalogs/bottom/messages.po
@@ -405,6 +405,7 @@ msgstr "💖✨🥺👉👈💖💖✨🥺,,,👉👈💖✨✨✨✨🥺,,👉
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "💖✨🥺,,👉👈💖💖🥺,,,👉👈💖💖🥺👉👈💖💖
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "💖✨🥺,,,👉👈💖💖🥺👉👈💖💖✨🥺👉👈💖✨✨✨✨🥺,,👉👈💖✨✨✨✨🥺,,,👉👈💖💖🥺,,,👉👈💖💖,👉👈✨✨✨,,👉👈💖✨🥺👉👈💖✨✨✨✨🥺,,,,👉👈💖✨✨✨✨🥺,,,,👉👈💖💖✨,👉👈💖💖✨🥺,,👉👈💖💖✨👉👈💖💖✨🥺,👉👈"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "💖✨✨✨,,,👉👈💖💖✨🥺,,👉👈💖💖✨,,👉👈💖💖✨,,👉👈💖💖✨,👉👈💖💖✨,,,,👉👈💖💖✨🥺,👉👈✨✨✨,,👉👈💖💖✨🥺,👉👈💖💖,,,,👉👈💖💖,👉👈✨✨✨,,👉👈💖💖✨,,👉👈💖💖✨,,,,👉👈💖💖✨,👉👈💖💖🥺,👉👈💖💖,👉👈💖✨✨✨✨🥺,,,,👉👈💖💖✨🥺,👉👈✨✨✨,,👉👈💖✨✨✨✨🥺,,,👉👈💖💖✨✨,👉👈✨✨✨,,👉👈💖💖👉👈💖💖✨,👉👈💖💖✨👉👈💖✨✨✨✨🥺,,👉👈💖💖✨🥺,👉👈💖💖🥺👉👈💖💖✨👉👈💖💖,,,👉👈✨✨✨,,👉👈✨✨✨✨🥺👉👈✨✨✨,,👉👈💖💖✨🥺,👉👈💖💖,,,,👉👈💖✨✨✨✨🥺,,👉👈💖💖✨👉👈💖💖🥺,,👉👈✨✨✨,,👉👈💖💖✨✨,👉👈💖💖✨,👉👈💖💖✨🥺,,👉👈✨✨✨,,,👉👈"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "💖✨✨✨🥺,,👉👈💖💖,👉👈💖💖🥺,,,👉👈💖
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/br/messages.po b/packages/client/components/i18n/catalogs/br/messages.po
index 856ea822b..e90617c8c 100644
--- a/packages/client/components/i18n/catalogs/br/messages.po
+++ b/packages/client/components/i18n/catalogs/br/messages.po
@@ -405,6 +405,7 @@ msgstr "Skeudenn ar Profil"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Arventennoù Arval"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Diweredekaat ar Gont"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Skorañ ar raktres gant reiñ - trugarez !"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Donemat !"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/ca/messages.po b/packages/client/components/i18n/catalogs/ca/messages.po
index f51d47d97..f6f10bb46 100644
--- a/packages/client/components/i18n/catalogs/ca/messages.po
+++ b/packages/client/components/i18n/catalogs/ca/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Configuració del client"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Desactiva el compte"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Dona suport al projecte amb una donació – gràcies!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Us donem la benvinguda!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/ceb/messages.po b/packages/client/components/i18n/catalogs/ceb/messages.po
index 22b353a1a..07ff1ad31 100644
--- a/packages/client/components/i18n/catalogs/ceb/messages.po
+++ b/packages/client/components/i18n/catalogs/ceb/messages.po
@@ -405,6 +405,7 @@ msgstr ""
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Mga Setting sa Kliyente"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "I-disable ang Account"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Suportaha ning proyekto paagi sa pag-donate - daghang salamat!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Kumusta!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/ckb/messages.po b/packages/client/components/i18n/catalogs/ckb/messages.po
index 62f2688ef..f36521bcc 100644
--- a/packages/client/components/i18n/catalogs/ckb/messages.po
+++ b/packages/client/components/i18n/catalogs/ckb/messages.po
@@ -405,6 +405,7 @@ msgstr "ئاڤاتار"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "ڕێکخستنەکانی بەرنامە"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "ناچالاک کردنی هەمژار"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "پشتگیری برۆژەکە بکە بە دۆنەیتکردن - سوپاس!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "بەخێربێیت!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/cs/messages.po b/packages/client/components/i18n/catalogs/cs/messages.po
index cedd8d850..758b4ff16 100644
--- a/packages/client/components/i18n/catalogs/cs/messages.po
+++ b/packages/client/components/i18n/catalogs/cs/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Nastavení klienta"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Deaktivovat účet"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Podpořte projekt finančním darem - děkujeme!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Vítejte!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/da/messages.po b/packages/client/components/i18n/catalogs/da/messages.po
index bfdc742a3..d7da4d916 100644
--- a/packages/client/components/i18n/catalogs/da/messages.po
+++ b/packages/client/components/i18n/catalogs/da/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Klientindstillinger"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Deaktiver konto"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Støt projektet med en donation – tak!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Velkommen!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/de/messages.po b/packages/client/components/i18n/catalogs/de/messages.po
index ec32ee454..9be42355d 100644
--- a/packages/client/components/i18n/catalogs/de/messages.po
+++ b/packages/client/components/i18n/catalogs/de/messages.po
@@ -405,6 +405,7 @@ msgstr "Profilbild"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Clienteinstellungen"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Account deaktivieren"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Unterstütze das Projekt durch Spenden - Vielen Dank!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Willkommen!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/dev/messages.po b/packages/client/components/i18n/catalogs/dev/messages.po
index 57379e63e..e6855b3d0 100644
--- a/packages/client/components/i18n/catalogs/dev/messages.po
+++ b/packages/client/components/i18n/catalogs/dev/messages.po
@@ -405,6 +405,7 @@ msgstr ""
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr ""
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr ""
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr ""
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/el/messages.po b/packages/client/components/i18n/catalogs/el/messages.po
index 77f58bcfd..1f7de5c1d 100644
--- a/packages/client/components/i18n/catalogs/el/messages.po
+++ b/packages/client/components/i18n/catalogs/el/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Ρυθμίσεις Εφαρμογής"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Απενεργοποίηση Λογαριασμού"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Υποστήριξε το εγχείρημα κάνοντας μια δωρεά - σε ευχαριστούμε!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Καλωσόρισες!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/en/messages.po b/packages/client/components/i18n/catalogs/en/messages.po
index 2235eda7d..92ee74423 100644
--- a/packages/client/components/i18n/catalogs/en/messages.po
+++ b/packages/client/components/i18n/catalogs/en/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr "Back"
 
@@ -647,6 +648,7 @@ msgstr "Client Settings"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr "Desktop"
 msgid "Developer Documentation"
 msgstr "Developer Documentation"
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr "Did you know?"
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Disable Account"
@@ -1473,6 +1479,10 @@ msgstr "Impersonation"
 msgid "notifications.sounds.individual"
 msgstr "Individual Sounds"
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr "Install"
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr "Instead of closing, Stoat will hide in your tray."
@@ -1545,7 +1555,7 @@ msgstr "Join Call"
 msgid "Join the Stoat Lounge"
 msgstr "Join the Stoat Lounge"
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr "Join the voice channel"
 
@@ -2195,6 +2205,7 @@ msgstr "Push to Talk Keybind"
 msgid "Raid or spam attack"
 msgstr "Raid or spam attack"
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr "React"
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr "Spellchecker"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr "Start the call"
+#~ msgid "Start the call"
+#~ msgstr "Start the call"
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Support the project by donating - thank you!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr "Switch to this voice channel"
+#~ msgid "Switch to this voice channel"
+#~ msgstr "Switch to this voice channel"
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Welcome!"
 msgid "Whether other users can edit these settings"
 msgstr "Whether other users can edit these settings"
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr "With {0}"
+#~ msgid "With {0}"
+#~ msgstr "With {0}"
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr "You are about to kick {0}"
 msgid "You are banned from this server."
 msgstr "You are banned from this server."
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr "You can also click the gear icon in the bottom left."
diff --git a/packages/client/components/i18n/catalogs/en_US/messages.po b/packages/client/components/i18n/catalogs/en_US/messages.po
index 6bda89f63..7ec94b421 100644
--- a/packages/client/components/i18n/catalogs/en_US/messages.po
+++ b/packages/client/components/i18n/catalogs/en_US/messages.po
@@ -405,6 +405,7 @@ msgstr "User photo"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Client Settings"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Disable Account"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Support the project by donating - thank you!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Welcome!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/enchantment/messages.po b/packages/client/components/i18n/catalogs/enchantment/messages.po
index b398d0deb..1cc930814 100644
--- a/packages/client/components/i18n/catalogs/enchantment/messages.po
+++ b/packages/client/components/i18n/catalogs/enchantment/messages.po
@@ -405,6 +405,7 @@ msgstr "ᔑ⍊ᔑℸᔑ∷"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "ᓵꖎ╎ᒷリℸ ᓭᒷℸℸ╎リ⊣ᓭ"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "↸╎ᓭᔑʖꖎᒷ ᔑᓵᓵ𝙹⚍リℸ"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "ᓭ⚍!¡!¡𝙹∷ℸ ℸ⍑ᒷ !¡∷𝙹⋮ᒷᓵℸ ʖ|| ↸𝙹リᔑℸ╎リ⊣ - ℸ⍑ᔑリꖌ ||𝙹⚍!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "∴ᒷꖎᓵ𝙹ᒲᒷ!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/eo/messages.po b/packages/client/components/i18n/catalogs/eo/messages.po
index 10a19f5f2..49bb730fa 100644
--- a/packages/client/components/i18n/catalogs/eo/messages.po
+++ b/packages/client/components/i18n/catalogs/eo/messages.po
@@ -405,6 +405,7 @@ msgstr "Uzantobildo"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Klientaj agordoj"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Malvalidigi konton"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Subtenu la projekton per donaco - dankon!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Bonvenon!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/es/messages.po b/packages/client/components/i18n/catalogs/es/messages.po
index 6f1758b5a..bfaeb392d 100644
--- a/packages/client/components/i18n/catalogs/es/messages.po
+++ b/packages/client/components/i18n/catalogs/es/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Ajustes del cliente"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Deshabilitar cuenta"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Apoya el proyecto donando - ¡gracias!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "¡Bienvenido!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/es_419/messages.po b/packages/client/components/i18n/catalogs/es_419/messages.po
index 7f5893167..d33b11841 100644
--- a/packages/client/components/i18n/catalogs/es_419/messages.po
+++ b/packages/client/components/i18n/catalogs/es_419/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Ajustes del cliente"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Deshabilitar cuenta"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Apoya el proyecto con tu donación. ¡Gracias!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "¡Te damos la bienvenida!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/et/messages.po b/packages/client/components/i18n/catalogs/et/messages.po
index a76887774..bc882ccbf 100644
--- a/packages/client/components/i18n/catalogs/et/messages.po
+++ b/packages/client/components/i18n/catalogs/et/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Kliendisätted"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Keela konto"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Toetage projekti annetusega - aitäh!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Tere tulemast!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/fa/messages.po b/packages/client/components/i18n/catalogs/fa/messages.po
index 1927c88d9..081ad8e6d 100644
--- a/packages/client/components/i18n/catalogs/fa/messages.po
+++ b/packages/client/components/i18n/catalogs/fa/messages.po
@@ -405,6 +405,7 @@ msgstr "آواتار"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "تنظیمات کلاینت"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "غیر فعال کردن حساب کاربری"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "با اهدای پول از ما حمایت کنید - با تشکر!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "خوش آمدید!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/fi/messages.po b/packages/client/components/i18n/catalogs/fi/messages.po
index f342d02f9..c9b077c7d 100644
--- a/packages/client/components/i18n/catalogs/fi/messages.po
+++ b/packages/client/components/i18n/catalogs/fi/messages.po
@@ -405,6 +405,7 @@ msgstr "Kuva"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Asiakasohjelman asetukset"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Poista tili käytöstä"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Tue projektia lahjoittamalla - kiitos!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Tervetuloa!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/fil/messages.po b/packages/client/components/i18n/catalogs/fil/messages.po
index c640c5039..15aaf06c2 100644
--- a/packages/client/components/i18n/catalogs/fil/messages.po
+++ b/packages/client/components/i18n/catalogs/fil/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Settings sa Kliyente"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "I-disable ang Account"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Suportahan itong proyekto sa pamamagitan ng pagbigay ng donasyon - salamat!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Maligayang Pagdating!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/fr/messages.po b/packages/client/components/i18n/catalogs/fr/messages.po
index 42efe0bfd..a7583d157 100644
--- a/packages/client/components/i18n/catalogs/fr/messages.po
+++ b/packages/client/components/i18n/catalogs/fr/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Paramètres du client"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Désactiver le compte"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Soutenez le projet en faisant un don, merci !"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Bienvenue !"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/ga/messages.po b/packages/client/components/i18n/catalogs/ga/messages.po
index 02387f01f..c92b06292 100644
--- a/packages/client/components/i18n/catalogs/ga/messages.po
+++ b/packages/client/components/i18n/catalogs/ga/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Socruithe Cliant"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Cuntas Díchumasaithe"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Tacaigh leis an tionscadal trí bhronnadh - go raibh maith agat!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Fáilte romhat!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/hi/messages.po b/packages/client/components/i18n/catalogs/hi/messages.po
index 1ca9dec4a..284cfe8d5 100644
--- a/packages/client/components/i18n/catalogs/hi/messages.po
+++ b/packages/client/components/i18n/catalogs/hi/messages.po
@@ -405,6 +405,7 @@ msgstr "अवतार"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "ग्राहक सेटिंग्स"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "खाता अक्षम करें"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "दान करके परियोजना को समर्थन दें - आपका धन्यवाद!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "आपका स्वागत है!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/hr/messages.po b/packages/client/components/i18n/catalogs/hr/messages.po
index 8480ed1c6..f1a9c85d2 100644
--- a/packages/client/components/i18n/catalogs/hr/messages.po
+++ b/packages/client/components/i18n/catalogs/hr/messages.po
@@ -405,6 +405,7 @@ msgstr "Slika profila"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Postavke aplikacije"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Onemogući račun"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Podržite projekt donacijom - hvala!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Dobro došli!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/hu/messages.po b/packages/client/components/i18n/catalogs/hu/messages.po
index 8e29c35df..d86465d40 100644
--- a/packages/client/components/i18n/catalogs/hu/messages.po
+++ b/packages/client/components/i18n/catalogs/hu/messages.po
@@ -405,6 +405,7 @@ msgstr "Profilkép"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Kliens beállításai"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Fiók letiltása"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Adományozz a projektnek – ezzel is támogatod. Köszönjük!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Üdv!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/hy/messages.po b/packages/client/components/i18n/catalogs/hy/messages.po
index 8fea0f4f7..0d6fc128a 100644
--- a/packages/client/components/i18n/catalogs/hy/messages.po
+++ b/packages/client/components/i18n/catalogs/hy/messages.po
@@ -405,6 +405,7 @@ msgstr "Անձնանշան"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Հաճախորդի կարգավորումներ"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Անջատել հաշիվը"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Աջակցեք նախագծին` նվիրաբերելով - շնորհակալություն!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Բարի գալուստ!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/id/messages.po b/packages/client/components/i18n/catalogs/id/messages.po
index 96d45260e..1ca271dc0 100644
--- a/packages/client/components/i18n/catalogs/id/messages.po
+++ b/packages/client/components/i18n/catalogs/id/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Pengaturan Klien"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Nonaktifkan Akun"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Dukung proyek ini dengan berdonasi - terima kasih!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Selamat datang!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/is/messages.po b/packages/client/components/i18n/catalogs/is/messages.po
index 5d7e089d3..46656c504 100644
--- a/packages/client/components/i18n/catalogs/is/messages.po
+++ b/packages/client/components/i18n/catalogs/is/messages.po
@@ -405,6 +405,7 @@ msgstr ""
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr ""
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr ""
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Velkomin/n!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/it/messages.po b/packages/client/components/i18n/catalogs/it/messages.po
index c5b8e0392..d27358687 100644
--- a/packages/client/components/i18n/catalogs/it/messages.po
+++ b/packages/client/components/i18n/catalogs/it/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Impostazioni del client"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Disabilitare account"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Sostieni il progetto donando - grazie!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Bentornatə!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/ja/messages.po b/packages/client/components/i18n/catalogs/ja/messages.po
index 71afb7960..1e911a83a 100644
--- a/packages/client/components/i18n/catalogs/ja/messages.po
+++ b/packages/client/components/i18n/catalogs/ja/messages.po
@@ -405,6 +405,7 @@ msgstr "アバター"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "クライアント設定"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "アカウントの無効化"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "寄付でプロジェクトを支援する - ありがとうございます!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "ようこそ！"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/ko/messages.po b/packages/client/components/i18n/catalogs/ko/messages.po
index ccf1c5b7c..45c107a28 100644
--- a/packages/client/components/i18n/catalogs/ko/messages.po
+++ b/packages/client/components/i18n/catalogs/ko/messages.po
@@ -405,6 +405,7 @@ msgstr "아바타"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "클라이언트 설정"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "계정 비활성화"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "기부로 프로젝트를 지원해 주세요. 감사드려요!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "환영합니다!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/lb/messages.po b/packages/client/components/i18n/catalogs/lb/messages.po
index d2b704e02..4f4f2ce17 100644
--- a/packages/client/components/i18n/catalogs/lb/messages.po
+++ b/packages/client/components/i18n/catalogs/lb/messages.po
@@ -405,6 +405,7 @@ msgstr ""
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Cliente-Astellungen"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Desaktivéiere Kont"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Wëllkomm zeréck!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/leet/messages.po b/packages/client/components/i18n/catalogs/leet/messages.po
index b19ed0c93..3e8e71b68 100644
--- a/packages/client/components/i18n/catalogs/leet/messages.po
+++ b/packages/client/components/i18n/catalogs/leet/messages.po
@@ -405,6 +405,7 @@ msgstr "4V4742"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "CL13N7 53771N65"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "D1548L3 4CC0UN7"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "5UPP027 7H3 P20J3C7 8Y D0N471N6 - 7H4NK Y0U!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "W3LC0M3!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/lt/messages.po b/packages/client/components/i18n/catalogs/lt/messages.po
index 920e82e6e..937e80bec 100644
--- a/packages/client/components/i18n/catalogs/lt/messages.po
+++ b/packages/client/components/i18n/catalogs/lt/messages.po
@@ -405,6 +405,7 @@ msgstr "Avataras"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Kliento nustatymai"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Išjungti paskyrą"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Paremkite projektą paaukodami – ačiū!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Sveiki!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/lv/messages.po b/packages/client/components/i18n/catalogs/lv/messages.po
index 678948b19..4090f9fe5 100644
--- a/packages/client/components/i18n/catalogs/lv/messages.po
+++ b/packages/client/components/i18n/catalogs/lv/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatārs"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Klienta iestatījumi"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Atspējot kontu"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Atbalsti projektu ziedojot – paldies!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Laipni lūdzam!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/mk/messages.po b/packages/client/components/i18n/catalogs/mk/messages.po
index 5643756ba..7e727d9a5 100644
--- a/packages/client/components/i18n/catalogs/mk/messages.po
+++ b/packages/client/components/i18n/catalogs/mk/messages.po
@@ -405,6 +405,7 @@ msgstr ""
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Поставки на клиентот"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr ""
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Поддржете го проектот со донирање - ви благодариме!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Добредојде назад!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/ms/messages.po b/packages/client/components/i18n/catalogs/ms/messages.po
index d64b8c392..86946cdbd 100644
--- a/packages/client/components/i18n/catalogs/ms/messages.po
+++ b/packages/client/components/i18n/catalogs/ms/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Tetapan Klien"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Lumpuhkan Akaun"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Sokong projek dengan menderma - terima kasih!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Selamat Datang!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/nb_NO/messages.po b/packages/client/components/i18n/catalogs/nb_NO/messages.po
index eddffbd48..79a5b4d0f 100644
--- a/packages/client/components/i18n/catalogs/nb_NO/messages.po
+++ b/packages/client/components/i18n/catalogs/nb_NO/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Klientinnstillinger"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Deaktiver konto"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Støtt prosjektet ved å donere - takk!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Velkommen!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/nl/messages.po b/packages/client/components/i18n/catalogs/nl/messages.po
index 428841987..0f33b72f6 100644
--- a/packages/client/components/i18n/catalogs/nl/messages.po
+++ b/packages/client/components/i18n/catalogs/nl/messages.po
@@ -405,6 +405,7 @@ msgstr "Profielfoto"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Client instellingen"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Account uitschakelen"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Steun het project door te doneren - bedankt!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Welkom terug!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/owo/messages.po b/packages/client/components/i18n/catalogs/owo/messages.po
index c58872469..ea6233931 100644
--- a/packages/client/components/i18n/catalogs/owo/messages.po
+++ b/packages/client/components/i18n/catalogs/owo/messages.po
@@ -405,6 +405,7 @@ msgstr "Awatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Klyent Konfigurayshuns"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Disabwe account"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Suppowot the pwoject by downayting - thank yu! ^3^"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Wewcome!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/piglatin/messages.po b/packages/client/components/i18n/catalogs/piglatin/messages.po
index abbd7700d..115b24a80 100644
--- a/packages/client/components/i18n/catalogs/piglatin/messages.po
+++ b/packages/client/components/i18n/catalogs/piglatin/messages.po
@@ -405,6 +405,7 @@ msgstr "Avataryay"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Ientclay Ettingssay"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Isableday accountyay"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Upportsay ethay ojectpray ybay onatingday - ankthay ouyay!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Elcomeway!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/pl/messages.po b/packages/client/components/i18n/catalogs/pl/messages.po
index 60e3f2e39..ce5b72cf8 100644
--- a/packages/client/components/i18n/catalogs/pl/messages.po
+++ b/packages/client/components/i18n/catalogs/pl/messages.po
@@ -405,6 +405,7 @@ msgstr "Awatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Ustawienia Klienta"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Wyłącz konto"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Wesprzyj projekt przekazując darowiznę - dziękujemy!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Witamy!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/pr/messages.po b/packages/client/components/i18n/catalogs/pr/messages.po
index 0f5441af1..349831b57 100644
--- a/packages/client/components/i18n/catalogs/pr/messages.po
+++ b/packages/client/components/i18n/catalogs/pr/messages.po
@@ -405,6 +405,7 @@ msgstr ""
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Client Settins'"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Walk Ye Plank"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Yarrr give some doubloons, ye bilge rat!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Ahoy!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/pt_BR/messages.po b/packages/client/components/i18n/catalogs/pt_BR/messages.po
index 57e03e1e8..c951f73c3 100644
--- a/packages/client/components/i18n/catalogs/pt_BR/messages.po
+++ b/packages/client/components/i18n/catalogs/pt_BR/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Configurações do aplicativo"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Desativar conta"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Apoie o projeto doando - obrigado!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Bem-vindo(a) de volta!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/pt_PT/messages.po b/packages/client/components/i18n/catalogs/pt_PT/messages.po
index 71bedf831..235ff2953 100644
--- a/packages/client/components/i18n/catalogs/pt_PT/messages.po
+++ b/packages/client/components/i18n/catalogs/pt_PT/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Definições do cliente"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Desativar conta"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Apoia o projeto doando - obrigado!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Bem-vindo(a)!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/ro/messages.po b/packages/client/components/i18n/catalogs/ro/messages.po
index d5dacde02..73d9a5c4d 100644
--- a/packages/client/components/i18n/catalogs/ro/messages.po
+++ b/packages/client/components/i18n/catalogs/ro/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Setări Client"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Dezactivează contul"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Sprijină proiectul prin donații - vă mulțumim!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Bun venit!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/ru/messages.po b/packages/client/components/i18n/catalogs/ru/messages.po
index e981899c9..4f253d544 100644
--- a/packages/client/components/i18n/catalogs/ru/messages.po
+++ b/packages/client/components/i18n/catalogs/ru/messages.po
@@ -405,6 +405,7 @@ msgstr "Аватар"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Настройки клиента"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Отключить учетную запись"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Поддержите проект пожертвованием - спасибо!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Добро пожаловать!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/si/messages.po b/packages/client/components/i18n/catalogs/si/messages.po
index ee78bef4b..8a65e1533 100644
--- a/packages/client/components/i18n/catalogs/si/messages.po
+++ b/packages/client/components/i18n/catalogs/si/messages.po
@@ -405,6 +405,7 @@ msgstr "ප්‍රතිරූපය"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "අනුග්‍රාහක සැකසුම්"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "ගිණුම අබල කරන්න"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "මෙම ව්‍යාපෘතියට පරිත්‍යාග කිරීමෙන් උදව් වන්න - ස්තූතියි!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "සාදරයෙන් පිළිගනිමු!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/sk/messages.po b/packages/client/components/i18n/catalogs/sk/messages.po
index f56d28db2..5dad5c377 100644
--- a/packages/client/components/i18n/catalogs/sk/messages.po
+++ b/packages/client/components/i18n/catalogs/sk/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Nastavenie Klienta"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Deaktivovať Účet"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Podporte projekt príspevkom - ďakujeme!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Vitaj!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/sl/messages.po b/packages/client/components/i18n/catalogs/sl/messages.po
index 10c11d968..fa17bbab1 100644
--- a/packages/client/components/i18n/catalogs/sl/messages.po
+++ b/packages/client/components/i18n/catalogs/sl/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Nastavitve odjemalca"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Onemogoči račun"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Podprite projekt z donacijo - hvala!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Dobrodošli nazaj!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/sq/messages.po b/packages/client/components/i18n/catalogs/sq/messages.po
index 578c6ca34..4f75e4a9c 100644
--- a/packages/client/components/i18n/catalogs/sq/messages.po
+++ b/packages/client/components/i18n/catalogs/sq/messages.po
@@ -405,6 +405,7 @@ msgstr "Imazhi i profilit"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Opsionet e klientit"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Çaktivizo llogarinë"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Mbështetni projektin duke dhuruar!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Mirësevini!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/sr/messages.po b/packages/client/components/i18n/catalogs/sr/messages.po
index 4cd41cfc2..15ab35c30 100644
--- a/packages/client/components/i18n/catalogs/sr/messages.po
+++ b/packages/client/components/i18n/catalogs/sr/messages.po
@@ -405,6 +405,7 @@ msgstr "Профилна Слика"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Подешавања Апликације"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Онемогући Налог"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Подржите пројекат донацијом - хвала вам!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Добродошли!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/sv/messages.po b/packages/client/components/i18n/catalogs/sv/messages.po
index 8c2aa96e6..53dc9ba10 100644
--- a/packages/client/components/i18n/catalogs/sv/messages.po
+++ b/packages/client/components/i18n/catalogs/sv/messages.po
@@ -405,6 +405,7 @@ msgstr "Avatar"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Klientinställningar"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Inaktivera Konto"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Stöd projektet genom att donera - tack!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Välkommen!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/ta/messages.po b/packages/client/components/i18n/catalogs/ta/messages.po
index d7ea9424d..169fabb37 100644
--- a/packages/client/components/i18n/catalogs/ta/messages.po
+++ b/packages/client/components/i18n/catalogs/ta/messages.po
@@ -405,6 +405,7 @@ msgstr ""
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "வாடிக்கையாளர் அமைப்புகள்"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "கணக்கு முடக்கப்பட்டது"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "மீண்டும் வருக!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/th/messages.po b/packages/client/components/i18n/catalogs/th/messages.po
index a693f4a76..1d3f97a87 100644
--- a/packages/client/components/i18n/catalogs/th/messages.po
+++ b/packages/client/components/i18n/catalogs/th/messages.po
@@ -405,6 +405,7 @@ msgstr "รูปโปรไฟล์"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "การตั้งค่าแอป"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "ปิดการใช้งานบัญชี"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "ถ้าอยากสนับสนุนให้ Revolt ก็บริจาคมาได้เลย ขอบคุณนะ!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "ยินดีต้อนรับ!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/tokipona/messages.po b/packages/client/components/i18n/catalogs/tokipona/messages.po
index 16dfc325f..b709527a6 100644
--- a/packages/client/components/i18n/catalogs/tokipona/messages.po
+++ b/packages/client/components/i18n/catalogs/tokipona/messages.po
@@ -405,6 +405,7 @@ msgstr "sitelen jan"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "nasin ilo ilo"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "o pini e sijelo sina"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "sina olin e ilo ni? o pana e mani - pona a!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "o kama pona!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/tr/messages.po b/packages/client/components/i18n/catalogs/tr/messages.po
index 4e462ef5a..1352e7e3f 100644
--- a/packages/client/components/i18n/catalogs/tr/messages.po
+++ b/packages/client/components/i18n/catalogs/tr/messages.po
@@ -405,6 +405,7 @@ msgstr "Profil Resmi"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "İstemci Ayarları"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Hesabı devre dışı bırak"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Bağış yaparak projeyi destekleyin - teşekkürler!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Hoş geldin!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/uk/messages.po b/packages/client/components/i18n/catalogs/uk/messages.po
index 426b1726a..37b823660 100644
--- a/packages/client/components/i18n/catalogs/uk/messages.po
+++ b/packages/client/components/i18n/catalogs/uk/messages.po
@@ -405,6 +405,7 @@ msgstr "Аватар"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Налаштування клієнта"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Відключити акаунт"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Підтримайте проєкт пожертвуванням - дякуємо!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Ласкаво просимо!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/ur/messages.po b/packages/client/components/i18n/catalogs/ur/messages.po
index 115e9e4f2..b09049948 100644
--- a/packages/client/components/i18n/catalogs/ur/messages.po
+++ b/packages/client/components/i18n/catalogs/ur/messages.po
@@ -405,6 +405,7 @@ msgstr ""
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr ""
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr ""
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "عطیہ کرکے پروجیکٹ کی حمایت کریں - آپ کا شکریہ!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "خوش آمدید!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/vec/messages.po b/packages/client/components/i18n/catalogs/vec/messages.po
index 34a70a13a..70d628908 100644
--- a/packages/client/components/i18n/catalogs/vec/messages.po
+++ b/packages/client/components/i18n/catalogs/vec/messages.po
@@ -405,6 +405,7 @@ msgstr ""
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Inpostasioni de Cliente"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Dezativar Conta"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Te juti el projeto donando - gràsie miłe!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Benvenjùo(a)!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/vi/messages.po b/packages/client/components/i18n/catalogs/vi/messages.po
index 87336bd5f..6ea6fbde9 100644
--- a/packages/client/components/i18n/catalogs/vi/messages.po
+++ b/packages/client/components/i18n/catalogs/vi/messages.po
@@ -405,6 +405,7 @@ msgstr "Ảnh đại diện"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "Cài Đặt Ứng Dụng"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "Vô Hiệu Hoá Tài Khoản"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "Ủng hộ dự án bằng cách quyên góp - cảm ơn bạn!"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "Chào mừng!"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/zh_Hans/messages.po b/packages/client/components/i18n/catalogs/zh_Hans/messages.po
index 6c699831b..922c2cc5e 100644
--- a/packages/client/components/i18n/catalogs/zh_Hans/messages.po
+++ b/packages/client/components/i18n/catalogs/zh_Hans/messages.po
@@ -405,6 +405,7 @@ msgstr "头像"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "客户端设置"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "禁用账户"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "捐赠以支持此项目——谢谢！"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "欢迎！"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""
diff --git a/packages/client/components/i18n/catalogs/zh_Hant/messages.po b/packages/client/components/i18n/catalogs/zh_Hant/messages.po
index 33aab70e2..131ec3413 100644
--- a/packages/client/components/i18n/catalogs/zh_Hant/messages.po
+++ b/packages/client/components/i18n/catalogs/zh_Hant/messages.po
@@ -405,6 +405,7 @@ msgstr "頭像"
 #: components/auth/src/flows/FlowLogin.tsx
 #: components/auth/src/flows/FlowCreate.tsx
 #: components/auth/src/flows/FlowCheck.tsx
+#: components/app/interface/settings/user/_AccountCard.tsx
 msgid "Back"
 msgstr ""
 
@@ -647,6 +648,7 @@ msgstr "用戶端設定"
 #: components/modal/modals/UserProfileRoles.tsx
 #: components/modal/modals/UserProfileMutualGroups.tsx
 #: components/modal/modals/UserProfileMutualFriends.tsx
+#: components/modal/modals/TryPWA.tsx
 #: components/modal/modals/ServerInfo.tsx
 #: components/modal/modals/PolicyChange.tsx
 #: components/modal/modals/LinkWarning.tsx
@@ -1045,6 +1047,10 @@ msgstr ""
 msgid "Developer Documentation"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Did you know?"
+msgstr ""
+
 #: components/app/interface/settings/user/Account.tsx
 msgid "Disable Account"
 msgstr "凍結帳號"
@@ -1473,6 +1479,10 @@ msgstr ""
 msgid "notifications.sounds.individual"
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "Install"
+msgstr ""
+
 #: components/app/interface/settings/user/Native.tsx
 msgid "Instead of closing, Stoat will hide in your tray."
 msgstr ""
@@ -1545,7 +1555,7 @@ msgstr ""
 msgid "Join the Stoat Lounge"
 msgstr ""
 
-#: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
+#: src/interface/channels/ChannelHeader.tsx
 msgid "Join the voice channel"
 msgstr ""
 
@@ -2195,6 +2205,7 @@ msgstr ""
 msgid "Raid or spam attack"
 msgstr ""
 
+#: components/app/menus/MessageContextMenu.tsx
 #: components/app/interface/settings/channel/permissions/ChannelPermissionsEditor.tsx
 msgid "React"
 msgstr ""
@@ -2654,8 +2665,8 @@ msgid "Spellchecker"
 msgstr ""
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Start the call"
-msgstr ""
+#~ msgid "Start the call"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Native.tsx
 msgid "Start with Computer"
@@ -2710,8 +2721,8 @@ msgid "Support the project by donating - thank you!"
 msgstr "通過捐贈支持本計劃 - 謝謝！"
 
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "Switch to this voice channel"
-msgstr ""
+#~ msgid "Switch to this voice channel"
+#~ msgstr ""
 
 #: components/app/interface/settings/user/Sync.tsx
 msgid "Sync appearance options, such as chosen emoji pack and message density."
@@ -3125,10 +3136,9 @@ msgstr "歡迎！"
 msgid "Whether other users can edit these settings"
 msgstr ""
 
-#. placeholder {0}: names.join(", ")
 #: components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx
-msgid "With {0}"
-msgstr ""
+#~ msgid "With {0}"
+#~ msgstr ""
 
 #: components/modal/modals/CreateGroupOrServer.tsx
 msgid "Would you like to create a new group or server?"
@@ -3158,6 +3168,10 @@ msgstr ""
 msgid "You are banned from this server."
 msgstr ""
 
+#: components/modal/modals/TryPWA.tsx
+msgid "You can <0>install</0> this Web App on your devive for conveient access from the Home Screen, just like a real app. It even hides the huge menu bar!<1/><2/>To install, tap the button below or open your browser's menu and choose<3> Add to Home Screen</3>."
+msgstr ""
+
 #: src/interface/Home.tsx
 msgid "You can also click the gear icon in the bottom left."
 msgstr ""