Skip to content

Commit 68d615e

Browse files
luke-h1luke-h1
committed
feat(app): settings preview
1 parent d912bc2 commit 68d615e

File tree

4 files changed

+205
-155
lines changed

4 files changed

+205
-155
lines changed

‎src/screens/Preferences/ChatPreferenceScreen.tsx‎

Lines changed: 75 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,42 @@ type PreviewSwitchKey = keyof Pick<
2323
| 'showTwitchBadges'
2424
>;
2525

26+
function buildChatPreferenceSwitchItem<K extends PreviewSwitchKey>({
27+
description,
28+
icon,
29+
key,
30+
label,
31+
preview,
32+
switchValues,
33+
update,
34+
}: {
35+
description: string;
36+
icon?: Icon;
37+
key: K;
38+
label: string;
39+
preview: ReactElement;
40+
switchValues: Pick<Preferences, PreviewSwitchKey>;
41+
update: (patch: Partial<Preferences>) => void;
42+
}): Item {
43+
function SwitchPreferenceItem() {
44+
return (
45+
<ChatPreferenceMenuItem
46+
description={description}
47+
icon={icon}
48+
label={label}
49+
preview={preview}
50+
type="switch"
51+
value={Boolean(switchValues[key])}
52+
onSelect={value => {
53+
update({ [key]: value } as Pick<Preferences, K>);
54+
}}
55+
/>
56+
);
57+
}
58+
59+
return SwitchPreferenceItem;
60+
}
61+
2662
export function ChatPreferenceScreen() {
2763
const {
2864
chatDensity,
@@ -57,34 +93,6 @@ export function ChatPreferenceScreen() {
5793
showTwitchBadges,
5894
} satisfies Pick<Preferences, PreviewSwitchKey>;
5995

60-
function buildSwitchItem<K extends PreviewSwitchKey>({
61-
description,
62-
icon,
63-
key,
64-
label,
65-
preview,
66-
}: {
67-
description: string;
68-
icon?: Icon;
69-
key: K;
70-
label: string;
71-
preview: ReactElement;
72-
}): Item {
73-
return () => (
74-
<ChatPreferenceMenuItem
75-
description={description}
76-
icon={icon}
77-
label={label}
78-
preview={preview}
79-
type="switch"
80-
value={Boolean(switchValues[key])}
81-
onSelect={value => {
82-
update({ [key]: value } as Pick<Preferences, K>);
83-
}}
84-
/>
85-
);
86-
}
87-
8896
return [
8997
'Layout',
9098
() => (
@@ -100,7 +108,9 @@ export function ChatPreferenceScreen() {
100108
{ label: 'Comfortable', value: 'comfortable' },
101109
{ label: 'Compact', value: 'compact' },
102110
]}
103-
preview={<ChatPreferencePreview variant="density" value={chatDensity} />}
111+
preview={
112+
<ChatPreferencePreview variant="density" value={chatDensity} />
113+
}
104114
title="Select density"
105115
type="options"
106116
value={chatDensity}
@@ -111,7 +121,7 @@ export function ChatPreferenceScreen() {
111121
}}
112122
/>
113123
),
114-
buildSwitchItem({
124+
buildChatPreferenceSwitchItem({
115125
description: 'Display timestamps next to messages',
116126
icon: {
117127
name: 'clock',
@@ -123,8 +133,10 @@ export function ChatPreferenceScreen() {
123133
preview: (
124134
<ChatPreferencePreview variant="timestamps" value={chatTimestamps} />
125135
),
136+
switchValues,
137+
update,
126138
}),
127-
buildSwitchItem({
139+
buildChatPreferenceSwitchItem({
128140
description: 'Accent messages that mention your username',
129141
icon: {
130142
name: 'at-sign',
@@ -139,8 +151,10 @@ export function ChatPreferenceScreen() {
139151
value={highlightOwnMentions}
140152
/>
141153
),
154+
switchValues,
155+
update,
142156
}),
143-
buildSwitchItem({
157+
buildChatPreferenceSwitchItem({
144158
description: 'Show reply context above chat messages',
145159
icon: {
146160
name: 'corner-up-left',
@@ -155,8 +169,10 @@ export function ChatPreferenceScreen() {
155169
value={showInlineReplyContext}
156170
/>
157171
),
172+
switchValues,
173+
update,
158174
}),
159-
buildSwitchItem({
175+
buildChatPreferenceSwitchItem({
160176
description: 'Display the jump-to-latest unread indicator',
161177
icon: {
162178
name: 'arrow-down-circle',
@@ -171,10 +187,12 @@ export function ChatPreferenceScreen() {
171187
value={showUnreadJumpPill}
172188
/>
173189
),
190+
switchValues,
191+
update,
174192
}),
175193
null,
176194
'7TV',
177-
buildSwitchItem({
195+
buildChatPreferenceSwitchItem({
178196
description: 'Enable 7TV emotes in chat',
179197
icon: {
180198
type: 'brandIcon',
@@ -190,8 +208,10 @@ export function ChatPreferenceScreen() {
190208
variant="providerEmotes"
191209
/>
192210
),
211+
switchValues,
212+
update,
193213
}),
194-
buildSwitchItem({
214+
buildChatPreferenceSwitchItem({
195215
description: 'Enable 7TV badges in chat',
196216
icon: {
197217
type: 'brandIcon',
@@ -207,9 +227,11 @@ export function ChatPreferenceScreen() {
207227
variant="providerBadges"
208228
/>
209229
),
230+
switchValues,
231+
update,
210232
}),
211233
'BTTV',
212-
buildSwitchItem({
234+
buildChatPreferenceSwitchItem({
213235
description: 'Enable BTTV emotes in chat',
214236
icon: {
215237
type: 'brandIcon',
@@ -225,8 +247,10 @@ export function ChatPreferenceScreen() {
225247
variant="providerEmotes"
226248
/>
227249
),
250+
switchValues,
251+
update,
228252
}),
229-
buildSwitchItem({
253+
buildChatPreferenceSwitchItem({
230254
description: 'Enable BTTV badges in chat',
231255
icon: {
232256
type: 'brandIcon',
@@ -242,9 +266,11 @@ export function ChatPreferenceScreen() {
242266
variant="providerBadges"
243267
/>
244268
),
269+
switchValues,
270+
update,
245271
}),
246272
'FFZ',
247-
buildSwitchItem({
273+
buildChatPreferenceSwitchItem({
248274
description: 'Enable FFZ emotes in chat',
249275
key: 'showFFzEmotes',
250276
label: 'Emotes',
@@ -255,8 +281,10 @@ export function ChatPreferenceScreen() {
255281
variant="providerEmotes"
256282
/>
257283
),
284+
switchValues,
285+
update,
258286
}),
259-
buildSwitchItem({
287+
buildChatPreferenceSwitchItem({
260288
description: 'Enable FFZ badges in chat',
261289
key: 'showFFzBadges',
262290
label: 'Badges',
@@ -267,9 +295,11 @@ export function ChatPreferenceScreen() {
267295
variant="providerBadges"
268296
/>
269297
),
298+
switchValues,
299+
update,
270300
}),
271301
'Twitch',
272-
buildSwitchItem({
302+
buildChatPreferenceSwitchItem({
273303
description: 'Enable Twitch emotes in chat',
274304
icon: {
275305
type: 'brandIcon',
@@ -285,8 +315,10 @@ export function ChatPreferenceScreen() {
285315
variant="providerEmotes"
286316
/>
287317
),
318+
switchValues,
319+
update,
288320
}),
289-
buildSwitchItem({
321+
buildChatPreferenceSwitchItem({
290322
description: 'Enable Twitch badges in chat',
291323
icon: {
292324
type: 'brandIcon',
@@ -302,6 +334,8 @@ export function ChatPreferenceScreen() {
302334
variant="providerBadges"
303335
/>
304336
),
337+
switchValues,
338+
update,
305339
}),
306340
] satisfies Item[];
307341
}, [

‎src/screens/Preferences/ChatPreferencesPreview.tsx‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { RichChatMessage } from '@app/components/Chat/components/ChatMessage/RichChatMessage';
22
import { Icon } from '@app/components/Icon/Icon';
3-
import { type SanitisedBadgeSet } from '@app/services/twitch-badge-service';
43
import { Text } from '@app/components/Text/Text';
5-
import { theme } from '@app/styles/themes';
4+
import { type SanitisedBadgeSet } from '@app/services/twitch-badge-service';
65
import {
76
type ChannelCacheType,
87
type ChatMessageType,
98
} from '@app/store/chatStore/constants';
109
import { chatStore$ } from '@app/store/chatStore/state';
10+
import { theme } from '@app/styles/themes';
1111
import { type UserStateTags } from '@app/types/chat/irc-tags/userstate';
1212
import { type SanitisedEmote } from '@app/types/emote';
1313
import {
@@ -100,14 +100,14 @@ const getMentionColor = () => theme.colors.violet.accent;
100100
const parseTextForEmotes = (text: string): ParsedPart[] => [textPart(text)];
101101

102102
export function ChatPreferencePreview(props: ChatPreferencePreviewProps) {
103-
const { variant } = props;
103+
const { variant, value } = props;
104104

105105
switch (variant) {
106106
case 'density': {
107107
return (
108108
<ChatPreviewSurface
109109
messages={[previewMessages.plain, previewMessages.reply]}
110-
settings={{ chatDensity: props.value }}
110+
settings={{ chatDensity: value }}
111111
testID="chat-preference-preview-density"
112112
/>
113113
);
@@ -117,7 +117,7 @@ export function ChatPreferencePreview(props: ChatPreferencePreviewProps) {
117117
return (
118118
<ChatPreviewSurface
119119
messages={[previewMessages.plain]}
120-
settings={{ chatTimestamps: props.value }}
120+
settings={{ chatTimestamps: value }}
121121
testID="chat-preference-preview-timestamps"
122122
/>
123123
);
@@ -127,7 +127,7 @@ export function ChatPreferencePreview(props: ChatPreferencePreviewProps) {
127127
return (
128128
<ChatPreviewSurface
129129
messages={[previewMessages.mention]}
130-
settings={{ highlightOwnMentions: props.value }}
130+
settings={{ highlightOwnMentions: value }}
131131
testID="chat-preference-preview-mentions"
132132
/>
133133
);
@@ -137,7 +137,7 @@ export function ChatPreferencePreview(props: ChatPreferencePreviewProps) {
137137
return (
138138
<ChatPreviewSurface
139139
messages={[previewMessages.reply]}
140-
settings={{ showInlineReplyContext: props.value }}
140+
settings={{ showInlineReplyContext: value }}
141141
testID="chat-preference-preview-inline-reply"
142142
/>
143143
);
@@ -147,36 +147,38 @@ export function ChatPreferencePreview(props: ChatPreferencePreviewProps) {
147147
return (
148148
<ChatPreviewSurface
149149
messages={[previewMessages.plain, previewMessages.mention]}
150-
settings={{ showUnreadJumpPill: props.value }}
150+
settings={{ showUnreadJumpPill: value }}
151151
testID="chat-preference-preview-jump-pill"
152152
/>
153153
);
154154
}
155155

156156
case 'providerEmotes': {
157+
const { provider } = props;
157158
return (
158159
<ProviderAssetPreview
159-
enabled={props.value}
160-
provider={props.provider}
161-
testID={`chat-preference-preview-${props.provider}-emotes`}
160+
enabled={value}
161+
provider={provider}
162+
testID={`chat-preference-preview-${provider}-emotes`}
162163
variant="emotes"
163164
/>
164165
);
165166
}
166167

167168
case 'providerBadges': {
169+
const { provider } = props;
168170
return (
169171
<ProviderAssetPreview
170-
enabled={props.value}
171-
provider={props.provider}
172-
testID={`chat-preference-preview-${props.provider}-badges`}
172+
enabled={value}
173+
provider={provider}
174+
testID={`chat-preference-preview-${provider}-badges`}
173175
variant="badges"
174176
/>
175177
);
176178
}
177179

178180
default: {
179-
const unreachable: never = props;
181+
const unreachable: never = variant;
180182
return unreachable;
181183
}
182184
}
@@ -443,7 +445,9 @@ function fillPreviewItems<T>(
443445
return result;
444446
}
445447

446-
function sortCachesByFreshness(channelCaches: Record<string, ChannelCacheType>) {
448+
function sortCachesByFreshness(
449+
channelCaches: Record<string, ChannelCacheType>,
450+
) {
447451
return Object.values(channelCaches).sort(
448452
(left, right) => (right.lastUpdated || 0) - (left.lastUpdated || 0),
449453
);
@@ -459,7 +463,10 @@ function getLiveProviderEmotes(
459463
caches.forEach(cache => {
460464
switch (provider) {
461465
case '7tv':
462-
emotes.push(...cache.sevenTvChannelEmotes, ...cache.sevenTvGlobalEmotes);
466+
emotes.push(
467+
...cache.sevenTvChannelEmotes,
468+
...cache.sevenTvGlobalEmotes,
469+
);
463470
break;
464471
case 'bttv':
465472
emotes.push(...cache.bttvChannelEmotes, ...cache.bttvGlobalEmotes);
@@ -552,17 +559,13 @@ function buildProviderEmoteParts(
552559
? emotes.filter(emote => emote.site === 'Twitch Global')
553560
: [],
554561
ffzChannelEmotes:
555-
provider === 'ffz'
556-
? emotes.filter(emote => emote.site === 'FFZ')
557-
: [],
562+
provider === 'ffz' ? emotes.filter(emote => emote.site === 'FFZ') : [],
558563
ffzGlobalEmotes:
559564
provider === 'ffz'
560565
? emotes.filter(emote => emote.site === 'Global FFZ')
561566
: [],
562567
bttvChannelEmotes:
563-
provider === 'bttv'
564-
? emotes.filter(emote => emote.site === 'BTTV')
565-
: [],
568+
provider === 'bttv' ? emotes.filter(emote => emote.site === 'BTTV') : [],
566569
bttvGlobalEmotes:
567570
provider === 'bttv'
568571
? emotes.filter(emote => emote.site === 'Global BTTV')

0 commit comments

Comments
 (0)