Support updating application name from header

app/controller/application/general.go

@@ -4,12 +4,17 @@ import (
 	"context"
 
 	"github.com/cloudness-io/cloudness/types"
+	"github.com/cloudness-io/cloudness/types/check"
 )
 
 type UpdateIconInput struct {
 	Icon string `json:"icon"`
 }
 
+type UpdateNameInput struct {
+	Name string `json:"name"`
+}
+
 func (c *Controller) UpdateIcon(ctx context.Context, application *types.Application, in *UpdateIconInput) (*types.Application, error) {
 	application.Spec.Icon = in.Icon
 	err := application.UpdateSpecJSON()
@@ -18,3 +23,28 @@ func (c *Controller) UpdateIcon(ctx context.Context, application *types.Applicat
 	}
 	return c.applicationStore.UpdateSpec(ctx, application)
 }
+
+func (c *Controller) UpdateName(ctx context.Context, application *types.Application, in *UpdateNameInput) (*types.Application, error) {
+	if err := c.sanitizeNameUpdateInput(in); err != nil {
+		return nil, err
+	}
+
+	application.Name = in.Name
+	application.Spec.Name = in.Name
+	err := application.UpdateSpecJSON()
+	if err != nil {
+		return nil, err
+	}
+	return c.applicationStore.UpdateSpec(ctx, application)
+}
+
+func (c *Controller) sanitizeNameUpdateInput(in *UpdateNameInput) error {
+	errors := check.NewValidationErrors()
+	if err := check.DisplayName(in.Name); err != nil {
+		errors.AddValidationError("name", err)
+	}
+	if errors.HasError() {
+		return errors
+	}
+	return nil
+}

app/router/web.go

@@ -361,6 +361,7 @@ func setupApplication(r chi.Router, appCtx context.Context, envCtrl *environment
 			//Inject application here
 			r.Use(middlewareinject.InjectApplication(appCtrl))
 			r.Get("/", handlerapplication.HandleListDeployments(appCtrl, deploymentCtrl))
+			r.Patch("/name", handlerapplication.HandleUpdateName(appCtrl))
 			r.Patch("/icon", handlerapplication.HandleUpdateIcon(appCtrl))
 			r.Get("/deployments", handlerapplication.HandleListDeployments(appCtrl, deploymentCtrl))
 			r.Get("/settings", handlerapplication.HandleGetSettings(appCtrl, ghAppCtrl))

app/utils/routes/application.go

@@ -39,6 +39,7 @@ const (
 
 	//General Header
 	AppIcon = "icon"
+	AppName = "name"
 
 	AppSourceGithub    = "source/github"
 	AppSourceGitPublic = "source/git-public"

app/web/handler/application/general.go

@@ -35,3 +35,27 @@ func HandleUpdateIcon(appCtrl *application.Controller) http.HandlerFunc {
 		render.Redirect(w, routes.ApplicationCtx(ctx))
 	}
 }
+
+func HandleUpdateName(appCtrl *application.Controller) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		ctx := r.Context()
+
+		in := new(application.UpdateNameInput)
+		if err := json.NewDecoder(r.Body).Decode(in); err != nil {
+			log.Ctx(ctx).Error().Err(err).Msg("Error decoding request body")
+			render.ToastError(ctx, w, err)
+			return
+		}
+
+		app, _ := request.ApplicationFrom(ctx)
+
+		_, err := appCtrl.UpdateName(ctx, app, in)
+		if err != nil {
+			log.Ctx(ctx).Error().Err(err).Msg("Error updating name")
+			render.ToastError(ctx, w, err)
+			return
+		}
+
+		render.Redirect(w, routes.ApplicationCtx(ctx))
+	}
+}

app/web/views/components/vapplication/header.templ

