Merge branch 'revoltchat:main' into fix-linebreak-behavior

.eslintrc.json

@@ -44,6 +44,7 @@
           "FunctionExpression": true
         }
       }
-    ]
+    ],
+    "solid/jsx-no-undef": ["ignore"]
   }
 }

.gitignore

@@ -7,3 +7,4 @@ dist
 .env*
 !.env.example
 .vercel
+.idea

package.json

@@ -8,8 +8,8 @@
     "test:browser:install": "pnpm --filter browser-test-runner exec playwright install",
     "test:browser:regression": "pnpm --filter browser-test-runner exec playwright test regression",
     "test:browser:report": "pnpm --filter browser-test-runner exec playwright show-report",
-    "lint": "eslint --ext .ts,.tsx components/ packages/",
-    "lint:fix": "pnpm lint --fix",
+    "lint": "eslint --ext .ts,.tsx packages/client",
+    "lint:fix": "eslint --fix --ext .ts,.tsx packages/client",
     "dev:web": "pnpm --filter client dev",
     "dev:desktop": "pnpm --filter desktop tauri dev",
     "build:deps": "pnpm --filter revolt.js build",
@@ -21,6 +21,9 @@
     "fmt:check": "prettier --check '**/*.{ts,tsx,json}'",
     "typecheck": "cd packages/client && pnpm run typecheck"
   },
