Port upstream commits into lavender

.eslintrc.json

@@ -43,6 +43,7 @@
         "varsIgnorePattern": "^_"
       }
     ],
+    "solid/jsx-no-undef": [0],
     "require-jsdoc": [
       "warn",
       {

GUIDELINES.md

@@ -12,7 +12,7 @@ I am still working on putting stuff together, but here are some important things
 - Comment above all classes, constants, Solid components, constructors, methods which do not override the parent class and functions.
 - If you have relatively long and / or complex code, either explain what it does in the method / function comment or in-line reasonable comments throughout to make it easy to follow through.
 - Avoid importing external libraries in more than one component, re-export where appropriate.
-- Import only types where necessary, such as `revolt.js` in `@revolt/ui`.
+- Import only types where necessary, such as `@upryzing/upryzing.js` in `@revolt/ui`.
 
 Also another major thing: **accessibility!**
 

README.md

@@ -23,7 +23,7 @@ cd lavender
 # git submodule init && git submodule update
 
 # install all packages
-pnpm i
+pnpm i --frozen-lockfile
 
 # build deps:
 pnpm build:deps
@@ -55,7 +55,7 @@ Any edits to the `uprzying.js` codebase will immediately be reflected while deve
 
 ```bash
 # install packages
-pnpm i
+pnpm i --frozen-lockfile
 
 # build dependencies
 pnpm build:deps

package.json

@@ -9,7 +9,7 @@
     "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:fix": "eslint --fix --ext .ts,.tsx packages/client",
     "dev:web": "pnpm --filter @upryzing/lavender dev",
     "dev:desktop": "pnpm --filter @upryzing/lavender-desktop tauri dev",
     "build:deps": "pnpm --filter @upryzing/upryzing.js build",
@@ -20,6 +20,9 @@
     "fmt:check": "prettier --check '**/*.{ts,tsx,json}'",
     "typecheck": "cd packages/client && pnpm run typecheck"
   },
+  "devDependencies": {
+    "eslint": "^8.49.0"
+  },
   "keywords": [],
   "engines": {
     "node": ">=18",

packages/client/.env.example

@@ -1,5 +1,8 @@
-# specify custom API URL
-VITE_API_URL=
+# connect to local Upryzing instance
+VITE_API_URL=http://localhost:14702
+VITE_WS_URL=ws://localhost:14703
+VITE_MEDIA_URL=http://localhost:14704
+VITE_PROXY_URL=http://localhost:14705
 
 # specify hCaptcha sitekey
 VITE_HCAPTCHA_SITEKEY=

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

@@ -30,7 +30,6 @@ import MdNotificationsOff from "@material-design-icons/svg/filled/notifications_
 import MdShield from "@material-design-icons/svg/filled/shield.svg?component-solid";
 import MdSmartToy from "@material-design-icons/svg/filled/smart_toy.svg?component-solid";
 import MdSpa from "@material-design-icons/svg/filled/spa.svg?component-solid";
-import MdSchedule from "@material-design-icons/svg/filled/schedule.svg?component-solid";
 
 import { MessageContextMenu } from "../../../menus/MessageContextMenu";
 import {
@@ -103,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} />
@@ -164,20 +164,17 @@ 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>
-          <Match when={props.message.member?.timeout}>
-            <Tooltip content={`User has been timed out for ${dayjs(props.message.member?.timeout).toNow(true)}`} placement="top">
-              <MdSchedule {...iconSize(16)} />
-            </Tooltip>
-          </Match>
           <Match when={props.message.isSuppressed}>
             <Tooltip content={"Silent" /* TODO: i18n */} placement="top">
               <MdNotificationsOff {...iconSize(16)} />
@@ -207,11 +204,10 @@ export function Message(props: Props) {
               </Tooltip>
             </NewUser>
           </Match>
-          {/* pronounce example
-          <Match when={props.message.authorId === "01EX2NCWQ0CHS3QJF0FEQS1GR4"}>
+          <Match when={props.message.authorId === "01JENZCKGRKNQEN0W3XXWTJQS7"}>
             <span />
-            <span>he/him &middot; </span>
-          </Match> */}
+            <span>she/her &middot; </span>
+          </Match>
         </Switch>
       }
       compact={
@@ -235,10 +231,10 @@ export function Message(props: Props) {
             menuGenerator={(user) =>
               user
                 ? floatingUserMenus(
-                  user!,
-                  // TODO: try to fetch on demand member
-                  props.message.server?.getMember(user!.id)
-                )
+                    user!,
+                    // TODO: try to fetch on demand member
+                    props.message.server?.getMember(user!.id)
+                  )
                 : {}
             }
             isServer={!!props.message.server}
@@ -260,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/channels/text/Messages.tsx

@@ -816,23 +816,23 @@ const Padding = styled.div`
  */
 type ListEntry =
   | {
-    // Message
-    t: 0;
-    message: MessageInterface;
-    tail: boolean;
-    highlight: boolean;
-  }
+      // Message
+      t: 0;
+      message: MessageInterface;
+      tail: boolean;
+      highlight: boolean;
+    }
   | {
-    // Message Divider
-    t: 1;
-    date?: string;
-    unread?: boolean;
-  }
+      // Message Divider
+      t: 1;
+      date?: string;
+      unread?: boolean;
+    }
   | {
-    // Blocked messages
-    t: 2;
-    count: number;
-  };
+      // Blocked messages
+      t: 2;
+      count: number;
+    };
 
 /**
  * Render individual list entry

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/Overview.tsx

@@ -109,7 +109,7 @@ export default function ServerOverview(props: ServerSettingsProps) {
             </FormGroup>
             <FormGroup>
               <CategoryButton
-                description="Server can be joined from Discover"
+                description="Space can be joined from Discover"
                 icon={<BiRegularGlobe size={24} />}
                 action={
                   <Checkbox

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/Feedback.tsx

@@ -22,8 +22,7 @@ export default function Feedback() {
   return (
     <Column gap="lg">
       <CategoryButtonGroup>
-        {/* TODO: uncomment or delete once we're certain on what we're doing irt a roadmap 
-        <Link
+        {/*<Link
           href="https://github.com/orgs/revoltchat/projects/6/views/4"
           target="_blank"
         >
@@ -35,10 +34,9 @@ export default function Feedback() {
           >
             Roadmap
           </CategoryButton>
-        </Link> 
-        */}
-        <Link
-          href="https://github.com/orgs/revoltchat/discussions"
+        </Link>
+        */}<Link
+          href="https://github.com/orgs/upryzing/discussions"
           target="_blank"
         >
           <CategoryButton

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/account/UserSummary.tsx

@@ -20,11 +20,11 @@ export function UserSummary(props: {
   const bannerStyle = () =>
     props.bannerUrl
       ? {
-        "background-image": `linear-gradient(${theme.colours["user-banner-gradient"]}, ${theme.colours["user-banner-gradient"]}), url("${props.bannerUrl}")`,
-      }
+          "background-image": `linear-gradient(${theme.colours["user-banner-gradient"]}, ${theme.colours["user-banner-gradient"]}), url("${props.bannerUrl}")`,
+        }
       : {
-        background: `var(--colours-settings-background)`,
-      };
+          background: `var(--colours-settings-background)`,
+        };
 
   return (
     <CategoryButtonGroup>

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";
 
 /**