Use icons for entry actions

Author: cruessler

assets/elm/app/Feeds/Icons.elm

@@ -1,4 +1,4 @@
-module Feeds.Icons exposing (bookmarkSlashSolid)
+module Feeds.Icons exposing (arrowTopRightOnSquareSolid, bookmarkSlashSolid)
 
 {-| This module contains icons that come from
 <https://jasonliang.js.org/heroicons-for-elm/>, but are not available in
@@ -12,6 +12,18 @@ import Svg exposing (..)
 import Svg.Attributes exposing (..)
 
 
+arrowTopRightOnSquareSolid : Html msg
+arrowTopRightOnSquareSolid =
+    svg [ fill "none", viewBox "0 0 24 24", strokeWidth "1.5", stroke "currentColor" ]
+        [ Svg.path
+            [ strokeLinecap "round"
+            , strokeLinejoin "round"
+            , d "M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+            ]
+            []
+        ]
+
+
 bookmarkSlashSolid : Html msg
 bookmarkSlashSolid =
     svg [ viewBox "0 0 24 24", fill "currentColor" ]

assets/elm/app/Feeds/View.elm

@@ -2,7 +2,7 @@ module Feeds.View exposing (view)
 
 import DateFormat as F
 import Dict
-import Feeds.Icons exposing (bookmarkSlashSolid)
+import Feeds.Icons exposing (arrowTopRightOnSquareSolid, bookmarkSlashSolid)
 import Feeds.Model exposing (..)
 import Feeds.Msg exposing (..)
 import Feeds.Options as Options
@@ -42,8 +42,11 @@ viewEntry timezone entry =
 
             else
                 H.button
-                    [ A.class "px-4 py-2 text-sm font-extrabold bg-blue-700 text-white", E.onClick (MarkAsRead entry) ]
-                    [ H.text "Mark as read" ]
+                    [ A.class "size-6"
+                    , A.attribute "aria-label" "Mark as read"
+                    , E.onClick (MarkAsRead entry)
+                    ]
+                    [ checkCircle [] ]
 
         title =
             H.div [ A.class "flex flex-col" ]
@@ -56,15 +59,22 @@ viewEntry timezone entry =
                 , H.span [] [ H.text postedAt ]
                 ]
 
+        label =
+            "View entry "
+                ++ (entry.title
+                        |> Maybe.withDefault "n/a"
+                   )
+
         actions =
             H.div [ A.class "md:shrink-0 flex self-start mt-1 ml-auto space-x-4" ]
                 [ H.a
                     [ A.href entry.url
                     , A.target "_blank"
-                    , A.class "self-start px-4 py-2 text-sm font-extrabold bg-blue-700 text-white"
+                    , A.class "size-6"
+                    , A.attribute "aria-label" label
                     , E.onClick (MarkAsRead entry)
                     ]
-                    [ H.text "View" ]
+                    [ arrowTopRightOnSquareSolid ]
                 , maybeButton
                 ]
     in