patch of feat: display user avatar at the bottom of each scrobble · round #0 · pull #4 · rocksky.app/rocksky

+137 -141

apps/web/src/components/ContextMenu/ContextMenu.tsx

···

       4
       4
        
       import { StatefulPopover } from "baseui/popover";

     

       5
       5
        
       

     

       6
       6
        
       export type ContextMenuProps = {

     

       7
       7
       -
         file: {

     

       8
       8
       -
           id: string;

     

       9
       9
       -
           name: string;

     

       10
       10
       -
           type: string;

     

       11
       11
       -
         };

     

       7
       7
       +
       	file: {

     

       8
       8
       +
       		id: string;

     

       9
       9
       +
       		name: string;

     

       10
       10
       +
       		type: string;

     

       11
       11
       +
       	};

     

       12
       12
        
       };

     

       13
       13
        
       

     

       14
       14
        
       function ContextMenu(props: ContextMenuProps) {

     

       15
       15
       -
         const { file } = props;

     

       16
       16
       -
         return (

     

       17
       17
       -
           <>

     

       18
       18
       -
             <StatefulPopover

     

       19
       19
       -
               autoFocus={false}

     

       20
       20
       -
               content={({ close }) => (

     

       21
       21
       -
                 <div className="border-[var(--color-border)] w-[240px] border-[1px] bg-[var(--color-background)] rounded-[6px]">

     

       22
       22
       -
                   <div

     

       23
       23
       -
                     className="h-[54px] flex flex-row items-center pl-[5px] pr-[5px]"

     

       24
       24
       -
                     style={{

     

       25
       25
       -
                       borderBottom: "1px solid var(--color-border)",

     

       26
       26
       -
                     }}

     

       27
       27
       -
                   >

     

       28
       28
       -
                     <div className="h-[43px] flex items-center justify-center ml-[10px] mr-[10px] text-[var(--color-text)]">

     

       29
       29
       -
                       {file.type == "folder" && (

     

       30
       30
       -
                         <div>

     

       31
       31
       -
                           <Folder2 size={20} />

     

       32
       32
       -
                         </div>

     

       33
       33
       -
                       )}

     

       34
       34
       -
                       {file.type !== "folder" && (

     

       35
       35
       -
                         <div>

     

       36
       36
       -
                           <MusicNoteBeamed size={20} />

     

       37
       37
       -
                         </div>

     

       38
       38
       -
                       )}

     

       39
       39
       -
                     </div>

     

       40
       40
       -
                     <div className="text-[var(--color-text)] whitespace-nowrap text-ellipsis overflow-hidden">

     

       41
       41
       -
                       {file.name}

     

       42
       42
       -
                     </div>

     

       43
       43
       -
                   </div>

     

       44
       44
       -
                   <NestedMenus>

     

       45
       45
       -
                     <StatefulMenu

     

       46
       46
       -
                       items={[

     

       47
       47
       -
                         {

     

       48
       48
       -
                           id: "0",

     

       49
       49
       -
                           label: "Play",

     

       50
       50
       -
                         },

     

       51
       51
       -
                         {

     

       52
       52
       -
                           id: "1",

     

       53
       53
       -
                           label: "Play Next",

     

       54
       54
       -
                         },

     

       55
       55
       -
                         {

     

       56
       56
       -
                           id: "2",

     

       57
       57
       -
                           label: "Add to Playlist",

     

       58
       58
       -
                         },

     

       59
       59
       -
                         {

     

       60
       60
       -
                           id: "3",

     

       61
       61
       -
                           label: "Play Last",

     

       62
       62
       -
                         },

     

       63
       63
       -
                         {

     

       64
       64
       -
                           id: "4",

     

       65
       65
       -
                           label: "Add Shuffled",

     

       66
       66
       -
                         },

     

       67
       67
       -
                       ]}

     

       68
       68
       -
                       onItemSelect={({ item }) => {

     

       69
       69
       -
                         console.log(`Selected item: ${item.label}`);

     

       70
       70
       -
                         close();

     

       71
       71
       -
                       }}

     

       72
       72
       -
                       overrides={{

     

       73
       73
       -
                         List: {

     

       74
       74
       -
                           style: {

     

       75
       75
       -
                             boxShadow: "none",

     

       76
       76
       -
                             outline: "none !important",

     

       77
       77
       -
                             backgroundColor: "var(--color-background)",

     

       78
       78
       -
                           },

     

       79
       79
       -
                         },

     

       80
       80
       -
                         ListItem: {

     

       81
       81
       -
                           style: {

     

       82
       82
       -
                             backgroundColor: "var(--color-background)",

     

       83
       83
       -
                             color: "var(--color-text)",

     

       84
       84
       -
                             ":hover": {

     

       85
       85
       -
                               backgroundColor: "var(--color-menu-hover)",

     

       86
       86
       -
                             },

     

       87
       87
       -
                           },

     

       88
       88
       -
                         },

     

       89
       89
       -
                         Option: {

     

       90
       90
       -
                           props: {

     

       91
       91
       -
                             getChildMenu: (item: { label: string }) => {

     

       92
       92
       -
                               if (item.label === "Add to Playlist") {

     

       93
       93
       -
                                 return (

     

       94
       94
       -
                                   <div className="border-[var(--color-border)] w-[205px] border-[1px] bg-[var(--color-background)] rounded-[6px]">

     

       95
       95
       -
                                     <StatefulMenu

     

       96
       96
       -
                                       items={{

     

       97
       97
       -
                                         __ungrouped: [

     

       98
       98
       -
                                           {

     

       99
       99
       -
                                             label: "Create new playlist",

     

       100
       100
       -
                                           },

     

       101
       101
       -
                                         ],

     

       102
       102
       -
                                       }}

     

       103
       103
       -
                                       overrides={{

     

       104
       104
       -
                                         List: {

     

       105
       105
       -
                                           style: {

     

       106
       106
       -
                                             boxShadow: "none",

     

       107
       107
       -
                                             outline: "none !important",

     

       108
       108
       -
                                             backgroundColor:

     

       109
       109
       -
                                               "var(--color-background)",

     

       110
       110
       -
                                           },

     

       111
       111
       -
                                         },

     

       112
       112
       -
                                         ListItem: {

     

       113
       113
       -
                                           style: {

     

       114
       114
       -
                                             backgroundColor:

     

       115
       115
       -
                                               "var(--color-background)",

     

       116
       116
       -
                                             color: "var(--color-text)",

     

       117
       117
       -
                                             ":hover": {

     

       118
       118
       -
                                               backgroundColor:

     

       119
       119
       -
                                                 "var(--color-menu-hover)",

     

       120
       120
       -
                                             },

     

       121
       121
       -
                                           },

     

       122
       122
       -
                                         },

     

       123
       123
       -
                                       }}

     

       124
       124
       -
                                     />

     

       125
       125
       -
                                   </div>

     

       126
       126
       -
                                 );

     

       127
       127
       -
                               }

     

       128
       128
       -
                               return null;

     

       129
       129
       -
                             },

     

       130
       130
       -
                           },

     

       131
       131
       -
                         },

     

       132
       132
       -
                       }}

     

       133
       133
       -
                     />

     

       134
       134
       -
                   </NestedMenus>

     

       135
       135
       -
                 </div>

     

       136
       136
       -
               )}

     

       137
       137
       -
               overrides={{

     

       138
       138
       -
                 Inner: {

     

       139
       139
       -
                   style: {

     

       140
       140
       -
                     backgroundColor: "var(--color-background)",

     

       141
       141
       -
                   },

     

       142
       142
       -
                 },

     

       143
       143
       -
               }}

     

       144
       144
       -
             >

     

       145
       145
       -
               <button className="text-[var(--color-text-muted)] cursor-pointer bg-transparent border-none hover:bg-transparent">

     

       146
       146
       -
                 <EllipsisHorizontal size={24} />

     

       147
       147
       -
               </button>

     

       148
       148
       -
             </StatefulPopover>

     

       149
       149
       -
           </>

     

       150
       150
       -
         );

     

       15
       15
       +
       	const { file } = props;

     

       16
       16
       +
       	return (

     

       17
       17
       +
       		<StatefulPopover

     

       18
       18
       +
       			autoFocus={false}

     

       19
       19
       +
       			content={({ close }) => (

     

       20
       20
       +
       				<div className="border-[var(--color-border)] w-[240px] border-[1px] bg-[var(--color-background)] rounded-[6px]">

     

       21
       21
       +
       					<div

     

       22
       22
       +
       						className="h-[54px] flex flex-row items-center pl-[5px] pr-[5px]"

     

       23
       23
       +
       						style={{

     

       24
       24
       +
       							borderBottom: "1px solid var(--color-border)",

     

       25
       25
       +
       						}}

     

       26
       26
       +
       					>

     

       27
       27
       +
       						<div className="h-[43px] flex items-center justify-center ml-[10px] mr-[10px] text-[var(--color-text)]">

     

       28
       28
       +
       							{file.type == "folder" && (

     

       29
       29
       +
       								<div>

     

       30
       30
       +
       									<Folder2 size={20} />

     

       31
       31
       +
       								</div>

     

       32
       32
       +
       							)}

     

       33
       33
       +
       							{file.type !== "folder" && (

     

       34
       34
       +
       								<div>

     

       35
       35
       +
       									<MusicNoteBeamed size={20} />

     

       36
       36
       +
       								</div>

     

       37
       37
       +
       							)}

     

       38
       38
       +
       						</div>

     

       39
       39
       +
       						<div className="text-[var(--color-text)] whitespace-nowrap text-ellipsis overflow-hidden">

     

       40
       40
       +
       							{file.name}

     

       41
       41
       +
       						</div>

     

       42
       42
       +
       					</div>

     

       43
       43
       +
       					<NestedMenus>

     

       44
       44
       +
       						<StatefulMenu

     

       45
       45
       +
       							items={[

     

       46
       46
       +
       								{

     

       47
       47
       +
       									id: "0",

     

       48
       48
       +
       									label: "Play",

     

       49
       49
       +
       								},

     

       50
       50
       +
       								{

     

       51
       51
       +
       									id: "1",

     

       52
       52
       +
       									label: "Play Next",

     

       53
       53
       +
       								},

     

       54
       54
       +
       								{

     

       55
       55
       +
       									id: "2",

     

       56
       56
       +
       									label: "Add to Playlist",

     

       57
       57
       +
       								},

     

       58
       58
       +
       								{

     

       59
       59
       +
       									id: "3",

     

       60
       60
       +
       									label: "Play Last",

     

       61
       61
       +
       								},

     

       62
       62
       +
       								{

     

       63
       63
       +
       									id: "4",

     

       64
       64
       +
       									label: "Add Shuffled",

     

       65
       65
       +
       								},

     

       66
       66
       +
       							]}

     

       67
       67
       +
       							onItemSelect={({ item }) => {

     

       68
       68
       +
       								console.log(`Selected item: ${item.label}`);

     

       69
       69
       +
       								close();

     

       70
       70
       +
       							}}

     

       71
       71
       +
       							overrides={{

     

       72
       72
       +
       								List: {

     

       73
       73
       +
       									style: {

     

       74
       74
       +
       										boxShadow: "none",

     

       75
       75
       +
       										outline: "none !important",

     

       76
       76
       +
       										backgroundColor: "var(--color-background)",

     

       77
       77
       +
       									},

     

       78
       78
       +
       								},

     

       79
       79
       +
       								ListItem: {

     

       80
       80
       +
       									style: {

     

       81
       81
       +
       										backgroundColor: "var(--color-background)",

     

       82
       82
       +
       										color: "var(--color-text)",

     

       83
       83
       +
       										":hover": {

     

       84
       84
       +
       											backgroundColor: "var(--color-menu-hover)",

     

       85
       85
       +
       										},

     

       86
       86
       +
       									},

     

       87
       87
       +
       								},

     

       88
       88
       +
       								Option: {

     

       89
       89
       +
       									props: {

     

       90
       90
       +
       										getChildMenu: (item: { label: string }) => {

     

       91
       91
       +
       											if (item.label === "Add to Playlist") {

     

       92
       92
       +
       												return (

     

       93
       93
       +
       													<div className="border-[var(--color-border)] w-[205px] border-[1px] bg-[var(--color-background)] rounded-[6px]">

     

       94
       94
       +
       														<StatefulMenu

     

       95
       95
       +
       															items={{

     

       96
       96
       +
       																__ungrouped: [

     

       97
       97
       +
       																	{

     

       98
       98
       +
       																		label: "Create new playlist",

     

       99
       99
       +
       																	},

     

       100
       100
       +
       																],

     

       101
       101
       +
       															}}

     

       102
       102
       +
       															overrides={{

     

       103
       103
       +
       																List: {

     

       104
       104
       +
       																	style: {

     

       105
       105
       +
       																		boxShadow: "none",

     

       106
       106
       +
       																		outline: "none !important",

     

       107
       107
       +
       																		backgroundColor: "var(--color-background)",

     

       108
       108
       +
       																	},

     

       109
       109
       +
       																},

     

       110
       110
       +
       																ListItem: {

     

       111
       111
       +
       																	style: {

     

       112
       112
       +
       																		backgroundColor: "var(--color-background)",

     

       113
       113
       +
       																		color: "var(--color-text)",

     

       114
       114
       +
       																		":hover": {

     

       115
       115
       +
       																			backgroundColor:

     

       116
       116
       +
       																				"var(--color-menu-hover)",

     

       117
       117
       +
       																		},

     

       118
       118
       +
       																	},

     

       119
       119
       +
       																},

     

       120
       120
       +
       															}}

     

       121
       121
       +
       														/>

     

       122
       122
       +
       													</div>

     

       123
       123
       +
       												);

     

       124
       124
       +
       											}

     

       125
       125
       +
       											return null;

     

       126
       126
       +
       										},

     

       127
       127
       +
       									},

     

       128
       128
       +
       								},

     

       129
       129
       +
       							}}

     

       130
       130
       +
       						/>

     

       131
       131
       +
       					</NestedMenus>

     

       132
       132
       +
       				</div>

     

       133
       133
       +
       			)}

     

       134
       134
       +
       			overrides={{

     

       135
       135
       +
       				Inner: {

     

       136
       136
       +
       					style: {

     

       137
       137
       +
       						backgroundColor: "var(--color-background)",

     

       138
       138
       +
       					},

     

       139
       139
       +
       				},

     

       140
       140
       +
       			}}

     

       141
       141
       +
       		>

     

       142
       142
       +
       			<button className="text-[var(--color-text-muted)] cursor-pointer bg-transparent border-none hover:bg-transparent">

     

       143
       143
       +
       				<EllipsisHorizontal size={24} />

     

       144
       144
       +
       			</button>

     

       145
       145
       +
       		</StatefulPopover>

     

       146
       146
       +
       	);

     

       151
       147
        
       }

     

       152
       148
        
       

     

       153
       149
        
       export default ContextMenu;