+  "devDependencies": {
+    "eslint": "^8.49.0"
+  },
   "keywords": [],
   "engines": {
     "node": ">=16",

packages/client/codegen.plugin.ts

@@ -12,7 +12,7 @@ const directiveRegex = new RegExp("use:(" + DIRECTIVES.join("|") + ")");
 export default function codegenPlugin() {
   return {
     name: "codegen",
-    enforce: "pre",
+    enforce: "pre" as const,
     transform(src: string, id: string) {
       if (fileRegex.test(id)) {
         src = src.replace(codegenRegex, (substring, group1) => {

packages/client/components/app/interface/channels/text/Message.tsx

@@ -102,6 +102,7 @@ export function Message(props: Props) {
       }
       avatar={
         <AvatarContainer
+          // @ts-expect-error this is a hack; replace with plain element & panda-css
           use:floating={floatingUserMenusFromMessage(props.message)}
         >
           <Avatar size={36} src={props.message.avatarURL} />
@@ -163,12 +164,14 @@ export function Message(props: Props) {
             </Tooltip>
           </Match>
           <Match when={props.message.webhook}>
-            <Tooltip content={t("app.main.channel.webhook")} placement="top">
-              <MdCloud {...iconSize(16)} />
-            </Tooltip>
-          </Match>
-          <Match when={props.message.webhook}>
-            <Tooltip content={t("app.main.channel.webhook")} placement="top">
+            <Tooltip
+              content={
+                "Webhook"
+
+                // TODO: missing i18n
+              }
+              placement="top"
+            >
               <MdCloud {...iconSize(16)} />
             </Tooltip>
           </Match>
@@ -253,7 +256,9 @@ export function Message(props: Props) {
           </For>
         </Show>
         <Reactions
-          reactions={props.message.reactions}
+          reactions={
+            props.message.reactions as never as Map<string, Set<string>>
+          }
           interactions={props.message.interactions}
           userId={client().user!.id}
           addReaction={react}

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

@@ -31,7 +31,9 @@ const Config: SettingsConfiguration<Channel> = {
       return webhook!.name;
     }
 
-    return t(`app.settings.channel_pages.${key.replaceAll("/", ".")}.title`);
+    return t(
+      `app.settings.channel_pages.${key.replaceAll("/", ".")}.title` as any
+    );
   },
 
   /**

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

@@ -28,7 +28,7 @@ const Config: SettingsConfiguration<Server> = {
   title(key) {
     const t = useTranslation();
     return t(
-      `app.settings.server_pages.${key.replaceAll("/", ".")}.title`,
+      `app.settings.server_pages.${key.replaceAll("/", ".")}.title` as any,
       undefined,
       key
     );

packages/client/components/app/interface/settings/user/Account.tsx

@@ -1,5 +1,5 @@
 import {
-  Accessor,
+  type Accessor,
   Match,
   Show,
   Switch,
@@ -41,7 +41,7 @@ import MdVerifiedUser from "@material-design-icons/svg/outlined/verified_user.sv
 
 import { useSettingsNavigation } from "../Settings";
 
-import { UserSummary } from "./account";
+import { UserSummary } from "./account/index";
 
 /**
  * Account Page

packages/client/components/app/interface/settings/user/Keybinds.tsx

@@ -62,7 +62,9 @@ export default function Keybinds() {
 
   const translateCombo = (combo: KeyCombo, short: boolean) =>
     combo
-      .map((key) => t(`keys.${key}.${short ? "short" : "full"}`, {}, key))
+      .map((key) =>
+        t(`keys.${key}.${short ? "short" : "full"}` as any, {}, key)
+      )
       .join("+");
 
   const translateSequence = (sequence: KeyComboSequence, short: boolean) =>
@@ -94,8 +96,12 @@ export default function Keybinds() {
       .flat()
       .map((action) => [
         action,
-        t(`app.settings.pages.keybinds.action.${action}.description`) as string,
-        t(`app.settings.pages.keybinds.action.${action}.title`) as string,
+        t(
+          `app.settings.pages.keybinds.action.${action}.description` as any
+        ) as string,
+        t(
+          `app.settings.pages.keybinds.action.${action}.title` as any
+        ) as string,
         ...state.keybinds
           .getKeybinds()
           [action].flatMap((sequence) => [
@@ -135,7 +141,7 @@ export default function Keybinds() {
       <For each={filteredData()}>
         {([category, actions]) => (
           <CategoryCollapse
-            title={t(`app.settings.pages.keybinds.category.${category}`)}
+            title={t(`app.settings.pages.keybinds.category.${category}` as any)}
             // TODO: open={category !== "advanced"}
           >
             <Column group="6px">
@@ -144,12 +150,14 @@ export default function Keybinds() {
                   <ActionCategory>
                     <CategoryButton
                       description={t(
-                        `app.settings.pages.keybinds.action.${action}.description`
+                        `app.settings.pages.keybinds.action.${action}.description` as any
                       )}
                       action={<BiSolidPlusCircle size={24} />}
                       onClick={() => addKeybind(action)}
                     >
-                      {t(`app.settings.pages.keybinds.action.${action}.title`)}
+                      {t(
+                        `app.settings.pages.keybinds.action.${action}.title` as any
+                      )}
                     </CategoryButton>
                     <For each={state.keybinds.getKeybinds()[action]}>
                       {(sequence, index) => {

packages/client/components/app/interface/settings/user/Language.tsx

@@ -4,7 +4,7 @@ import {
   Languages,
   browserPreferredLanguage,
   language,
-  loadAndSetLanguage,
+  setLanguage,
   useTranslation,
 } from "@revolt/i18n";
 import { UnicodeEmoji } from "@revolt/markdown/emoji";
@@ -101,7 +101,7 @@ function PickLanguage() {
           <CategoryButton
             icon={<UnicodeEmoji emoji={lang.emoji} />}
             action={<Checkbox value={id === language()} />}
-            onClick={() => loadAndSetLanguage(id as never)}
+            onClick={() => setLanguage(id as never)}
           >
             <Row>
               {lang.display}{" "}

packages/client/components/app/interface/settings/user/bots/ViewBot.tsx

@@ -13,7 +13,7 @@ import MdPublic from "@material-design-icons/svg/outlined/public.svg?component-s
 import MdToken from "@material-design-icons/svg/outlined/token.svg?component-solid";
 
 import { useSettingsNavigation } from "../../Settings";
-import { UserSummary } from "../account";
+import { UserSummary } from "../account/index";
 import { EditProfileButtons } from "../profile/EditProfileButtons";
 
 /**

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

@@ -114,7 +114,7 @@ const Config: SettingsConfiguration<{ server: Server }> = {
     }
 
     return t(
-      `app.settings.pages.${key.replaceAll("/", ".")}.title`,
+      `app.settings.pages.${key.replaceAll("/", ".")}.title` as any,
       undefined,
       key
     );

packages/client/components/app/interface/settings/user/profile/EditProfile.tsx

@@ -14,7 +14,7 @@ import {
 
 import MdGroups from "@material-design-icons/svg/outlined/groups.svg?component-solid";
 
-import { UserSummary } from "../account";
+import { UserSummary } from "../account/index";
 
 import { EditProfileButtons } from "./EditProfileButtons";
 

packages/client/components/auth/src/AuthPage.tsx

@@ -10,7 +10,6 @@ import MdDarkMode from "@material-design-icons/svg/filled/dark_mode.svg?componen
 
 import background from "./background.jpg";
 import { FlowBase } from "./flows/Flow";
-
 /**
  * Authentication page layout
  */

packages/client/components/auth/src/flows/FlowVerify.tsx

@@ -80,7 +80,7 @@ export default function FlowVerify() {
         <FlowTitle>{t("login.error.verify")}</FlowTitle>
         <Typography variant="legacy-settings-description">
           {t(
-            `error.${(state() as State & { state: "error" }).error}`,
+            `error.${(state() as State & { state: "error" }).error}` as any,
             undefined,
             (state() as State & { state: "error" }).error
           )}

packages/client/components/auth/src/flows/Form.tsx

@@ -164,7 +164,7 @@ export function Form(props: Props) {
         {props.children}
         <Show when={error()}>
           <Typography variant="legacy-settings-description">
-            {t(`error.${error()}`, undefined, error())}
+            {t(`error.${error()}` as any, undefined, error())}
           </Typography>
         </Show>
       </Column>

packages/client/components/i18n/__tests__/translationComponent.test.tsx

@@ -1,7 +1,10 @@
+import { createMemo, createResource } from "solid-js";
+
+import * as i18n from "@solid-primitives/i18n";
 import { render, screen } from "@solidjs/testing-library";
 import { describe, expect, it } from "vitest";
 
-import { I18nContext, default as i18n, useTranslation } from "..";
+import { I18nContext, dict, fetchLanguage, language, useTranslation } from "..";
 
 const TranslatedText = () => {
   const t = useTranslation();
@@ -11,8 +14,16 @@ const TranslatedText = () => {
 
 describe("Translation component", () => {
   it("should translate the text", () => {
+    const [dictionary] = createResource(language, fetchLanguage, {
+      initialValue: i18n.flatten(dict.en),
+    });
+
+    const t = createMemo(() =>
+      i18n.translator(dictionary, i18n.resolveTemplate)
+    );
+
     render(() => (
-      <I18nContext.Provider value={i18n}>
+      <I18nContext.Provider value={t()}>
         <TranslatedText />
       </I18nContext.Provider>
     ));

packages/client/components/i18n/index.tsx

@@ -1,49 +1,50 @@
-import { createSignal } from "solid-js";
-
-import { createI18nContext, useI18n } from "@solid-primitives/i18n";
-import defaultsDeep from "lodash.defaultsdeep";
+import { createContext, createSignal, useContext, useTransition } from "solid-js";
+import * as i18n from '@solid-primitives/i18n';
 
 import { Language, Languages } from "./locales/Languages";
 import en from "./locales/en.json";
 
 export { Language, Languages } from "./locales/Languages";
-export { I18nContext, useI18n } from "@solid-primitives/i18n";
 export * from "./dayjs";
 
 /**
  * Default dictionary object
  */
-const dict = {
+export const dict = {
   en,
 };
 
+export type RawDictionary = typeof dict.en;
+export type Dictionary = i18n.Flatten<RawDictionary>;
+
 /**
  * Currently set language
  */
-const [language, setLanguage] = createSignal<Language>("en" as Language);
+const [language, _setLanguage] = createSignal<Language>("en" as Language);
 export { language };
 
-/**
- * i18n Context
- */
-const context = createI18nContext(dict, "en");
-export default context;
-
 /**
  * Use translation function as a hook
  */
-export const useTranslation = () => useI18n()[0];
+
+export const I18nContext = createContext(i18n.translator(() => i18n.flatten(dict.en), i18n.resolveTemplate))
+
+export const useTranslation = () => useContext(I18nContext);
+
+const [duringI18nTransition, startI18nTransition] = useTransition();
+
+export { duringI18nTransition };
+
+export async function fetchLanguage(key: Language): Promise<Dictionary> {
+  const data = await import(`./locales/${Languages[key].i18n}.json`) as typeof dict.en;
+  return i18n.flatten(data)
+}
 
 /**
- * Load and set a language by the given key
+ * set a language by the given key
  */
-export async function loadAndSetLanguage(key: Language) {
-  if (language() === key) return;
-  setLanguage(key);
-
-  const data = await import(`./locales/${Languages[key].i18n}.json`);
-  context[1].add(key, defaultsDeep({}, data, en));
-  context[1].locale(key);
+export function setLanguage(key: Language) {
+  startI18nTransition(() => _setLanguage(key));
 }
 
 /**
@@ -74,7 +75,7 @@ export function browserPreferredLanguage() {
  */
 export const useQuantity = () => {
   const t = useTranslation();
-  return (id: string, count: number) =>
+  return (id: 'members' | 'dropFiles', count: number) =>
     t(`quantities.${id}.${count > 1 ? "many" : "one"}`, {
       count: count.toString(),
     });

packages/client/components/markdown/plugins/customEmoji.tsx

@@ -37,6 +37,7 @@ export function RenderCustomEmoji(props: CustomComponentProps) {
     <Switch fallback={<span>{`:${emoji()?.name ?? props.match}:`}</span>}>
       <Match when={exists()}>
         <TooltipTrigger
+          // @ts-expect-error this is a hack; replace with plain element & panda-css
           use:floating={{
             tooltip: {
               placement: "top",

packages/client/components/markdown/sanitise.ts

@@ -1,5 +1,3 @@
-import { Root } from "hast";
-
 /**
  * Regex for matching execessive recursion of blockquotes and lists
  */
@@ -71,7 +69,7 @@ export function sanitise(content: string) {
  * Replace \uF800 with break elements
  */
 export function remarkInsertBreaks() {
-  return (tree: Root) => {
+  return (tree: import('hast').Root) => {
     /**
      * Process element and sub-tree
      * @param element Element

packages/client/components/modal/form.tsx

@@ -110,7 +110,7 @@ export function createFormModal<
         <Show when={error()}>
           <Error>
             <Typography variant="label">
-              {t(`error.${error()}`, undefined, error())}
+              {t(`error.${error()}` as any, undefined, error())}
             </Typography>
           </Error>
         </Show>

packages/client/components/modal/modals/CustomStatus.tsx

@@ -22,6 +22,7 @@ const CustomStatus: PropGenerator<"custom_status"> = (props) => {
     data: {
       text: {
         field: t("app.context_menu.custom_status"),
+        // @ts-expect-error this is a hack; replace with plain element & panda-css
         "use:autoComplete": true,
       },
     },