remove more ternaries

components/CollectionCard.tsx

@@ -148,13 +148,13 @@ export default function CollectionCard({ collection, className }: Props) {
             );
           })
           .slice(0, 3)}
-        {collection.members.length - 3 > 0 ? (
+        {collection.members.length - 3 > 0 && (
           <div className={`avatar drop-shadow-md placeholder -ml-3`}>
             <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
               <span>+{collection.members.length - 3}</span>
             </div>
           </div>
-        ) : null}
+        )}
       </div>
       <Link
         href={`/collections/${collection.id}`}

components/Dropdown.tsx

@@ -4,15 +4,15 @@ import ClickAwayHandler from "./ClickAwayHandler";
 
 type MenuItem =
   | {
-      name: string;
-      onClick: MouseEventHandler;
-      href?: string;
-    }
+    name: string;
+    onClick: MouseEventHandler;
+    href?: string;
+  }
   | {
-      name: string;
-      onClick?: MouseEventHandler;
-      href: string;
-    }
+    name: string;
+    onClick?: MouseEventHandler;
+    href: string;
+  }
   | undefined;
 
 type Props = {
@@ -60,7 +60,7 @@ export default function Dropdown({
     }
   }, [points, dropdownHeight]);
 
-  return !points || pos ? (
+  return !points || pos && (
     <ClickAwayHandler
       onMount={(e) => {
         setDropdownHeight(e.height);
@@ -69,16 +69,15 @@ export default function Dropdown({
       style={
         points
           ? {
-              position: "fixed",
-              top: `${pos?.y}px`,
-              left: `${pos?.x}px`,
-            }
+            position: "fixed",
+            top: `${pos?.y}px`,
+            left: `${pos?.x}px`,
+          }
           : undefined
       }
       onClickOutside={onClickOutside}
-      className={`${
-        className || ""
-      } py-1 shadow-md border border-neutral-content bg-base-200 rounded-md flex flex-col z-20`}
+      className={`${className || ""
+        } py-1 shadow-md border border-neutral-content bg-base-200 rounded-md flex flex-col z-20`}
     >
       {items.map((e, i) => {
         const inner = e && (
@@ -102,5 +101,5 @@ export default function Dropdown({
         );
       })}
     </ClickAwayHandler>
-  ) : null;
+  );
 }

components/InputSelect/CollectionSelection.tsx

@@ -6,6 +6,16 @@ import { Options } from "./types";
 import CreatableSelect from "react-select/creatable";
 import Select, { ActionMeta } from "react-select";
 
+interface Option {
+  label: string;
+  value: number;
+  ownerId: number;
+  count?: {
+    links: number;
+  };
+  parentId?: number;
+}
+
 type Props = {
   onChange: (newValue: unknown, actionMeta: ActionMeta<unknown>) => void;
   showDefaultValue?: boolean;

components/ModalContent/EditLinkModal.tsx

@@ -98,7 +98,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
         <div className="grid sm:grid-cols-2 gap-3">
           <div>
             <p className="mb-2">{t("collection")}</p>
-            {link.collection.name ? (
+            {link.collection.name && (
               <CollectionSelection
                 onChange={setCollection}
                 defaultValue={
@@ -108,7 +108,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
                 }
                 creatable={false}
               />
-            ) : null}
+            )}
           </div>
 
           <div>

components/ModalContent/NewLinkModal.tsx

@@ -116,7 +116,7 @@ export default function NewLinkModal({ onClose }: Props) {
         </div>
         <div className="sm:col-span-2 col-span-5">
           <p className="mb-2">{t("collection")}</p>
-          {link.collection.name ? (
+          {link.collection.name && (
             <CollectionSelection
               onChange={setCollection}
               defaultValue={{
@@ -124,7 +124,7 @@ export default function NewLinkModal({ onClose }: Props) {
                 value: link.collection.id,
               }}
             />
-          ) : null}
+          )}
         </div>
       </div>
       <div className={"mt-2"}>

components/Navbar.tsx

@@ -111,7 +111,7 @@ export default function Navbar() {
 
       <MobileNavigation />
 
-      {sidebar ? (
+      {sidebar && (
         <div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-40">
           <ClickAwayHandler className="h-full" onClickOutside={toggleSidebar}>
             <div className="slide-right h-full shadow-lg">
@@ -119,7 +119,7 @@ export default function Navbar() {
             </div>
           </ClickAwayHandler>
         </div>
-      ) : null}
+      )}
       {newLinkModal && (
         <NewLinkModal onClose={() => setNewLinkModal(false)} />
       )}

components/ProfileDropdown.tsx

@@ -32,9 +32,8 @@ export default function ProfileDropdown() {
         />
       </div>
       <ul
-        className={`dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box ${
-          isAdmin ? "w-48" : "w-40"
-        } mt-1`}
+        className={`dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box ${isAdmin ? "w-48" : "w-40"
+          } mt-1`}
       >
         <li>
           <Link
@@ -60,7 +59,7 @@ export default function ProfileDropdown() {
             })}
           </div>
         </li>
-        {isAdmin ? (
+        {isAdmin && (
           <li>
             <Link
               href="/admin"
@@ -71,7 +70,7 @@ export default function ProfileDropdown() {
               {t("server_administration")}
             </Link>
           </li>
-        ) : null}
+        )}
         <li>
           <div
             onClick={() => {

components/ToggleDarkMode.tsx

@@ -1,5 +1,5 @@
 import useLocalSettingsStore from "@/store/localSettings";
-import { useEffect, useState } from "react";
+import { useEffect, useState, ChangeEvent } from "react";
 import { useTranslation } from "next-i18next";
 
 type Props = {
@@ -10,15 +10,18 @@ export default function ToggleDarkMode({ className }: Props) {
   const { t } = useTranslation();
   const { settings, updateSettings } = useLocalSettingsStore();
 
-  const [theme, setTheme] = useState(localStorage.getItem("theme"));
+  const [theme, setTheme] = useState<string | null>(localStorage.getItem("theme"));
 
-  const handleToggle = (e: any) => {
+  const handleToggle = (e: ChangeEvent<HTMLInputElement>) => {
     setTheme(e.target.checked ? "dark" : "light");
   };
 
   useEffect(() => {
-    updateSettings({ theme: theme as string });
-  }, [theme]);
+    if (theme) {
+      updateSettings({ theme });
+      localStorage.setItem("theme", theme);
+    }
+  }, [theme, updateSettings]);
 
   return (
     <div
@@ -34,7 +37,7 @@ export default function ToggleDarkMode({ className }: Props) {
           type="checkbox"
           onChange={handleToggle}
           className="theme-controller"
-          checked={localStorage.getItem("theme") === "light" ? false : true}
+          checked={theme === "dark"}
         />
         <i className="bi-sun-fill text-xl swap-on"></i>
         <i className="bi-moon-fill text-xl swap-off"></i>

components/UserListing.tsx

@@ -74,12 +74,12 @@ const UserListing = (
         </tbody>
       </table>
 
-      {deleteUserModal.isOpen && deleteUserModal.userId ? (
+      {deleteUserModal.isOpen && deleteUserModal.userId && (
         <DeleteUserModal
           onClose={() => setDeleteUserModal({ isOpen: false, userId: null })}
           userId={deleteUserModal.userId}
         />
-      ) : null}
+      )}
     </div>
   );
 };