update biome to v2

commafeed-client/src/App.tsx

@@ -15,7 +15,6 @@ import { Tree } from "components/sidebar/Tree"
 import { useAppLoading } from "hooks/useAppLoading"
 import { useBrowserExtension } from "hooks/useBrowserExtension"
 import { useI18n } from "i18n"
-import { WelcomePage } from "pages/WelcomePage"
 import { AdminUsersPage } from "pages/admin/AdminUsersPage"
 import { MetricsPage } from "pages/admin/MetricsPage"
 import { AboutPage } from "pages/app/AboutPage"
@@ -30,6 +29,7 @@ import { TagDetailsPage } from "pages/app/TagDetailsPage"
 import { LoginPage } from "pages/auth/LoginPage"
 import { PasswordRecoveryPage } from "pages/auth/PasswordRecoveryPage"
 import { RegistrationPage } from "pages/auth/RegistrationPage"
+import { WelcomePage } from "pages/WelcomePage"
 import React, { useEffect, useState } from "react"
 import { isSafari } from "react-device-detect"
 import ReactGA from "react-ga4"
@@ -219,25 +219,23 @@ export function App() {
 
     return (
         <Providers>
-            <>
-                <UnreadCountTitleHandler enabled={unreadCountTitle} />
-                <UnreadCountFaviconHandler enabled={unreadCountFavicon} />
-                <BrowserExtensionBadgeUnreadCountHandler />
-                <CustomJsHandler />
-                <CustomCssHandler />
+            <UnreadCountTitleHandler enabled={unreadCountTitle} />
+            <UnreadCountFaviconHandler enabled={unreadCountFavicon} />
+            <BrowserExtensionBadgeUnreadCountHandler />
+            <CustomJsHandler />
+            <CustomCssHandler />
 
-                {/* disable pull-to-refresh as it messes with vertical scrolling
+            {/* disable pull-to-refresh as it messes with vertical scrolling
                         safari behaves weirdly when overscroll-behavior is set to none so we disable it only for other browsers
                         https://github.com/Athou/commafeed/issues/1168
                     */}
-                {!isSafari && <DisablePullToRefresh />}
+            {!isSafari && <DisablePullToRefresh />}
 
-                <HashRouter>
-                    <GoogleAnalyticsHandler />
-                    <RedirectHandler />
-                    <AppRoutes />
-                </HashRouter>
-            </>
+            <HashRouter>
+                <GoogleAnalyticsHandler />
+                <RedirectHandler />
+                <AppRoutes />
+            </HashRouter>
         </Providers>
     )
 }

commafeed-client/src/app/constants.ts

@@ -87,17 +87,15 @@ export const Constants = {
         headerHeight: 60,
         entryMaxWidth: 650,
         isTopVisible: (div: HTMLElement) => {
-            const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect()
+            const header = document.getElementsByTagName("header").item(0)?.getBoundingClientRect()
             return div.getBoundingClientRect().top >= (header?.bottom ?? 0)
         },
         isBottomVisible: (div: HTMLElement) => {
-            const footer = document.getElementById(Constants.dom.footerId)?.getBoundingClientRect()
+            const footer = document.getElementsByTagName("footer").item(0)?.getBoundingClientRect()
             return div.getBoundingClientRect().bottom <= (footer?.top ?? window.innerHeight)
         },
     },
     dom: {
-        headerId: "header",
-        footerId: "footer",
         entryId: (entry: Entry) => `entry-id-${entry.id}`,
         entryContextMenuId: (entry: Entry) => entry.id,
     },

commafeed-client/src/app/entries/slice.ts

@@ -1,4 +1,4 @@
-import { type PayloadAction, createSlice } from "@reduxjs/toolkit"
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
 import { Constants } from "app/constants"
 import { loadEntries, loadMoreEntries, markAllEntries, markEntry, markMultipleEntries, starEntry, tagEntry } from "app/entries/thunks"
 import type { Entry } from "app/types"

commafeed-client/src/app/entries/thunks.ts

