fix(client): restore typecheck and image attachment preview modal

Signed-off-by: Bob-Swan <chrisrobinsonlive@gmail.com>

Author: Bob-Swan

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

@@ -64,7 +64,14 @@ export default function Native() {
     setAutostart(savedValue);
   }
 
-  const toggles: Partial<Record<keyof DesktopConfig, () => void>> = {
+  type ToggleKey =
+    | "minimiseToTray"
+    | "customFrame"
+    | "discordRpc"
+    | "spellchecker"
+    | "hardwareAcceleration";
+
+  const toggles: Record<ToggleKey, () => void> = {
     minimiseToTray: () => set({ minimiseToTray: !config().minimiseToTray }),
     customFrame: () => set({ customFrame: !config().customFrame }),
     discordRpc: () => set({ discordRpc: !config().discordRpc }),
@@ -73,23 +80,23 @@ export default function Native() {
       set({ hardwareAcceleration: !config().hardwareAcceleration }),
   };
 
-  function CheckboxButton<K extends keyof DesktopConfig>(
-    key: K,
+  function CheckboxButton(
+    key: ToggleKey,
     icon: string,
     label: string,
     description: string,
   ) {
     return (
       <CategoryButton
         action={
-          <Checkbox
-            checked={config()[key]}
-            onClick={(e) => e.stopPropagation()}
-            onChange={(e) => {
-              e.stopPropagation();
-              toggles[key]!();
-            }}
-          />
+          <span onClick={(e) => e.stopPropagation()}>
+            <Checkbox
+              checked={config()[key]}
+              onChange={() => {
+                toggles[key]();
+              }}
+            />
+          </span>
         }
         onClick={toggles[key]}
         icon={<Symbol>{icon}</Symbol>}
@@ -105,11 +112,9 @@ export default function Native() {
       <CategoryButton.Group>
         <CategoryButton
           action={
-            <Checkbox
-              checked={autostart()}
-              onClick={(e) => e.stopPropagation()}
-              onChange={toggleAutostart}
-            />
+            <span onClick={(e) => e.stopPropagation()}>
+              <Checkbox checked={autostart()} onChange={toggleAutostart} />
+            </span>
           }
           onClick={toggleAutostart}
           icon={<Symbol>exit_to_app</Symbol>}

packages/client/components/i18n/index.tsx

@@ -4,6 +4,7 @@ import { I18nProvider as LinguiProvider } from "@lingui-solid/solid";
 import { i18n } from "@lingui/core";
 
 import { type LocaleOptions, Language, Languages } from "./Languages";
+// @ts-expect-error generated Lingui catalog modules are JS-only and do not emit d.ts files
 import { messages as en } from "./catalogs/en/messages";
 import { initTime, loadTimeLocale } from "./dayjs";
 
@@ -23,7 +24,7 @@ export async function loadAndSwitchLocale(
     const data =
       Languages[key].i18n === "en"
         ? en
-        : (await import(`./catalogs/${Languages[key].i18n}/messages.ts`))
+        : (await import(`./catalogs/${Languages[key].i18n}/messages`))
             .messages;
 
     i18n.load({

packages/client/components/state/stores/Theme.ts

@@ -70,7 +70,10 @@ export type TypeTheme = {
   messageGroupSpacing: number;
 };
 
-export type SelectedTheme = Pick & {
+export type SelectedTheme = Pick<
+  TypeTheme,
+  "blur" | "interfaceFont" | "monospaceFont" | "messageSize" | "messageGroupSpacing"
+> & {
   preset: "you";
   darkMode: boolean;
 
@@ -82,8 +85,8 @@ export type SelectedTheme = Pick & {
 /**
  * Manages theme information
  */
-export class Theme extends AbstractStore {
-  prefersDark: Accessor;
+export class Theme extends AbstractStore<"theme", TypeTheme> {
+  prefersDark: Accessor<boolean>;
 
   /**
    * Construct store
@@ -138,14 +141,14 @@ export class Theme extends AbstractStore {
   /**
    * Validate the given data to see if it is compliant and return a compliant object
    */
-  clean(input: Partial): TypeTheme {
+  clean(input: Partial<TypeTheme>): TypeTheme {
     const data: TypeTheme = this.default();
 
     if (["light", "dark", "system"].includes(input.mode!)) {
       data.mode = input.mode!;
     }
 
-    if (["you", "neutral"].includes(input.preset!)) {
+    if (input.preset === "you") {
       data.preset = input.preset!;
     }
 

packages/client/components/ui/components/features/messaging/composition/FileCarousel.tsx

@@ -37,6 +37,13 @@ interface Props {
    * @param fileId ID
    */
   removeFile(fileId: string): void;
+
+  /**
+   * Preview file (for images)
+   * @param fileId ID
+   * @param dataUri Data URI of the file
+   */
+  onPreview?: (fileId: string, dataUri: string, fileName: string) => void;
 }
 
 /**
@@ -70,9 +77,38 @@ export function FileCarousel(props: Props) {
               const file = () => props.getFile(id);
 
               /**
-               * Handler for removing the file
+               * Get whether this is an image
+               */
+              const isImage = () =>
+                ALLOWED_IMAGE_TYPES.includes(file().file.type);
+
+              /**
+               * Handler for previewing the file
+               */
+              const onPreview = (e: MouseEvent) => {
+                e.stopPropagation();
+                const currentFile = file();
+                const dataUri = currentFile.dataUri;
+
+                if (
+                  ALLOWED_IMAGE_TYPES.includes(currentFile.file.type) &&
+                  props.onPreview &&
+                  dataUri
+                ) {
+                  props.onPreview(id, dataUri, currentFile.file.name);
+                } else {
+                  props.removeFile(id);
+                }
+              };
+
+              /**
+               * Handler for explicitly removing the file.
+               * Prevents parent click from opening image preview.
                */
-              const onClick = () => props.removeFile(id);
+              const onRemove = (e: MouseEvent) => {
+                e.stopPropagation();
+                props.removeFile(id);
+              };
 
               return (
                 <>
@@ -82,8 +118,8 @@ export function FileCarousel(props: Props) {
 
                   <Entry ignored={index() >= CONFIGURATION.MAX_ATTACHMENTS}>
                     <PreviewBox
-                      onClick={onClick}
-                      image={ALLOWED_IMAGE_TYPES.includes(file().file.type)}
+                      onClick={onPreview}
+                      image={isImage()}
                     >
                       <Switch
                         fallback={
@@ -102,7 +138,7 @@ export function FileCarousel(props: Props) {
                           />
                         </Match>
                       </Switch>
-                      <Overlay>
+                      <Overlay onClick={onRemove}>
                         <MdCancel {...iconSize(36)} />
                       </Overlay>
                     </PreviewBox>

packages/client/src/interface/channels/text/Composition.tsx

@@ -20,6 +20,7 @@ import { useModals } from "@revolt/modal";
 import { useState } from "@revolt/state";
 import {
   CompositionMediaPicker,
+  Dialog,
   FileCarousel,
   FileDropAnywhereCollector,
   FilePasteCollector,
@@ -30,6 +31,7 @@ import {
 } from "@revolt/ui";
 import { Symbol } from "@revolt/ui/components/utils/Symbol";
 import { useSearchSpace } from "@revolt/ui/components/utils/autoComplete";
+import { styled } from "styled-system/jsx";
 
 interface Props {
   /**
@@ -88,6 +90,12 @@ export function MessageComposition(props: Props) {
   const [nodeReplacement, setNodeReplacement] =
     createSignal<readonly [string | "_focus"]>();
 
+  // Image preview state
+  const [previewImage, setPreviewImage] = createSignal<{
+    dataUri: string;
+    fileName: string;
+  } | null>(null);
+
   // bind this composition instance to the global node replacement signal
   state.draft._setNodeReplacement = setNodeReplacement;
   onCleanup(() => (state.draft._setNodeReplacement = undefined));
@@ -289,7 +297,21 @@ export function MessageComposition(props: Props) {
         getFile={state.draft.getFile}
         addFile={addFile}
         removeFile={removeFile}
+        onPreview={(fileId, dataUri, fileName) => {
+          setPreviewImage({ dataUri, fileName });
+        }}
       />
+
+      {/* Image Preview Modal */}
+      <Dialog
+        show={!!previewImage()}
+        onClose={() => setPreviewImage(null)}
+        title={previewImage()?.fileName}
+      >
+        <Show when={previewImage()}>
+          <PreviewImage src={previewImage()!.dataUri} alt={previewImage()!.fileName} />
+        </Show>
+      </Dialog>
       <For each={draft().replies ?? []}>
         {(reply) => {
           const message = client()!.messages.get(reply.id);
@@ -396,3 +418,16 @@ export function MessageComposition(props: Props) {
     </>
   );
 }
+
+/**
+ * Preview image in modal
+ */
+const PreviewImage = styled("img", {
+  base: {
+    maxWidth: "100%",
+    maxHeight: "70vh",
+    objectFit: "contain",
+    borderRadius: "var(--borderRadius-md)",
+  },
+});
+ 

packages/client/tsconfig.json

@@ -11,7 +11,6 @@
     "types": [
       "vite/client",
       "vite-plugin-solid-svg/types",
-      "@testing-library/jest-dom",
       "vite-plugin-pwa/client"
     ],
     "noEmit": true,