:)

api/handlers.go

@@ -13,13 +13,6 @@ import (
 	"sprintpadawan/lib"
 )
 
-type PingResponse struct {
-	Status  string `json:"status"`
-	Message string `json:"message"`
-}
-
-var templates *template.Template
-
 type contextKey string
 
 const userKey contextKey = "user"
@@ -30,11 +23,14 @@ type sseClient struct {
 }
 
 var (
-	// roomClients maps roomID → list of connected SSE clients
 	roomClients = make(map[int][]*sseClient)
 	clientsMu   sync.Mutex
 )
 
+var templates *template.Template
+
+// ==================== HELPERS ====================
+
 func addSSEClient(roomID, userID int, ch chan string) {
 	clientsMu.Lock()
 	defer clientsMu.Unlock()
@@ -56,13 +52,13 @@ func removeSSEClient(roomID int, ch chan string) {
 	}
 }
 
-func broadcast(roomID int, message string) {
+func broadcast(roomID int, event string) {
 	clientsMu.Lock()
 	defer clientsMu.Unlock()
 	alive := roomClients[roomID][:0]
 	for _, c := range roomClients[roomID] {
 		select {
-		case c.ch <- message:
+		case c.ch <- event:
 			alive = append(alive, c)
 		default:
 			// drop dead client
@@ -71,7 +67,6 @@ func broadcast(roomID int, message string) {
 	roomClients[roomID] = alive
 }
 
-// GetConnectedUserIDs returns deduplicated user IDs connected to a room
 func GetConnectedUserIDs(roomID int) []int {
 	clientsMu.Lock()
 	defer clientsMu.Unlock()
@@ -86,18 +81,6 @@ func GetConnectedUserIDs(roomID int) []int {
 	return ids
 }
 
-func init() {
-	templates = template.Must(template.New("").Funcs(template.FuncMap{
-		"scaleToOptions": scaleToOptions,
-		"derefInt": func(i *int) int {
-			if i == nil {
-				return 0
-			}
-			return *i
-		},
-	}).ParseGlob(filepath.Join("templates", "*.html")))
-}
-
 func scaleToOptions(scale string) []string {
 	switch scale {
 	case "fibonacci":
@@ -111,6 +94,134 @@ func scaleToOptions(scale string) []string {
 	}
 }
 
+func getRoomID(r *http.Request) int {
+	return getPathInt(r, "id")
+}
+
+func getPathInt(r *http.Request, key string) int {
+	var id int
+	fmt.Sscanf(r.PathValue(key), "%d", &id)
+	return id
+}
+
+type MemberView struct {
+	Username string
+	HasVoted bool
+	ID       int
+}
+
+type RoomData struct {
+	*lib.Room
+	User       *lib.User
+	Members    []MemberView
+	Stories    []lib.Story
+	IsOwner    bool
+	UserVotes  map[int]string
+	StoryVotes map[int][]lib.VoteView
+}
+
+// Builds data used by both full page and all partials
+func buildRoomData(room *lib.Room, user *lib.User) RoomData {
+	members, _ := lib.GetRoomMembers(room.ID)
+	stories, _ := lib.GetStoriesForRoom(room.ID)
+	connectedIDs := GetConnectedUserIDs(room.ID)
+	connectedMap := make(map[int]bool)
+	for _, cid := range connectedIDs {
+		connectedMap[cid] = true
+	}
+	connectedMap[user.ID] = true
+
+	var activeVotes []lib.Vote
+	if room.ActiveStoryID != nil {
+		activeVotes, _ = lib.GetVotesForStory(*room.ActiveStoryID)
+	}
+
+	var memberViews []MemberView
+	for _, m := range members {
+		if !connectedMap[m.ID] {
+			continue
+		}
+		hasVoted := false
+		for _, v := range activeVotes {
+			if v.UserID == m.ID {
+				hasVoted = true
+				break
+			}
+		}
+		memberViews = append(memberViews, MemberView{
+			Username: m.Username,
+			HasVoted: hasVoted,
+			ID:       m.ID,
+		})
+	}
+
+	userVotes := make(map[int]string)
+	storyVotes := make(map[int][]lib.VoteView)
+	for _, s := range stories {
+		votes, _ := lib.GetVotesForStory(s.ID)
+		for _, v := range votes {
+			if v.UserID == user.ID {
+				userVotes[s.ID] = v.Value
+			}
+		}
+		if s.Voted {
+			vv, _ := lib.GetVotesWithUsernames(s.ID)
+			storyVotes[s.ID] = vv
+		}
+	}
+
+	return RoomData{
+		Room:       room,
+		User:       user,
+		Members:    memberViews,
+		Stories:    stories,
+		IsOwner:    room.OwnerID == user.ID,
+		UserVotes:  userVotes,
+		StoryVotes: storyVotes,
+	}
+}
+
+func init() {
+	templates = template.Must(template.New("").Funcs(template.FuncMap{
+		"scaleToOptions": scaleToOptions,
+		"derefInt": func(i *int) int {
+			if i == nil {
+				return 0
+			}
+			return *i
+		},
+		"slice": func(s string, start, end int) string {
+			if len(s) == 0 {
+				return ""
+			}
+			if start < 0 {
+				start = 0
+			}
+			if end > len(s) || end <= 0 {
+				end = len(s)
+			}
+			if start > end {
+				return ""
+			}
+			return s[start:end]
+		},
+		"dict": func(values ...interface{}) (map[string]interface{}, error) {
+			if len(values)%2 != 0 {
+				return nil, fmt.Errorf("odd number of arguments to dict")
+			}
+			d := make(map[string]interface{})
+			for i := 0; i < len(values); i += 2 {
+				key, ok := values[i].(string)
+				if !ok {
+					return nil, fmt.Errorf("dict keys must be strings")
+				}
+				d[key] = values[i+1]
+			}
+			return d, nil
+		},
+	}).ParseGlob(filepath.Join("templates", "*.html")))
+}
+
 func SetupRoutes(mux *http.ServeMux) {
 	mux.HandleFunc("/login", handleLogin)
 	mux.HandleFunc("/register", handleRegister)
@@ -121,6 +232,13 @@ func SetupRoutes(mux *http.ServeMux) {
 	mux.HandleFunc("/rooms/create", requireAuth(handleCreateRoom))
 	mux.HandleFunc("/rooms/join", requireAuth(handleJoinRoom))
 	mux.HandleFunc("/rooms/{id}", requireAuth(handleRoom))
+
+	// HTMX partials
+	mux.HandleFunc("/rooms/{id}/partial/stories", requireAuth(handlePartialStories))
+	mux.HandleFunc("/rooms/{id}/partial/members", requireAuth(handlePartialMembers))
+	mux.HandleFunc("/rooms/{id}/partial/vote-area", requireAuth(handlePartialVoteArea))
+
+	// Actions
 	mux.HandleFunc("/rooms/{id}/stories/new", requireAuth(handleNewStoryForm))
 	mux.HandleFunc("/rooms/{id}/stories", requireAuth(handleAddStory))
 	mux.HandleFunc("/rooms/{id}/active", requireAuth(handleSetActiveStory))
@@ -133,6 +251,38 @@ func SetupRoutes(mux *http.ServeMux) {
 	mux.HandleFunc("/sse/{room_id}", requireAuth(handleSSE))
 }
 
+func isHTMX(r *http.Request) bool {
+	return r.Header.Get("HX-Request") == "true"
+}
+
+func renderTemplate(w http.ResponseWriter, name string, data interface{}) {
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	if err := templates.ExecuteTemplate(w, name, data); err != nil {
+		log.Printf("template error (%s): %v", name, err)
+		http.Error(w, "internal server error", http.StatusInternalServerError)
+	}
+}
+
+func renderRoomStories(w http.ResponseWriter, roomID int, user *lib.User) {
+	room, err := lib.GetRoomByID(roomID)
+	if err != nil {
+		http.Error(w, "room not found", http.StatusNotFound)
+		return
+	}
+
+	renderTemplate(w, "stories-panel", buildRoomData(room, user))
+}
+
+func renderRoomMembers(w http.ResponseWriter, roomID int, user *lib.User) {
+	room, err := lib.GetRoomByID(roomID)
+	if err != nil {
+		http.Error(w, "room not found", http.StatusNotFound)
+		return
+	}
+
+	renderTemplate(w, "members-panel", buildRoomData(room, user))
+}
+
 func requireAuth(next http.HandlerFunc) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		cookie, err := r.Cookie("session_token")
@@ -150,7 +300,6 @@ func requireAuth(next http.HandlerFunc) http.HandlerFunc {
 	}
 }
 
-// isLoggedIn checks if the request has a valid session
 func isLoggedIn(r *http.Request) bool {
 	cookie, err := r.Cookie("session_token")
 	if err != nil {
@@ -160,6 +309,8 @@ func isLoggedIn(r *http.Request) bool {
 	return err == nil && user != nil
 }
 
+// ==================== AUTH HANDLERS ====================
+
 func handleLogin(w http.ResponseWriter, r *http.Request) {
 	if r.Method == http.MethodGet {
 		if isLoggedIn(r) {
@@ -233,6 +384,8 @@ func handleLogout(w http.ResponseWriter, r *http.Request) {
 	http.Redirect(w, r, "/login", http.StatusSeeOther)
 }
 
+// ==================== DASHBOARD ====================
+
 func handleIndex(w http.ResponseWriter, r *http.Request) {
 	if r.URL.Path != "/" {
 		http.NotFound(w, r)
@@ -241,6 +394,7 @@ func handleIndex(w http.ResponseWriter, r *http.Request) {
 	user := r.Context().Value(userKey).(*lib.User)
 	rooms, _ := lib.GetRoomsForUser(user.ID)
 	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+
 	type RoomView struct {
 		ID          int
 		Name        string
@@ -249,12 +403,14 @@ func handleIndex(w http.ResponseWriter, r *http.Request) {
 		IsOwner     bool
 		MemberCount int
 	}
+
 	data := struct {
 		*lib.User
 		Rooms []RoomView
 	}{
 		User: user,
 	}
+
 	for _, room := range rooms {
 		members, _ := lib.GetRoomMembers(room.ID)
 		data.Rooms = append(data.Rooms, RoomView{
@@ -266,12 +422,15 @@ func handleIndex(w http.ResponseWriter, r *http.Request) {
 			MemberCount: len(members),
 		})
 	}
+
 	if err := templates.ExecuteTemplate(w, "index.html", data); err != nil {
 		log.Printf("template error: %v", err)
 		http.Error(w, "internal server error", http.StatusInternalServerError)
 	}
 }
 
+// ==================== ROOM CREATION / JOIN ====================
+
 func handleNewRoom(w http.ResponseWriter, r *http.Request) {
 	if err := templates.ExecuteTemplate(w, "room_form.html", nil); err != nil {
 		log.Printf("template error: %v", err)
@@ -303,167 +462,129 @@ func handleJoinRoom(w http.ResponseWriter, r *http.Request) {
 	http.Redirect(w, r, fmt.Sprintf("/rooms/%d", room.ID), http.StatusSeeOther)
 }
 
+// ==================== MAIN ROOM & PARTIALS ====================
+
 func handleRoom(w http.ResponseWriter, r *http.Request) {
+	roomID := getRoomID(r)
 	user := r.Context().Value(userKey).(*lib.User)
-	var id int
+	room, err := lib.GetRoomByID(roomID)
-	fmt.Sscanf(r.PathValue("id"), "%d", &id)
-	room, err := lib.GetRoomByID(id)
 	if err != nil {
 		http.NotFound(w, r)
 		return
 	}
 	lib.AddUserToRoom(room.ID, user.ID)
-	members, _ := lib.GetRoomMembers(room.ID)
-	stories, _ := lib.GetStoriesForRoom(room.ID)
 
-	// Add HasVoted logic
+	data := buildRoomData(room, user)
-	type MemberView struct {
+	renderTemplate(w, "room.html", data)
-		Username string
-		HasVoted bool
 }
 
-	var activeVotes []lib.Vote
+func handlePartialStories(w http.ResponseWriter, r *http.Request) {
-	if room.ActiveStoryID != nil {
+	roomID := getRoomID(r)
-		activeVotes, _ = lib.GetVotesForStory(*room.ActiveStoryID)
+	user := r.Context().Value(userKey).(*lib.User)
+	renderRoomStories(w, roomID, user)
 }
 
-	// Filter to only connected members
+func handlePartialMembers(w http.ResponseWriter, r *http.Request) {
-	connectedIDs := GetConnectedUserIDs(room.ID)
+	roomID := getRoomID(r)
-	connectedMap := make(map[int]bool)
+	user := r.Context().Value(userKey).(*lib.User)
-	for _, cid := range connectedIDs {
+	renderRoomMembers(w, roomID, user)
-		connectedMap[cid] = true
-	}
-	// The current user loading the page will immediately connect to SSE
-	connectedMap[user.ID] = true
-
-	var memberViews []MemberView
-	for _, m := range members {
-		// Only include connected users
-		if !connectedMap[m.ID] {
-			continue
 }
 
-		hasVoted := false
+func handlePartialVoteArea(w http.ResponseWriter, r *http.Request) {
-		for _, v := range activeVotes {
+	roomID := getRoomID(r)
-			if v.UserID == m.ID {
+	user := r.Context().Value(userKey).(*lib.User)
-				hasVoted = true
+	room, err := lib.GetRoomByID(roomID)
-				break
+	if err != nil {
+		http.Error(w, "room not found", http.StatusNotFound)
+		return
 	}
-		}
+	if room.ActiveStoryID == nil {
-		memberViews = append(memberViews, MemberView{
+		w.WriteHeader(http.StatusNoContent)
-			Username: m.Username,
+		return
-			HasVoted: hasVoted,
-		})
 	}
 
-	userVotes := make(map[int]string)
+	story, err := lib.GetStoryByID(*room.ActiveStoryID)
-	storyVotes := make(map[int][]lib.VoteView)
+	if err != nil {
-	for _, s := range stories {
+		http.Error(w, "story not found", http.StatusNotFound)
-		votes, _ := lib.GetVotesForStory(s.ID)
+		return
-		for _, v := range votes {
-			if v.UserID == user.ID {
-				userVotes[s.ID] = v.Value
-			}
-		}
-		// For revealed stories, get votes with usernames
-		if s.Voted {
-			vv, _ := lib.GetVotesWithUsernames(s.ID)
-			storyVotes[s.ID] = vv
-		}
 	}
 
 	data := struct {
-		*lib.Room
+		RoomData RoomData
-		User       *lib.User
+		Story    lib.Story
-		Members    []MemberView
-		Stories    []lib.Story
-		IsOwner    bool
-		UserVotes  map[int]string
-		StoryVotes map[int][]lib.VoteView
 	}{
-		Room:       room,
+		RoomData: buildRoomData(room, user),
-		User:       user,
+		Story:    *story,
-		Members:    memberViews,
-		Stories:    stories,
-		IsOwner:    room.OwnerID == user.ID,
-		UserVotes:  userVotes,
-		StoryVotes: storyVotes,
-	}
-	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	if err := templates.ExecuteTemplate(w, "room.html", data); err != nil {
-		log.Printf("template error: %v", err)
 	}
+	renderTemplate(w, "vote-area", data)
 }
 
+// ==================== STORY & VOTING ACTIONS ====================
+
 func handleNewStoryForm(w http.ResponseWriter, r *http.Request) {
-    var id int
+	roomID := getRoomID(r)
-	fmt.Sscanf(r.PathValue("id"), "%d", &id)
+	room, _ := lib.GetRoomByID(roomID)
-	room, _ := lib.GetRoomByID(id)
+	renderTemplate(w, "story_form.html", room)
-	if err := templates.ExecuteTemplate(w, "story_form.html", room); err != nil {
-		log.Printf("template error: %v", err)
-	}
 }
 
 func handleAddStory(w http.ResponseWriter, r *http.Request) {
-	var id int
+	id := getRoomID(r)
-	fmt.Sscanf(r.PathValue("id"), "%d", &id)
+	user := r.Context().Value(userKey).(*lib.User)
 	title := r.FormValue("title")
 	_, err := lib.CreateStory(id, title)
 	if err != nil {
 		log.Printf("create story error: %v", err)
+		http.Error(w, "failed to create story", http.StatusInternalServerError)
+		return
+	}
+	broadcast(id, "stories")
+	if isHTMX(r) {
+		renderRoomStories(w, id, user)
+		return
 	}
-	broadcast(id, "refresh")
 	http.Redirect(w, r, fmt.Sprintf("/rooms/%d", id), http.StatusSeeOther)
 }
 
 func handleSetActiveStory(w http.ResponseWriter, r *http.Request) {
-	var id int
+	id := getRoomID(r)
-	fmt.Sscanf(r.PathValue("id"), "%d", &id)
+	user := r.Context().Value(userKey).(*lib.User)
-	storyID := r.FormValue("story_id")
 	var sid int
-	fmt.Sscanf(storyID, "%d", &sid)
+	fmt.Sscanf(r.FormValue("story_id"), "%d", &sid)
 
-	// Get the current room to find old active story
 	room, _ := lib.GetRoomByID(id)
-
-	// Unreveal and clear votes on the old active story (if any)
 	if room.ActiveStoryID != nil {
 		lib.UnrevealStory(*room.ActiveStoryID)
 		lib.ClearVotesForStory(*room.ActiveStoryID)
 	}
-
-	// Unreveal and clear votes on the new active story
 	lib.UnrevealStory(sid)
 	lib.ClearVotesForStory(sid)
-
-	// Set the new active story
 	lib.SetActiveStory(id, sid)
 
-	broadcast(id, "refresh")
+	broadcast(id, "stories")
+	broadcast(id, "members")
+	if isHTMX(r) {
+		renderRoomStories(w, id, user)
+		return
+	}
 	http.Redirect(w, r, fmt.Sprintf("/rooms/%d", id), http.StatusSeeOther)
 }
 
 func handleVote(w http.ResponseWriter, r *http.Request) {
-	var id int
+	id := getRoomID(r)
-	fmt.Sscanf(r.PathValue("id"), "%d", &id)
 	user := r.Context().Value(userKey).(*lib.User)
 	value := r.FormValue("value")
-	storyID := r.FormValue("story_id")
 	var sid int
-	fmt.Sscanf(storyID, "%d", &sid)
+	fmt.Sscanf(r.FormValue("story_id"), "%d", &sid)
+
 	lib.VoteOnStory(sid, user.ID, value)
-	broadcast(id, "members") // Updates member panel with checkmarks
+	broadcast(id, "members")
+	if story, err := lib.GetStoryByID(sid); err == nil && story.Voted {
+		broadcast(id, "stories")
+	}
 
 	if r.Header.Get("HX-Request") == "true" {
 		room, _ := lib.GetRoomByID(id)
-		stories, _ := lib.GetStoriesForRoom(id)
+		story, _ := lib.GetStoryByID(sid)
-		var st lib.Story
-		for _, s := range stories {
-			if s.ID == sid {
-				st = s
-				break
-			}
-		}
 		tmplData := struct {
 			RoomID   int
 			Story    lib.Story
@@ -471,11 +592,11 @@ func handleVote(w http.ResponseWriter, r *http.Request) {
 			UserVote string
 		}{
 			RoomID:   id,
-			Story:    st,
+			Story:    *story,
 			Scale:    room.Scale,
 			UserVote: value,
 		}
-		templates.ExecuteTemplate(w, "vote_form.html", tmplData)
+		renderTemplate(w, "vote_form.html", tmplData)
 		return
 	}
 
@@ -483,74 +604,81 @@ func handleVote(w http.ResponseWriter, r *http.Request) {
 }
 
 func handleReveal(w http.ResponseWriter, r *http.Request) {
-	var id int
+	id := getRoomID(r)
-	fmt.Sscanf(r.PathValue("id"), "%d", &id)
+	user := r.Context().Value(userKey).(*lib.User)
-	storyID := r.FormValue("story_id")
 	var sid int
-	fmt.Sscanf(storyID, "%d", &sid)
+	fmt.Sscanf(r.FormValue("story_id"), "%d", &sid)
 	lib.RevealVotes(sid)
-	broadcast(id, "refresh")
+	broadcast(id, "stories")
+	if isHTMX(r) {
+		renderRoomStories(w, id, user)
+		return
+	}
 	http.Redirect(w, r, fmt.Sprintf("/rooms/%d", id), http.StatusSeeOther)
 }
 
 func handleUnrevealStory(w http.ResponseWriter, r *http.Request) {
-	var id, sid int
+	id := getRoomID(r)
-	fmt.Sscanf(r.PathValue("id"), "%d", &id)
+	user := r.Context().Value(userKey).(*lib.User)
+	var sid int
 	fmt.Sscanf(r.PathValue("story_id"), "%d", &sid)
 	lib.UnrevealStory(sid)
-	broadcast(id, "refresh")
+	broadcast(id, "stories")
+	if isHTMX(r) {
+		renderRoomStories(w, id, user)
+		return
+	}
 	http.Redirect(w, r, fmt.Sprintf("/rooms/%d", id), http.StatusSeeOther)
 }
 
 func handleEditStoryForm(w http.ResponseWriter, r *http.Request) {
-	var id, sid int
+	roomID := getRoomID(r)
-	fmt.Sscanf(r.PathValue("id"), "%d", &id)
+	var storyID int
-	fmt.Sscanf(r.PathValue("story_id"), "%d", &sid)
+	fmt.Sscanf(r.PathValue("story_id"), "%d", &storyID)
-	stories, _ := lib.GetStoriesForRoom(id)
+	story, _ := lib.GetStoryByID(storyID)
-	var story lib.Story
+	data := struct {
-	for _, s := range stories {
-		if s.ID == sid {
-			story = s
-			break
-		}
-	}
-	tmplData := struct {
 		RoomID int
 		Story  lib.Story
 	}{
-		RoomID: id,
+		RoomID: roomID,
-		Story:  story,
+		Story:  *story,
-	}
-	if err := templates.ExecuteTemplate(w, "story_edit.html", tmplData); err != nil {
-		log.Printf("template error: %v", err)
 	}
+	renderTemplate(w, "story_edit.html", data)
 }
 
 func handleRenameStory(w http.ResponseWriter, r *http.Request) {
-	var id, sid int
+	id := getRoomID(r)
-	fmt.Sscanf(r.PathValue("id"), "%d", &id)
+	user := r.Context().Value(userKey).(*lib.User)
+	var sid int
 	fmt.Sscanf(r.PathValue("story_id"), "%d", &sid)
 	title := r.FormValue("title")
 	lib.RenameStory(sid, title)
-	broadcast(id, "refresh")
+	broadcast(id, "stories")
+	if isHTMX(r) {
+		renderRoomStories(w, id, user)
+		return
+	}
 	http.Redirect(w, r, fmt.Sprintf("/rooms/%d", id), http.StatusSeeOther)
 }
 
 func handleDeleteStory(w http.ResponseWriter, r *http.Request) {
-	var id, sid int
+	id := getRoomID(r)
-	fmt.Sscanf(r.PathValue("id"), "%d", &id)
+	user := r.Context().Value(userKey).(*lib.User)
+	var sid int
 	fmt.Sscanf(r.PathValue("story_id"), "%d", &sid)
 	lib.DeleteStory(sid)
-	broadcast(id, "refresh")
+	broadcast(id, "stories")
-	// Return empty HTML so the story-card is removed from the DOM
+	if isHTMX(r) {
-	w.Header().Set("Content-Type", "text/html")
+		renderRoomStories(w, id, user)
-	w.Write([]byte(""))
+		return
+	}
+	http.Redirect(w, r, fmt.Sprintf("/rooms/%d", id), http.StatusSeeOther)
 }
 
-func handleSSE(w http.ResponseWriter, r *http.Request) {
+// ==================== SSE ====================
-	var roomID int
-	fmt.Sscanf(r.PathValue("room_id"), "%d", &roomID)
 
+func handleSSE(w http.ResponseWriter, r *http.Request) {
+	roomID := getPathInt(r, "room_id")
 	user, ok := r.Context().Value(userKey).(*lib.User)
 	if !ok {
 		http.Error(w, "Unauthorized", http.StatusUnauthorized)
@@ -559,30 +687,36 @@ func handleSSE(w http.ResponseWriter, r *http.Request) {
 
 	ch := make(chan string, 10)
 	addSSEClient(roomID, user.ID, ch)
-
+	broadcast(roomID, "members") // notify others of new connection
-	// Broadcast members to other clients so they see the new member
-	go broadcast(roomID, "members")
 
 	w.Header().Set("Content-Type", "text/event-stream")
 	w.Header().Set("Cache-Control", "no-cache")
 	w.Header().Set("Connection", "keep-alive")
-	w.Header().Set("Access-Control-Allow-Origin", "*")
+	w.Header().Set("X-Accel-Buffering", "no")
 
 	flusher, ok := w.(http.Flusher)
 	if !ok {
+		http.Error(w, "streaming unsupported", http.StatusInternalServerError)
 		return
 	}
-
 	notify := r.Context().Done()
+	heartbeat := time.NewTicker(25 * time.Second)
+	defer heartbeat.Stop()
+
+	fmt.Fprint(w, ": connected\n\n")
+	flusher.Flush()
+
 	for {
 		select {
 		case <-notify:
 			removeSSEClient(roomID, ch)
-			// Broadcast members so others see member leave
+			broadcast(roomID, "members")
-			go broadcast(roomID, "members")
 			return
-		case msg := <-ch:
+		case <-heartbeat.C:
-			fmt.Fprintf(w, "event: room-%d\ndata: %s\n\n", roomID, msg)
+			fmt.Fprint(w, ": keep-alive\n\n")
+			flusher.Flush()
+		case event := <-ch:
+			fmt.Fprintf(w, "event: %s\ndata: true\n\n", event)
 			flusher.Flush()
 		}
 	}

lib/story.go

@@ -168,3 +168,20 @@ func tshirtToPoints(s string) float64 {
 		return float64(n)
 	}
 }
+
+func GetStoryByID(id int) (*Story, error) {
+	row := DB.QueryRow("SELECT id, room_id, title, points, voted FROM stories WHERE id = ?", id)
+	var s Story
+	var points sql.NullInt64
+	var voted int
+	err := row.Scan(&s.ID, &s.RoomID, &s.Title, &points, &voted)
+	if err != nil {
+		return nil, err
+	}
+	if points.Valid {
+		p := int(points.Int64)
+		s.Points = &p
+	}
+	s.Voted = voted == 1
+	return &s, nil
+}

static/styles/main.css

@@ -983,6 +983,10 @@ footer a:hover {
     min-height: 400px;
 }
 
+.room-stream {
+    display: none;
+}
+
 .stories-panel,
 .members-panel {
     background: var(--bg-surface);
@@ -1238,11 +1242,11 @@ footer a:hover {
     gap: 0.375rem;
     font-size: 0.75rem;
     font-weight: 500;
-    color: var(--success-text);
+    color: var(--text-muted);
     padding: 0.25rem 0.5rem;
     border-radius: var(--radius-full);
-    background: var(--success-bg);
+    background: var(--bg-surface-hover);
-    border: 1px solid var(--success-border);
+    border: 1px solid var(--border);
 }
 
 .mobile-menu-btn {
@@ -1265,6 +1269,16 @@ footer a:hover {
     width: 6px;
     height: 6px;
     border-radius: 50%;
+    background: var(--text-muted);
+}
+
+.sse-connected .sse-indicator {
+    color: var(--success-text);
+    background: var(--success-bg);
+    border-color: var(--success-border);
+}
+
+.sse-connected .sse-dot {
     background: var(--success-text);
     animation: pulse 2s ease infinite;
 }

templates/room.html

@@ -1,9 +1,10 @@
+{{define "room.html"}}
 <!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>{{.Name}} — SprintPadawan</title>
+        <title>{{.Room.Name}} — SprintPadawan</title>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
@@ -12,10 +13,23 @@
         />
         <link rel="stylesheet" href="/static/styles/main.css" />
         <script src="/static/js/htmx.min.js" defer></script>
+        <script src="/static/js/sse.js" defer></script>
     </head>
     <body class="app-body">
         <div class="app-shell">
-            <div id="sidebar-backdrop" class="sidebar-backdrop" onclick="document.getElementById('app-sidebar').classList.remove('open'); document.getElementById('sidebar-backdrop').classList.remove('open')"></div>
+            <div
+                id="sidebar-backdrop"
+                class="sidebar-backdrop"
+                onclick="
+                    document
+                        .getElementById('app-sidebar')
+                        .classList.remove('open');
+                    document
+                        .getElementById('sidebar-backdrop')
+                        .classList.remove('open');
+                "
+            ></div>
+
             <aside class="sidebar" id="app-sidebar">
                 <div class="sidebar-logo">
                     <div class="logo-icon">⚡</div>
@@ -46,7 +60,9 @@
 
                 <div class="sidebar-footer">
                     <div class="user-row">
-                        <div class="user-avatar">{{slice .User.Username 0 1}}</div>
+                        <div class="user-avatar">
+                            {{slice .User.Username 0 1}}
+                        </div>
                         <div class="user-info">
                             <span class="user-name">{{.User.Username}}</span>
                             <span class="user-role">Member</span>
@@ -79,28 +95,76 @@
 
             <div class="main-content">
                 <header class="topbar">
-                    <div style="display: flex; align-items: center; gap: 1rem;">
+                    <div style="display: flex; align-items: center; gap: 1rem">
-                        <button class="mobile-menu-btn" onclick="document.getElementById('app-sidebar').classList.toggle('open'); document.getElementById('sidebar-backdrop').classList.toggle('open')">
+                        <button
-                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            class="mobile-menu-btn"
+                            onclick="
+                                document
+                                    .getElementById('app-sidebar')
+                                    .classList.toggle('open');
+                                document
+                                    .getElementById('sidebar-backdrop')
+                                    .classList.toggle('open');
+                            "
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="20"
+                                height="20"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            >
                                 <line x1="3" y1="12" x2="21" y2="12"></line>
                                 <line x1="3" y1="6" x2="21" y2="6"></line>
                                 <line x1="3" y1="18" x2="21" y2="18"></line>
                             </svg>
                         </button>
                         <a href="/" class="back-btn">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="16"
+                                height="16"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            >
                                 <line x1="19" y1="12" x2="5" y2="12"></line>
                                 <polyline points="12 19 5 12 12 5"></polyline>
                             </svg>
                         </a>
-                        <span class="topbar-title">{{.Name}}</span>
+                        <span class="topbar-title">{{.Room.Name}}</span>
-                        <span class="room-code-badge">{{.Code}}</span>
+                        <span class="room-code-badge">{{.Room.Code}}</span>
                     </div>
-                    <div style="display: flex; align-items: center; gap: 0.75rem;">
+                    <div
-                        <span class="scale-badge">{{.Scale}}</span>
+                        style="display: flex; align-items: center; gap: 0.75rem"
+                    >
+                        <span class="scale-badge">{{.Room.Scale}}</span>
                         {{if .IsOwner}}
-                        <button hx-get="/rooms/{{.ID}}/stories/new" hx-target="#modal-container" hx-swap="innerHTML" class="btn-primary" style="width: auto; padding: 0.5rem 1rem;">
+                        <button
-                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            hx-get="/rooms/{{.Room.ID}}/stories/new"
+                            hx-target="#modal-container"
+                            hx-swap="innerHTML"
+                            class="btn-primary"
+                            style="width: auto; padding: 0.5rem 1rem"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="14"
+                                height="14"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2.5"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            >
                                 <line x1="12" y1="5" x2="12" y2="19"></line>
                                 <line x1="5" y1="12" x2="19" y2="12"></line>
                             </svg>
@@ -111,89 +175,147 @@
                 </header>
 
                 <main class="page-content">
+                    <div
+                        id="room-stream"
+                        class="room-stream"
+                        hx-ext="sse"
+                        sse-connect="/sse/{{.Room.ID}}"
+                    >
+                        <div
+                            hidden
+                            hx-get="/rooms/{{.Room.ID}}/partial/stories"
+                            hx-trigger="sse:stories"
+                            hx-target="#stories-panel"
+                            hx-swap="outerHTML"
+                        ></div>
+                        <div
+                            hidden
+                            hx-get="/rooms/{{.Room.ID}}/partial/members"
+                            hx-trigger="sse:members"
+                            hx-target="#members-panel"
+                            hx-swap="outerHTML"
+                        ></div>
+                    </div>
+
                     <div class="room-layout">
-                        <!-- stories list -->
+                        {{template "stories-panel" .}} {{template
-                        <div class="stories-panel">
+                        "members-panel" .}}
-                            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem;">
+                    </div>
-                                <h3 class="panel-title" style="margin-bottom: 0;">Stories</h3>
+                </main>
+            </div>
+        </div>
+
+        <div id="modal-container"></div>
+
+        {{template "sse-script"}}
+    </body>
+</html>
+{{end}} {{define "stories-panel"}}
+<div class="stories-panel" id="stories-panel">
+    <div
+        style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 1.5rem;
+        "
+    >
+        <h3 class="panel-title">Stories</h3>
         <div class="sse-indicator">
             <span class="sse-dot"></span>
             <span>Live</span>
         </div>
     </div>
-                            {{if .Stories}}
+    <div class="stories-list" id="stories-list">
-                            <div class="stories-list">
+        {{template "stories-list" .}}
-                                {{range .Stories}}
+    </div>
-                                {{$isActive := eq (derefInt $.ActiveStoryID) .ID}}
+</div>
-                                {{if or $.IsOwner (eq $.ActiveStoryID nil) $isActive .Voted}}
+{{end}} {{define "stories-list"}} {{range .Stories}} {{$isActive := eq (derefInt
-                                <div class="story-card {{if .Voted}}story-revealed{{end}} {{if $isActive}}story-active{{end}}" id="story-{{.ID}}">
+$.Room.ActiveStoryID) .ID}}
+<div
+    class="story-card {{if .Voted}}story-revealed{{end}} {{if $isActive}}story-active{{end}}"
+    id="story-{{.ID}}"
+>
     <div class="story-header">
         <span class="story-title">{{.Title}}</span>
         <div class="story-actions">
             {{if .Voted}}
             <span class="story-badge story-badge-revealed">Revealed</span>
             {{if $.IsOwner}}
-                                            <form method="POST" action="/rooms/{{$.ID}}/stories/{{.ID}}/unreveal" style="margin:0;">
+            <form
-                                                <button type="submit" class="story-btn story-btn-secondary">Hide</button>
+                method="POST"
+                action="/rooms/{{$.Room.ID}}/stories/{{.ID}}/unreveal"
+                hx-post="/rooms/{{$.Room.ID}}/stories/{{.ID}}/unreveal"
+                hx-target="#stories-panel"
+                hx-swap="outerHTML"
+                style="margin: 0"
+            >
+                <button type="submit" class="story-btn story-btn-secondary">
+                    Hide
+                </button>
             </form>
-                                            {{end}}
+            {{end}} {{else if $.IsOwner}} {{if $isActive}}
-                                            {{else if $.IsOwner}}
+            <form
-                                                {{if $isActive}}
+                method="POST"
-                                                <form method="POST" action="/rooms/{{$.ID}}/reveal" style="margin:0;">
+                action="/rooms/{{$.Room.ID}}/reveal"
+                hx-post="/rooms/{{$.Room.ID}}/reveal"
+                hx-target="#stories-panel"
+                hx-swap="outerHTML"
+                style="margin: 0"
+            >
                 <input type="hidden" name="story_id" value="{{.ID}}" />
-                                                    <button type="submit" class="story-btn story-btn-primary">Reveal</button>
+                <button type="submit" class="story-btn story-btn-primary">
+                    Reveal
+                </button>
             </form>
             <span class="story-badge story-badge-active">Active</span>
             {{else}}
-                                                <form method="POST" action="/rooms/{{$.ID}}/active" style="margin:0;">
+            <form
-                                                    <input type="hidden" name="story_id" value="{{.ID}}" />
+                method="POST"
-                                                    <button type="submit" class="story-btn story-btn-secondary">Set Active</button>
+                action="/rooms/{{$.Room.ID}}/active"
-                                                </form>
+                hx-post="/rooms/{{$.Room.ID}}/active"
-                                                {{end}}
+                hx-target="#stories-panel"
-                                            {{end}}
-                                            {{if $.IsOwner}}
-                                            <button type="button" class="story-action-btn" hx-get="/rooms/{{$.ID}}/stories/{{.ID}}/edit" hx-target="#modal-container" hx-swap="innerHTML" title="Rename">
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-                                                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
-                                                </svg>
-                                            </button>
-                                            <button type="button" class="story-action-btn story-action-delete" hx-post="/rooms/{{$.ID}}/stories/{{.ID}}/delete" hx-target="#story-{{.ID}}" hx-swap="outerHTML" hx-confirm="Delete this story?" title="Delete">
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                                    <polyline points="3 6 5 6 21 6"/>
-                                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
-                                                </svg>
-                                            </button>
-                                            {{end}}
-                                        </div>
-                                    </div>
-                                    {{if $isActive}}
-                                    {{$userVote := index $.UserVotes .ID}}
-                                    <div class="vote-form" id="vote-form-{{.ID}}">
-                                        {{$storyID := .ID}}
-                                        {{range scaleToOptions $.Scale}}
-                                        <button type="button"
-                                            hx-post="/rooms/{{$.ID}}/vote"
-                                            hx-target="#vote-form-{{$storyID}}"
                 hx-swap="outerHTML"
-                                            hx-vals='{"story_id":"{{$storyID}}","value":"{{.}}"}'
+                style="margin: 0"
-                                            class="vote-option {{if eq . $userVote}}vote-selected{{end}}">{{.}}</button>
+            >
-                                        {{end}}
+                <input type="hidden" name="story_id" value="{{.ID}}" />
-                                    </div>
+                <button type="submit" class="story-btn story-btn-secondary">
-                                    <div class="voting-progress" style="margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem;">
+                    Set Active
-                                        <div style="font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.75rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em;">Voting Progress</div>
+                </button>
-                                        <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+            </form>
-                                            {{range $.Members}}
+            {{end}} {{end}} {{if $.IsOwner}}
-                                            <div class="scale-badge" style="{{if .HasVoted}}color: var(--success-text); border-color: var(--success-border); background: var(--success-bg);{{else}}color: var(--text-muted); opacity: 0.7;{{end}}">
+            <button
-                                                {{.Username}} {{if .HasVoted}}✓{{else}}...{{end}}
+                type="button"
-                                            </div>
+                class="story-action-btn"
+                hx-get="/rooms/{{$.Room.ID}}/stories/{{.ID}}/edit"
+                hx-target="#modal-container"
+                hx-swap="innerHTML"
+                title="Rename"
+            >
+                ✎
+            </button>
+            <button
+                type="button"
+                class="story-action-btn story-action-delete"
+                hx-post="/rooms/{{$.Room.ID}}/stories/{{.ID}}/delete"
+                hx-target="#stories-panel"
+                hx-swap="outerHTML"
+                hx-confirm="Delete this story?"
+                title="Delete"
+            >
+                🗑
+            </button>
             {{end}}
         </div>
     </div>
-                                    {{end}}
+
-                                    {{if .Voted}}
+    {{if $isActive}}
+    <div id="vote-area">
+        {{template "vote-area" (dict "RoomData" $ "Story" .)}}
+    </div>
+    {{end}} {{if .Voted}}
     <div class="revealed-votes">
-                                        {{range index $.StoryVotes .ID}}
+        {{range (index $.StoryVotes .ID)}}
         <div class="revealed-vote">
             <span class="revealed-vote-user">{{.Username}}</span>
             <span class="revealed-vote-value">{{.Value}}</span>
@@ -202,26 +324,52 @@
     </div>
     {{end}}
 </div>
-                                {{end}}
-                                {{end}}
-                            </div>
 {{else}}
 <div class="empty-state">
     <p>No stories yet. Add one to start voting.</p>
 </div>
+{{end}} {{end}} {{define "vote-area"}} {{$data := .RoomData}} {{$story :=
+.Story}} {{$userVote := index $data.UserVotes $story.ID}}
+<div class="vote-form" id="vote-form-{{$story.ID}}">
+    {{range scaleToOptions $data.Room.Scale}}
+    <button
+        type="button"
+        hx-post="/rooms/{{$data.Room.ID}}/vote"
+        hx-target="#vote-form-{{$story.ID}}"
+        hx-swap="outerHTML"
+        hx-vals='{"story_id":"{{$story.ID}}","value":"{{.}}"}'
+        class="vote-option {{if eq . $userVote}}vote-selected{{end}}"
+    >
+        {{.}}
+    </button>
     {{end}}
 </div>
-
+{{end}} {{define "members-panel"}}
-                        <!-- members panel -->
+<div class="members-panel" id="members-panel">
-                        <div class="members-panel">
     <h3 class="panel-title">Members ({{len .Members}})</h3>
     <div class="members-list">
         {{range .Members}}
         <div class="member-row">
-                                    <div class="user-avatar" style="width: 28px; height: 28px; font-size: 0.7rem;">{{slice .Username 0 1}}</div>
+            <div
+                class="user-avatar"
+                style="width: 28px; height: 28px; font-size: 0.7rem"
+            >
+                {{slice .Username 0 1}}
+            </div>
             <span class="member-name">{{.Username}}</span>
             {{if .HasVoted}}
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--success-text)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: auto;">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="var(--success-text)"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                style="margin-left: auto"
+            >
                 <polyline points="20 6 9 17 4 12"></polyline>
             </svg>
             {{end}}
@@ -229,46 +377,18 @@
         {{end}}
     </div>
 </div>
-                    </div>
+{{end}} {{define "sse-script"}}
-                </main>
-            </div>
-        </div>
-
-        <!-- modal container -->
-        <div id="modal-container"></div>
-
 <script>
-            (function() {
+    document.addEventListener("htmx:sseOpen", function() {
-                var roomID = {{.ID}};
+        document.body.classList.add("sse-connected");
-                var evtSource = new EventSource("/sse/" + roomID);
-                evtSource.addEventListener("room-" + roomID, function(e) {
-                    if (e.data === "refresh") {
-                        window.location.reload();
-                    } else if (e.data === "members") {
-                        fetch(window.location.href)
-                            .then(res => res.text())
-                            .then(html => {
-                                var parser = new DOMParser();
-                                var doc = parser.parseFromString(html, "text/html");
-                                var newPanel = doc.querySelector('.members-panel');
-                                var oldPanel = document.querySelector('.members-panel');
-                                if (newPanel && oldPanel) {
-                                    oldPanel.replaceWith(newPanel);
-                                }
-                                var newProgress = doc.querySelector('.voting-progress');
-                                var oldProgress = document.querySelector('.voting-progress');
-                                if (newProgress && oldProgress) {
-                                    oldProgress.replaceWith(newProgress);
-                                }
-                                var newRevealed = doc.querySelector('.revealed-votes');
-                                var oldRevealed = document.querySelector('.revealed-votes');
-                                if (newRevealed && oldRevealed) {
-                                    oldRevealed.replaceWith(newRevealed);
-                                }
     });
-                    }
+
+    document.addEventListener("htmx:sseClose", function() {
+        document.body.classList.remove("sse-connected");
+    });
+
+    document.addEventListener("htmx:sseError", function() {
+        document.body.classList.remove("sse-connected");
     });
-            })();
 </script>
-    </body>
+{{end}}
-</html>

templates/story_edit.html

@@ -2,14 +2,33 @@
     <div class="modal" onclick="event.stopPropagation()">
         <div class="modal-header">
             <h2>Rename Story</h2>
-            <button class="modal-close" onclick="this.closest('.modal-overlay').remove()">&times;</button>
+            <button
+                class="modal-close"
+                onclick="this.closest('.modal-overlay').remove()"
+            >
+                ×
+            </button>
         </div>
-        <form method="POST" action="/rooms/{{.RoomID}}/stories/{{.Story.ID}}/rename" class="auth-form">
+        <form
+            method="POST"
+            action="/rooms/{{.RoomID}}/stories/{{.Story.ID}}/rename"
+            hx-post="/rooms/{{.RoomID}}/stories/{{.Story.ID}}/rename"
+            hx-target="#stories-panel"
+            hx-swap="outerHTML"
+            hx-on::after-request="if (event.detail.successful) document.getElementById('modal-container').innerHTML = ''"
+            class="auth-form"
+        >
             <div class="form-group">
                 <label class="form-label">Story Title</label>
-                <input class="form-input" type="text" name="title" value="{{.Story.Title}}" required />
+                <input
+                    class="form-input"
+                    type="text"
+                    name="title"
+                    value="{{.Story.Title}}"
+                    required
+                />
             </div>
-            <button class="btn-primary" type="submit">Save</button>
+            <button class="btn-primary" type="submit">Save Changes</button>
         </form>
     </div>
 </div>

templates/story_form.html

@@ -2,12 +2,31 @@
     <div class="modal" onclick="event.stopPropagation()">
         <div class="modal-header">
             <h2>Add Story</h2>
-            <button class="modal-close" onclick="this.closest('.modal-overlay').remove()">&times;</button>
+            <button
+                class="modal-close"
+                onclick="this.closest('.modal-overlay').remove()"
+            >
+                ×
+            </button>
         </div>
-        <form method="POST" action="/rooms/{{.ID}}/stories" class="auth-form">
+        <form
+            method="POST"
+            action="/rooms/{{.ID}}/stories"
+            hx-post="/rooms/{{.ID}}/stories"
+            hx-target="#stories-panel"
+            hx-swap="outerHTML"
+            hx-on::after-request="if (event.detail.successful) document.getElementById('modal-container').innerHTML = ''"
+            class="auth-form"
+        >
             <div class="form-group">
                 <label class="form-label">Story Title</label>
-                <input class="form-input" type="text" name="title" placeholder="e.g. As a user, I can..." required />
+                <input
+                    class="form-input"
+                    type="text"
+                    name="title"
+                    placeholder="e.g. As a user..."
+                    required
+                />
             </div>
             <button class="btn-primary" type="submit">Add Story</button>
         </form>

templates/vote_form.html

@@ -1,13 +1,15 @@
-<div class="vote-form" id="vote-form-{{.Story.ID}}">
+{{$userVote := .UserVote}} {{$roomID := .RoomID}} {{$storyID := .Story.ID}}
-    {{$userVote := .UserVote}}
+<div class="vote-form" id="vote-form-{{$storyID}}">
-    {{$roomID := .RoomID}}
-    {{$storyID := .Story.ID}}
     {{range scaleToOptions .Scale}}
-    <button type="button"
+    <button
+        type="button"
         hx-post="/rooms/{{$roomID}}/vote"
         hx-target="#vote-form-{{$storyID}}"
         hx-swap="outerHTML"
         hx-vals='{"story_id":"{{$storyID}}","value":"{{.}}"}'
-        class="vote-option {{if eq . $userVote}}vote-selected{{end}}">{{.}}</button>
+        class="vote-option {{if eq . $userVote}}vote-selected{{end}}"
+    >
+        {{.}}
+    </button>
     {{end}}
 </div>