ulist: Rework VN "User options" tab to be more prominent and convenient

Personally not a big fan of this taking so much space when it's not on
the user's list, but people want instant options so there we go. It
probably still blends in too well with the rest of the VN info though,
styling isn't my thing.

And there's no need to hit "Add to list" anymore now.

4 files changed, 60 insertions, 70 deletions

diff --git a/data/style.css b/data/style.css
index 72404bbf..f6c5976a 100644
--- a/data/style.css
+++ b/data/style.css
@@ -426,16 +426,19 @@ div.vndetails                 { margin: 0 auto; max-width: 820px; }
 div.vnimg                     { float: left; width: 250px; margin: 0 10px; }
 div.vnimg i                   { display: block; width: 100%; text-align: center; font-size: 11px; }
 div.vnimg p                   { text-align: center; padding: 0px; margin: 0; }
-.vndesc h2                    { margin: 5px 0 0 0; }
+div.vndetails h2              { margin: 5px 0 0 0; }
 .vndesc p                     { padding: 0 0 0 5px; }
 p#nsfw_hid                    { display: block; cursor: pointer; }
-div.vndetails > table         { float: left; width: 500px; }
-div.vndetails > table td.key  { width: 90px; }
-div.vndetails > table dt      { float: left; font-style: italic; }
-div.vndetails > table dd      { margin-left: 90px; }
+div.vndetails table           { float: left; width: 500px; }
+div.vndetails table td.key    { width: 90px; }
+div.vndetails table dt        { float: left; font-style: italic; }
+div.vndetails table dd        { margin-left: 90px; }
 div.vndetails td.relations dt { float: none; font-style: normal; }
 div.vndetails td.relations dd { margin-left: 15px; }
 div.vndetails td.anime b      { font-size: 10px; font-weight: normal; padding-right: 4px; }
+.ulistvn     { padding: 5px 0 0 0 }
+.ulistvn > b { font-size: 14px }
+.ulistvn > span { float: right }
 
 div#vntags                    { margin: 0 30px 0 30px; border-top: 1px solid $border$; padding: 3px 5% 0 5%; text-align: center; }
 #vntags span                  { white-space: nowrap; margin-left: 15px; }
diff --git a/elm/UList/VNPage.elm b/elm/UList/VNPage.elm
index e736bad4..5483400e 100644
--- a/elm/UList/VNPage.elm
+++ b/elm/UList/VNPage.elm
@@ -4,13 +4,13 @@ import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
 import Browser
+import Set
 import Lib.Html exposing (..)
 import Lib.Util exposing (..)
 import Lib.Api as Api
 import Lib.DropDown as DD
 import Gen.Api as GApi
 import Gen.UListDel as GDE
-import Gen.UListAdd as GAD
 import UList.LabelEdit as LE
 import UList.VoteEdit as VE
 
@@ -60,28 +60,31 @@ init f =
   }
 
 type Msg
-  = Add
-  | Added GApi.Response
-  | Labels LE.Msg
+  = Labels LE.Msg
   | Vote VE.Msg
   | Del Bool
   | Delete
   | Deleted GApi.Response
 
 
+setOnList : Model -> Model
+setOnList model = { model | onlist = model.onlist || model.vote.ovote /= Nothing || not (Set.isEmpty model.labels.sel) }
+
 update : Msg -> Model -> (Model, Cmd Msg)
 update msg model =
   case msg of
-    Labels m -> let (nm, cmd) = LE.update m model.labels in ({ model | labels = nm}, Cmd.map Labels cmd)
-    Vote   m -> let (nm, cmd) = VE.update m model.vote   in ({ model | vote   = nm}, Cmd.map Vote   cmd)
-
-    Add -> ({ model | state = Api.Loading }, GAD.send { uid = model.flags.uid, vid = model.flags.vid } Added)
-    Added GApi.Success -> ({ model | state = Api.Normal, onlist = True }, Cmd.none)
-    Added e -> ({ model | state = Api.Error e }, Cmd.none)
+    Labels m -> let (nm, cmd) = LE.update m model.labels in (setOnList { model | labels = nm}, Cmd.map Labels cmd)
+    Vote   m -> let (nm, cmd) = VE.update m model.vote   in (setOnList { model | vote   = nm}, Cmd.map Vote   cmd)
 
     Del b -> ({ model | del = b }, Cmd.none)
     Delete -> ({ model | state = Api.Loading }, GDE.send { uid = model.flags.uid, vid = model.flags.vid } Deleted)
