popup ui for notification filtering

atproto-notifications/package-lock.json

···
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-router": "^7.6.3",
-        "react-time-ago": "^7.3.3"
+        "react-time-ago": "^7.3.3",
+        "reactjs-popup": "^2.0.6"
       },
       "devDependencies": {
         "@eslint/js": "^9.29.0",
···
         "javascript-time-ago": "^2.3.7",
         "react": ">=0.16.8",
         "react-dom": ">=0.16.8"
+      }
+    },
+    "node_modules/reactjs-popup": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.6.tgz",
+      "integrity": "sha512-A+tt+x9wdgZiZjv0e2WzYLD3IfFwJALaRaqwrCSXGjo0iQdsry/EtBEbQXRSmQs7cHmOi5eytCiSlOm8k4C+dg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
       }
     },
     "node_modules/relative-time-format": {

atproto-notifications/package.json

···
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.6.3",
-    "react-time-ago": "^7.3.3"
+    "react-time-ago": "^7.3.3",
+    "reactjs-popup": "^2.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.29.0",

atproto-notifications/src/components/NotificationSettings.tsx

···
+import { useState } from 'react';
+
+
 export function NotificationSettings({ secondary, secondaryFilter }) {
+
+
+  // const [notifyToggleCounter, setNotifyToggleCounter] = useState(0);
+
+  // // TODO move up (to chrome?) so it syncs
+  // const setGlobalNotifications = useCallback(async enabled => {
+  //   const host = import.meta.env.VITE_NOTIFICATIONS_HOST;
+  //   const url = new URL('/global-notify', host);
+  //   try {
+  //     await postJson(url, JSON.stringify({ notify_enabled: enabled }), true)
+  //   } catch (err) {
+  //     console.error('failed to set self-notify setting', err);
+  //   }
+  //   setNotifyToggleCounter(n => n + 1);
+  // });
+
+
+
+
   if (secondary === 'all') {
     return <p>Notifications default: [todo: toggle mute], unknown sources: [toggle mute]</p>;
   }

atproto-notifications/src/pages/Early.tsx

···
 
   // TODO move up (to chrome?) so it syncs
   const setGlobalNotifications = useCallback(async enabled => {
-    // setSecretDevStatus('pending');
     const host = import.meta.env.VITE_NOTIFICATIONS_HOST;
     const url = new URL('/global-notify', host);
     try {
       await postJson(url, JSON.stringify({ notify_enabled: enabled }), true)
-      // setSecretDevStatus(null);
     } catch (err) {
       console.error('failed to set self-notify setting', err);
-      // setSecretDevStatus('failed');
     }
     setNotifyToggleCounter(n => n + 1);
   });

atproto-notifications/src/pages/Feed.css

···
   text-align: left;
   margin: 2rem auto;
 }
+
+.filter-pref-trigger {
+  display: inline-block;
+  padding: 0 0.25rem;
+}
+.filter-pref-trigger:hover {
+  background: hsla(0, 0%, 50%, 0.333);
+  border-radius: 0.3333rem;
+}
+
+.popup-arrow {
+  color: #2c343c;
+  stroke-width: 1.5px;
+  stroke: hsla(0, 0%, 50%, 0.333);
+  stroke-dasharray: 30px;
+  stroke-dashoffset: -54px;
+}
+
+.popup-overlay {
+  background: hsla(0, 0%, 0%, 0.1);
+}
+
+.popup-content {
+  background: #2c343c;
+  padding: 0.25rem 0.333rem;
+  font-size: 0.8rem;
+  border: 0.5px solid hsla(0, 0%, 50%, 0.333);
+  border-radius: 0.25rem;
+}
+.filter-pref-popup {
+  text-align: center;
+}
+.filter-pref-popup h4 {
+  margin: 0 0 0.25rem;
+  font-size: 0.8rem;
+  color: #bbb;
+}
+.filter-pref.option {
+  display: block;
+}

atproto-notifications/src/pages/Feed.tsx

···
 import { useEffect, useState } from 'react';
+import Popup from 'reactjs-popup';
 import { getNotifications, getSecondary } from '../db';
 import { ButtonGroup } from '../components/Buttons';
 import { NotificationSettings } from '../components/NotificationSettings';
 import { Notification } from '../components/Notification';
+import { GetJson } from '../components/Fetch';
 import psl from 'psl';
 import lexicons from 'lexicons';
 
 import './feed.css';
+
+function FilterPref({ secondary, value }) {
+  return (
+    <Popup
+      trigger={
+        <div className="filter-pref-trigger">
+          ⚙
+        </div>
+      }
+      position={['bottom center']}
+      closeOnDocumentClick
+    >
+      <div className="filter-pref-popup">
+        <h4>filter notifications</h4>
+        <ButtonGroup
+          options={[
+            { val: 'notify', label: 'notify' },
+            { val: 'mute' },
+          ]}
+          current={null}
+        />
+        {/*<button className="subtle">reset</button>*/}
+      </div>
+    </Popup>
+  );
+}
 
 function SecondaryFilter({ inc, secondary, current, onUpdate }) {
   const [secondaries, setSecondaries] = useState([]);
···
               {icon && (
                 <img className="app-icon" src={icon} title={appName ?? app} alt="" />
               )}
-              {title} ({total})
+              {title}
+              <small style={{
+                display: 'inline-block',
+                fontSize: '0.6rem',
+                padding: '0 0.2rem',
+                color: '#f90',
+                fontFamily: 'monospace',
+                verticalAlign: 'top',
+              }}>
+                {total >= 30 ? '30+' : total}
+              </small>
+              <FilterPref secondary={secondary} value={k} />
             </>
           ),
         };

lexicons/index.js

···
   'blue.microcosm': {
     name: 'microcosm',
     clients: [
-      {},
+      {
+        app_name: 'Spacedust notifications demo',
+        canonical: true,
+        main: 'https://notifications.microcosm.blue',
+        icon: '/icons/microcosm.png',
+      },
     ],
     known_sources: {
       'test.notification:hello': 'Hello spacedust!',

server/schema.sql

···
 
   check(length(password) >= 3)
 ) strict;
+
+create table if not exists mute_by_secondary (
+  account_did text not null,
+  selector    text not null,
+  selection   text not null,
+  mute        integer not null default true,
+
+  primary key(account_did, selector, selection),
+  check(selector in ('all', 'app', 'group', 'source')),
+
+  foreign key(account_did) references accounts(did)
+    on delete cascade on update cascade
+) strict;