style: refactoring, make currently playing track more visible

bin/main.ml

@@ -63,6 +63,12 @@ let app _idb =
   let main_view =
     Lwd.map2 f_value f_search.value ~f:(fun l t ->
         let filters = Option.map (fun s -> [ Db.View.Search s ]) t in
+        Console.log
+          [
+            "Updating main view:";
+            Jv.of_option ~none:(Jv.of_string "\"\"") Jv.of_string t;
+            Jv.of_list Jv.of_string l;
+          ];
         let open Fut.Result_syntax in
         Worker_client.query
           (Create_view
@@ -90,8 +96,9 @@ let app _idb =
       `R
         (Elwd.div
            ~at:[ `P (At.class' (Jstr.v "item-list")) ]
-           [ `R filters; `R (*todo: do we need that join ?*) main_list ]);
-      `R now_playing;
+           [ `R filters; `R main_list ]);
+      `R
+        (Elwd.div ~at:[ `P (At.class' (Jstr.v "playlist")) ] [ `R now_playing ]);
       `R player_ui;
       `P (El.div [ El.txt' "icons by icons8" ]);
     ]

bin/ui_playlist.ml

@@ -53,11 +53,12 @@ let make ~reset_playlist ~fetch _ (view : (Db.View.t, 'a) Fut.result Lwd.t) =
     in
     let status =
       Lwd.map (Lwd.get Player.now_playing) ~f:(function
-        | Some { item_id; _ } when String.equal item_id id -> El.txt' "|>"
-        | Some _ | None -> El.txt' (string_of_int (start_index + 1)))
+        | Some { item = { id = item_id; _ }; _ } when String.equal item_id id ->
+            El.div ~at:[ At.class' (Jstr.v "playing") ] [ El.txt' "|>" ]
+        | Some _ | None -> El.div [ El.txt' (string_of_int (start_index + 1)) ])
     in
     [
-      `R (Elwd.div [ `R status ]);
+      `R status;
       `R
         (Elwd.div
            ~ev:[ `P play_on_click ]

lib/brr_lwd_ui/table/virtual_table.ml

@@ -276,7 +276,7 @@ let make (type data) ~(ui_table : Schema.fixed_row_height)
         | None -> Lwd.set table_height (Some (height, div))
         | _ -> ())
   in
-  let at = Attrs.to_at ~id:"lazy_tbl" @@ Attrs.classes [ "lazy-table" ] in
+  let at = Attrs.to_at @@ Attrs.classes [ "lwdui-lazy-table" ] in
   let grid_style = Schema.style ui_table in
   let s = At.style (Jstr.v @@ grid_style) in
   let at = `P s :: at in
@@ -289,7 +289,7 @@ let make (type data) ~(ui_table : Schema.fixed_row_height)
       |> Lwd.map ~f:(tee (Resize_observer.observe observer))
     in
     Elwd.div
-      ~at:Attrs.(to_at @@ classes [ "lazy-table-wrapper" ])
+      ~at:Attrs.(to_at @@ classes [ "lwdui-lazy-table-wrapper" ])
       [ `R container ]
   in
   el

web/app.css

@@ -21,13 +21,17 @@ body {
 
     width: 100%;
     height: 100%;
-}
 
-#main-layout .item-list {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
+    & .item-list, & .playlist {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    & .playlist div.row:has(div.playing) {
+        filter: brightness(120%);
+    }
 }
 
 #main-layout .player-wrapper {

web/main.css

@@ -2,7 +2,7 @@
 
 body {
     font-family: 'Bungee Spice', sans-serif;
-
+    color: #ffc334;
 }
 
 .on {
@@ -52,14 +52,14 @@ body {
 }
 
 
-.lazy-table-wrapper {
+.lwdui-lazy-table-wrapper {
     width: 100%;
     height: 100%;
     border-radius: 0.5rem;
     overflow: hidden;
 }
 
-.lazy-table {
+.lwdui-lazy-table {
     display: inline-grid;
     align-content: start;
     box-sizing: border-box;
@@ -72,41 +72,41 @@ body {
     font-size: 1.2rem;
 }
 
-.lazy-table div {
+.lwdui-lazy-table div {
     box-sizing: border-box;
 }
 
-.lazy-table>div {
+.lwdui-lazy-table>div {
     display: grid;
     grid-template-columns: subgrid;
     grid-column: 1/-1;
     padding: 0.5rem;
     background-color: #3c4146;
     overflow: hidden;
 }
-.lazy-table>.row_spacer {
+.lwdui-lazy-table>.row_spacer {
     padding: 0;
 }
 
-.lazy-table>div>div {
+.lwdui-lazy-table>div>div {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
-.lazy-table>div:first-child {
+.lwdui-lazy-table>div:first-child {
     position: sticky;
     top: -1px;
     /* Without that slight offset there is some glitching happening in firefox */
     background-color: #3c4146;
     z-index: 10;
 }
 
-.lazy-table>div:first-child>div {
+.lwdui-lazy-table>div:first-child>div {
     text-align: center;
 }
 
-.lazy-table span {
+.lwdui-lazy-table span {
     vertical-align: middle;
 }
 

web/theme.css

@@ -24,6 +24,6 @@ body.dragging .draggable-table>div {
     border-right: solid black 1px;
 }
 
-.lazy-table, .lazy-table>div {
+.lwdui-lazy-table, .lwdui-lazy-table>div {
     background-color: #3c4146;
 }