correct UI for header; grid UI for filters; refactoring

Author: Soxasora

components/notifications-filter.js

@@ -1,10 +1,8 @@
 import { useState, useCallback, useMemo } from 'react'
-import { useShowModal } from './modal'
 import { useRouter } from 'next/router'
 import { NOTIFICATION_CATEGORIES } from '../lib/constants'
 import { Checkbox, Form, SubmitButton } from './form'
-import FilterIcon from '@/svgs/equalizer-line.svg'
-import styles from './notifications-filter.module.css'
+import styles from './notifications.module.css'
 
 export const getFiltersFromInc = (inc) => {
   const filters = new Set(inc?.split(',') || [])
@@ -17,7 +15,7 @@ export const getSavedFilters = () => {
   return savedFilters ? new Set(savedFilters) : new Set()
 }
 
-export function NotificationsFilter ({ onClose }) {
+export default function NotificationsFilter ({ onClose }) {
   const router = useRouter()
 
   const appliedFilters = useMemo(() => {
@@ -65,7 +63,7 @@ export function NotificationsFilter ({ onClose }) {
           onClose?.()
         }}
       >
-        <div className='d-flex flex-row flex-wrap mt-4'>
+        <div className={styles.filterContainer}>
           {NOTIFICATION_CATEGORIES.map((category) => (
             <Checkbox
               key={category}
@@ -85,29 +83,3 @@ export function NotificationsFilter ({ onClose }) {
     </div>
   )
 }
-
-export default function NotificationsHeader () {
-  const showModal = useShowModal()
-  const router = useRouter()
-
-  const hasActiveFilters = useMemo(() => {
-    const incFilters = getFiltersFromInc(router.query.inc)
-    return incFilters.size > 0
-  })
-
-  return (
-    <div className='d-flex align-items-center gap-2'>
-      <h2 className='mt-1 text-start'>notifications</h2>
-      <FilterIcon
-        width={20}
-        height={20}
-        className={hasActiveFilters ? styles.filterIconActive : styles.filterIcon}
-        onClick={() => {
-          showModal((onClose) => (
-            <NotificationsFilter onClose={onClose} />
-          ))
-        }}
-      />
-    </div>
-  )
-}

components/notifications-filter.module.css

@@ -40,10 +40,12 @@ import { paidActionCacheMods } from './use-paid-mutation'
 import { useRetryCreateItem } from './use-item-submit'
 import { payBountyCacheMods } from './pay-bounty'
 import { useToast } from './toast'
+import { useShowModal } from './modal'
+import NotificationsFilter, { getFiltersFromInc } from './notifications-filter'
 import classNames from 'classnames'
 import HolsterIcon from '@/svgs/holster.svg'
 import SaddleIcon from '@/svgs/saddle.svg'
-import NotificationsHeader from './notifications-filter'
+import FilterIcon from '@/svgs/equalizer-line.svg'
 
 function Notification ({ n, fresh }) {
   const type = n.__typename
@@ -741,6 +743,35 @@ export function NotificationAlert () {
   )
 }
 
+export function NotificationsHeader () {
+  const showModal = useShowModal()
+  const router = useRouter()
+
+  const hasActiveFilters = useMemo(() => {
+    const incFilters = getFiltersFromInc(router.query.inc)
+    return incFilters.size > 0
+  })
+
+  return (
+    <div className='d-flex align-items-center gap-2 justify-content-between'>
+      <div className='d-flex align-items-center gap-2'>
+        <h2 className='mt-1 text-start'>notifications</h2>
+        <FilterIcon
+          width={20}
+          height={20}
+          className={hasActiveFilters ? styles.filterIconActive : styles.filterIcon}
+          onClick={() => {
+            showModal((onClose) => (
+              <NotificationsFilter onClose={onClose} />
+            ))
+          }}
+        />
+      </div>
+      <NotificationAlert />
+    </div>
+  )
+}
+
 const nid = n => n.__typename + n.id + n.sortTime
 
 export default function Notifications ({ ssrData }) {

components/notifications.js

@@ -73,4 +73,25 @@
     font-weight: 800;
     line-height: 1.25;
     vertical-align: middle;
+}
+
+.filterIcon {
+    cursor: pointer;
+    fill: var(--theme-grey);
+}
+.filterIcon:hover {
+    fill: var(--theme-brandColor);
+    filter: drop-shadow(0 0 2px var(--bs-primary));
+}
+
+.filterIconActive {
+    cursor: pointer;
+    fill: var(--theme-brandColor);
+    filter: drop-shadow(0 0 2px var(--bs-primary));
+}
+
+.filterContainer {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
 }

components/notifications.module.css

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { getGetServerSideProps } from '@/api/ssrApollo'
 import Layout from '@/components/layout'
-import Notifications, { NotificationAlert } from '@/components/notifications'
+import Notifications from '@/components/notifications'
 import { HAS_NOTIFICATIONS, NOTIFICATIONS } from '@/fragments/notifications'
 import { useApolloClient } from '@apollo/client'
 import { clearNotifications } from '@/lib/badge'
@@ -23,7 +23,6 @@ export default function NotificationPage ({ ssrData }) {
 
   return (
     <Layout>
-      <NotificationAlert />
       <Notifications ssrData={ssrData} />
     </Layout>
   )