Ignore:
Timestamp:
02/07/26 21:16:37 (5 months ago)
Author:
Filip Gavrilovski <filipgavrilovski28@…>
Branches:
main
Children:
799f27d
Parents:
8675f75
Message:

clickable items now take the user to the respective pages; added artist username and album id to dto-s

Location:
frontend/src/components
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/components/Sidebar.tsx

    r8675f75 r8ccb07e  
    9797                                                        <div
    9898                                                                key={song.id}
    99                                                                 onClick={() => navigate(`/songs/${song.id}`)}
    10099                                                                className="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group relative"
    101100                                                        >
    … …  
    109108                                                                />
    110109                                                                <div className="flex-1 min-w-0">
    111                                                                         <p className="text-sm font-medium text-white truncate">
     110                                                                        <p
     111                                                                                onClick={() => navigate(`/songs/${song.id}`)}
     112                                                                                className="text-sm font-medium text-white truncate hover:underline cursor-pointer"
     113                                                                        >
    112114                                                                                {song.title}
    113115                                                                        </p>
    114                                                                         <p className="text-xs text-gray-400 truncate">
    115                                                                                 {song.artist}
    116                                                                         </p>
     116                                                                        <div className="flex items-center gap-1 text-xs text-gray-400">
     117                                                                                <span
     118                                                                                        onClick={(e) => {
     119                                                                                                e.stopPropagation();
     120                                                                                                if (song.artistUsername) {
     121                                                                                                        navigate(`/users/${song.artistUsername}`);
     122                                                                                                }
     123                                                                                        }}
     124                                                                                        className={`truncate ${
     125                                                                                                song.artistUsername
     126                                                                                                        ? "hover:underline cursor-pointer hover:text-white"
     127                                                                                                        : ""
     128                                                                                        }`}
     129                                                                                >
     130                                                                                        {song.artist}
     131                                                                                </span>
     132                                                                                {song.album && (
     133                                                                                        <>
     134                                                                                                <span>•</span>
     135                                                                                                <span
     136                                                                                                        onClick={(e) => {
     137                                                                                                                e.stopPropagation();
     138                                                                                                                if (song.albumId) {
     139                                                                                                                        navigate(`/collection/album/${song.albumId}`);
     140                                                                                                                }
     141                                                                                                        }}
     142                                                                                                        className={`truncate ${
     143                                                                                                                song.albumId
     144                                                                                                                        ? "hover:underline cursor-pointer hover:text-white"
     145                                                                                                                        : ""
     146                                                                                                        }`}
     147                                                                                                >
     148                                                                                                        {song.album}
     149                                                                                                </span>
     150                                                                                        </>
     151                                                                                )}
     152                                                                        </div>
    117153                                                                </div>
    118154                                                                {song.link && (

  • frontend/src/components/search/AlbumResult.tsx

    r8675f75 r8ccb07e  
     1import { useNavigate } from "react-router-dom";
    12import type { Album } from "../../utils/types";
    23
    … …  
    67
    78const AlbumResult = ({ album }: AlbumResultProps) => {
     9        const navigate = useNavigate();
     10
    811        return (
    9                 <div className="flex items-center gap-4 p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group">
     12                <div
     13                        onClick={() => navigate(`/collection/album/${album.id}`)}
     14                        className="flex items-center gap-4 p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group"
     15                >
    1016                        <img
    1117                                src={album.cover || "/favicon.png"}

  • frontend/src/components/search/UserResult.tsx

    r8675f75 r8ccb07e  
     1import { useNavigate } from "react-router-dom";
    12import { baseURL } from "../../api/axiosInstance";
    23import type { BaseNonAdminUser } from "../../utils/types";
    … …  
    89
    910const UserResult = ({ user, label }: UserResultProps) => {
     11        const navigate = useNavigate();
     12
    1013        return (
    11                 <div className="flex items-center gap-4 p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group">
     14                <div
     15                        onClick={() => navigate(`/users/${user.username}`)}
     16                        className="flex items-center gap-4 p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group"
     17                >
    1218                        {user.profilePhoto ? (
    1319                                <img
Note: See TracChangeset for help on using the changeset viewer.