Format and automatically fix linted code.

src/components/ui/Category.tsx

@@ -44,7 +44,7 @@ type Props = Omit<
 };
 
 export default function Category(props: Props) {
-    let { text, action, ...otherProps } = props;
+    const { text, action, ...otherProps } = props;
 
     return (
         <CategoryBase {...otherProps}>

src/components/ui/ColourSwatches.tsx

@@ -55,7 +55,11 @@ const SwatchesBase = styled.div`
         div {
             width: 8px;
             height: 68px;
-            background: linear-gradient(to right, var(--primary-background), transparent);
+            background: linear-gradient(
+                to right,
+                var(--primary-background),
+                transparent
+            );
         }
     }
 `;
@@ -127,8 +131,10 @@ export default function ColourSwatches({ value, onChange }: Props) {
                 <Palette size={32} />
             </Swatch>
 
-            <div class="overlay"><div /></div>
-            
+            <div class="overlay">
+                <div />
+            </div>
+
             <Rows>
                 {presets.map((row, i) => (
                     <div key={i}>
@@ -144,8 +150,6 @@ export default function ColourSwatches({ value, onChange }: Props) {
                     </div>
                 ))}
             </Rows>
-            
-            
         </SwatchesBase>
     );
 }

src/components/ui/ComboBox.tsx

@@ -5,7 +5,7 @@ export default styled.select`
     padding: 10px;
     cursor: pointer;
     border-radius: var(--border-radius);
-    
+
     font-family: inherit;
     font-size: var(--text-size);
     color: var(--secondary-foreground);

src/components/ui/DateDivider.tsx

@@ -12,8 +12,8 @@ const Base = styled.div<{ unread?: boolean }>`
 
     time {
         margin-top: -2px;
-        font-size: .6875rem;
-        line-height: .6875rem;
+        font-size: 0.6875rem;
+        line-height: 0.6875rem;
         padding: 2px 0 2px 0;
         padding-inline-end: 5px;
         color: var(--tertiary-foreground);

src/components/ui/Modal.tsx

@@ -2,9 +2,10 @@ import styled, { css, keyframes } from "styled-components";
 
 import { createPortal, useEffect, useState } from "preact/compat";
 
+import { internalSubscribe } from "../../lib/eventEmitter";
+
 import { Children } from "../../types/Preact";
 import Button, { ButtonProps } from "./Button";
-import { internalSubscribe } from "../../lib/eventEmitter";
 
 const open = keyframes`
     0% {opacity: 0;}
@@ -52,7 +53,7 @@ const ModalBase = styled.div`
     &.closing {
         animation-name: ${close};
     }
-    
+
     &.closing > div {
         animation-name: ${zoomOut};
     }
@@ -145,7 +146,7 @@ export let isModalClosing = false;
 export default function Modal(props: Props) {
     if (!props.visible) return null;
 
-    let content = (
+    const content = (
         <ModalContent
             attachment={!!props.actions}
             noBackground={props.noBackground}
@@ -167,7 +168,7 @@ export default function Modal(props: Props) {
         setTimeout(() => props.onClose(), 2e2);
     }
 
-    useEffect(() => internalSubscribe('Modal', 'close', onClose), []);
+    useEffect(() => internalSubscribe("Modal", "close", onClose), []);
 
     useEffect(() => {
         if (props.disallowClosing) return;
@@ -182,7 +183,7 @@ export default function Modal(props: Props) {
         return () => document.body.removeEventListener("keydown", keyDown);
     }, [props.disallowClosing, props.onClose]);
 
-    let confirmationAction = props.actions?.find(
+    const confirmationAction = props.actions?.find(
         (action) => action.confirmation,
     );
 
@@ -203,7 +204,8 @@ export default function Modal(props: Props) {
     }, [confirmationAction]);
 
     return createPortal(
-        <ModalBase className={animateClose ? 'closing' : undefined}
+        <ModalBase
+            className={animateClose ? "closing" : undefined}
             onClick={(!props.disallowClosing && props.onClose) || undefined}>
             <ModalContainer onClick={(e) => (e.cancelBubble = true)}>
                 {content}