Add unread messages notification indicator bubble in the nav sidebar

internal/webserver/handler_login.go

@@ -107,13 +107,16 @@ func (app *Application) ChangeSession(w http.ResponseWriter, r *http.Request) {
 	form := struct {
 		AccountName string `json:"account"`
 	}{}
-	data, err := io.ReadAll(r.Body)
+	formdata, err := io.ReadAll(r.Body)
 	panic_if(err)
-	panic_if(json.Unmarshal(data, &form)) // TODO: HTTP 400 not 500
+	panic_if(json.Unmarshal(formdata, &form)) // TODO: HTTP 400 not 500
 	err = app.SetActiveUser(scraper.UserHandle(form.AccountName))
 	if err != nil {
 		app.error_400_with_message(w, fmt.Sprintf("User not in database: %s", form.AccountName))
 		return
 	}
-	app.buffered_render_htmx(w, "nav-sidebar", PageGlobalData{}, nil)
+	data := Notifications{
+		NumMessageNotifications: len(app.Profile.GetUnreadConversations(app.ActiveUser.ID)),
+	}
+	app.buffered_render_htmx(w, "nav-sidebar", PageGlobalData{}, data)
 }

internal/webserver/renderer_helpers.go

@@ -15,11 +15,16 @@ import (
 	"gitlab.com/offline-twitter/twitter_offline_engine/pkg/scraper"
 )
 
+type Notifications struct {
+	NumMessageNotifications int
+}
+
 // TODO: this name sucks
 type PageGlobalData struct {
 	scraper.TweetTrove
 	SearchText     string
 	FocusedTweetID scraper.TweetID
+	Notifications
 }
 
 func (d PageGlobalData) Tweet(id scraper.TweetID) scraper.Tweet {
@@ -41,6 +46,9 @@ func (d PageGlobalData) GetSearchText() string {
 	fmt.Println(d.SearchText)
 	return d.SearchText
 }
+func (d PageGlobalData) GlobalData() PageGlobalData {
+	return d
+}
 
 // Config object for buffered rendering
 type renderer struct {
@@ -80,6 +88,8 @@ func (r renderer) BufferedRender(w io.Writer) {
 func (app *Application) buffered_render_page(w http.ResponseWriter, tpl_file string, global_data PageGlobalData, tpl_data interface{}) {
 	partials := append(glob("tpl/includes/*.tpl"), glob("tpl/tweet_page_includes/*.tpl")...)
 
+	global_data.Notifications.NumMessageNotifications = len(app.Profile.GetUnreadConversations(app.ActiveUser.ID))
+
 	r := renderer{
 		Funcs:     app.make_funcmap(global_data),
 		Filenames: append(partials, get_filepath(tpl_file)),
@@ -112,6 +122,7 @@ func (app *Application) make_funcmap(global_data PageGlobalData) template.FuncMa
 		"space":            global_data.Space,
 		"focused_tweet_id": global_data.GetFocusedTweetID,
 		"search_text":      global_data.GetSearchText,
+		"global_data":      global_data.GlobalData, // This fucking sucks
 		"active_user": func() scraper.User {
 			return app.ActiveUser
 		},

internal/webserver/static/styles.css

@@ -929,7 +929,24 @@ main {
 		align-items: flex-start;
 		padding: 0 2em;
 	}
-
+	/* Enable positioning the notifications indicator relative to this */
+	.labelled-icon {
+		position: relative;
+	}
+	.nav-sidebar__notifications-count {
+		position: absolute;
+		left: 0.3em;
+		top: 0.3em;
+		background-color: var(--color-twitter-blue);
+		min-width: 1em;
+		line-height: 1em;
+		/* height: 1.2em; */
+		border-radius: 1em;
+		font-size: 0.7em;
+		color: white;
+		text-align: center;
+		padding: 0.2em;
+	}
 	#logged-in-user-info {
 		font-size: 0.8em;
 		margin-top: 1em;

internal/webserver/tpl/includes/base.tpl

@@ -35,7 +35,7 @@
           />
         </form>
       </header>
-      {{template "nav-sidebar"}}
+      {{template "nav-sidebar" (global_data).Notifications}}
       <main>
         {{template "main" .}}
       </main>

internal/webserver/tpl/includes/nav_sidebar.tpl

@@ -19,16 +19,19 @@
           <label class="nav-sidebar__button-label">Explore</label>
         </li>
       </a>
+      {{if (not (eq (active_user).Handle "[nobody]"))}}
         <a href="#">
           <li class="button labelled-icon">
             <img class="svg-icon" src="/static/icons/notifications.svg" width="24" height="24" />
             <label class="nav-sidebar__button-label">Notifications</label>
           </li>
         </a>
-      {{if (not (eq (active_user).Handle "[nobody]"))}}
         <a href="/messages">
-          <li class="button labelled-icon">
+          <li class="nav-sidebar__messages button labelled-icon">
             <img class="svg-icon" src="/static/icons/messages.svg" width="24" height="24" />
+            {{if .NumMessageNotifications}}
+              <span class="nav-sidebar__notifications-count">{{.NumMessageNotifications}}</span>
+            {{end}}
             <label class="nav-sidebar__button-label">Messages</label>
           </li>
         </a>

internal/webserver/tpl/tweet_page_includes/chat_list_entry.tpl

@@ -1,6 +1,6 @@
 {{define "chat-list-entry"}}
   {{$room := $.room}}
-  <div class="chat-list-entry {{if .is_active}}chat-list-entry--active-chat{{end}}"
+  <div class="chat-list-entry {{if .is_active}}chat-list-entry--active-chat{{end}} {{if .is_unread}}chat-list-entry--unread{{end}}"
     hx-get="/messages/{{$room.ID}}"
     hx-push-url="true"
     hx-swap="outerHTML"

pkg/persistence/dm_queries.go

@@ -229,6 +229,7 @@ func (p Profile) GetChatRoomsPreview(id UserID) DMChatView {
 	for _, room := range rooms {
 		// Fetch the latest message
 		var msg DMMessage
+		msg.Reactions = make(map[UserID]DMReaction)
 		q, args, err := sqlx.Named(`
 			select `+CHAT_MESSAGES_ALL_SQL_FIELDS+`
 			  from chat_messages