make compact mode more compact

commafeed-client/.eslintrc

@@ -70,8 +70,6 @@
                 "groups": [
                     "useLocation",
                     "useParams",
-                    "useStyles",
-                    "useMantineTheme",
                     "useState",
                     "useAppSelector",
                     "useAppDispatch",

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

@@ -17,19 +17,25 @@ interface FeedEntryProps {
     onHeaderClick: (e: React.MouseEvent) => void
 }
 
-const useStyles = createStyles((theme, props: FeedEntryProps) => {
+const useStyles = createStyles((theme, props: FeedEntryProps & { compact: boolean }) => {
     let backgroundColor
     if (theme.colorScheme === "dark") backgroundColor = props.entry.read ? "inherit" : theme.colors.dark[5]
     else backgroundColor = props.entry.read && !props.expanded ? theme.colors.gray[0] : "inherit"
 
+    let marginY = theme.spacing.xs
+    if (props.compact) marginY = 6
+
+    let mobileMarginY = 6
+    if (props.compact) mobileMarginY = 4
+
     const styles = {
         paper: {
             backgroundColor,
-            marginTop: theme.spacing.xs,
-            marginBottom: theme.spacing.xs,
+            marginTop: marginY,
+            marginBottom: marginY,
             [theme.fn.smallerThan(Constants.layout.mobileBreakpoint)]: {
-                marginTop: "6px",
-                marginBottom: "6px",
+                marginTop: mobileMarginY,
+                marginBottom: mobileMarginY,
             },
         },
         body: {
@@ -45,18 +51,23 @@ const useStyles = createStyles((theme, props: FeedEntryProps) => {
 })
 
 export function FeedEntry(props: FeedEntryProps) {
-    const { classes } = useStyles(props)
     const viewMode = useAppSelector(state => state.user.settings?.viewMode)
-    const dispatch = useAppDispatch()
+    const compact = viewMode === "title"
+    const compactHeader = compact && !props.expanded
 
-    const compactHeader = viewMode === "title" && !props.expanded
+    const { classes } = useStyles({ ...props, compact })
+
+    const dispatch = useAppDispatch()
 
     const swipeHandlers = useSwipeable({
         onSwipedRight: () => dispatch(markEntry({ entry: props.entry, read: !props.entry.read })),
     })
 
+    const spacing = compact ? 8 : "xs"
+    const borderRadius = compact ? "xs" : "sm"
+
     return (
-        <Paper withBorder className={classes.paper}>
+        <Paper withBorder radius={borderRadius} className={classes.paper}>
             <Anchor
                 variant="text"
                 href={props.entry.url}
@@ -65,17 +76,17 @@ export function FeedEntry(props: FeedEntryProps) {
                 onClick={props.onHeaderClick}
                 onAuxClick={props.onHeaderClick}
             >
-                <Box p="xs" {...swipeHandlers}>
+                <Box p={spacing} {...swipeHandlers}>
                     {compactHeader && <FeedEntryCompactHeader entry={props.entry} />}
                     {!compactHeader && <FeedEntryHeader entry={props.entry} expanded={props.expanded} />}
                 </Box>
             </Anchor>
             {props.expanded && (
-                <Box px="xs" pb="xs">
+                <Box px={spacing} pb={spacing}>
                     <Box className={classes.body} sx={{ direction: props.entry.rtl ? "rtl" : "ltr" }}>
                         <FeedEntryBody entry={props.entry} />
                     </Box>
-                    <Divider variant="dashed" my="xs" />
+                    <Divider variant="dashed" my={spacing} />
                     <FeedEntryFooter entry={props.entry} />
                 </Box>
             )}