@@ -234,7 +234,7 @@ export const selectEntry = createAppAsyncThunk(
 )
 
 const scrollToEntry = (entryElement: HTMLElement, margin: number, scrollSpeed: number | undefined, onScrollEnded: () => void) => {
-    const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect()
+    const header = document.getElementsByTagName("header").item(0)?.getBoundingClientRect()
     const offset = (header?.bottom ?? 0) + margin
     scrollToWithCallback({
         options: {

commafeed-client/src/app/redirect/slice.ts

@@ -1,4 +1,4 @@
-import { type PayloadAction, createSlice } from "@reduxjs/toolkit"
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
 
 interface RedirectState {
     to?: string

commafeed-client/src/app/server/slice.ts

@@ -1,4 +1,4 @@
-import { type PayloadAction, createSlice } from "@reduxjs/toolkit"
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
 import { reloadServerInfos } from "app/server/thunks"
 import type { ServerInfo } from "app/types"
 

commafeed-client/src/app/tree/slice.ts

@@ -1,4 +1,4 @@
-import { type PayloadAction, createSlice } from "@reduxjs/toolkit"
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
 import { loadEntries, markEntry } from "app/entries/thunks"
 import { redirectTo } from "app/redirect/slice"
 import { collapseTreeCategory, reloadTree } from "app/tree/thunks"

commafeed-client/src/app/user/slice.ts

@@ -1,6 +1,6 @@
 import { t } from "@lingui/core/macro"
 import { showNotification } from "@mantine/notifications"
-import { type PayloadAction, createSlice, isAnyOf } from "@reduxjs/toolkit"
+import { createSlice, isAnyOf, type PayloadAction } from "@reduxjs/toolkit"
 import type { LocalSettings, Settings, UserModel, ViewMode } from "app/types"
 import {
     changeCustomContextMenu,

commafeed-client/src/components/ActionButton.tsx

@@ -4,7 +4,7 @@ import { ActionIcon, Box, Button, type ButtonVariant, Tooltip, useMantineTheme }
 import type { ActionIconVariant } from "@mantine/core/lib/components/ActionIcon/ActionIcon"
 import { Constants } from "app/constants"
 import { useActionButton } from "hooks/useActionButton"
-import { type MouseEventHandler, type ReactNode, forwardRef } from "react"
+import { forwardRef, type MouseEventHandler, type ReactNode } from "react"
 
 interface ActionButtonProps {
     icon: ReactNode

commafeed-client/src/components/content/Content.tsx

@@ -1,10 +1,10 @@
 import { Box, Mark } from "@mantine/core"
 import { Constants } from "app/constants"
 import { calculatePlaceholderSize } from "app/utils"
-import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
 import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
+import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
 import escapeStringRegexp from "escape-string-regexp"
-import { ALLOWED_TAG_LIST, type ChildrenNode, Interweave, type MatchResponse, Matcher, type Node, type TransformCallback } from "interweave"
+import { ALLOWED_TAG_LIST, type ChildrenNode, Interweave, Matcher, type MatchResponse, type Node, type TransformCallback } from "interweave"
 import React from "react"
 import styleToObject from "style-to-object"
 import { tss } from "tss"

commafeed-client/src/components/content/Enclosure.tsx

@@ -1,10 +1,7 @@
-import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
 import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
+import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
 
-export function Enclosure(props: {
-    enclosureType: string
-    enclosureUrl: string
-}) {
+export function Enclosure(props: { enclosureType: string; enclosureUrl: string }) {
     const hasVideo = props.enclosureType.startsWith("video")
     const hasAudio = props.enclosureType.startsWith("audio")
     const hasImage = props.enclosureType.startsWith("image")

commafeed-client/src/components/content/FeedEntries.tsx

@@ -287,7 +287,6 @@ export function FeedEntries() {
 
     return (
         <InfiniteScroll
-            id="entries"
             className={`cf-entries cf-view-mode-${viewMode}`}
             initialLoad={false}
             loadMore={async () => await (!loading && dispatch(loadMoreEntries()))}

commafeed-client/src/components/content/Media.tsx

@@ -1,8 +1,8 @@
 import { Box } from "@mantine/core"
 import { Constants } from "app/constants"
 import { calculatePlaceholderSize } from "app/utils"
-import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
 import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
+import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
 import { Content } from "./Content"
 
 export interface MediaProps {

commafeed-client/src/components/content/header/FeedEntryCompactHeader.tsx

@@ -1,9 +1,9 @@
 import { Box } from "@mantine/core"
 import type { Entry } from "app/types"
-import { RelativeDate } from "components/RelativeDate"
 import { FeedFavicon } from "components/content/FeedFavicon"
 import { OpenExternalLink } from "components/content/header/OpenExternalLink"
 import { Star } from "components/content/header/Star"
+import { RelativeDate } from "components/RelativeDate"
 import { OnDesktop } from "components/responsive/OnDesktop"
 import { tss } from "tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"

commafeed-client/src/components/content/header/FeedEntryHeader.tsx

@@ -1,9 +1,9 @@
 import { Box, Flex, Space } from "@mantine/core"
 import type { Entry } from "app/types"
-import { RelativeDate } from "components/RelativeDate"
 import { FeedFavicon } from "components/content/FeedFavicon"
 import { OpenExternalLink } from "components/content/header/OpenExternalLink"
 import { Star } from "components/content/header/Star"
+import { RelativeDate } from "components/RelativeDate"
 import { tss } from "tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"
 

commafeed-client/src/i18n.ts

@@ -1,4 +1,4 @@
-import { type Messages, i18n } from "@lingui/core"
+import { i18n, type Messages } from "@lingui/core"
 import { useAppSelector } from "app/store"
 import dayjs from "dayjs"
 import { useEffect } from "react"

commafeed-client/src/pages/admin/AdminUsersPage.tsx

@@ -4,9 +4,9 @@ import { closeAllModals, openConfirmModal, openModal } from "@mantine/modals"
 import { client, errorToStrings } from "app/client"
 import type { UserModel } from "app/types"
 import { Alert } from "components/Alert"
+import { UserEdit } from "components/admin/UserEdit"
 import { Loader } from "components/Loader"
 import { RelativeDate } from "components/RelativeDate"
-import { UserEdit } from "components/admin/UserEdit"
 import type { ReactNode } from "react"
 import { useAsync, useAsyncCallback } from "react-async-hook"
 import { TbCheck, TbPencil, TbPlus, TbTrash, TbX } from "react-icons/tb"

commafeed-client/src/pages/app/AboutPage.tsx

@@ -5,8 +5,8 @@ import { Anchor, Box, Container, List, NativeSelect, SimpleGrid, Title } from "@
 import { Constants } from "app/constants"
 import { redirectToApiDocumentation } from "app/redirect/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
-import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
 import { CategorySelect } from "components/content/add/CategorySelect"
+import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
 import { useBrowserExtension } from "hooks/useBrowserExtension"
 import type React from "react"
 import { useState } from "react"

commafeed-client/src/pages/app/CategoryDetailsPage.tsx

@@ -12,8 +12,8 @@ import { reloadTree } from "app/tree/thunks"
 import type { Category, CategoryModificationRequest } from "app/types"
 import { flattenCategoryTree } from "app/utils"
 import { Alert } from "components/Alert"
-import { Loader } from "components/Loader"
 import { CategorySelect } from "components/content/add/CategorySelect"
+import { Loader } from "components/Loader"
 import { useEffect } from "react"
 import { useAsync, useAsyncCallback } from "react-async-hook"
 import { TbDeviceFloppy, TbTrash } from "react-icons/tb"

commafeed-client/src/pages/app/FeedDetailsPage.tsx

@@ -8,9 +8,9 @@ import { useAppDispatch, useAppSelector } from "app/store"
 import { reloadTree } from "app/tree/thunks"
 import type { FeedModificationRequest } from "app/types"
 import { Alert } from "components/Alert"
+import { CategorySelect } from "components/content/add/CategorySelect"
 import { Loader } from "components/Loader"
 import { RelativeDate } from "components/RelativeDate"
-import { CategorySelect } from "components/content/add/CategorySelect"
 import { useEffect } from "react"
 import { useAsync, useAsyncCallback } from "react-async-hook"
 import { TbDeviceFloppy, TbTrash } from "react-icons/tb"

commafeed-client/src/pages/app/Layout.tsx

@@ -184,9 +184,9 @@ export default function Layout(props: LayoutProps) {
                 }}
                 padding={{ base: 6, [Constants.layout.mobileBreakpointName]: "md" }}
             >
-                <AppShell.Header id={Constants.dom.headerId}>{!headerInFooter && header}</AppShell.Header>
-                <AppShell.Footer id={Constants.dom.footerId}>{headerInFooter && header}</AppShell.Footer>
-                <AppShell.Navbar id="sidebar" p={sidebarPadding}>
+                <AppShell.Header>{!headerInFooter && header}</AppShell.Header>
+                <AppShell.Footer>{headerInFooter && header}</AppShell.Footer>
+                <AppShell.Navbar p={sidebarPadding}>
                     <AppShell.Section grow component={ScrollArea} mx="-sm" px="sm">
                         <Box className={classes.sidebarContent}>{props.sidebar}</Box>
                     </AppShell.Section>
@@ -221,7 +221,7 @@ export default function Layout(props: LayoutProps) {
                     </Draggable>
                 </OnDesktop>
 
-                <AppShell.Main id="content">
+                <AppShell.Main>
                     <Suspense fallback={<Loader />}>
                         <AnnouncementDialog />
                         <MarkAllAsReadConfirmationDialog />