A personal media tracker built on the AT Protocol
opnshelf.xyz
fix: search icon overlap and following page refetch
- Add padding to command input to prevent search icon overlapping placeholder
- Add !important to search input padding in following and lists pages
- Remove Discover People card from following page
- Fix follow/unfollow mutations to properly refetch all related queries using predicate
+27
-25
+1
-1
apps/web/src/components/ui/command.tsx
+1
-1
apps/web/src/components/ui/command.tsx
···
70
70
<CommandPrimitive.Input
71
71
data-slot="command-input"
72
72
className={cn(
73
-
"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
73
+
"flex h-10 w-full rounded-md bg-transparent py-3 pl-2 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
74
74
className,
75
75
)}
76
76
{...props}
+25
-23
apps/web/src/routes/following.tsx
+25
-23
apps/web/src/routes/following.tsx
···
121
121
const followMutation = useMutation({
122
122
mutationKey: ["social", "follow"],
123
123
...socialControllerFollowMutation(),
124
-
onSuccess: () => {
125
-
queryClient.invalidateQueries({
126
-
queryKey: ["socialControllerGetFollowing"],
127
-
});
128
-
queryClient.invalidateQueries({
129
-
queryKey: ["socialControllerSearchPeople"],
124
+
onSuccess: async () => {
125
+
// Refetch all related queries to update the UI immediately
126
+
await queryClient.refetchQueries({
127
+
predicate: (query) => {
128
+
const queryKey = query.queryKey[0] as { _id?: string } | undefined;
129
+
const id = queryKey?._id;
130
+
return (
131
+
id === "socialControllerGetFollowing" ||
132
+
id === "socialControllerSearchPeople" ||
133
+
id === "socialControllerGetFeed"
134
+
);
135
+
},
130
136
});
131
137
},
132
138
});
···
135
141
const unfollowMutation = useMutation({
136
142
mutationKey: ["social", "unfollow"],
137
143
...socialControllerUnfollowMutation(),
138
-
onSuccess: () => {
139
-
queryClient.invalidateQueries({
140
-
queryKey: ["socialControllerGetFollowing"],
141
-
});
142
-
queryClient.invalidateQueries({
143
-
queryKey: ["socialControllerSearchPeople"],
144
+
onSuccess: async () => {
145
+
// Refetch all related queries to update the UI immediately
146
+
await queryClient.refetchQueries({
147
+
predicate: (query) => {
148
+
const queryKey = query.queryKey[0] as { _id?: string } | undefined;
149
+
const id = queryKey?._id;
150
+
return (
151
+
id === "socialControllerGetFollowing" ||
152
+
id === "socialControllerSearchPeople" ||
153
+
id === "socialControllerGetFeed"
154
+
);
155
+
},
144
156
});
145
157
},
146
158
});
···
198
210
<input
199
211
type="text"
200
212
placeholder="Find people to follow..."
201
-
className="input pl-10"
213
+
className="input !pl-10"
202
214
value={searchQuery}
203
215
onChange={(e) => setSearchQuery(e.target.value)}
204
216
onFocus={handleSearchFocus}
···
561
573
</section>
562
574
563
575
{/* Discover People CTA */}
564
-
<section className="card p-5 bg-gradient-to-br from-[var(--accent-subtle)] to-transparent">
565
-
<h3 className="font-display font-semibold mb-2">Discover People</h3>
566
-
<p className="text-sm text-[var(--foreground-muted)] mb-4">
567
-
Find more people to follow and see what they're watching.
568
-
</p>
569
-
<Link to="/discover" className="btn btn-primary w-full">
570
-
<UserPlus className="h-4 w-4 mr-2" />
571
-
Find People
572
-
</Link>
573
-
</section>
574
576
</div>
575
577
</div>
576
578
</div>
+1
-1
apps/web/src/routes/lists.tsx
+1
-1
apps/web/src/routes/lists.tsx