TODO.md

@@ -20,6 +20,9 @@ regress.
 
 # Completed Steps
 
+- 2026-09-29: The app page shows the app's branch as a label in its title, next
+  to the status badge, instead of after the repository under it (#240).
+
 - 2026-09-29: An app's deployments page now lists only its 10 most recent
   deployments, newest first, instead of 50 (#238).
 

internal/handlers/app_branch_test.go

@@ -0,0 +1,46 @@
+package handlers_test
+
+import (
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+
+	"sneak.berlin/go/upaas/internal/service/app"
+)
+
+// TestAppPageTitleShowsBranch checks that an app's branch can be read from
+// the app page title, next to the status badge, without opening the edit page.
+func TestAppPageTitleShowsBranch(t *testing.T) {
+	t.Parallel()
+
+	testCtx := setupTestHandlers(t)
+
+	createdApp, err := testCtx.appSvc.CreateApp(t.Context(), app.CreateAppInput{
+		Name:    "branch-shown-app",
+		RepoURL: "git@example.com:user/branch-shown-app.git",
+		Branch:  "staging",
+	})
+	require.NoError(t, err)
+
+	request := httptest.NewRequestWithContext(
+		t.Context(), http.MethodGet, "/apps/"+createdApp.ID, nil,
+	)
+	request = addChiURLParams(request, map[string]string{"id": createdApp.ID})
+	recorder := httptest.NewRecorder()
+
+	testCtx.handlers.HandleAppDetail().ServeHTTP(recorder, request)
+
+	require.Equal(t, http.StatusOK, recorder.Code)
+
+	// The title row runs from the app name heading to the end of its div.
+	_, afterHeading, found := strings.Cut(recorder.Body.String(), "<h1")
+	require.True(t, found, "app page has no heading")
+
+	titleRow, _, _ := strings.Cut(afterHeading, "</div>")
+	assert.Contains(t, titleRow, `x-text="statusLabel"`)
+	assert.Contains(t, titleRow, ">staging</span>")
+}

templates/app_detail.html

@@ -26,11 +26,12 @@
     <!-- Header -->
     <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
         <div>
-            <div class="flex items-center gap-3">
+            <div class="flex flex-wrap items-center gap-3">
                 <h1 class="text-2xl font-medium text-gray-900">{{.App.Name}}</h1>
                 <span x-bind:class="statusBadgeClass" x-text="statusLabel"></span>
+                <span class="badge-neutral font-mono break-all" title="Branch">{{.App.Branch}}</span>
             </div>
-            <p class="text-gray-500 font-mono text-sm mt-1">{{.App.RepoURL}}@{{.App.Branch}}</p>
+            <p class="text-gray-500 font-mono text-sm mt-1">{{.App.RepoURL}}</p>
         </div>
         <div class="flex gap-3">
             <a href="/apps/{{.App.ID}}/edit" class="btn-secondary">Edit</a>