remove most uses of as any in typescript

- replaced many uses of `as any` with another more specific cast `as T`
- filled in missing typed for items that needed to be typed
  - new runtime code was added where necessary to satisfy the new types with comments
- added missing theme variable "sidebar-active" to the Theme variables
- forms using `react-hook-form` are now typechecked
- changed some instances of `target` into `currentTarget` while removing `as any` assertions

src/pages/login/FormField.tsx

@@ -26,6 +26,8 @@ export default function FormField({
             )}
             <Localizer>
                 <InputBox
+                    // Styled uses React typing while we use Preact
+                    // this leads to inconsistances where things need to be typed oddly
                     placeholder={(<Text id={`login.enter.${type}`} />) as any}
                     name={
                         type === "current_password" ? "password" : name ?? type

src/pages/login/forms/Form.tsx

@@ -35,6 +35,12 @@ function getInviteCode() {
     return code ?? '';
 }
 
+interface FormInputs {
+    email: string
+    password: string
+    invite: string
+}
+
 export function Form({ page, callback }: Props) {
     const client = useContext(AppContext);
 
@@ -43,7 +49,7 @@ export function Form({ page, callback }: Props) {
     const [error, setGlobalError] = useState<string | undefined>(undefined);
     const [captcha, setCaptcha] = useState<CaptchaProps | undefined>(undefined);
 
-    const { handleSubmit, register, errors, setError } = useForm({
+    const { handleSubmit, register, errors, setError } = useForm<FormInputs>({
         defaultValues: {
             email: '',
             password: '',
@@ -51,11 +57,7 @@ export function Form({ page, callback }: Props) {
         }
     });
 
-    async function onSubmit(data: {
-        email: string;
-        password: string;
-        invite: string;
-    }) {
+    async function onSubmit(data: FormInputs) {
         setGlobalError(undefined);
         setLoading(true);
 
@@ -143,7 +145,8 @@ export function Form({ page, callback }: Props) {
     return (
         <div className={styles.form}>
             <img src={wideSVG} />
-            <form onSubmit={handleSubmit(onSubmit) as any}>
+            {/* Preact / React typing incompatabilities */}
+            <form onSubmit={handleSubmit(onSubmit) as JSX.GenericEventHandler<HTMLFormElement>}>
                 {page !== "reset" && (
                     <FormField
                         type="email"

src/pages/login/forms/FormReset.tsx

@@ -25,9 +25,9 @@ export function FormReset() {
         <Form
             page="reset"
             callback={async data => {
-                await client.req("POST", "/auth/reset" as any, {
+                await client.req("POST", "/auth/reset", {
                     token,
-                    ...(data as any)
+                    ...data
                 });
                 history.push("/login");
             }}

src/pages/settings/panes/Account.tsx

@@ -53,11 +53,11 @@ export function Account() {
                 <div className={styles.username}>@{user.username}</div>
             </div>
             <div className={styles.details}>
-                {[
+                {([
                     ["username", user.username, <At size={24} />],
                     ["email", email, <Envelope size={24} />],
                     ["password", "*****", <Key size={24} />]
-                ].map(([field, value, icon]) => (
+                ] as const).map(([field, value, icon]) => (
                     <div>
                         {icon}
                         <div className={styles.detail}>
@@ -71,7 +71,7 @@ export function Account() {
                                 onClick={() =>
                                     openScreen({
                                         id: "modify_account",
-                                        field: field as any
+                                        field: field
                                     })
                                 }
                                 contrast

src/pages/settings/panes/Appearance.tsx

@@ -208,7 +208,7 @@ export function Component(props: Props & WithDispatcher) {
                     </Button>
                 </div>
                 <div className={styles.overrides}>
-                    {[
+                    {([
                         "accent",
                         "background",
                         "foreground",
@@ -234,15 +234,15 @@ export function Component(props: Props & WithDispatcher) {
                         "warning",
                         "error",
                         "hover"
-                    ].map(x => (
+                    ] as const).map(x => (
                         <div className={styles.entry} key={x}>
                             <span>{x}</span>
                             <div className={styles.override}>
                                 <div className={styles.picker}
-                                    style={{ backgroundColor: (theme as any)[x as any] }}>
+                                    style={{ backgroundColor: theme[x] }}>
                                     <input
                                         type="color"
-                                        value={(theme as any)[x as any]}
+                                        value={theme[x]}
                                         onChange={v =>
                                             setOverride({
                                                 [x]: v.currentTarget.value
@@ -252,7 +252,7 @@ export function Component(props: Props & WithDispatcher) {
                                 </div>
                                 <InputBox
                                     className={styles.text}
-                                    value={(theme as any)[x as any]}
+                                    value={theme[x]}
                                     onChange={y =>
                                         setOverride({
                                             [x]: y.currentTarget.value

src/pages/settings/panes/Notifications.tsx

@@ -78,11 +78,11 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
 
                                 // tell the server we just subscribed
                                 const json = sub.toJSON();
-                                if (json.keys) {
+                                if (json.keys) {;
                                     client.req("POST", "/push/subscribe", {
                                         endpoint: sub.endpoint,
-                                        ...json.keys
-                                    } as any);
+                                        ...(json.keys as { p256dh: string, auth: string })
+                                    });
                                     setPushEnabled(true);
                                 }
                             } else {

src/pages/settings/panes/Profile.tsx

@@ -11,7 +11,7 @@ import { ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltCli
 import AutoComplete, { useAutoComplete } from "../../../components/common/AutoComplete";
 
 export function Profile() {
-    const { intl } = useContext(IntlContext) as any;
+    const { intl } = useContext(IntlContext);
     const status = useContext(StatusContext);
 
     const ctx = useForceUpdate();
@@ -121,7 +121,7 @@ export function Profile() {
                             : "placeholder"
                     }`,
                     "",
-                    intl.dictionary
+                    (intl as any).dictionary as Record<string, unknown>
                 )}
                 onKeyUp={onKeyUp}
                 onKeyDown={onKeyDown}

src/pages/settings/panes/Sessions.tsx

@@ -155,7 +155,7 @@ export function Sessions() {
                                     ]);
                                     await client.req(
                                         "DELETE",
-                                        `/auth/sessions/${session.id}` as any
+                                        `/auth/sessions/${session.id}` as '/auth/sessions'
                                     );
                                     setSessions(
                                         sessions?.filter(

src/pages/settings/server/Roles.tsx

@@ -30,7 +30,7 @@ export function Roles({ server }: Props) {
 
     if (role !== 'default' && typeof roles[role] === 'undefined') {
         useEffect(() => setRole('default'));
-        return;
+        return <></>;
     }
 
     const v = (id: string) => I32ToU32(id === 'default' ? server.default_permissions : roles[id].permissions)