Links instead of button

src/Core.elm

@@ -1,5 +1,6 @@
 module Core exposing (FullModel(..), Model, Msg(..), Page(..), init, subscriptions, update)
 
+import Browser
 import Browser.Events as Events
 import Browser.Navigation as Nav
 import Dict exposing (Dict)
@@ -38,6 +39,7 @@ type Msg
     | PlaylistClicked Twitch.Playlist
     | VideoClicked Twitch.Playlist Twitch.Video
     | UrlReceived Url.Url
+    | UrlRequested Browser.UrlRequest
     | SizeReceived Int Int
 
 
@@ -166,6 +168,14 @@ update msg model =
             in
             ( Loaded { m | page = page }, Cmd.batch [ cmd, extraCmd ] )
 
+        ( UrlRequested u, Loaded m ) ->
+            case u of
+                Browser.Internal url ->
+                    ( model, Nav.pushUrl m.key (Url.toString url) )
+
+                Browser.External s ->
+                    ( model, Nav.load s )
+
         _ ->
             ( model, Cmd.none )
 

src/Main.elm

@@ -13,5 +13,5 @@ main =
         , view = Views.view
         , subscriptions = Core.subscriptions
         , onUrlChange = Core.UrlReceived
-        , onUrlRequest = \_ -> Core.Noop
+        , onUrlRequest = Core.UrlRequested
         }

src/Ui.elm

@@ -0,0 +1,12 @@
+module Ui exposing (link)
+
+import Element exposing (Element)
+import Element.Input as Input
+
+
+link : List (Element.Attribute msg) -> { label : Element msg, url : String } -> Element msg
+link attr data =
+    Input.button attr
+        { label = Element.link [ Element.width Element.fill, Element.height Element.fill ] data
+        , onPress = Nothing
+        }

src/Views.elm

@@ -16,6 +16,7 @@ import Json.Encode as Encode
 import Time
 import TimeUtils
 import Twitch
+import Ui
 
 
 view : Core.FullModel -> Browser.Document Core.Msg
@@ -88,14 +89,13 @@ topBar =
 
 homeButton : Element Core.Msg
 homeButton =
-    Input.button
+    Ui.link
         [ Element.padding Consts.homePadding
         , Element.height Element.fill
-        , Element.mouseOver [ Background.color Colors.primaryOver ]
         , Font.bold
         ]
         { label = Element.text Consts.name
-        , onPress = Just Core.HomeClicked
+        , url = "/"
         }
 
 
@@ -175,9 +175,13 @@ playlistView playlist =
                 ]
 
         button =
-            Input.button [ Element.width Element.fill, Element.alignTop ]
-                { label = display
-                , onPress = Just (Core.PlaylistClicked playlist)
+            Input.button [ Element.width Element.fill ]
+                { label =
+                    Ui.link [ Element.width Element.fill, Element.alignTop ]
+                        { label = display
+                        , url = "/#" ++ playlist.url
+                        }
+                , onPress = Nothing
                 }
     in
     button
@@ -253,9 +257,9 @@ videoMiniatureView zone playlist video =
                 ]
 
         button =
-            Input.button [ Element.width Element.fill, Element.alignTop ]
+            Ui.link [ Element.width Element.fill, Element.alignTop ]
                 { label = display
-                , onPress = Just (Core.VideoClicked playlist video)
+                , url = "/#" ++ playlist.url ++ video.url
                 }
     in
     button
@@ -264,19 +268,6 @@ videoMiniatureView zone playlist video =
 videoInList : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Twitch.Video -> Element Core.Msg
 videoInList zone playlist activeVideo video =
     let
-        ( msg, attr ) =
-            if video == activeVideo then
-                ( Nothing
-                , [ Element.width Element.fill
-                  , Background.color Colors.selected
-                  , Border.color Colors.primary
-                  , Border.width 2
-                  ]
-                )
-
-            else
-                ( Just (Core.VideoClicked playlist video), [ Element.width Element.fill ] )
-
         label =
             Element.row [ Element.width Element.fill, Element.spacing 10 ]
                 [ Element.el [ Element.width (Element.fillPortion 2) ]
@@ -285,7 +276,20 @@ videoInList zone playlist activeVideo video =
                     (videoDescription zone video)
                 ]
     in
-    Input.button attr { label = label, onPress = msg }
+    if video == activeVideo then
+        Element.el
+            [ Element.width Element.fill
+            , Background.color Colors.selected
+            , Border.color Colors.primary
+            , Border.width 2
+            ]
+            label
+
+    else
+        Ui.link [ Element.width Element.fill ]
+            { label = label
+            , url = "/#" ++ playlist.url ++ video.url
+            }
 
 
 videoView : Element.Device -> Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg