Merge pull request #89 from unisoncomputing/notifications-button-app-header

Add app header notifications button

Author: hojberg

src/UnisonShare/AppHeader.elm

@@ -19,6 +19,7 @@ import UI.Sizing as Sizing
 import UnisonShare.Account as Account
 import UnisonShare.Link as Link
 import UnisonShare.Session exposing (Session(..))
+import UnisonShare.Util as Util
 import Url exposing (Url)
 import WhatsNew exposing (WhatsNew)
 
@@ -275,6 +276,21 @@ view ctx appHeader_ =
                                         |> Button.positive
                                         |> Button.view
 
+                                notifications =
+                                    if account.hasUnreadNotifications then
+                                        div [ class "notifications" ]
+                                            [ Button.icon_ Link.notifications Icon.bellRing
+                                                |> Button.small
+                                                |> Button.view
+                                            , Nudge.nudge
+                                                |> Nudge.view
+                                            ]
+
+                                    else
+                                        Button.icon_ Link.notifications Icon.bell
+                                            |> Button.small
+                                            |> Button.view
+
                                 orgs_ =
                                     account.organizationMemberships
                                         |> List.map (\(Account.OrganizationMembership h) -> h)
@@ -302,10 +318,16 @@ view ctx appHeader_ =
                             in
                             [ div [ class "signed-in-nav signed-in-nav_desktop" ]
                                 [ newOrgButton
+                                , Util.privateBeta account notifications
                                 , helpAndResources False
                                 , accountMenu
                                 ]
-                            , div [ class "signed-in-nav signed-in-nav_mobile" ] [ newOrgButton, helpAndResources True, accountMenu ]
+                            , div [ class "signed-in-nav signed-in-nav_mobile" ]
+                                [ newOrgButton
+                                , Util.privateBeta account notifications
+                                , helpAndResources True
+                                , accountMenu
+                                ]
                             ]
             in
             UI.AppHeader.appHeader (appTitle (Click.href "/"))

src/UnisonShare/Link.elm

@@ -11,7 +11,7 @@ import Lib.UserHandle as UserHandle exposing (UserHandle)
 import UI.Click as Click exposing (Click)
 import UnisonShare.BranchDiff.ChangeLineId exposing (ChangeLineId)
 import UnisonShare.Contribution.ContributionRef exposing (ContributionRef)
-import UnisonShare.Paginated exposing (PageCursorParam)
+import UnisonShare.Paginated as Paginated exposing (PageCursorParam)
 import UnisonShare.Project.ProjectRef exposing (ProjectRef)
 import UnisonShare.Route as Route exposing (Route)
 import UnisonShare.Ticket.TicketRef exposing (TicketRef)
@@ -189,6 +189,11 @@ account =
     toClick Route.account
 
 
+notifications : Click msg
+notifications =
+    toClick (Route.notificationsAll Paginated.NoPageCursor)
+
+
 notificationsAll : PageCursorParam -> Click msg
 notificationsAll cursor =
     toClick (Route.notificationsAll cursor)

src/UnisonShare/Util.elm

@@ -0,0 +1,14 @@
+module UnisonShare.Util exposing (..)
+
+import Html exposing (Html)
+import UI
+import UnisonShare.Account exposing (Account)
+
+
+privateBeta : Account a -> Html msg -> Html msg
+privateBeta account content =
+    if account.isSuperAdmin then
+        content
+
+    else
+        UI.nothing

src/css/unison-share/app.css

@@ -158,6 +158,20 @@ body:has(#modal-overlay) {
   margin-top: 1rem;
 }
 
+#app-header .notifications {
+  position: relative;
+}
+
+#app-header .notifications .nudge {
+  position: absolute;
+  right: -0.25rem;
+  top: -0.25rem;
+
+  & .nudge_circle {
+    box-shadow: 0 0 0 4px var(--color-app-header-bg);
+  }
+}
+
 /* -- App Footer ----------------------------------------------------------- */
 
 #app-footer {