danabra.mov / overreacted
my blog https://overreacted.io
53
fork

Configure Feed

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

tweak

Dan Abramov d328d8e7 eb37c55d

+9 -13
+9 -13
public/a-social-filesystem/components.js
··· 57 57 did: data.did, 58 58 rkey: data.commit.rkey, 59 59 }; 60 - setPlays((prev) => [play, ...prev].slice(0, 5)); 60 + setPlays((prev) => [play, ...prev].slice(0, 3)); 61 61 } 62 62 } catch (e) { 63 63 console.error("Failed to parse event:", e); ··· 81 81 }, [isVisible]); 82 82 83 83 return ( 84 - <div ref={containerRef} className="my-6" style={{ fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif' }}> 85 - <p className="mb-3 flex items-center gap-2 text-[--text-secondary]" style={{ marginLeft: '-0.75rem' }}> 84 + <div ref={containerRef} className="my-6 rounded-lg bg-black/[0.03] dark:bg-white/[0.03] px-4 py-3" style={{ fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif', minHeight: '13rem' }}> 85 + <p className="flex items-center gap-2 text-[--text-secondary] text-sm"> 86 86 {status === "connecting" && "tuning in..."} 87 87 {status === "connected" && ( 88 88 <> 89 89 <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-green-500" /> 90 - live from the atmosphere 90 + {plays.length === 0 ? "watching for new records..." : "live from the atmosphere"} 91 91 </> 92 92 )} 93 93 {status === "error" && "couldn't connect"} 94 94 {status === "idle" && "waiting to connect"} 95 95 </p> 96 96 97 - {plays.length === 0 ? ( 98 - status === "connected" && ( 99 - <p className="text-[--text-secondary]">listening...</p> 100 - ) 101 - ) : ( 102 - <ul className="space-y-1 -mx-2"> 97 + {plays.length > 0 && ( 98 + <ul className="mt-2"> 103 99 {plays.map((play) => ( 104 100 <li key={play.id}> 105 101 <a 106 102 href={`https://pdsls.dev/at://${play.did}/fm.teal.alpha.feed.play/${play.rkey}`} 107 103 target="_blank" 108 104 rel="noopener noreferrer" 109 - className="block px-2 py-1 rounded hover:bg-black/5 dark:hover:bg-white/5 transition-colors" 105 + className="block py-1.5 rounded hover:bg-black/5 dark:hover:bg-white/5 transition-colors -mx-2 px-2" 110 106 > 111 - <div className="font-semibold">{play.trackName}</div> 112 - <div className="text-[--text-secondary]">{play.artistNames.join(", ")}</div> 107 + <div className="font-medium truncate leading-snug">{play.trackName}</div> 108 + <div className="text-[--text] opacity-60 text-sm truncate leading-snug">{play.artistNames.join(", ")}</div> 113 109 </a> 114 110 </li> 115 111 ))}