-    Deleted GApi.Success -> ({ model | state = Api.Normal, onlist = False, del = False }, Cmd.none)
+    Deleted GApi.Success ->
+      ( { model
+        | state  = Api.Normal, onlist = False, del = False
+        , labels = LE.init { uid = model.flags.uid, vid = model.flags.vid, labels = model.flags.labels, selected = [] }
+        , vote   = VE.init { uid = model.flags.uid, vid = model.flags.vid, vote = Nothing }
+        }
+      , Cmd.none)
     Deleted e -> ({ model | state = Api.Error e }, Cmd.none)
 
 
@@ -93,37 +96,34 @@ isPublic model =
 
 view : Model -> Html Msg
 view model =
-  case model.state of
-    Api.Loading -> div [ class "spinner" ] []
-    Api.Error e -> b [ class "standout" ] [ text <| Api.showResponse e ]
-    Api.Normal ->
-      if not model.onlist
-      then a [ href "#", onClickD Add ] [ text "Add to list" ]
-      else if model.del
-      then
-        span []
-        [ text "Sure you want to remove this VN from your list? "
-        , a [ onClickD Delete ] [ text "Yes" ]
+  div [ class "ulistvn" ]
+  [ span [] <|
+    case (model.state, model.del, model.onlist) of
+      (Api.Loading, _, _) -> [ span [ class "spinner" ] [] ]
+      (Api.Error e, _, _) -> [ b [ class "standout" ] [ text <| Api.showResponse e ] ]
+      (Api.Normal, _, False) -> [ b [ class "grayedout" ] [ text "not on your list" ] ]
+      (Api.Normal, True, _) ->
+        [ a [ onClickD Delete ] [ text "Yes, delete" ]
         , text " | "
         , a [ onClickD (Del False) ] [ text "Cancel" ]
         ]
-      else
-        table [ style "width" "100%" ]
-        [ tr [ class "nostripe" ]
-          [ td [ style "width" "70px" ] [ text "Labels:" ]
-          , td [ colspan 2 ] [ Html.map Labels (LE.view model.labels) ]
-          ]
-        , if model.flags.canvote || (Maybe.withDefault "-" model.flags.vote /= "-")
-          then tr [ class "nostripe" ]
-               [ td [] [ text "Vote:" ]
-               , td [ style "width" "80px", class "compact stealth" ] [ Html.map Vote (VE.view model.vote) ]
-               , td [] []
-               ]
-          else text ""
-        , tr [ class "nostripe" ]
-          [ td [ colspan 3 ]
-            [ span [ classList [("invisible", not (isPublic model))], title "This visual novel is on your public list" ] [ text "👁 " ]
-            , a [ onClickD (Del True) ] [ text "Remove from list" ]
-            ]
-          ]
+      (Api.Normal, False, True) ->
+        [ span [ classList [("hidden", not (isPublic model))], title "This visual novel is on your public list" ] [ text "👁 " ]
+        , text "On your list | "
+        , a [ onClickD (Del True) ] [ text "Remove from list" ]
         ]
+  , b [] [ text "User options" ]
+  , table [ style "margin" "4px 0 0 0" ]
+    [ tr [ class "odd" ]
+      [ td [ class "key" ] [ text "Labels" ]
+      , td [ colspan 2 ] [ Html.map Labels (LE.view model.labels) ]
+      ]
+    , if model.flags.canvote || (Maybe.withDefault "-" model.flags.vote /= "-")
+      then tr [ class "nostripe" ]
+           [ td [] [ text "Vote" ]
+           , td [ style "width" "80px" ] [ Html.map Vote (VE.view model.vote) ]
+           , td [] []
+           ]
+      else text ""
+    ]
+  ]
diff --git a/lib/VNDB/Handler/VNPage.pm b/lib/VNDB/Handler/VNPage.pm
index 3556476c..8b01fabc 100644
--- a/lib/VNDB/Handler/VNPage.pm
+++ b/lib/VNDB/Handler/VNPage.pm
@@ -440,6 +440,7 @@ sub page {
      _affiliate_links($self, $r);
 
      _anime($self, $v) if @{$v->{anime}};
+
      _useroptions($self, $v, $r) if $self->authInfo->{id};
 
      Tr class => 'nostripe';
@@ -725,9 +726,8 @@ sub _useroptions {
   );
   my $lst = tuwf->dbRowi('SELECT vid, vote FROM ulist_vns WHERE uid =', \$self->authInfo->{id}, 'AND vid =', \$v->{id});
 
-  Tr;
-   td 'User options';
-   td;
+  Tr class => 'nostripe';
+   td colspan => 2;
     VNWeb::HTML::elm_('UList.VNPage', undef, {
       uid      => 1*$self->authInfo->{id},
       vid      => 1*$v->{id},
@@ -738,7 +738,7 @@ sub _useroptions {
       selected => [ map $_->{id}, grep $_->{assigned}, @$labels ],
     });
    end;
-  end 'tr';
+  end;
 }
 
 
diff --git a/lib/VNWeb/User/Lists.pm b/lib/VNWeb/User/Lists.pm
index 00ec2470..cdebab6b 100644
--- a/lib/VNWeb/User/Lists.pm
+++ b/lib/VNWeb/User/Lists.pm
@@ -91,13 +91,13 @@ elm_api UListVoteEdit => undef, $VNVOTE, sub {
     my($data) = @_;
     return elm_Unauth if !own $data->{uid};
     tuwf->dbExeci(
-        'UPDATE ulist_vns
-            SET vote =', \$data->{vote},
-             ', vote_date = CASE WHEN', \$data->{vote}, '::smallint IS NULL THEN NULL WHEN vote IS NULL THEN NOW() ELSE vote_date END',
-             ', lastmod = NOW()
-          WHERE uid =', \$data->{uid}, 'AND vid =', \$data->{vid}
+        'INSERT INTO ulist_vns', { %$data, vote_date => sql $data->{vote} ? 'NOW()' : 'NULL' },
+            'ON CONFLICT (uid, vid) DO UPDATE
+            SET', { %$data,
+                lastmod   => sql('NOW()'),
+                vote_date => sql $data->{vote} ? 'CASE WHEN ulist_vns.vote IS NULL THEN NOW() ELSE ulist_vns.vote_date END' : 'NULL'
+            }
     );
-
     updcache $data->{uid};
     elm_Success
 };
@@ -122,6 +122,7 @@ elm_api UListLabelEdit => $VNLABELS_OUT, $VNLABELS_IN, sub {
     return elm_Unauth if !own $data->{uid};
     die "Attempt to set vote label" if $data->{label} == 7;
 
+    tuwf->dbExeci('INSERT INTO ulist_vns', {uid => $data->{uid}, vid => $data->{vid}}, 'ON CONFLICT (uid, vid) DO NOTHING');
     tuwf->dbExeci(
         'DELETE FROM ulist_vns_labels
           WHERE uid =', \$data->{uid}, 'AND vid =', \$data->{vid}, 'AND lbl =', \$data->{label}
@@ -212,20 +213,6 @@ elm_api UListDel => undef, {
 
 
 
-elm_api UListAdd => undef, {
-    uid => { id => 1 },
-    vid => { id => 1 },
-}, sub {
-    my($data) = @_;
-    return elm_Unauth if !own $data->{uid};
-    tuwf->dbExeci('INSERT INTO ulist_vns', $data, 'ON CONFLICT (uid, vid) DO NOTHING');
-    updcache $data->{uid};
-    elm_Success
-};
-
-
-
-
 # Adds the release when not in the list.
 elm_api UListRStatus => undef, {
     uid => { id => 1 },