fix(web): TS typings and always active navbar link (#470)

* fix TS typings since `yarn build` was failing on my machine.
* fixed the dashboard navlink (it was always active on my end)

web/src/components/inputs/text.tsx

@@ -4,6 +4,7 @@ import { classNames, get } from "../../utils";
 import { useToggle } from "../../hooks/hooks";
 import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
 import { ErrorMessage } from "@hookform/error-message";
+import type { FieldValues } from "react-hook-form";
 
 export type FormErrorMessageProps = {
   className?: string;
@@ -81,7 +82,7 @@ export const Input: FC<InputProps> = forwardRef<HTMLInputElement, InputProps>(
 export type FormInputProps<TFormValues> = {
   name: Path<TFormValues>;
   rules?: RegisterOptions;
-  register?: UseFormRegister<TFormValues>;
+  register?: UseFormRegister<TFormValues & FieldValues>;
   errors?: Partial<DeepMap<TFormValues, FieldError>>;
 } & Omit<InputProps, "name">;
 

web/src/components/panels/index.tsx

@@ -2,6 +2,7 @@ import React, {Fragment, useRef} from "react";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import { Dialog, Transition } from "@headlessui/react";
 import { Form, Formik } from "formik";
+import type { FormikValues } from "formik";
 import DEBUG from "../debug";
 import { useToggle } from "../../hooks/hooks";
 import { DeleteModal } from "../modals";
@@ -9,7 +10,7 @@ import {classNames} from "../../utils";
 
 interface SlideOverProps<DataType> {
   title: string;
-    initialValues: DataType;
+  initialValues: FormikValues & DataType;
   validate?: (values: DataType) => void;
   onSubmit: (values?: DataType) => void;
   isOpen: boolean;

web/src/forms/settings/FeedForms.tsx

@@ -16,6 +16,17 @@ interface UpdateProps {
   feed: Feed;
 }
 
+interface InitialValues {
+  id: number;
+  indexer: string;
+  enabled: boolean;
+  type: FeedType;
+  name: string;
+  url: string;
+  api_key: string;
+  interval: number;
+}
+
 export function FeedUpdateForm({ isOpen, toggle, feed }: UpdateProps) {
   const [isTesting, setIsTesting] = useState(false);
   const [isTestSuccessful, setIsSuccessfulTest] = useState(false);
@@ -46,7 +57,6 @@ export function FeedUpdateForm({ isOpen, toggle, feed }: UpdateProps) {
     }
   );
 
-
   const deleteAction = () => {
     deleteMutation.mutate(feed.id);
   };
@@ -85,7 +95,7 @@ export function FeedUpdateForm({ isOpen, toggle, feed }: UpdateProps) {
     testFeedMutation.mutate(data as Feed);
   };
 
-  const initialValues = {
+  const initialValues: InitialValues = {
     id: feed.id,
     indexer: feed.indexer,
     enabled: feed.enabled,
@@ -97,7 +107,7 @@ export function FeedUpdateForm({ isOpen, toggle, feed }: UpdateProps) {
   };
 
   return (
-    <SlideOver
+    <SlideOver<InitialValues>
       type="UPDATE"
       title="Feed"
       isOpen={isOpen}

web/src/forms/settings/NotificationForms.tsx

@@ -394,6 +394,18 @@ interface UpdateProps {
     notification: Notification;
 }
 
+interface InitialValues {
+  id: number;
+  enabled: boolean;
+  type: NotificationType;
+  name: string;
+  webhook?: string;
+  token?: string;
+  api_key?: string;
+  channel?: string;
+  events: NotificationEvent[];
+}
+
 export function NotificationUpdateForm({ isOpen, toggle, notification }: UpdateProps) {
   const mutation = useMutation(
     (notification: Notification) => APIClient.notifications.update(notification),
@@ -437,7 +449,7 @@ export function NotificationUpdateForm({ isOpen, toggle, notification }: UpdateP
     testMutation.mutate(data as Notification);
   };
 
-  const initialValues = {
+  const initialValues: InitialValues = {
     id: notification.id,
     enabled: notification.enabled,
     type: notification.type,
@@ -450,7 +462,7 @@ export function NotificationUpdateForm({ isOpen, toggle, notification }: UpdateP
   };
 
   return (
-    <SlideOver
+    <SlideOver<InitialValues>
       type="UPDATE"
       title="Notification"
       isOpen={isOpen}

web/src/screens/Base.tsx

@@ -62,6 +62,7 @@ export default function Base() {
                               "transition-colors duration-200",
                               isActive ? "text-black dark:text-gray-50 font-bold" : "text-gray-600 dark:text-gray-500"
                             )}
+                            end={item.path === "/"}
                           >
                             {item.name}
                           </NavLink>