@@ -11,29 +11,41 @@ import (
 
 templ appHeader(app *types.Application) {
 	<header class="relative h-16 shrink-0 box-border pl-1 md:pl-4">
-		<div id="header-content" class="flex box-border h-full py-2" x-data="{updateIconModel: false}">
+		<div
+			id="header-content"
+			class="flex box-border h-full py-2"
+			x-data="{updateIconModel: false, updateNameModel: false}"
+		>
 			@shared.Modal("updateIconModel", updateIconForm(app))
+			@shared.Modal("updateNameModel", updateNameForm(app))
 			<span
 				id="header-logo"
-				class="flex grow shrink-0 basis-auto items-center justify-center mr-2 relative group"
+				class="flex grow shrink-0 basis-auto items-center justify-center mr-2 cursor-pointer relative group"
 				x-on:click="updateIconModel = true"
 			>
 				if app.Spec.Icon != "" {
 					@shared.Icon(app.Spec.Icon, "overflow-hidden icon-2xl size-6")
 				} else {
 					@shared.Icon(icons.ApplicationIcon, "overflow-hidden icon-2xl size-6")
 				}
-				//show edit icon
-				<span
-					id="edit-icon"
-					class="absolute top-[0.2rem] right-[-0.5rem] hidden group-hover:block"
-				>
+				<span class="absolute top-[0.2rem] right-[-0.5rem] hidden group-hover:block">
 					<i class={ icons.EditIcon, "icon-sm" }></i>
 				</span>
 			</span>
 			<div id="title" class="flex-auto w-full">
 				<div id="title-top-row" class="flex items-baseline gap-2">
-					<h2 class="font-semibold text-xl">{ app.Name } </h2>
+					<div
+						id="name"
+						class="flex basis-auto items-center jusify-center cursor-pointer relative group"
+						x-on:click="updateNameModel = true"
+					>
+						<h2 class="font-semibold text-xl hover:bg-secondary">
+							{ app.Name }
+						</h2>
+						<span class="absolute top-[-0.2rem] right-[-0.5rem] hidden group-hover:block">
+							<i class={ icons.EditIcon, "icon-sm" }></i>
+						</span>
+					</div>
 					if app.Domain != "" {
 						<a href={ templ.SafeURL(app.Domain) } target="_blank">
 							@shared.Icon(icons.OutIcon, "cursor-pointer")
@@ -82,3 +94,31 @@ templ updateIconForm(app *types.Application) {
 		</footer>
 	</form>
 }
+
+templ updateNameForm(app *types.Application) {
+	<form class="flex flex-col gap-2" x-data={ fmt.Sprintf("{old:'%[1]s', name:'%[1]s'}", app.Name) }>
+		<h2 class="text-xl font-semibold">Update Application Name</h2>
+		@shared.Input(&shared.InputProps{
+			Name: "name",
+			Attrs: templ.Attributes{
+				"x-model": "name",
+			},
+		})
+		<footer class="flex w-full">
+			<div class="ml-auto flex w-full gap-x-4 sm:w-auto sm:whitespace-nowrap">
+				<button type="button" class="button-neutral" x-on:click="updateNameModel= false">
+					Close	
+				</button>
+				<button
+					type="submit"
+					class="button-primary"
+					:disabled="name== old"
+					hx-patch={ routes.AppName }
+					hx-swap="none"
+				>
+					Update	
+				</button>
+			</div>
+		</footer>
+	</form>
+}

app/web/views/shared/breadcrumb.templ

@@ -182,7 +182,7 @@ templ breadCrumbDropdown(crumb *bcItem, identifier bcIdentifier, isDropDownOpen
 		x-show={ isDropDownOpen }
 		x-on:click.away={ fmt.Sprintf("select('%[1]s', false)", isDropDownOpen) }
 		x-on:keydown.escape.window={ fmt.Sprintf("select('%[1]s', false)", isDropDownOpen) }
-		class="absolute top-8 z-10 w-56 min-h-16 divide-y divide-divider overflow-hidden rounded border border-divider bg-primary shadow-sm"
+		class="absolute top-8 z-10 w-56 min-h-max divide-y divide-divider overflow-hidden rounded border border-divider bg-primary shadow-sm"
 	>
 		<div
 			x-effect={ fmt.Sprintf("if (%s) $el.dispatchEvent(new Event('show'))", isDropDownOpen) }
@@ -193,7 +193,7 @@ templ breadCrumbDropdown(crumb *bcItem, identifier bcIdentifier, isDropDownOpen
 			hx-indicator={ "#" + identifier + "Indicator" }
 			hx-push-url="false"
 		>
-			<div id={ identifier + "Indicator" } class="flex items-center justify-center align-middle mt-5">
+			<div id={ identifier + "Indicator" } class="flex items-center justify-center align-middle min-h-14">
 				<div class="size-6">
 					<span class="spinner"></span>
 				</div>