+94 -96

apps/web/src/components/Handle/Handle.tsx

···

       8
       8
        
       import { profilesAtom } from "../../atoms/profiles";

     

       9
       9
        
       import { statsAtom } from "../../atoms/stats";

     

       10
       10
        
       import {

     

       11
       11
       -
         useProfileByDidQuery,

     

       12
       12
       -
         useProfileStatsByDidQuery,

     

       11
       11
       +
       	useProfileByDidQuery,

     

       12
       12
       +
       	useProfileStatsByDidQuery,

     

       13
       13
        
       } from "../../hooks/useProfile";

     

       14
       14
        
       import Stats from "../Stats";

     

       15
       15
        
       import NowPlaying from "./NowPlaying";

     

       16
       16
        
       

     

       17
       17
        
       export type HandleProps = {

     

       18
       18
       -
         link: string;

     

       19
       19
       -
         did: string;

     

       18
       18
       +
       	link: string;

     

       19
       19
       +
       	did: string;

     

       20
       20
        
       };

     

       21
       21
        
       

     

       22
       22
        
       function Handle(props: HandleProps) {

     

       23
       23
       -
         const { link, did } = props;

     

       24
       24
       -
         const [profiles, setProfiles] = useAtom(profilesAtom);

     

       25
       25
       -
         const profile = useProfileByDidQuery(did);

     

       26
       26
       -
         const profileStats = useProfileStatsByDidQuery(did);

     

       27
       27
       -
         const [stats, setStats] = useAtom(statsAtom);

     

       23
       23
       +
       	const { link, did } = props;

     

       24
       24
       +
       	const [profiles, setProfiles] = useAtom(profilesAtom);

     

       25
       25
       +
       	const profile = useProfileByDidQuery(did);

     

       26
       26
       +
       	const profileStats = useProfileStatsByDidQuery(did);

     

       27
       27
       +
       	const [stats, setStats] = useAtom(statsAtom);

     

       28
       28
        
       

     

       29
       29
       -
         useEffect(() => {

     

       30
       30
       -
           if (profile.isLoading || profile.isError) {

     

       31
       31
       -
             return;

     

       32
       32
       -
           }

     

       29
       29
       +
       	useEffect(() => {

     

       30
       30
       +
       		if (profile.isLoading || profile.isError) {

     

       31
       31
       +
       			return;

     

       32
       32
       +
       		}

     

       33
       33
        
       

     

       34
       34
       -
           if (!profile.data || !did) {

     

       35
       35
       -
             return;

     

       36
       36
       -
           }

     

       34
       34
       +
       		if (!profile.data || !did) {

     

       35
       35
       +
       			return;

     

       36
       36
       +
       		}

     

       37
       37
        
       

     

       38
       38
       -
           setProfiles((profiles) => ({

     

       39
       39
       -
             ...profiles,

     

       40
       40
       -
             [did]: {

     

       41
       41
       -
               avatar: profile.data.avatar,

     

       42
       42
       -
               displayName: profile.data.displayName,

     

       43
       43
       -
               handle: profile.data.handle,

     

       44
       44
       -
               spotifyConnected: profile.data.spotifyConnected,

     

       45
       45
       -
               createdAt: profile.data.createdAt,

     

       46
       46
       -
               did,

     

       47
       47
       -
             },

     

       48
       48
       -
           }));

     

       38
       38
       +
       		setProfiles((profiles) => ({

     

       39
       39
       +
       			...profiles,

     

       40
       40
       +
       			[did]: {

     

       41
       41
       +
       				avatar: profile.data.avatar,

     

       42
       42
       +
       				displayName: profile.data.displayName,

     

       43
       43
       +
       				handle: profile.data.handle,

     

       44
       44
       +
       				spotifyConnected: profile.data.spotifyConnected,

     

       45
       45
       +
       				createdAt: profile.data.createdAt,

     

       46
       46
       +
       				did,

     

       47
       47
       +
       			},

     

       48
       48
       +
       		}));

     

       49
       49
        
       

     

       50
       50
       -
           // eslint-disable-next-line react-hooks/exhaustive-deps

     

       51
       51
       -
         }, [profile.data, profile.isLoading, profile.isError, did]);

     

       50
       50
       +
       		// eslint-disable-next-line react-hooks/exhaustive-deps

     

       51
       51
       +
       	}, [profile.data, profile.isLoading, profile.isError, did]);

     

       52
       52
        
       

     

       53
       53
       -
         useEffect(() => {

     

       54
       54
       -
           if (profileStats.isLoading || profileStats.isError) {

     

       55
       55
       -
             return;

     

       56
       56
       -
           }

     

       53
       53
       +
       	useEffect(() => {

     

       54
       54
       +
       		if (profileStats.isLoading || profileStats.isError) {

     

       55
       55
       +
       			return;

     

       56
       56
       +
       		}

     

       57
       57
        
       

     

       58
       58
       -
           if (!profileStats.data || !did) {

     

       59
       59
       -
             return;

     

       60
       60
       -
           }

     

       58
       58
       +
       		if (!profileStats.data || !did) {

     

       59
       59
       +
       			return;

     

       60
       60
       +
       		}

     

       61
       61
        
       

     

       62
       62
       -
           setStats((prev) => ({

     

       63
       63
       -
             ...prev,

     

       64
       64
       -
             [did]: {

     

       65
       65
       -
               scrobbles: profileStats.data.scrobbles,

     

       66
       66
       -
               artists: profileStats.data.artists,

     

       67
       67
       -
               lovedTracks: profileStats.data.lovedTracks,

     

       68
       68
       -
               albums: profileStats.data.albums,

     

       69
       69
       -
               tracks: profileStats.data.tracks,

     

       70
       70
       -
             },

     

       71
       71
       -
           }));

     

       72
       72
       -
           // eslint-disable-next-line react-hooks/exhaustive-deps

     

       73
       73
       -
         }, [profileStats.data, profileStats.isLoading, profileStats.isError, did]);

     

       62
       62
       +
       		setStats((prev) => ({

     

       63
       63
       +
       			...prev,

     

       64
       64
       +
       			[did]: {

     

       65
       65
       +
       				scrobbles: profileStats.data.scrobbles,

     

       66
       66
       +
       				artists: profileStats.data.artists,

     

       67
       67
       +
       				lovedTracks: profileStats.data.lovedTracks,

     

       68
       68
       +
       				albums: profileStats.data.albums,

     

       69
       69
       +
       				tracks: profileStats.data.tracks,

     

       70
       70
       +
       			},

     

       71
       71
       +
       		}));

     

       72
       72
       +
       		// eslint-disable-next-line react-hooks/exhaustive-deps

     

       73
       73
       +
       	}, [profileStats.data, profileStats.isLoading, profileStats.isError, did]);

     

       74
       74
        
       

     

       75
       75
       -
         return (

     

       76
       76
       -
           <>

     

       77
       77
       -
             <StatefulPopover

     

       78
       78
       -
               content={() => (

     

       79
       79
       -
                 <Block className="!bg-[var(--color-background)] !text-[var(--color-text)] p-[15px] w-[380px] rounded-[6px] border-[1px] border-[var(--color-border)]">

     

       80
       80
       -
                   <div className="flex flex-row items-center">

     

       81
       81
       -
                     <Link to={link} className="no-underline">

     

       82
       82
       -
                       <Avatar

     

       83
       83
       -
                         src={profiles[did]?.avatar}

     

       84
       84
       -
                         name={profiles[did]?.displayName}

     

       85
       85
       -
                         size={"60px"}

     

       86
       86
       -
                       />

     

       87
       87
       -
                     </Link>

     

       88
       88
       -
                     <div className="ml-[16px]">

     

       89
       89
       -
                       <Link to={link} className="no-underline">

     

       90
       90
       -
                         <LabelMedium

     

       91
       91
       -
                           marginTop={"10px"}

     

       92
       92
       -
                           className="!text-[var(--color-text)]"

     

       93
       93
       -
                         >

     

       94
       94
       -
                           {profiles[did]?.displayName}

     

       95
       95
       -
                         </LabelMedium>

     

       96
       96
       -
                       </Link>

     

       97
       97
       -
                       <a

     

       98
       98
       -
                         href={`https://bsky.app/profile/${profiles[did]?.handle}`}

     

       99
       99
       -
                         className="no-underline text-[var(--color-primary)]"

     

       100
       100
       -
                       >

     

       101
       101
       -
                         <LabelSmall className="!text-[var(--color-primary)] mt-[3px] mb-[25px]">

     

       102
       102
       -
                           @{did}

     

       103
       103
       -
                         </LabelSmall>

     

       104
       104
       -
                       </a>

     

       105
       105
       -
                     </div>

     

       106
       106
       -
                   </div>

     

       75
       75
       +
       	return (

     

       76
       76
       +
       		<StatefulPopover

     

       77
       77
       +
       			content={() => (

     

       78
       78
       +
       				<Block className="!bg-[var(--color-background)] !text-[var(--color-text)] p-[15px] w-[380px] rounded-[6px] border-[1px] border-[var(--color-border)]">

     

       79
       79
       +
       					<div className="flex flex-row items-center">

     

       80
       80
       +
       						<Link to={link} className="no-underline">

     

       81
       81
       +
       							<Avatar

     

       82
       82
       +
       								src={profiles[did]?.avatar}

     

       83
       83
       +
       								name={profiles[did]?.displayName}

     

       84
       84
       +
       								size={"60px"}

     

       85
       85
       +
       							/>

     

       86
       86
       +
       						</Link>

     

       87
       87
       +
       						<div className="ml-[16px]">

     

       88
       88
       +
       							<Link to={link} className="no-underline">

     

       89
       89
       +
       								<LabelMedium

     

       90
       90
       +
       									marginTop={"10px"}

     

       91
       91
       +
       									className="!text-[var(--color-text)]"

     

       92
       92
       +
       								>

     

       93
       93
       +
       									{profiles[did]?.displayName}

     

       94
       94
       +
       								</LabelMedium>

     

       95
       95
       +
       							</Link>

     

       96
       96
       +
       							<a

     

       97
       97
       +
       								href={`https://bsky.app/profile/${profiles[did]?.handle}`}

     

       98
       98
       +
       								className="no-underline text-[var(--color-primary)]"

     

       99
       99
       +
       							>

     

       100
       100
       +
       								<LabelSmall className="!text-[var(--color-primary)] mt-[3px] mb-[25px]">

     

       101
       101
       +
       									@{did}

     

       102
       102
       +
       								</LabelSmall>

     

       103
       103
       +
       							</a>

     

       104
       104
       +
       						</div>

     

       105
       105
       +
       					</div>

     

       107
       106
        
       

     

       108
       108
       -
                   {stats[did] && <Stats stats={stats[did]} mb={1} />}

     

       107
       107
       +
       					{stats[did] && <Stats stats={stats[did]} mb={1} />}

     

       109
       108
        
       

     

       110
       110
       -
                   <NowPlaying did={did} />

     

       111
       111
       -
                 </Block>

     

       112
       112
       -
               )}

     

       113
       113
       -
               triggerType={TRIGGER_TYPE.hover}

     

       114
       114
       -
               autoFocus={false}

     

       115
       115
       -
               focusLock={false}

     

       116
       116
       -
             >

     

       117
       117
       -
               <Link to={link} className="no-underline">

     

       118
       118
       -
                 <LabelMedium className="!text-[var(--color-primary)] !overflow-hidden !text-ellipsis !max-w-[250px]">

     

       119
       119
       -
                   @{did}

     

       120
       120
       -
                 </LabelMedium>

     

       121
       121
       -
               </Link>

     

       122
       122
       -
             </StatefulPopover>

     

       123
       123
       -
           </>

     

       124
       124
       -
         );

     

       109
       109
       +
       					<NowPlaying did={did} />

     

       110
       110
       +
       				</Block>

     

       111
       111
       +
       			)}

     

       112
       112
       +
       			triggerType={TRIGGER_TYPE.hover}

     

       113
       113
       +
       			autoFocus={false}

     

       114
       114
       +
       			focusLock={false}

     

       115
       115
       +
       		>

     

       116
       116
       +
       			<Link to={link} className="no-underline">

     

       117
       117
       +
       				<LabelMedium className="!text-[var(--color-primary)] !overflow-hidden !text-ellipsis !max-w-[220px] !text-[14px]">

     

       118
       118
       +
       					@{did}

     

       119
       119
       +
       				</LabelMedium>

     

       120
       120
       +
       			</Link>

     

       121
       121
       +
       		</StatefulPopover>

     

       122
       122
       +
       	);

     

       125
       123
        
       }

     

       126
       124
        
       

     

       127
       125
        
       export default Handle;

