blob: bef4786bc2c4a9b7c76a22dd04f042853f52dee7 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
"use client"
import { useState } from "react"
import { useMutedKeywords } from "@/lib/queries/use-muted-keywords"
import {
useAddMutedKeyword,
useDeleteMutedKeyword,
} from "@/lib/queries/use-muted-keyword-mutations"
import { useUserProfile } from "@/lib/queries/use-user-profile"
import { TIER_LIMITS } from "@asa-news/shared"
export function MutedKeywordsSettings() {
const [newKeyword, setNewKeyword] = useState("")
const { data: keywords, isLoading } = useMutedKeywords()
const { data: userProfile } = useUserProfile()
const addKeyword = useAddMutedKeyword()
const deleteKeyword = useDeleteMutedKeyword()
const tier = userProfile?.tier ?? "free"
const tierLimits = TIER_LIMITS[tier]
function handleAddKeyword(event: React.FormEvent) {
event.preventDefault()
const trimmedKeyword = newKeyword.trim()
if (!trimmedKeyword) return
addKeyword.mutate({ keyword: trimmedKeyword })
setNewKeyword("")
}
if (isLoading) {
return <p className="px-4 py-6 text-text-dim">loading muted keywords...</p>
}
const keywordList = keywords ?? []
return (
<div>
<div className="border-b border-border px-4 py-3">
<p className="mb-1 text-text-dim">
{keywordList.length} / {tierLimits.maximumMutedKeywords} keywords used
</p>
<p className="mb-2 text-text-dim">
entries containing muted keywords are hidden from your timeline
</p>
<form onSubmit={handleAddKeyword} className="flex gap-2">
<input
type="text"
value={newKeyword}
onChange={(event) => setNewKeyword(event.target.value)}
placeholder="keyword to mute"
className="min-w-0 flex-1 border border-border bg-background-primary px-3 py-2 text-text-primary outline-none placeholder:text-text-dim focus:border-text-dim"
/>
<button
type="submit"
disabled={addKeyword.isPending || !newKeyword.trim()}
className="border border-border bg-background-tertiary px-4 py-2 text-text-primary transition-colors hover:bg-border disabled:opacity-50"
>
mute
</button>
</form>
</div>
{keywordList.length === 0 ? (
<p className="px-4 py-6 text-text-dim">no muted keywords</p>
) : (
keywordList.map((keyword) => (
<div
key={keyword.identifier}
className="flex items-center justify-between border-b border-border px-4 py-3 last:border-b-0"
>
<span className="text-text-primary">{keyword.keyword}</span>
<button
onClick={() =>
deleteKeyword.mutate({
keywordIdentifier: keyword.identifier,
})
}
disabled={deleteKeyword.isPending}
className="px-2 py-1 text-text-secondary transition-colors hover:text-status-error disabled:opacity-50"
>
unmute
</button>
</div>
))
)}
</div>
)
}
|