Fix some linting

package.json

@@ -12,30 +12,30 @@
     "type": "yarn tsc --noEmit"
   },
   "dependencies": {
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "axios": "^1.2.2",
-    "date-fns": "^2.17.0",
-    "dotenv": "^16.0.1",
-    "idb-keyval": "^6.2.0",
+    "axios": "^1.5.0",
+    "date-fns": "^2.30.0",
+    "dotenv": "^16.3.1",
+    "idb-keyval": "^6.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-input-suggestions": "^2.3.4"
   },
   "devDependencies": {
-    "@adhamu/zero": "^5.1.9",
-    "@netlify/functions": "^1.4.0",
+    "@adhamu/zero": "^6.1.0",
+    "@netlify/functions": "^2.0.2",
     "@stylelint/postcss-css-in-js": "^0.38.0",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.10",
-    "netlify-cli": "^12.7.2",
-    "parcel": "^2.6.2",
+    "@types/node": "^20.7.0",
+    "@types/react": "^18.2.22",
+    "@types/react-dom": "^18.2.7",
+    "netlify-cli": "^16.4.2",
+    "parcel": "^2.9.3",
     "postcss-syntax": "^0.36.2",
     "process": "^0.11.10",
-    "typescript": "^4.7.4"
+    "typescript": "^5.2.2"
   }
 }

src/App.tsx

@@ -2,6 +2,7 @@ import { Suspense, lazy, useState } from 'react'
 
 import styled from '@emotion/styled'
 
+import Wrapper from './Wrapper'
 import Bookmarks from './components/Bookmarks'
 import DateTime from './components/DateTime'
 import Greeting from './components/Greeting'
@@ -10,8 +11,6 @@ import Menu from './components/Menu'
 import Search from './components/Search'
 import SettingsProvider from './context/SettingsProvider'
 
-import Wrapper from './Wrapper'
-
 const Weather = lazy(() => import('./components/Weather'))
 const Preferences = lazy(() => import('./components/Preferences'))
 

src/Wrapper.tsx

@@ -1,14 +1,14 @@
-import type { ReactNode } from 'react'
 import { useContext } from 'react'
 
 import { Global, ThemeProvider } from '@emotion/react'
 
 import DarkModeToggle from './components/DarkModeToggle'
 import { SettingsContext } from './context/SettingsProvider'
 import { useTheme } from './hooks/useTheme'
-
 import { globalStyles } from './theme'
 
+import type { ReactNode } from 'react'
+
 const matchMediaFallback = (): boolean =>
   window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
 

src/components/Bookmark.tsx

@@ -1,13 +1,13 @@
 import { useContext, useState } from 'react'
 
 import styled from '@emotion/styled'
-import { faLink } from '@fortawesome/free-solid-svg-icons'
+import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
-import type { BookmarkLink } from '../types'
-
 import { SettingsContext } from '../context/SettingsProvider'
 
+import type { BookmarkLink } from '../types'
+
 const Style = styled.a`
   color: ${props => props.theme.colors.body};
   font-weight: 700;
@@ -35,10 +35,6 @@ const PlaceholderContainer = styled.div`
   margin-right: 0.5em;
   color: ${props => props.theme.colors.body};
   line-height: 1.6;
-
-  svg {
-    font-size: 1rem;
-  }
 `
 
 type Props = {
@@ -53,12 +49,12 @@ const Bookmark = ({ bookmark }: Props) => {
 
   return (
     <Style href={bookmark.url} key={bookmark.id}>
-      {showFavicons && bookmark?.icon && !error && (
+      {!!showFavicons && !!bookmark?.icon && !error && (
         <Icon src={bookmark?.icon} onError={() => setError(true)} />
       )}
-      {showFavicons && (!bookmark?.icon || error === true) && (
+      {!!showFavicons && (!bookmark?.icon || error === true) && (
         <PlaceholderContainer>
-          <FontAwesomeIcon icon={faLink} fixedWidth />
+          <FontAwesomeIcon icon={faUpRightFromSquare} fixedWidth size="xs" />
         </PlaceholderContainer>
       )}{' '}
       {bookmark.label}

src/components/Bookmarks.tsx

@@ -2,11 +2,10 @@ import { useContext } from 'react'
 
 import styled from '@emotion/styled'
 
-import type { BookmarkLink } from '../types'
-
+import Bookmark from './Bookmark'
 import { SettingsContext } from '../context/SettingsProvider'
 
-import Bookmark from './Bookmark'
+import type { BookmarkLink } from '../types'
 
 const Style = styled.div`
   padding: 2em 0;

