notification filters ui -> db

atproto-notifications/src/pages/Feed.css

···
   margin: 2rem auto;
 }
 
+.filter-pref-wrapper {
+  display: inline-block;
+}
+
 .filter-pref-trigger {
   display: inline-block;
   padding: 0 0.25rem;

atproto-notifications/src/pages/Feed.tsx

···
-import { useEffect, useState } from 'react';
+import { useCallback, 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 { GetJson, PostJson } from '../components/Fetch';
 import psl from 'psl';
 import lexicons from 'lexicons';
 
 import './feed.css';
 
 function FilterPref({ secondary, value }) {
-  return (
+  const [wanted, setWanted] = useState(null);
+  const [updateCount, setUpdateCount] = useState(0);
+  const v = `${updateCount}:${wanted}`;
+
+  const setFilterBool = useCallback(val => {
+    setUpdateCount(n => n + 1);
+    setWanted(val === 'notify');
+  });
+  const resetFilter = useCallback(() => {
+    setUpdateCount(n => n + 1);
+    setWanted(null);
+  });
+
+  const trigger = useCallback(notify => {
+    let icon = '⚙', title = 'Default (inherit)';
+    if (notify === true) {
+      icon = '🔊';
+      title = 'Always notify';
+    } else if (notify === false) {
+      icon = '🚫';
+      title = 'Notifications muted';
+    }
+    return (
+      <div className="filter-pref-trigger" title={title}>
+        {icon}
+      </div>
+    );
+  });
+
+  const renderFilter = useCallback(({ notify }) => (
     <Popup
-      trigger={
-        <div className="filter-pref-trigger">
-          ⚙
-        </div>
-      }
+      key="x"
+      trigger={trigger(notify)}
       position={['bottom center']}
       closeOnDocumentClick
     >
···
             { val: 'notify', label: 'notify' },
             { val: 'mute' },
           ]}
-          current={null}
+          current={notify === null ? null : notify ? 'notify' : 'mute'}
+          onChange={setFilterBool}
         />
-        {/*<button className="subtle">reset</button>*/}
+        {notify !== null && (
+          <button className="subtle" onClick={resetFilter}>reset</button>
+        )}
       </div>
     </Popup>
-  );
+  ));
+
+  const common = {
+    endpoint: '/notification-filter',
+    credentials: true,
+    ok: renderFilter,
+    loading: () => <>&hellip;</>,
+  };
+
+  return updateCount === 0
+    ? <GetJson key={v}
+        params={{ selector: secondary, selection: value }}
+        {...common}
+      />
+    : <PostJson key={v}
+        data={{ selector: secondary, selection: value, notify: wanted }}
+        {...common}
+      />;
 }
 
 function SecondaryFilter({ inc, secondary, current, onUpdate }) {

server/api.js

···
   return gotIt(res);
 };
 
+const handleGetNotificationFilter = async (db, user, searchParams, res) => {
+  const selector = searchParams.get('selector');
+  if (!selector) return badRequest(res, '"selector" required in search query');
+
+  const selection = searchParams.get('selection');
+  if (!selection) return badRequest(res, '"selection" required in search query');
+
+  const { did } = user;
+
+  const notify = db.getNotificationFilter(did, selector, selection) ?? null;
+  return ok(res, { notify });
+};
+
+const handleSetNotificationFilter = async (db, user, req, res) => {
+  const body = await getRequesBody(req);
+  const { selector, selection, notify } = JSON.parse(body);
+  const { did } = user;
+  db.setNotificationFilter(did, selector, selection, notify);
+  return ok(res, { notify });
+};
+
 /// admin stuff
 
 const handleListSecrets = async (db, res) => {
···
     if (method === 'POST' && pathname === '/global-notify') {
       if (!user) return unauthorized(res);
       return handleSetGlobalNotifySettings(db, user, req, res);
+    }
+    if (method === 'GET' && pathname === '/notification-filter') {
+      if (!user) return unauthorized(res);
+      return handleGetNotificationFilter(db, user, searchParams, res);
+    }
+    if (method === 'POST' && pathname === '/notification-filter') {
+      if (!user) return unauthorized(res);
+      return handleSetNotificationFilter(db, user, req, res);
     }
 
     // non-public access required

server/db.js

···
 import Database from 'better-sqlite3';
 
 const SUBS_PER_ACCOUNT_LIMIT = 5;
+const SECONDARY_FILTERS_LIMIT = 100;
+
 const SCHEMA_FNAME = './schema.sql';
 
 export class DB {
···
   #stmt_set_role;
   #stmt_get_notify_account_globals;
   #stmt_set_notify_account_globals;
+  #stmt_set_notification_filter;
+  #stmt_get_notification_filter;
+  #stmt_count_notification_filters;
+  #stmt_rm_notification_filter;
 
   #stmt_admin_add_secret;
   #stmt_admin_expire_secret;
···
               notify_self = :notify_self
         where did = :did`);
 
+    this.#stmt_set_notification_filter = db.prepare(
+      `insert into notification_filters (account_did, selector, selection, notify)
+       values (:did, :selector, :selection, :notify)
+           on conflict do update
+          set notify = excluded.notify`);
+
+    this.#stmt_get_notification_filter = db.prepare(
+      `select notify
+         from notification_filters
+        where account_did = :did
+          and selector = :selector
+          and selection = :selection`);
+
+    this.#stmt_count_notification_filters = db.prepare(
+      `select count(*) as n
+         from notification_filters
+        where account_did = :did`);
+
+    this.#stmt_rm_notification_filter = db.prepare(
+      `delete from notification_filters
+        where account_did = :did
+          and selector = :selector
+          and selection = :selection`);
+
 
     this.#stmt_admin_add_secret = db.prepare(
       `insert into top_secret_passwords (password)
···
       update.did = did;
       this.#stmt_set_notify_account_globals.run(update);
     });
+  }
+
+  getNotificationFilter(did, selector, selection) {
+    const res = this.#stmt_get_notification_filter.get({ did, selector, selection });
+    const dbNotify = res?.notify;
+    if (dbNotify === 1) return true;
+    else if (dbNotify === 0) return false;
+    else return null;
+  }
+
+  setNotificationFilter(did, selector, selection, notify) {
+    if (notify === null) {
+      this.#stmt_rm_notification_filter.run({ did, selector, selection });
+    } else {
+      this.#transactionally(() => {
+        const { n } = this.#stmt_count_notification_filters.get({ did });
+        if (n >= SECONDARY_FILTERS_LIMIT) {
+          throw new Error('max filters set for account');
+        }
+        let dbNotify = null;
+        if (notify === true) dbNotify = 1;
+        else if (notify === false) dbNotify = 0;
+        this.#stmt_set_notification_filter.run({ did, selector, selection, notify: dbNotify });
+      });
+    }
   }
 
 

server/schema.sql

···
   check(length(password) >= 3)
 ) strict;
 
-create table if not exists mute_by_secondary (
+create table if not exists notification_filters (
   account_did text not null,
   selector    text not null,
   selection   text not null,
-  mute        integer not null default true,
+  notify      integer null,
 
   primary key(account_did, selector, selection),
   check(selector in ('all', 'app', 'group', 'source')),