pass theme and colorscheme in tss context to avoid repetitions (#1241)

commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx

@@ -1,5 +1,4 @@
-import { Box, Center, type MantineTheme, useMantineTheme } from "@mantine/core"
+import { Box, Center } from "@mantine/core"
-import { useColorScheme } from "hooks/useColorScheme"
 import { useState } from "react"
 import { TbPhoto } from "react-icons/tb"
 import { tss } from "tss"
@@ -18,8 +17,6 @@ interface ImageWithPlaceholderWhileLoadingProps {
 
 const useStyles = tss
     .withParams<{
-        theme: MantineTheme
-        colorScheme: "light" | "dark"
         placeholderWidth?: number
         placeholderHeight?: number
         placeholderBackgroundColor?: string
@@ -46,11 +43,7 @@ export function ImageWithPlaceholderWhileLoading({
     title,
     width,
 }: ImageWithPlaceholderWhileLoadingProps) {
-    const theme = useMantineTheme()
-    const colorScheme = useColorScheme()
     const { classes } = useStyles({
-        theme,
-        colorScheme,
         placeholderWidth,
         placeholderHeight,
         placeholderBackgroundColor,

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

@@ -1,7 +1,6 @@
-import { Box, Divider, type MantineRadius, type MantineSpacing, type MantineTheme, Paper, useMantineTheme } from "@mantine/core"
+import { Box, Divider, type MantineRadius, type MantineSpacing, Paper } from "@mantine/core"
 import { Constants } from "app/constants"
 import { type Entry, type ViewMode } from "app/types"
-import { useColorScheme } from "hooks/useColorScheme"
 import { useViewMode } from "hooks/useViewMode"
 import React from "react"
 import { useSwipeable } from "react-swipeable"
@@ -26,8 +25,6 @@ interface FeedEntryProps {
 
 const useStyles = tss
     .withParams<{
-        theme: MantineTheme
-        colorScheme: "light" | "dark"
         read: boolean
         expanded: boolean
         viewMode: ViewMode
@@ -96,12 +93,8 @@ const useStyles = tss
     })
 
 export function FeedEntry(props: FeedEntryProps) {
-    const theme = useMantineTheme()
-    const colorScheme = useColorScheme()
     const { viewMode } = useViewMode()
     const { classes, cx } = useStyles({
-        theme,
-        colorScheme,
         read: props.entry.read,
         expanded: props.expanded,
         viewMode,

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

@@ -2,7 +2,6 @@ import { Box, Text } from "@mantine/core"
 import { type Entry } from "app/types"
 import { RelativeDate } from "components/RelativeDate"
 import { OnDesktop } from "components/responsive/OnDesktop"
-import { useColorScheme } from "hooks/useColorScheme"
 import { tss } from "tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"
 import { FeedFavicon } from "./FeedFavicon"
@@ -13,7 +12,6 @@ export interface FeedEntryHeaderProps {
 
 const useStyles = tss
     .withParams<{
-        colorScheme: "light" | "dark"
         read: boolean
     }>()
     .create(({ colorScheme, read }) => ({
@@ -42,9 +40,7 @@ const useStyles = tss
     }))
 
 export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
-    const colorScheme = useColorScheme()
     const { classes } = useStyles({
-        colorScheme,
         read: props.entry.read,
     })
     return (

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

@@ -1,5 +1,5 @@
 import { Trans } from "@lingui/macro"
-import { Group, type MantineTheme, useMantineTheme } from "@mantine/core"
+import { Group } from "@mantine/core"
 import { Constants } from "app/constants"
 import { markEntriesUpToEntry, markEntry, starEntry } from "app/entries/thunks"
 import { redirectToFeed } from "app/redirect/thunks"
@@ -17,28 +17,19 @@ interface FeedEntryContextMenuProps {
 }
 
 const iconSize = 16
-const useStyles = tss
+const useStyles = tss.create(({ theme, colorScheme }) => ({
-    .withParams<{
+    menu: {
-        theme: MantineTheme
+        // apply mantine theme from MenuItem.styles.ts
-        colorScheme: "light" | "dark"
+        fontSize: theme.fontSizes.sm,
-    }>()
+        "--contexify-item-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
-    .create(({ theme, colorScheme }) => ({
+        "--contexify-activeItem-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
-        menu: {
+        "--contexify-activeItem-bgColor": `${colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]} !important`,
-            // apply mantine theme from MenuItem.styles.ts
+    },
-            fontSize: theme.fontSizes.sm,
+}))
-            "--contexify-item-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
-            "--contexify-activeItem-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
-            "--contexify-activeItem-bgColor": `${colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]} !important`,
-        },
-    }))
 
 export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
-    const theme = useMantineTheme()
     const colorScheme = useColorScheme()
-    const { classes } = useStyles({
+    const { classes } = useStyles()
-        theme,
-        colorScheme,
-    })
     const sourceType = useAppSelector(state => state.entries.source.type)
     const dispatch = useAppDispatch()
     const { openLinkInBackgroundTab } = useBrowserExtension()

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

@@ -1,7 +1,6 @@
 import { Box, Space, Text } from "@mantine/core"
 import { type Entry } from "app/types"
 import { RelativeDate } from "components/RelativeDate"
-import { useColorScheme } from "hooks/useColorScheme"
 import { tss } from "tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"
 import { FeedFavicon } from "./FeedFavicon"
@@ -13,7 +12,6 @@ export interface FeedEntryHeaderProps {
 
 const useStyles = tss
     .withParams<{
-        colorScheme: "light" | "dark"
         read: boolean
     }>()
     .create(({ colorScheme, read }) => ({
@@ -28,9 +26,7 @@ const useStyles = tss
     }))
 
 export function FeedEntryHeader(props: FeedEntryHeaderProps) {
-    const colorScheme = useColorScheme()
     const { classes } = useStyles({
-        colorScheme,
         read: props.entry.read,
     })
     return (

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

@@ -1,8 +1,7 @@
-import { ActionIcon, Box, type MantineTheme, SimpleGrid, useMantineTheme } from "@mantine/core"
+import { ActionIcon, Box, SimpleGrid } from "@mantine/core"
 import { Constants } from "app/constants"
 import { useAppSelector } from "app/store"
 import { type SharingSettings } from "app/types"
-import { useColorScheme } from "hooks/useColorScheme"
 import { type IconType } from "react-icons"
 import { tss } from "tss"
 
@@ -10,8 +9,6 @@ type Color = `#${string}`
 
 const useStyles = tss
     .withParams<{
-        theme: MantineTheme
-        colorScheme: "light" | "dark"
         color: Color
     }>()
     .create(({ theme, colorScheme, color }) => ({
@@ -23,11 +20,7 @@ const useStyles = tss
     }))
 
 function ShareButton({ url, icon, color }: { url: string; icon: IconType; color: Color }) {
-    const theme = useMantineTheme()
-    const colorScheme = useColorScheme()
     const { classes } = useStyles({
-        theme,
-        colorScheme,
         color,
     })
 

commafeed-client/src/components/sidebar/TreeNode.tsx

@@ -1,6 +1,5 @@
-import { Box, Center, type MantineTheme, useMantineTheme } from "@mantine/core"
+import { Box, Center } from "@mantine/core"
 import { FeedFavicon } from "components/content/FeedFavicon"
-import { useColorScheme } from "hooks/useColorScheme"
 import React, { type ReactNode } from "react"
 import { tss } from "tss"
 import { UnreadCount } from "./UnreadCount"
@@ -20,8 +19,6 @@ interface TreeNodeProps {
 
 const useStyles = tss
     .withParams<{
-        theme: MantineTheme
-        colorScheme: "dark" | "light"
         selected: boolean
         hasError: boolean
         hasUnread: boolean
@@ -60,11 +57,7 @@ const useStyles = tss
     })
 
 export function TreeNode(props: TreeNodeProps) {
-    const theme = useMantineTheme()
-    const colorScheme = useColorScheme()
     const { classes } = useStyles({
-        theme,
-        colorScheme,
         selected: props.selected,
         hasError: props.hasError,
         hasUnread: props.unread > 0,

commafeed-client/src/pages/ErrorPage.tsx

@@ -1,44 +1,39 @@
 import { Trans } from "@lingui/macro"
-import { Box, Button, Container, Group, type MantineTheme, Text, Title, useMantineTheme } from "@mantine/core"
+import { Box, Button, Container, Group, Text, Title } from "@mantine/core"
 import { TbRefresh } from "react-icons/tb"
 import { tss } from "tss"
 import { PageTitle } from "./PageTitle"
 
-const useStyles = tss
+const useStyles = tss.create(({ theme }) => ({
-    .withParams<{
+    root: {
-        theme: MantineTheme
+        paddingTop: 80,
-    }>()
+    },
-    .create(({ theme }) => ({
-        root: {
-            paddingTop: 80,
-        },
 
-        label: {
+    label: {
-            textAlign: "center",
+        textAlign: "center",
-            fontWeight: "bold",
+        fontWeight: "bold",
-            fontSize: 120,
+        fontSize: 120,
-            lineHeight: 1,
+        lineHeight: 1,
-            marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
+        marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
-            color: theme.colors[theme.primaryColor][3],
+        color: theme.colors[theme.primaryColor][3],
-        },
+    },
 
-        title: {
+    title: {
-            textAlign: "center",
+        textAlign: "center",
-            fontWeight: "bold",
+        fontWeight: "bold",
-            fontSize: 32,
+        fontSize: 32,
-        },
+    },
 
-        description: {
+    description: {
-            maxWidth: 540,
+        maxWidth: 540,
-            margin: "auto",
+        margin: "auto",
-            marginTop: theme.spacing.xl,
+        marginTop: theme.spacing.xl,
-            marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
+        marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
-        },
+    },
-    }))
+}))
 
 export function ErrorPage(props: { error: Error }) {
-    const theme = useMantineTheme()
+    const { classes } = useStyles()
-    const { classes } = useStyles({ theme })
 
     return (
         <div className={classes.root}>

commafeed-client/src/tss.ts

@@ -1,11 +1,14 @@
+import { useMantineTheme } from "@mantine/core"
+import { useColorScheme } from "hooks/useColorScheme"
 import { createTss } from "tss-react"
 
 const useContext = () => {
     // return anything here that will be accessible in tss.create()
-    // we don't need anything right now
+
-    return {}
+    const theme = useMantineTheme()
+    const colorScheme = useColorScheme()
+
+    return { theme, colorScheme }
 }
 
 export const { tss } = createTss({ useContext })
-
-export const useStyles = tss.create({})