src/components/DateTime.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react'
 
-import { format } from 'date-fns'
-
 import styled from '@emotion/styled'
+import { format } from 'date-fns'
 
 import { getDate } from '../date'
 

src/components/Greeting.tsx

@@ -18,7 +18,7 @@ const Greeting = () => {
   return (
     <Style>
       Good {timeOfDay()}
-      {name && `, ${name}`}
+      {!!name && `, ${name}`}
     </Style>
   )
 }

src/components/Preferences/BackupRestore.tsx

@@ -1,18 +1,16 @@
-import type { ChangeEvent } from 'react'
 import { useContext } from 'react'
 
-import { setMany, clear } from 'idb-keyval'
-
 import styled from '@emotion/styled'
+import { setMany, clear } from 'idb-keyval'
 
-import type { Settings } from '../../context/SettingsProvider'
-
+import Button from './Button'
+import UploadInput from './UploadInput'
 import { SettingsContext } from '../../context/SettingsProvider'
 import { initiateDownload } from '../../utils/downloadUtility'
 import { readJsonFile } from '../../utils/readJsonFile'
 
-import Button from './Button'
-import UploadInput from './UploadInput'
+import type { Settings } from '../../context/SettingsProvider'
+import type { ChangeEvent } from 'react'
 
 const Style = styled.div`
   display: grid;

src/components/Preferences/BookmarkRow.tsx

@@ -1,15 +1,13 @@
 import { useEffect, type KeyboardEvent, useState, useContext } from 'react'
 
-import axios from 'axios'
-
 import styled from '@emotion/styled'
-
-import type { BookmarkLink } from '../../types'
-
-import { SettingsContext } from '../../context/SettingsProvider'
+import axios from 'axios'
 
 import Button from './Button'
 import TextInput from './TextInput'
+import { SettingsContext } from '../../context/SettingsProvider'
+
+import type { BookmarkLink } from '../../types'
 
 const Style = styled.div`
   display: grid;

src/components/Preferences/Bookmarks.tsx

@@ -1,10 +1,9 @@
 import { useContext } from 'react'
 
-import type { BookmarkLink } from '../../types'
-
+import BookmarkRow from './BookmarkRow'
 import { SettingsContext } from '../../context/SettingsProvider'
 
