web: better hover, open track

Author: landsman

src/web/src/ui/feed/item/feed-item.tsx

@@ -10,6 +10,8 @@ import { Album } from "../album.tsx";
 import { Artist } from "../artist.tsx";
 
 interface Props {
+  isOpen: boolean;
+  onClick: (e: React.MouseEvent<HTMLElement>) => void;
   artist: string;
   album: string | null;
   track: string;
@@ -19,7 +21,7 @@ interface Props {
 
 export function FeedItem(props: Props) {
   const { t, i18n } = useLingui();
-  const { artist, album, track, user, listenedAt } = props;
+  const { isOpen, onClick, artist, album, track, user, listenedAt } = props;
 
   function handleOnClick(e: React.MouseEvent<HTMLDivElement>) {
     e.preventDefault();
@@ -28,35 +30,44 @@ export function FeedItem(props: Props) {
       success: t`copyToClipboard.success`,
       error: t`copyToClipboard.error`,
     });
+    alert("clicked");
   }
 
   return (
-    <div className="feed_row">
-      <div className="track_side" onClick={handleOnClick}>
-        <div className="track">
-          <Marquee text={track} />
+    <div
+      className={`feed_row ${isOpen ? "isOpen" : ""}`}
+      onClick={(e) => {
+        handleOnClick(e);
+        onClick(e);
+      }}
+    >
+      <div className="track_item">
+        <div className="track_side">
+          <div className="track">
+            <Marquee text={track} />
+          </div>
+          <div className="artist">
+            <Artist name={artist} />
+            <Album name={album} />
+          </div>
         </div>
-        <div className="artist">
-          <Artist name={artist} />
-          <Album name={album} />
+        <div className="user_side">
+          <div
+            className="listened_at"
+            title={localizeDateTimeBrowser(listenedAt)}
+          >
+            {localizeRelativeTimeBrowser(listenedAt, i18n.locale, {
+              seconds: t`time.seconds`,
+              minutes: t`time.minutes`,
+              hours: t`time.hours`,
+              days: t`time.days`,
+              ago: t`time.ago`,
+              in: t`time.in`,
+            })}
+          </div>
+          <User name={user} />
         </div>
       </div>
-      <div className="user_side">
-        <div
-          className="listened_at"
-          title={localizeDateTimeBrowser(listenedAt)}
-        >
-          {localizeRelativeTimeBrowser(listenedAt, i18n.locale, {
-            seconds: t`time.seconds`,
-            minutes: t`time.minutes`,
-            hours: t`time.hours`,
-            days: t`time.days`,
-            ago: t`time.ago`,
-            in: t`time.in`,
-          })}
-        </div>
-        <User name={user} />
-      </div>
     </div>
   );
 }

src/web/src/ui/feed/list/feed-list.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { FeedItem } from "../item/feed-item.tsx";
 import { ListenedTracks } from "../../../data/tracks-api.ts";
 import { MusicLoader } from "../../activity/loader.tsx";
@@ -14,6 +15,8 @@ interface FeedListProps {
 }
 
 export function FeedList(props: FeedListProps) {
+  const [trackIsOpen, setTrackIsOpen] = useState<string | null>(null);
+
   const {
     data,
     isLoading,
@@ -37,6 +40,8 @@ export function FeedList(props: FeedListProps) {
       {hasData && (data.map((item: ListenedTracks) => (
         <FeedItem
           key={item.id}
+          isOpen={trackIsOpen === item.id}
+          onClick={() => setTrackIsOpen(item.id)}
           artist={item.artist_name}
           album={item.album_name}
           track={item.track_name}

src/web/src/ui/feed/list/feed.module.css

@@ -25,13 +25,53 @@
 }
 
 .feed_row {
+  padding-top: 10px;
+  background: transparent;
+
+  transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:first-child {
+    padding-top: 0;
+  }
+
+  /* desktop only */
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      padding-top: 30px;
+      padding-bottom: 30px;
+
+      margin-left: -10px;
+      margin-right: -10px;
+    }
+  }
+
+  /* mobile only */
+  &.isOpen {
+    padding-top: 30px;
+    padding-bottom: 30px;
+
+    margin-left: -10px;
+    margin-right: -10px;
+
+    .track_item {
+      padding: 20px 15px;
+    }
+  }
+
+  &:first-child {
+    &:hover {
+      padding-top: 0;
+    }
+  }
+}
+
+.track_item {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
 
   padding: 10px 15px;
-  margin-top: 10px;
 
   border-radius: 6px;
 
@@ -41,13 +81,9 @@
 
   transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
 
-  &:first-child {
-    margin-top: 0;
-  }
-
   &:hover {
     background: #1e1e1e;
-    border-color: #2f2f2f;
+    border-color: #636363;
 
     box-shadow:
       rgba(0, 0, 0, 0) 0 0 0 0,