bad-example.com
demos for spacedust
find ui space for settings by filter
doesn't easily accommodate granular "following-only" style settings, but they might be possible.
+27
-6
+11
atproto-notifications/src/components/NotificationSettings.tsx
+11
atproto-notifications/src/components/NotificationSettings.tsx
···
1
+
export function NotificationSettings({ secondary, secondaryFilter }) {
2
+
if (secondary === 'all') {
3
+
return <p>Notifications default: [todo: toggle mute], unknown sources: [toggle mute]</p>;
4
+
}
5
+
if (secondaryFilter === null) {
6
+
return null;
7
+
}
8
+
return (
9
+
<p>{secondaryFilter} [todo: toggle mute]</p>
10
+
);
11
+
}
+7
-1
atproto-notifications/src/pages/Feed.tsx
+7
-1
atproto-notifications/src/pages/Feed.tsx
···
1
1
import { useEffect, useState } from 'react';
2
2
import { getNotifications, getSecondary } from '../db';
3
3
import { ButtonGroup } from '../components/Buttons';
4
+
import { NotificationSettings } from '../components/NotificationSettings';
4
5
import { Notification } from '../components/Notification';
5
6
import psl from 'psl';
6
7
import lexicons from 'lexicons';
···
130
131
</div>
131
132
{secondary !== 'all' && (
132
133
<div className="feed-filter-secondary">
133
-
<h4>Filter:</h4>
134
134
<SecondaryFilter
135
135
inc={inc}
136
136
secondary={secondary}
···
139
139
/>
140
140
</div>
141
141
)}
142
+
143
+
<NotificationSettings
144
+
secondary={secondary}
145
+
secondaryFilter={secondaryFilter}
146
+
/>
147
+
142
148
<div className="feed-notifications">
143
149
{feed.map(([k, n]) => (
144
150
<Notification key={k} {...n} />
+9
-5
lexicons/index.js
+9
-5
lexicons/index.js
···
10
10
},
11
11
'app.bsky': {
12
12
name: 'Bluesky',
13
+
profile: {
14
+
display_name: 'app.bsky.actor.profile:displayName',
15
+
avatar: 'app.bsky.actor.profile:avatar',
16
+
},
13
17
clients: [
14
18
{
15
19
app_name: 'Bluesky Social',
···
39
43
],
40
44
known_sources: {
41
45
'graph.follow:subject': 'Follow',
42
-
'graph.verification:subject': 'Verification ✅',
43
-
'feed.like:subject.uri': 'Like 💜',
46
+
'graph.verification:subject': 'Verification',
47
+
'feed.like:subject.uri': 'Like',
44
48
'feed.like:via.uri': 'Repost like',
45
49
'feed.post:reply.parent.uri': 'Reply',
46
50
'feed.post:reply.root.uri': 'Reply in thread',
···
62
66
name: 'Leaflet',
63
67
clients: [
64
68
{
65
-
'app_name': 'leaflet.pub',
69
+
app_name: 'leaflet.pub',
66
70
canonical: true,
67
71
icon: '/icons/pub.leaflet.jpg',
68
72
main: 'https://leaflet.pub/home',
···
79
83
name: 'Tangled',
80
84
clients: [
81
85
{
82
-
'app_name': 'Tangled',
86
+
app_name: 'Tangled',
83
87
canonical: true,
84
88
icon: '/icons/sh.tangled.jpg',
85
89
main: 'https://tangled.sh',
···
105
109
name: 'Pinksea',
106
110
clients: [
107
111
{
108
-
'app_name': 'Pinksea',
112
+
app_name: 'Pinksea',
109
113
canonical: true,
110
114
icon: '/icons/com.shinolabs.jpg',
111
115
main: 'https://pinksea.art',