+100 -86

apps/web/src/pages/home/feed/Feed.tsx

···

       1
       1
        
       import styled from "@emotion/styled";

     

       2
       2
        
       import { Link } from "@tanstack/react-router";

     

       3
       3
       +
       import { Avatar } from "baseui/avatar";

     

       3
       4
        
       import type { BlockProps } from "baseui/block";

     

       4
       5
        
       import { FlexGrid, FlexGridItem } from "baseui/flex-grid";

     

       5
       6
        
       import { StatefulTooltip } from "baseui/tooltip";

     

       6
       6
       -
       import { HeadingMedium, LabelMedium } from "baseui/typography";

     

       7
       7
       +
       import { HeadingMedium, LabelSmall } from "baseui/typography";

     

       7
       8
        
       import dayjs from "dayjs";

     

       8
       9
        
       import relativeTime from "dayjs/plugin/relativeTime";

     

       9
       10
        
       import ContentLoader from "react-content-loader";

     
···

       14
       15
        
       dayjs.extend(relativeTime);

     

       15
       16
        
       

     

       16
       17
        
       const itemProps: BlockProps = {

     

       17
       17
       -
         display: "flex",

     

       18
       18
       -
         alignItems: "flex-start",

     

       19
       19
       -
         flexDirection: "column",

     

       18
       18
       +
       	display: "flex",

     

       19
       19
       +
       	alignItems: "flex-start",

     

       20
       20
       +
       	flexDirection: "column",

     

       20
       21
        
       };

     

       21
       22
        
       

     

       22
       23
        
       const Container = styled.div`

     
···

       27
       28
        
       `;

     

       28
       29
        
       

     

       29
       30
        
       function Feed() {

     

       30
       30
       -
         const { data, isLoading } = useFeedQuery();

     

       31
       31
       -
         return (

     

       32
       32
       -
           <Container>

     

       33
       33
       -
             <HeadingMedium

     

       34
       34
       -
               marginTop={"0px"}

     

       35
       35
       -
               marginBottom={"20px"}

     

       36
       36
       -
               className="!text-[var(--color-text)]"

     

       37
       37
       -
             >

     

       38
       38
       -
               Recently played

     

       39
       39
       -
             </HeadingMedium>

     

       31
       31
       +
       	const { data, isLoading } = useFeedQuery();

     

       32
       32
       +
       	console.log(data);

     

       33
       33
       +
       	return (

     

       34
       34
       +
       		<Container>

     

       35
       35
       +
       			<HeadingMedium

     

       36
       36
       +
       				marginTop={"0px"}

     

       37
       37
       +
       				marginBottom={"25px"}

     

       38
       38
       +
       				className="!text-[var(--color-text)]"

     

       39
       39
       +
       			>

     

       40
       40
       +
       				Recently played

     

       41
       41
       +
       			</HeadingMedium>

     

       40
       42
        
       

     

       41
       41
       -
             {isLoading && (

     

       42
       42
       -
               <ContentLoader

     

       43
       43
       -
                 width={800}

     

       44
       44
       -
                 height={575}

     

       45
       45
       -
                 viewBox="0 0 800 575"

     

       46
       46
       -
                 backgroundColor="var(--color-skeleton-background)"

     

       47
       47
       -
                 foregroundColor="var(--color-skeleton-foreground)"

     

       48
       48
       -
               >

     

       49
       49
       -
                 <rect x="12" y="9" rx="2" ry="2" width="140" height="10" />

     

       50
       50
       -
                 <rect x="14" y="30" rx="2" ry="2" width="667" height="11" />

     

       51
       51
       -
                 <rect x="12" y="58" rx="2" ry="2" width="211" height="211" />

     

       52
       52
       -
                 <rect x="240" y="57" rx="2" ry="2" width="211" height="211" />

     

       53
       53
       -
                 <rect x="467" y="56" rx="2" ry="2" width="211" height="211" />

     

       54
       54
       -
                 <rect x="12" y="283" rx="2" ry="2" width="211" height="211" />

     

       55
       55
       -
                 <rect x="240" y="281" rx="2" ry="2" width="211" height="211" />

     

       56
       56
       -
                 <rect x="468" y="279" rx="2" ry="2" width="211" height="211" />

     

       57
       57
       -
                 <circle cx="286" cy="536" r="12" />

     

       58
       58
       -
                 <circle cx="319" cy="535" r="12" />

     

       59
       59
       -
                 <circle cx="353" cy="535" r="12" />

     

       60
       60
       -
                 <rect x="378" y="524" rx="0" ry="0" width="52" height="24" />

     

       61
       61
       -
                 <rect x="210" y="523" rx="0" ry="0" width="52" height="24" />

     

       62
       62
       -
                 <circle cx="210" cy="535" r="12" />

     

       63
       63
       -
                 <circle cx="428" cy="536" r="12" />

     

       64
       64
       -
               </ContentLoader>

     

       65
       65
       -
             )}

     

       43
       43
       +
       			{isLoading && (

     

       44
       44
       +
       				<ContentLoader

     

       45
       45
       +
       					width={800}

     

       46
       46
       +
       					height={575}

     

       47
       47
       +
       					viewBox="0 0 800 575"

     

       48
       48
       +
       					backgroundColor="var(--color-skeleton-background)"

     

       49
       49
       +
       					foregroundColor="var(--color-skeleton-foreground)"

     

       50
       50
       +
       				>

     

       51
       51
       +
       					<rect x="12" y="9" rx="2" ry="2" width="140" height="10" />

     

       52
       52
       +
       					<rect x="14" y="30" rx="2" ry="2" width="667" height="11" />

     

       53
       53
       +
       					<rect x="12" y="58" rx="2" ry="2" width="211" height="211" />

     

       54
       54
       +
       					<rect x="240" y="57" rx="2" ry="2" width="211" height="211" />

     

       55
       55
       +
       					<rect x="467" y="56" rx="2" ry="2" width="211" height="211" />

     

       56
       56
       +
       					<rect x="12" y="283" rx="2" ry="2" width="211" height="211" />

     

       57
       57
       +
       					<rect x="240" y="281" rx="2" ry="2" width="211" height="211" />

     

       58
       58
       +
       					<rect x="468" y="279" rx="2" ry="2" width="211" height="211" />

     

       59
       59
       +
       					<circle cx="286" cy="536" r="12" />

     

       60
       60
       +
       					<circle cx="319" cy="535" r="12" />

     

       61
       61
       +
       					<circle cx="353" cy="535" r="12" />

     

       62
       62
       +
       					<rect x="378" y="524" rx="0" ry="0" width="52" height="24" />

     

       63
       63
       +
       					<rect x="210" y="523" rx="0" ry="0" width="52" height="24" />

     

       64
       64
       +
       					<circle cx="210" cy="535" r="12" />

     

       65
       65
       +
       					<circle cx="428" cy="536" r="12" />

     

       66
       66
       +
       				</ContentLoader>

     

       67
       67
       +
       			)}

     

       66
       68
        
       

     

       67
       67
       -
             {!isLoading && (

     

       68
       68
       -
               <div className="pb-[100px]">

     

       69
       69
       -
                 <FlexGrid

     

       70
       70
       -
                   flexGridColumnCount={[1, 2, 3]}

     

       71
       71
       -
                   flexGridColumnGap="scale800"

     

       72
       72
       -
                   flexGridRowGap="scale800"

     

       73
       73
       -
                 >

     

       74
       74
       -
                   {

     

       75
       75
       -
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any

     

       76
       76
       -
                     data.map((song: any) => (

     

       77
       77
       -
                       <FlexGridItem {...itemProps} key={song.id}>

     

       78
       78
       -
                         <Link

     

       79
       79
       -
                           to="/$did/scrobble/$rkey"

     

       80
       80
       -
                           params={{

     

       81
       81
       -
                             did: song.uri?.split("at://")[1]?.split("/")[0] || "",

     

       82
       82
       -
                             rkey: song.uri?.split("/").pop() || "",

     

       83
       83
       -
                           }}

     

       84
       84
       -
                         >

     

       85
       85
       -
                           <SongCover

     

       86
       86
       -
                             cover={song.cover}

     

       87
       87
       -
                             artist={song.artist}

     

       88
       88
       -
                             title={song.title}

     

       89
       89
       -
                           />

     

       90
       90
       -
                         </Link>

     

       91
       91
       -
                         <Handle link={`/profile/${song.user}`} did={song.user} />{" "}

     

       92
       92
       -
                         <LabelMedium className="!text-[var(--color-text-primary)]">

     

       93
       93
       -
                           recently played this song

     

       94
       94
       -
                         </LabelMedium>

     

       95
       95
       -
                         <StatefulTooltip

     

       96
       96
       -
                           content={dayjs(song.date).format(

     

       97
       97
       -
                             "MMMM D, YYYY [at] HH:mm A",

     

       98
       98
       -
                           )}

     

       99
       99
       -
                           returnFocus

     

       100
       100
       -
                           autoFocus

     

       101
       101
       -
                         >

     

       102
       102
       -
                           <LabelMedium className="!text-[var(--color-text-muted)]">

     

       103
       103
       -
                             {dayjs(song.date).fromNow()}

     

       104
       104
       -
                           </LabelMedium>

     

       105
       105
       -
                         </StatefulTooltip>

     

       106
       106
       -
                       </FlexGridItem>

     

       107
       107
       -
                     ))

     

       108
       108
       -
                   }

     

       109
       109
       -
                 </FlexGrid>

     

       110
       110
       -
               </div>

     

       111
       111
       -
             )}

     

       112
       112
       -
           </Container>

     

       113
       113
       -
         );

     

       69
       69
       +
       			{!isLoading && (

     

       70
       70
       +
       				<div className="pb-[100px]">

     

       71
       71
       +
       					<FlexGrid

     

       72
       72
       +
       						flexGridColumnCount={[1, 2, 3]}

     

       73
       73
       +
       						flexGridColumnGap="scale800"

     

       74
       74
       +
       						flexGridRowGap="scale1000"

     

       75
       75
       +
       					>

     

       76
       76
       +
       						{

     

       77
       77
       +
       							// eslint-disable-next-line @typescript-eslint/no-explicit-any

     

       78
       78
       +
       							data.map((song: any) => (

     

       79
       79
       +
       								<FlexGridItem {...itemProps} key={song.id}>

     

       80
       80
       +
       									<Link

     

       81
       81
       +
       										to="/$did/scrobble/$rkey"

     

       82
       82
       +
       										params={{

     

       83
       83
       +
       											did: song.uri?.split("at://")[1]?.split("/")[0] || "",

     

       84
       84
       +
       											rkey: song.uri?.split("/").pop() || "",

     

       85
       85
       +
       										}}

     

       86
       86
       +
       									>

     

       87
       87
       +
       										<SongCover

     

       88
       88
       +
       											cover={song.cover}

     

       89
       89
       +
       											artist={song.artist}

     

       90
       90
       +
       											title={song.title}

     

       91
       91
       +
       										/>

     

       92
       92
       +
       									</Link>

     

       93
       93
       +
       									<div className="flex">

     

       94
       94
       +
       										<div className="mr-[8px]">

     

       95
       95
       +
       											<Avatar

     

       96
       96
       +
       												src={song.userAvatar}

     

       97
       97
       +
       												name={song.userDisplayName}

     

       98
       98
       +
       												size={"20px"}

     

       99
       99
       +
       											/>

     

       100
       100
       +
       										</div>

     

       101
       101
       +
       										<Handle

     

       102
       102
       +
       											link={`/profile/${song.user}`}

     

       103
       103
       +
       											did={song.user}

     

       104
       104
       +
       										/>{" "}

     

       105
       105
       +
       									</div>

     

       106
       106
       +
       									<LabelSmall className="!text-[var(--color-text-primary)]">

     

       107
       107
       +
       										recently played this song

     

       108
       108
       +
       									</LabelSmall>

     

       109
       109
       +
       									<StatefulTooltip

     

       110
       110
       +
       										content={dayjs(song.date).format(

     

       111
       111
       +
       											"MMMM D, YYYY [at] HH:mm A",

     

       112
       112
       +
       										)}

     

       113
       113
       +
       										returnFocus

     

       114
       114
       +
       										autoFocus

     

       115
       115
       +
       									>

     

       116
       116
       +
       										<LabelSmall className="!text-[var(--color-text-muted)]">

     

       117
       117
       +
       											{dayjs(song.date).fromNow()}

     

       118
       118
       +
       										</LabelSmall>

     

       119
       119
       +
       									</StatefulTooltip>

     

       120
       120
       +
       								</FlexGridItem>

     

       121
       121
       +
       							))

     

       122
       122
       +
       						}

     

       123
       123
       +
       					</FlexGrid>

     

       124
       124
       +
       				</div>

     

       125
       125
       +
       			)}

     

       126
       126
       +
       		</Container>

     

       127
       127
       +
       	);

     

       114
       128
        
       }

     

       115
       129
        
       

     

       116
       130
        
       export default Feed;