A personal media tracker built on the AT Protocol opnshelf.xyz
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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&apos;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
··· 448 448 <input 449 449 type="text" 450 450 placeholder="Search list..." 451 - className="input h-9 w-48 pl-9 text-sm" 451 + className="input h-9 w-48 !pl-9 text-sm" 452 452 value={searchQuery} 453 453 onChange={(e) => setSearchQuery(e.target.value)} 454 454 />