-import BookmarkRow from './BookmarkRow'
+import type { BookmarkLink } from '../../types'
 
 const Bookmarks = () => {
   const {

src/components/Preferences/Button.tsx

@@ -1,4 +1,3 @@
-import type { MouseEvent } from 'react'
 import { useContext, useEffect, useState } from 'react'
 
 import styled from '@emotion/styled'
@@ -7,6 +6,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import { SettingsContext } from '../../context/SettingsProvider'
 
+import type { MouseEvent } from 'react'
+
 const Style = styled.button<{ isDisabled?: boolean }>`
   min-width: 100px;
   padding: 10px 10px;

src/components/Preferences/Name.tsx

@@ -1,8 +1,7 @@
 import { useContext } from 'react'
 
-import { SettingsContext } from '../../context/SettingsProvider'
-
 import TextInput from './TextInput'
+import { SettingsContext } from '../../context/SettingsProvider'
 
 const Name = () => {
   const {

src/components/Preferences/SearchEngine.tsx

@@ -1,4 +1,3 @@
-import type { FunctionComponentElement } from 'react'
 import { createElement, useContext } from 'react'
 
 import styled from '@emotion/styled'
@@ -7,6 +6,8 @@ import { Engine, searchEngines } from '../../config'
 import { SettingsContext } from '../../context/SettingsProvider'
 import { DuckDuckGo, Google, Startpage } from '../../icons'
 
+import type { FunctionComponentElement } from 'react'
+
 const searchIconMap: Record<
   string,
   FunctionComponentElement<Record<string, never>>

src/components/Preferences/TextInput.tsx

@@ -1,7 +1,7 @@
-import type { ChangeEvent, KeyboardEvent } from 'react'
-
 import styled from '@emotion/styled'
 
+import type { ChangeEvent, KeyboardEvent } from 'react'
+
 const Style = styled.input`
   padding: 4px 10px;
   font-size: 0.875rem;

src/components/Preferences/Theme.tsx

@@ -1,13 +1,13 @@
 import { useContext } from 'react'
 
-import type { Theme } from '@emotion/react'
 import styled from '@emotion/styled'
 
+import Button from './Button'
 import { SettingsContext } from '../../context/SettingsProvider'
 import { useTheme } from '../../hooks/useTheme'
 import { matchMediaFallback } from '../../utils'
 
-import Button from './Button'
+import type { Theme } from '@emotion/react'
 
 const ColorOptions = styled.div`
   display: grid;
@@ -59,7 +59,7 @@ const Themer = () => {
     <>
       <label>Theme</label>
       <ColorOptions>
-        {theme &&
+        {!!theme &&
           Object.keys(theme.colors).map(option => (
             <div key={option}>
               <ColorInput

src/components/Preferences/UploadInput.tsx

@@ -1,8 +1,9 @@
-import type { ChangeEventHandler } from 'react'
 import { useRef } from 'react'
 
 import Button from './Button'
 
+import type { ChangeEventHandler } from 'react'
+
 interface Props {
   label?: string
   accept?: string

src/components/Search.tsx

@@ -1,15 +1,14 @@
 import { useContext, useEffect, useState } from 'react'
 
+import styled from '@emotion/styled'
 import axios from 'axios'
 import { InputSuggestions } from 'react-input-suggestions'
 
-import styled from '@emotion/styled'
-
-import type { SearchEngine } from '../types'
-
 import { Engine, searchEngines } from '../config'
 import { SettingsContext } from '../context/SettingsProvider'
 
+import type { SearchEngine } from '../types'
+
 const StyledInputSuggestions = styled(InputSuggestions)`
   ul {
     border: 2px solid ${props => props.theme.colors.border};

src/components/Switch.tsx

@@ -1,7 +1,7 @@
-import type { ChangeEvent, ReactNode } from 'react'
-
 import styled from '@emotion/styled'
 
+import type { ChangeEvent, ReactNode } from 'react'
+
 const Style = styled.label<{ checked: boolean }>`
   position: relative;
   display: inline-block;

src/components/Weather.tsx

@@ -1,8 +1,7 @@
 import { useContext, useEffect, useState } from 'react'
 
-import axios from 'axios'
-
 import styled from '@emotion/styled'
+import axios from 'axios'
 
 import { SettingsContext } from '../context/SettingsProvider'
 
@@ -20,10 +19,12 @@ const Weather = () => {
   const {
     settings: { weather = false },
   } = useContext(SettingsContext)
-  const [location, setLocation] = useState({
-    longitude: 0,
-    latitude: 0,
-  })
+
+  const [location, setLocation] = useState<{
+    longitude: number
+    latitude: number
+  } | null>(null)
+
   const [conditions, setConditions] = useState({
     main: null,
     description: null,

src/context/SettingsProvider.tsx

@@ -1,12 +1,11 @@
-import type { ReactNode } from 'react'
-import { createContext, useState, useEffect, useMemo } from 'react'
+import { createContext, useState, useEffect } from 'react'
 
 import { keys, set, del, getMany, createStore } from 'idb-keyval'
 
-import type { Theme } from '@emotion/react'
-
 import type { BookmarkLink } from '../types'
+import type { Theme } from '@emotion/react'
 import type { UseStore } from 'idb-keyval'
+import type { ReactNode } from 'react'
 
 const store = createStore('startpage', 'user-preferences')
 
@@ -85,13 +84,10 @@ const SettingsProvider = ({ children }: SettingsProviderProps) => {
     setSettings(s)
   }
 
-  const value = useMemo(
-    () => ({ settings, setSetting, deleteSetting, setSettings, store }),
-    []
-  )
-
   return (
-    <SettingsContext.Provider value={value}>
+    <SettingsContext.Provider
+      value={{ settings, setSetting, deleteSetting, setSettings, store }}
+    >
       {children}
     </SettingsContext.Provider>
   )