make subject required, submit new conversation form on ctrl + enter

- Adds new prop autofocus on text editor
- rename ConversationTextEditor to TextEditor

cmd/conversation.go

@@ -3,7 +3,6 @@ package main
 import (
 	"encoding/json"
 	"strconv"
-	"strings"
 	"time"
 
 	amodels "github.com/abhinavxd/libredesk/internal/auth/models"
@@ -11,6 +10,7 @@ import (
 	"github.com/abhinavxd/libredesk/internal/automation/models"
 	cmodels "github.com/abhinavxd/libredesk/internal/conversation/models"
 	"github.com/abhinavxd/libredesk/internal/envelope"
+	medModels "github.com/abhinavxd/libredesk/internal/media/models"
 	"github.com/abhinavxd/libredesk/internal/stringutil"
 	umodels "github.com/abhinavxd/libredesk/internal/user/models"
 	"github.com/valyala/fasthttp"
@@ -18,6 +18,18 @@ import (
 	"github.com/zerodha/fastglue"
 )
 
+type createConversationRequest struct {
+	InboxID         int    `json:"inbox_id" form:"inbox_id"`
+	AssignedAgentID int    `json:"agent_id" form:"agent_id"`
+	AssignedTeamID  int    `json:"team_id" form:"team_id"`
+	Email           string `json:"contact_email" form:"contact_email"`
+	FirstName       string `json:"first_name" form:"first_name"`
+	LastName        string `json:"last_name" form:"last_name"`
+	Subject         string `json:"subject" form:"subject"`
+	Content         string `json:"content" form:"content"`
+	Attachments     []int  `json:"attachments" form:"attachments"`
+}
+
 // handleGetAllConversations retrieves all conversations.
 func handleGetAllConversations(r *fastglue.Request) error {
 	var (
@@ -632,36 +644,32 @@ func filterCurrentConv(convs []cmodels.Conversation, uuid string) []cmodels.Conv
 // handleCreateConversation creates a new conversation and sends a message to it.
 func handleCreateConversation(r *fastglue.Request) error {
 	var (
-		app             = r.Context.(*App)
-		auser           = r.RequestCtx.UserValue("user").(amodels.User)
-		inboxID         = r.RequestCtx.PostArgs().GetUintOrZero("inbox_id")
-		assignedAgentID = r.RequestCtx.PostArgs().GetUintOrZero("agent_id")
-		assignedTeamID  = r.RequestCtx.PostArgs().GetUintOrZero("team_id")
-		email           = strings.TrimSpace(string(r.RequestCtx.PostArgs().Peek("contact_email")))
-		firstName       = strings.TrimSpace(string(r.RequestCtx.PostArgs().Peek("first_name")))
-		lastName        = strings.TrimSpace(string(r.RequestCtx.PostArgs().Peek("last_name")))
-		subject         = strings.TrimSpace(string(r.RequestCtx.PostArgs().Peek("subject")))
-		content         = strings.TrimSpace(string(r.RequestCtx.PostArgs().Peek("content")))
-		to              = []string{email}
+		app   = r.Context.(*App)
+		auser = r.RequestCtx.UserValue("user").(amodels.User)
+		req   = createConversationRequest{}
 	)
 
+	if err := r.Decode(&req, "json"); err != nil {
+		app.lo.Error("error decoding create conversation request", "error", err)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.request}"), nil, envelope.InputError)
+	}
+
+	to := []string{req.Email}
+
 	// Validate required fields
-	if inboxID <= 0 {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.fieldRequired", "name", "`inbox_id`"), nil, envelope.InputError)
+	if req.InboxID <= 0 {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.required", "name", "`inbox_id`"), nil, envelope.InputError)
 	}
-	if subject == "" {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.fieldRequired", "name", "`subject`"), nil, envelope.InputError)
+	if req.Content == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.required", "name", "`content`"), nil, envelope.InputError)
 	}
-	if content == "" {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.fieldRequired", "name", "`content`"), nil, envelope.InputError)
+	if req.Email == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.required", "name", "`contact_email`"), nil, envelope.InputError)
 	}
-	if email == "" {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.fieldRequired", "name", "`contact_email`"), nil, envelope.InputError)
+	if req.FirstName == "" {
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.required", "name", "`first_name`"), nil, envelope.InputError)
 	}
-	if firstName == "" {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.fieldRequired", "name", "`first_name`"), nil, envelope.InputError)
-	}
-	if !stringutil.ValidEmail(email) {
+	if !stringutil.ValidEmail(req.Email) {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`contact_email`"), nil, envelope.InputError)
 	}
 
@@ -671,7 +679,7 @@ func handleCreateConversation(r *fastglue.Request) error {
 	}
 
 	// Check if inbox exists and is enabled.
-	inbox, err := app.inbox.GetDBRecord(inboxID)
+	inbox, err := app.inbox.GetDBRecord(req.InboxID)
 	if err != nil {
 		return sendErrorEnvelope(r, err)
 	}
@@ -681,11 +689,11 @@ func handleCreateConversation(r *fastglue.Request) error {
 
 	// Find or create contact.
 	contact := umodels.User{
-		Email:           null.StringFrom(email),
-		SourceChannelID: null.StringFrom(email),
-		FirstName:       firstName,
-		LastName:        lastName,
-		InboxID:         inboxID,
+		Email:           null.StringFrom(req.Email),
+		SourceChannelID: null.StringFrom(req.Email),
+		FirstName:       req.FirstName,
+		LastName:        req.LastName,
+		InboxID:         req.InboxID,
 	}
 	if err := app.user.CreateContact(&contact); err != nil {
 		return sendErrorEnvelope(r, envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorCreating", "name", "{globals.terms.contact}"), nil))
@@ -695,10 +703,10 @@ func handleCreateConversation(r *fastglue.Request) error {
 	conversationID, conversationUUID, err := app.conversation.CreateConversation(
 		contact.ID,
 		contact.ContactChannelID,
-		inboxID,
+		req.InboxID,
 		"",         /** last_message **/
 		time.Now(), /** last_message_at **/
-		subject,
+		req.Subject,
 		true, /** append reference number to subject **/
 	)
 	if err != nil {
@@ -706,8 +714,19 @@ func handleCreateConversation(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.errorCreating", "name", "{globals.terms.conversation}"), nil))
 	}
 
+	// Prepare attachments.
+	var media = make([]medModels.Media, 0, len(req.Attachments))
+	for _, id := range req.Attachments {
+		m, err := app.media.Get(id, "")
+		if err != nil {
+			app.lo.Error("error fetching media", "error", err)
+			return r.SendErrorEnvelope(fasthttp.StatusInternalServerError, app.i18n.Ts("globals.messages.errorFetching", "name", "{globals.terms.media}"), nil, envelope.GeneralError)
+		}
+		media = append(media, m)
+	}
+
 	// Send reply to the created conversation.
-	if err := app.conversation.SendReply(nil /**media**/, inboxID, auser.ID /**sender_id**/, conversationUUID, content, to, nil /**cc**/, nil /**bcc**/, map[string]any{} /**meta**/); err != nil {
+	if err := app.conversation.SendReply(media, req.InboxID, auser.ID /**sender_id**/, conversationUUID, req.Content, to, nil /**cc**/, nil /**bcc**/, map[string]any{} /**meta**/); err != nil {
 		// Delete the conversation if reply fails.
 		if err := app.conversation.DeleteConversation(conversationUUID); err != nil {
 			app.lo.Error("error deleting conversation", "error", err)
@@ -716,11 +735,11 @@ func handleCreateConversation(r *fastglue.Request) error {
 	}
 
 	// Assign the conversation to the agent or team.
-	if assignedAgentID > 0 {
-		app.conversation.UpdateConversationUserAssignee(conversationUUID, assignedAgentID, user)
+	if req.AssignedAgentID > 0 {
+		app.conversation.UpdateConversationUserAssignee(conversationUUID, req.AssignedAgentID, user)
 	}
-	if assignedTeamID > 0 {
-		app.conversation.UpdateConversationTeamAssignee(conversationUUID, assignedTeamID, user)
+	if req.AssignedTeamID > 0 {
+		app.conversation.UpdateConversationTeamAssignee(conversationUUID, req.AssignedTeamID, user)
 	}
 
 	// Send the created conversation back to the client.

cmd/macro.go

@@ -81,8 +81,7 @@ func handleCreateMacro(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	err := app.macro.Create(macro.Name, macro.MessageContent, macro.UserID, macro.TeamID, macro.Visibility, macro.Actions)
-	if err != nil {
+	if err := app.macro.Create(macro.Name, macro.MessageContent, macro.UserID, macro.TeamID, macro.Visibility, macro.VisibleWhen, macro.Actions); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
@@ -110,7 +109,7 @@ func handleUpdateMacro(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	if err = app.macro.Update(id, macro.Name, macro.MessageContent, macro.UserID, macro.TeamID, macro.Visibility, macro.Actions); err != nil {
+	if err = app.macro.Update(id, macro.Name, macro.MessageContent, macro.UserID, macro.TeamID, macro.Visibility, macro.VisibleWhen, macro.Actions); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
@@ -275,13 +274,17 @@ func validateMacro(app *App, macro models.Macro) error {
 		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`name`"), nil)
 	}
 
+	if len(macro.VisibleWhen) == 0 {
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`visible_when`"), nil)
+	}
+
 	var act []autoModels.RuleAction
 	if err := json.Unmarshal(macro.Actions, &act); err != nil {
 		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.errorParsing", "name", "{globals.terms.macroAction}"), nil)
 	}
 	for _, a := range act {
 		if len(a.Value) == 0 {
-			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.emptyActionValue", "name", a.Type), nil)
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", a.Type), nil)
 		}
 	}
 	return nil

cmd/messages.go

@@ -132,7 +132,6 @@ func handleSendMessage(r *fastglue.Request) error {
 		app   = r.Context.(*App)
 		auser = r.RequestCtx.UserValue("user").(amodels.User)
 		cuuid = r.RequestCtx.UserValue("cuuid").(string)
-		media = []medModels.Media{}
 		req   = messageReq{}
 	)
 
@@ -153,6 +152,7 @@ func handleSendMessage(r *fastglue.Request) error {
 	}
 
 	// Prepare attachments.
+	var media = make([]medModels.Media, 0, len(req.Attachments))
 	for _, id := range req.Attachments {
 		m, err := app.media.Get(id, "")
 		if err != nil {
@@ -173,6 +173,5 @@ func handleSendMessage(r *fastglue.Request) error {
 		// Evaluate automation rules.
 		app.automation.EvaluateConversationUpdateRules(cuuid, models.EventConversationMessageOutgoing)
 	}
-
 	return r.SendEnvelope(true)
 }

cmd/sla.go

@@ -29,7 +29,7 @@ func handleGetSLA(r *fastglue.Request) error {
 	)
 	id, err := strconv.Atoi(r.RequestCtx.UserValue("id").(string))
 	if err != nil || id == 0 {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "SLA `id`"), nil, envelope.InputError)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
 	}
 
 	sla, err := app.sla.Get(id)
@@ -54,7 +54,7 @@ func handleCreateSLA(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	if err := app.sla.Create(sla.Name, sla.Description, sla.FirstResponseTime, sla.ResolutionTime, sla.Notifications); err != nil {
+	if err := app.sla.Create(sla.Name, sla.Description, sla.FirstResponseTime, sla.ResolutionTime, sla.NextResponseTime, sla.Notifications); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
@@ -70,7 +70,7 @@ func handleUpdateSLA(r *fastglue.Request) error {
 
 	id, err := strconv.Atoi(r.RequestCtx.UserValue("id").(string))
 	if err != nil || id == 0 {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "SLA `id`"), nil, envelope.InputError)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
 	}
 
 	if err := r.Decode(&sla, "json"); err != nil {
@@ -81,11 +81,11 @@ func handleUpdateSLA(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	if err := app.sla.Update(id, sla.Name, sla.Description, sla.FirstResponseTime, sla.ResolutionTime, sla.Notifications); err != nil {
+	if err := app.sla.Update(id, sla.Name, sla.Description, sla.FirstResponseTime, sla.ResolutionTime, sla.NextResponseTime, sla.Notifications); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	return r.SendEnvelope("SLA updated successfully.")
+	return r.SendEnvelope(true)
 }
 
 // handleDeleteSLA deletes the SLA with the given ID.
@@ -95,7 +95,7 @@ func handleDeleteSLA(r *fastglue.Request) error {
 	)
 	id, err := strconv.Atoi(r.RequestCtx.UserValue("id").(string))
 	if err != nil || id == 0 {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "SLA `id`"), nil, envelope.InputError)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
 	}
 
 	if err = app.sla.Delete(id); err != nil {
@@ -108,51 +108,79 @@ func handleDeleteSLA(r *fastglue.Request) error {
 // validateSLA validates the SLA policy and returns an envelope.Error if any validation fails.
 func validateSLA(app *App, sla *smodels.SLAPolicy) error {
 	if sla.Name == "" {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA `name`"), nil)
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`name`"), nil)
 	}
-	if sla.FirstResponseTime == "" {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA `first_response_time`"), nil)
-	}
-	if sla.ResolutionTime == "" {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA `resolution_time`"), nil)
+	if sla.FirstResponseTime.String == "" && sla.NextResponseTime.String == "" && sla.ResolutionTime.String == "" {
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "At least one of `first_response_time`, `next_response_time`, or `resolution_time` must be provided."), nil)
 	}
 
-	// Validate notifications if any
+	// Validate notifications if any.
 	for _, n := range sla.Notifications {
 		if n.Type == "" {
-			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA notification `type`"), nil)
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`type`"), nil)
 		}
 		if n.TimeDelayType == "" {
-			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA notification `time_delay_type`"), nil)
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`time_delay_type`"), nil)
+		}
+		if n.Metric == "" {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`metric`"), nil)
 		}
 		if n.TimeDelayType != "immediately" {
 			if n.TimeDelay == "" {
-				return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA notification `time_delay`"), nil)
+				return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`time_delay`"), nil)
+			}
+			// Validate time delay duration.
+			td, err := time.ParseDuration(n.TimeDelay)
+			if err != nil {
+				return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`time_delay`"), nil)
+			}
+			if td.Minutes() < 1 {
+				return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`time_delay`"), nil)
 			}
 		}
 		if len(n.Recipients) == 0 {
-			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA notification `recipients`"), nil)
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`recipients`"), nil)
 		}
 	}
 
-	// Validate time duration strings
-	frt, err := time.ParseDuration(sla.FirstResponseTime)
-	if err != nil {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`first_response_time`"), nil)
-	}
-	if frt.Minutes() < 1 {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`first_response_time`"), nil)
+	// Validate first response time duration string if not empty.
+	if sla.FirstResponseTime.String != "" {
+		frt, err := time.ParseDuration(sla.FirstResponseTime.String)
+		if err != nil {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`first_response_time`"), nil)
+		}
+		if frt.Minutes() < 1 {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`first_response_time`"), nil)
+		}
 	}
 
-	rt, err := time.ParseDuration(sla.ResolutionTime)
-	if err != nil {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`resolution_time`"), nil)
+	// Validate resolution time duration string if not empty.
+	if sla.ResolutionTime.String != "" {
+		rt, err := time.ParseDuration(sla.ResolutionTime.String)
+		if err != nil {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`resolution_time`"), nil)
+		}
+		if rt.Minutes() < 1 {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`resolution_time`"), nil)
+		}
+		// Compare with first response time if both are present.
+		if sla.FirstResponseTime.String != "" {
+			frt, _ := time.ParseDuration(sla.FirstResponseTime.String)
+			if frt > rt {
+				return envelope.NewError(envelope.InputError, app.i18n.T("sla.firstResponseTimeAfterResolution"), nil)
+			}
+		}
 	}
-	if rt.Minutes() < 1 {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`resolution_time`"), nil)
-	}
-	if frt > rt {
-		return envelope.NewError(envelope.InputError, app.i18n.T("sla.firstResponseTimeAfterResolution"), nil)
+
+	// Validate next response time duration string if not empty.
+	if sla.NextResponseTime.String != "" {
+		nrt, err := time.ParseDuration(sla.NextResponseTime.String)
+		if err != nil {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`next_response_time`"), nil)
+		}
+		if nrt.Minutes() < 1 {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`next_response_time`"), nil)
+		}
 	}
 
 	return nil

cmd/users.go

@@ -72,15 +72,26 @@ func handleUpdateAgentAvailability(r *fastglue.Request) error {
 		status = string(r.RequestCtx.PostArgs().Peek("status"))
 		ip     = realip.FromRequest(r.RequestCtx)
 	)
+	agent, err := app.user.GetAgent(auser.ID, "")
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	// Same status?
+	if agent.AvailabilityStatus == status {
+		return r.SendEnvelope(true)
+	}
 
 	// Update availability status.
 	if err := app.user.UpdateAvailability(auser.ID, status); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	// Create activity log.
-	if err := app.activityLog.UserAvailability(auser.ID, auser.Email, status, ip, "", 0); err != nil {
-		app.lo.Error("error creating activity log", "error", err)
+	// Skip activity log if agent returns online from away (to avoid spam).
+	if !(agent.AvailabilityStatus == models.Away && status == models.Online) {
+		if err := app.activityLog.UserAvailability(auser.ID, auser.Email, status, ip, "", 0); err != nil {
+			app.lo.Error("error creating activity log", "error", err)
+		}
 	}
 
 	return r.SendEnvelope(true)

frontend/index.html

@@ -6,8 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
     rel="stylesheet">
 </head>
 

frontend/package.json

@@ -33,7 +33,7 @@
     "@tiptap/vue-3": "^2.4.0",
     "@unovis/ts": "^1.4.4",
     "@unovis/vue": "^1.4.4",
-    "@vee-validate/zod": "^4.13.2",
+    "@vee-validate/zod": "^4.15.0",
     "@vueuse/core": "^12.4.0",
     "axios": "^1.8.2",
     "class-variance-authority": "^0.7.0",
@@ -47,7 +47,7 @@
     "radix-vue": "^1.9.17",
     "reka-ui": "^2.2.0",
     "tailwind-merge": "^2.3.0",
-    "vee-validate": "^4.13.2",
+    "vee-validate": "^4.15.0",
     "vue": "^3.4.37",
     "vue-dompurify-html": "^5.2.0",
     "vue-i18n": "9",
@@ -57,7 +57,7 @@
     "vue-sonner": "^1.3.0",
     "vue3-emoji-picker": "^1.1.8",
     "vuedraggable": "^4.1.0",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

frontend/pnpm-lock.yaml

@@ -60,7 +60,7 @@ importers:
         specifier: ^1.4.4
         version: 1.5.0(@unovis/ts@1.5.0)(vue@3.5.13(typescript@5.7.3))
       '@vee-validate/zod':
-        specifier: ^4.13.2
+        specifier: ^4.15.0
         version: 4.15.0(vue@3.5.13(typescript@5.7.3))(zod@3.24.1)
       '@vueuse/core':
         specifier: ^12.4.0
@@ -102,7 +102,7 @@ importers:
         specifier: ^2.3.0
         version: 2.6.0
       vee-validate:
-        specifier: ^4.13.2
+        specifier: ^4.15.0
         version: 4.15.0(vue@3.5.13(typescript@5.7.3))
       vue:
         specifier: ^3.4.37
@@ -132,7 +132,7 @@ importers:
         specifier: ^4.1.0
         version: 4.1.0(vue@3.5.13(typescript@5.7.3))
       zod:
-        specifier: ^3.23.8
+        specifier: ^3.24.1
         version: 3.24.1
     devDependencies:
       '@rushstack/eslint-patch':

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex w-full h-screen">
+  <div class="flex w-full h-screen text-foreground">
     <!-- Icon sidebar always visible -->
     <SidebarProvider style="--sidebar-width: 3rem" class="w-auto z-50">
       <ShadcnSidebar collapsible="none" class="border-r">
@@ -8,38 +8,64 @@
             <SidebarGroupContent>
               <SidebarMenu>
                 <SidebarMenuItem>
-                  <SidebarMenuButton asChild :isActive="route.path.startsWith('/inboxes')">
-                    <router-link :to="{ name: 'inboxes' }">
-                      <Inbox />
-                    </router-link>
-                  </SidebarMenuButton>
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <SidebarMenuButton asChild :isActive="route.path.startsWith('/inboxes')">
+                        <router-link :to="{ name: 'inboxes' }">
+                          <Inbox />
+                        </router-link>
+                      </SidebarMenuButton>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p>{{ t('globals.terms.inbox', 2) }}</p>
+                    </TooltipContent>
+                  </Tooltip>
                 </SidebarMenuItem>
-                <SidebarMenuItem>
-                  <SidebarMenuButton
-                    asChild
-                    :isActive="route.path.startsWith('/contacts')"
-                    v-if="userStore.can('contacts:read_all')"
-                  >
-                    <router-link :to="{ name: 'contacts' }">
-                      <BookUser />
-                    </router-link>
-                  </SidebarMenuButton>
+                <SidebarMenuItem v-if="userStore.can('contacts:read_all')">
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <SidebarMenuButton asChild :isActive="route.path.startsWith('/contacts')">
+                        <router-link :to="{ name: 'contacts' }">
+                          <BookUser />
+                        </router-link>
+                      </SidebarMenuButton>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p>{{ t('globals.terms.contact', 2) }}</p>
+                    </TooltipContent>
+                  </Tooltip>
                 </SidebarMenuItem>
                 <SidebarMenuItem v-if="userStore.hasReportTabPermissions">
-                  <SidebarMenuButton asChild :isActive="route.path.startsWith('/reports')">
-                    <router-link :to="{ name: 'reports' }">
-                      <FileLineChart />
-                    </router-link>
-                  </SidebarMenuButton>
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <SidebarMenuButton asChild :isActive="route.path.startsWith('/reports')">
+                        <router-link :to="{ name: 'reports' }">
+                          <FileLineChart />
+                        </router-link>
+                      </SidebarMenuButton>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p>{{ t('globals.terms.report', 2) }}</p>
+                    </TooltipContent>
+                  </Tooltip>
                 </SidebarMenuItem>
                 <SidebarMenuItem v-if="userStore.hasAdminTabPermissions">
-                  <SidebarMenuButton asChild :isActive="route.path.startsWith('/admin')">
-                    <router-link
-                      :to="{ name: userStore.can('general_settings:manage') ? 'general' : 'admin' }"
-                    >
-                      <Shield />
-                    </router-link>
-                  </SidebarMenuButton>
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <SidebarMenuButton asChild :isActive="route.path.startsWith('/admin')">
+                        <router-link
+                          :to="{
+                            name: userStore.can('general_settings:manage') ? 'general' : 'admin'
+                          }"
+                        >
+                          <Shield />
+                        </router-link>
+                      </SidebarMenuButton>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p>{{ t('globals.terms.admin') }}</p>
+                    </TooltipContent>
+                  </Tooltip>
                 </SidebarMenuItem>
               </SidebarMenu>
             </SidebarGroupContent>
@@ -80,7 +106,7 @@
   <Command />
 
   <!-- Create conversation dialog -->
-  <CreateConversation v-model="openCreateConversationDialog" />
+  <CreateConversation v-model="openCreateConversationDialog" v-if="openCreateConversationDialog" />
 </template>
 
 <script setup>
@@ -122,6 +148,7 @@ import {
   SidebarMenuItem,
   SidebarProvider
 } from '@/components/ui/sidebar'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import SidebarNavUser from '@/components/sidebar/SidebarNavUser.vue'
 
 const route = useRoute()

frontend/src/Root.vue

@@ -1,9 +1,7 @@
 <template>
   <TooltipProvider :delay-duration="150">
-    <div class="!font-jakarta">
-      <Toaster class="pointer-events-auto" position="top-center" richColors />
-      <RouterView />
-    </div>
+    <Toaster class="pointer-events-auto" position="top-center" richColors />
+    <RouterView />
   </TooltipProvider>
 </template>
 

frontend/src/api/index.js

@@ -231,7 +231,11 @@ const updateConversationCustomAttribute = (uuid, data) => http.put(`/api/v1/conv
       'Content-Type': 'application/json'
     }
   })
-const createConversation = (data) => http.post('/api/v1/conversations', data)
+const createConversation = (data) => http.post('/api/v1/conversations', data, {
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
 const updateConversationStatus = (uuid, data) => http.put(`/api/v1/conversations/${uuid}/status`, data)
 const updateConversationPriority = (uuid, data) => http.put(`/api/v1/conversations/${uuid}/priority`, data)
 const updateAssigneeLastSeen = (uuid) => http.put(`/api/v1/conversations/${uuid}/last-seen`)

frontend/src/assets/styles/main.scss

@@ -13,12 +13,20 @@
     min-height: 100%;
     overflow: hidden;
     margin: 0;
+    @apply bg-background text-foreground;
+  }
 
-    @media (max-width: 768px) {
+  @media (max-width: 768px) {
+    html,
+    body {
       overflow-x: auto;
     }
   }
 
+  * {
+    @apply border-border;
+  }
+
   .native-html {
     p {
       margin-bottom: 0.5rem;
@@ -61,10 +69,39 @@
       }
     }
   }
-}
+  :root {
+    --sidebar-background: 0 0% 100%;
+    --sidebar-foreground: 240 5.9% 10%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  :root {
+    --vis-tooltip-background-color: none !important;
+    --vis-tooltip-border-color: none !important;
+    --vis-tooltip-text-color: none !important;
+    --vis-tooltip-shadow-color: none !important;
+    --vis-tooltip-backdrop-filter: none !important;
+    --vis-tooltip-padding: none !important;
+    --vis-primary-color: var(--primary);
+    --vis-secondary-color: 160 81% 40%;
+    --vis-text-color: var(--muted-foreground);
+  }
 
-// Theme.
-@layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
@@ -97,7 +134,7 @@
   }
 
   .dark {
-    --background: 240 10% 3.9%;
+    --background: 240 5.9% 10%;
     --foreground: 0 0% 98%;
 
     --card: 240 10% 3.9%;
@@ -127,64 +164,8 @@
   }
 }
 
-@layer base {
-  :root {
-    --vis-tooltip-background-color: none !important;
-    --vis-tooltip-border-color: none !important;
-    --vis-tooltip-text-color: none !important;
-    --vis-tooltip-shadow-color: none !important;
-    --vis-tooltip-backdrop-filter: none !important;
-    --vis-tooltip-padding: none !important;
-    --vis-primary-color: var(--primary);
-    --vis-secondary-color: 160 81% 40%;
-    --vis-text-color: var(--muted-foreground);
-  }
-}
-
-// Shake animation
-@keyframes shake {
-  0% {
-    transform: translateX(0);
-  }
-  15% {
-    transform: translateX(-5px);
-  }
-  25% {
-    transform: translateX(5px);
-  }
-  35% {
-    transform: translateX(-5px);
-  }
-  45% {
-    transform: translateX(5px);
-  }
-  55% {
-    transform: translateX(-5px);
-  }
-  65% {
-    transform: translateX(5px);
-  }
-  75% {
-    transform: translateX(-5px);
-  }
-  85% {
-    transform: translateX(5px);
-  }
-  95% {
-    transform: translateX(-5px);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-
-.animate-shake {
-  animation: shake 0.5s infinite;
-}
-
 .message-bubble {
-  @apply flex flex-col px-4 pt-2 pb-3 w-fit min-w-[30%] max-w-full border overflow-x-auto rounded-xl;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  @apply flex flex-col px-4 pt-2 pb-3 w-fit min-w-[30%] max-w-full border overflow-x-auto rounded shadow-sm;
   table {
     width: 100% !important;
     table-layout: fixed !important;
@@ -200,7 +181,7 @@
 }
 
 .box {
-  @apply border shadow rounded-lg;
+  @apply border shadow rounded;
 }
 
 // Scrollbar start
@@ -227,84 +208,9 @@
 // End Scrollbar
 
 .code-editor {
-  @apply rounded-md border shadow h-[65vh] min-h-[250px] w-full relative;
+  @apply rounded border shadow h-[65vh] min-h-[250px] w-full relative;
 }
 
-.ql-container {
-  margin: 0 !important;
-}
-
-.ql-container .ql-editor {
-  height: 300px !important;
-  border-radius: var(--radius) !important;
-  @apply rounded-lg rounded-t-none;
-}
-
-.ql-toolbar {
-  @apply rounded-t-lg;
-}
-
-.blinking-dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  background-color: red;
-  border-radius: 50%;
-  animation: blink 2s infinite;
-}
-
-@keyframes blink {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-}
-
-// Sidebar start
-@layer base {
-  :root {
-    --sidebar-background: 0 0% 96%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .dark {
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-a[data-active='true'] {
-  background-color: hsl(var(--sidebar-background)) !important;
-  color: hsl(var(--sidebar-accent-foreground)) !important;
-  font-weight: 500;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-}
-a[data-active='false']:hover {
-  background-color: hsl(var(--sidebar-accent)) !important;
-  color: hsl(var(--sidebar-accent-foreground)) !important;
-  font-weight: 500;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-}
-// Sidebar end
-
 .show-quoted-text {
   blockquote {
     @apply block;
@@ -317,37 +223,6 @@ a[data-active='false']:hover {
   }
 }
 
-.dot-loader {
-  display: inline-flex;
-  align-items: center;
-}
-
-.dot {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background-color: currentColor;
-  margin: 0 2px;
-  animation: dot-flashing 1s infinite linear alternate;
-}
-
-.dot:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.dot:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes dot-flashing {
-  0% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 [data-radix-popper-content-wrapper] {
   z-index: 9999 !important;
 }

frontend/src/components/button/CloseButton.vue

@@ -0,0 +1,24 @@
+<template>
+  <Button
+    variant="ghost"
+    @click.prevent="onClose"
+    size="xs"
+    class="text-gray-400 dark:text-gray-500 hover:text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 w-6 h-6 p-0"
+  >
+    <slot>
+      <X size="16" />
+    </slot>
+  </Button>
+</template>
+
+<script setup>
+import { Button } from '@/components/ui/button'
+import { X } from 'lucide-vue-next'
+
+defineProps({
+  onClose: {
+    type: Function,
+    required: true
+  }
+})
+</script>

frontend/src/components/combobox/SelectCombobox.vue

@@ -0,0 +1,61 @@
+<template>
+  <ComboBox
+    :model-value="normalizedValue"
+    @update:model-value="$emit('update:modelValue', $event)"
+    :items="items"
+    :placeholder="placeholder"
+  >
+    <!-- Items -->
+    <template #item="{ item }">
+      <div class="flex items-center gap-2">
+        <!--USER -->
+        <Avatar v-if="type === 'user'" class="w-7 h-7">
+          <AvatarImage :src="item.avatar_url || ''" :alt="item.label.slice(0, 2)" />
+          <AvatarFallback>{{ item.label.slice(0, 2).toUpperCase() }}</AvatarFallback>
+        </Avatar>
+
+        <!-- Others -->
+        <span v-else-if="item.emoji">{{ item.emoji }}</span>
+        <span>{{ item.label }}</span>
+      </div>
+    </template>
+
+    <!-- Selected -->
+    <template #selected="{ selected }">
+      <div class="flex items-center gap-2">
+        <div v-if="selected" class="flex items-center gap-2">
+          <!--USER -->
+          <Avatar v-if="type === 'user'" class="w-7 h-7">
+            <AvatarImage :src="selected.avatar_url || ''" :alt="selected.label.slice(0, 2)" />
+            <AvatarFallback>{{ selected.label.slice(0, 2).toUpperCase() }}</AvatarFallback>
+          </Avatar>
+
+          <!-- Others -->
+          <span v-else-if="selected.emoji">{{ selected.emoji }}</span>
+          <span>{{ selected.label }}</span>
+        </div>
+        <span v-else>{{ placeholder }}</span>
+      </div>
+    </template>
+  </ComboBox>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
+import ComboBox from '@/components/ui/combobox/ComboBox.vue'
+
+const props = defineProps({
+  modelValue: [String, Number, Object],
+  placeholder: String,
+  items: Array,
+  type: {
+    type: String
+  }
+})
+
+// Convert to str.
+const normalizedValue = computed(() => String(props.modelValue || ''))
+
+defineEmits(['update:modelValue'])
+</script>

frontend/src/components/datatable/DataTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <div class="rounded-md border shadow">
+    <div class="rounded border shadow">
       <Table>
         <TableHeader>
           <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">

frontend/src/components/editor/TextEditor.vue

@@ -4,7 +4,7 @@
       :editor="editor"
       :tippy-options="{ duration: 100 }"
       v-if="editor"
-      class="bg-white p-1 box will-change-transform"
+      class="bg-background p-1 box will-change-transform"
     >
       <div class="flex space-x-1 items-center">
         <DropdownMenu v-if="aiPrompts.length > 0">
@@ -32,7 +32,7 @@
           variant="ghost"
           @click.prevent="isBold = !isBold"
           :active="isBold"
-          :class="{ 'bg-gray-200': isBold }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': isBold }"
         >
           <Bold size="14" />
         </Button>
@@ -41,7 +41,7 @@
           variant="ghost"
           @click.prevent="isItalic = !isItalic"
           :active="isItalic"
-          :class="{ 'bg-gray-200': isItalic }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': isItalic }"
         >
           <Italic size="14" />
         </Button>
@@ -49,7 +49,7 @@
           size="sm"
           variant="ghost"
           @click.prevent="toggleBulletList"
-          :class="{ 'bg-gray-200': editor?.isActive('bulletList') }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('bulletList') }"
         >
           <List size="14" />
         </Button>
@@ -58,7 +58,7 @@
           size="sm"
           variant="ghost"
           @click.prevent="toggleOrderedList"
-          :class="{ 'bg-gray-200': editor?.isActive('orderedList') }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('orderedList') }"
         >
           <ListOrdered size="14" />
         </Button>
@@ -66,16 +66,16 @@
           size="sm"
           variant="ghost"
           @click.prevent="openLinkModal"
-          :class="{ 'bg-gray-200': editor?.isActive('link') }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('link') }"
         >
           <LinkIcon size="14" />
         </Button>
-        <div v-if="showLinkInput" class="flex space-x-2 p-2 bg-white border rounded-lg">
-          <input
+        <div v-if="showLinkInput" class="flex space-x-2 p-2 bg-background border rounded">
+          <Input
             v-model="linkUrl"
             type="text"
             placeholder="Enter link URL"
-            class="border p-1 text-sm"
+            class="border p-1 text-sm w-[200px]"
           />
           <Button size="sm" @click="setLink">
             <Check size="14" />
@@ -91,7 +91,7 @@
 </template>
 
 <script setup>
-import { ref, watch, watchEffect, onUnmounted } from 'vue'
+import { ref, watch, watchEffect, onUnmounted, computed } from 'vue'
 import { useEditor, EditorContent, BubbleMenu } from '@tiptap/vue-3'
 import {
   ChevronDown,
@@ -111,6 +111,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import { Input } from '@/components/ui/input'
 import Placeholder from '@tiptap/extension-placeholder'
 import Image from '@tiptap/extension-image'
 import StarterKit from '@tiptap/starter-kit'
@@ -135,6 +136,10 @@ const props = defineProps({
   setInlineImage: Object,
   insertContent: String,
   clearContent: Boolean,
+  autoFocus: {
+    type: Boolean,
+    default: true
+  },
   aiPrompts: {
     type: Array,
     default: () => []
@@ -187,7 +192,7 @@ const CustomTableHeader = TableHeader.extend({
   }
 })
 
-const editorConfig = {
+const editorConfig = computed(() => ({
   extensions: [
     StarterKit.configure(),
     Image.configure({ HTMLAttributes: { class: 'inline-image' } }),
@@ -200,7 +205,7 @@ const editorConfig = {
     CustomTableCell,
     CustomTableHeader
   ],
-  autofocus: true,
+  autofocus: props.autoFocus,
   editorProps: {
     attributes: { class: 'outline-none' },
     handleKeyDown: (view, event) => {
@@ -209,17 +214,17 @@ const editorConfig = {
         return true
       }
       if (event.ctrlKey && event.key.toLowerCase() === 'b') {
-         // Prevent outer listeners
+        // Prevent outer listeners
         event.stopPropagation()
         return false
       }
     }
   }
-}
+}))
 
 const editor = ref(
   useEditor({
-    ...editorConfig,
+    ...editorConfig.value,
     content: htmlContent.value,
     onSelectionUpdate: ({ editor }) => {
       const { from, to } = editor.state.selection

frontend/src/components/filter/FilterBuilder.vue

@@ -44,79 +44,47 @@
         <div class="flex-1">
           <div v-if="modelFilter.field && modelFilter.operator">
             <template v-if="modelFilter.operator !== 'set' && modelFilter.operator !== 'not set'">
-              <ComboBox
-                v-if="getFieldOptions(modelFilter).length > 0"
+              <SelectComboBox
+                v-if="
+                  getFieldOptions(modelFilter).length > 0 &&
+                  modelFilter.field === 'assigned_user_id'
+                "
                 v-model="modelFilter.value"
                 :items="getFieldOptions(modelFilter)"
                 :placeholder="t('form.field.select')"
-              >
-                <template #item="{ item }">
-                  <div v-if="modelFilter.field === 'assigned_user_id'">
-                    <div class="flex items-center gap-1">
-                      <Avatar class="w-6 h-6">
-                        <AvatarImage :src="item.avatar_url || ''" :alt="item.label.slice(0, 2)" />
-                        <AvatarFallback>{{ item.label.slice(0, 2).toUpperCase() }} </AvatarFallback>
-                      </Avatar>
-                      <span>{{ item.label }}</span>
-                    </div>
-                  </div>
-                  <div v-else-if="modelFilter.field === 'assigned_team_id'">
-                    <div class="flex items-center gap-2 ml-2">
-                      <span>{{ item.emoji }}</span>
-                      <span>{{ item.label }}</span>
-                    </div>
-                  </div>
-                  <div v-else>
-                    {{ item.label }}
-                  </div>
-                </template>
+                type="user"
+              />
+
+              <SelectComboBox
+                v-else-if="
+                  getFieldOptions(modelFilter).length > 0 &&
+                  modelFilter.field === 'assigned_team_id'
+                "
+                v-model="modelFilter.value"
+                :items="getFieldOptions(modelFilter)"
+                :placeholder="t('form.field.select')"
+                type="team"
+              />
+
+              <SelectComboBox
+                v-else-if="getFieldOptions(modelFilter).length > 0"
+                v-model="modelFilter.value"
+                :items="getFieldOptions(modelFilter)"
+                :placeholder="t('form.field.select')"
+              />
 
-                <template #selected="{ selected }">
-                  <div v-if="!selected">{{ $t('form.field.selectValue') }}</div>
-                  <div v-if="modelFilter.field === 'assigned_user_id'">
-                    <div class="flex items-center gap-2">
-                      <div v-if="selected" class="flex items-center gap-1">
-                        <Avatar class="w-6 h-6">
-                          <AvatarImage
-                            :src="selected.avatar_url || ''"
-                            :alt="selected.label.slice(0, 2)"
-                          />
-                          <AvatarFallback>{{
-                            selected.label.slice(0, 2).toUpperCase()
-                          }}</AvatarFallback>
-                        </Avatar>
-                        <span>{{ selected.label }}</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div v-else-if="modelFilter.field === 'assigned_team_id'">
-                    <div class="flex items-center gap-2">
-                      <span v-if="selected">
-                        {{ selected.emoji }}
-                        <span>{{ selected.label }}</span>
-                      </span>
-                    </div>
-                  </div>
-                  <div v-else-if="selected">
-                    {{ selected.label }}
-                  </div>
-                </template>
-              </ComboBox>
               <Input
                 v-else
                 v-model="modelFilter.value"
                 class="bg-transparent hover:bg-slate-100"
-                :placeholder="t('form.field.value')"
+                :placeholder="t('globals.terms.value')"
                 type="text"
               />
             </template>
           </div>
         </div>
       </div>
-
-      <button @click="removeFilter(index)" class="p-1 hover:bg-slate-100 rounded">
-        <X class="w-4 h-4 text-slate-500" />
-      </button>
+      <CloseButton :onClose="() => removeFilter(index)" />
     </div>
 
     <div class="flex items-center justify-between pt-3">
@@ -146,12 +114,12 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select'
-import { Plus, X } from 'lucide-vue-next'
+import { Plus } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
 import { useI18n } from 'vue-i18n'
-import ComboBox from '@/components/ui/combobox/ComboBox.vue'
+import CloseButton from '@/components/button/CloseButton.vue'
+import SelectComboBox from '@/components/combobox/SelectCombobox.vue'
 
 const props = defineProps({
   fields: {

frontend/src/components/layout/MenuCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col p-4 border rounded-lg shadow-sm hover:shadow transition-colors cursor-pointer max-w-xs"
+    class="flex flex-col p-4 border rounded shadow-sm hover:shadow transition-colors cursor-pointer max-w-xs"
     @click="handleClick">
     <div class="flex items-center mb-2">
       <component :is="icon" size="24" class="mr-2 text-primary" />

frontend/src/components/layout/PageHeader.vue

@@ -1,8 +1,8 @@
 <template>
   <div v-if="!isHidden">
     <div class="flex items-center space-x-4 h-12 px-2">
-      <SidebarTrigger class="cursor-pointer w-4 h-4" />
-      <span class="text-xl font-semibold text-gray-800">
+      <SidebarTrigger class="cursor-pointer" />
+      <span class="text-xl font-semibold">
         {{ title }}
       </span>
     </div>

frontend/src/components/sidebar/Sidebar.vue

@@ -14,7 +14,6 @@ import {
   SidebarHeader,
   SidebarInset,
   SidebarMenu,
-  SidebarSeparator,
   SidebarMenuAction,
   SidebarMenuButton,
   SidebarMenuItem,
@@ -28,10 +27,10 @@ import {
   ChevronRight,
   EllipsisVertical,
   User,
-  UserSearch,
-  UsersRound,
   Search,
-  Plus
+  Plus,
+  CircleDashed,
+  List
 } from 'lucide-vue-next'
 import {
   DropdownMenu,
@@ -98,24 +97,25 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/contacts')" asChild>
-                <div>
-                  <span class="font-semibold text-xl">
-                    {{ t('globals.terms.contact', 2) }}
-                  </span>
-                </div>
-              </SidebarMenuButton>
+              <div class="px-1">
+                <span class="font-semibold text-xl">
+                  {{ t('globals.terms.contact', 2) }}
+                </span>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
-        <SidebarSeparator />
         <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
               <SidebarMenuItem v-for="item in filteredContactsNavItems" :key="item.titleKey">
                 <SidebarMenuButton :isActive="isActiveParent(item.href)" asChild>
                   <router-link :to="item.href">
-                    <span>{{ t(item.titleKey) }}</span>
+                    <span>{{
+                      t('globals.messages.all', {
+                        name: t(item.titleKey, 2).toLowerCase()
+                      })
+                    }}</span>
                   </router-link>
                 </SidebarMenuButton>
               </SidebarMenuItem>
@@ -137,17 +137,14 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/reports/overview')" asChild>
-                <div>
-                  <span class="font-semibold text-xl">
-                    {{ t('navigation.reports') }}
-                  </span>
-                </div>
-              </SidebarMenuButton>
+              <div class="px-1">
+                <span class="font-semibold text-xl">
+                  {{ t('globals.terms.report', 2) }}
+                </span>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
-        <SidebarSeparator />
         <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
@@ -171,21 +168,18 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/admin')" asChild>
-                <div class="flex items-center justify-between w-full">
-                  <span class="font-semibold text-xl">
-                    {{ t('navigation.admin') }}
-                  </span>
-                </div>
+              <div class="flex flex-col items-start justify-between w-full px-1">
+                <span class="font-semibold text-xl">
+                  {{ t('globals.terms.admin') }}
+                </span>
                 <!-- App version -->
-                <div class="text-xs text-muted-foreground ml-2">
+                <div class="text-xs text-muted-foreground">
                   ({{ settingsStore.settings['app.version'] }})
                 </div>
-              </SidebarMenuButton>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
-        <SidebarSeparator />
         <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
@@ -239,17 +233,14 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/account/profile')" asChild>
-                <div>
-                  <span class="font-semibold text-xl">
-                    {{ t('navigation.account') }}
-                  </span>
-                </div>
-              </SidebarMenuButton>
+              <div class="px-1">
+                <span class="font-semibold text-xl">
+                  {{ t('globals.terms.account') }}
+                </span>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
-        <SidebarSeparator />
         <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
@@ -276,28 +267,20 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton asChild>
-                <div class="flex items-center justify-between w-full">
-                  <div class="font-semibold text-xl">
-                    <span>{{ t('navigation.inbox') }}</span>
-                  </div>
-                  <div class="ml-auto">
-                    <div class="flex items-center space-x-2">
-                      <router-link :to="{ name: 'search' }">
-                        <button
-                          class="flex items-center bg-accent p-2 rounded-full hover:scale-110 transition-transform duration-100"
-                        >
-                          <Search size="15" stroke-width="2.5" />
-                        </button>
-                      </router-link>
-                    </div>
-                  </div>
+              <div class="flex items-center justify-between w-full px-1">
+                <div class="font-semibold text-xl">
+                  <span>{{ t('globals.terms.inbox') }}</span>
                 </div>
-              </SidebarMenuButton>
+                <div class="mr-1 mt-1 hover:scale-110 transition-transform">
+                  <router-link :to="{ name: 'search' }">
+                    <Search size="18" stroke-width="2.5" />
+                  </router-link>
+                </div>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
-        <SidebarSeparator />
+
         <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
@@ -319,7 +302,7 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
                 <SidebarMenuButton asChild :isActive="isActiveParent('/inboxes/assigned')">
                   <router-link :to="{ name: 'inbox', params: { type: 'assigned' } }">
                     <User />
-                    <span>{{ t('navigation.myInbox') }}</span>
+                    <span>{{ t('globals.terms.myInbox') }}</span>
                   </router-link>
                 </SidebarMenuButton>
               </SidebarMenuItem>
@@ -327,9 +310,9 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
               <SidebarMenuItem>
                 <SidebarMenuButton asChild :isActive="isActiveParent('/inboxes/unassigned')">
                   <router-link :to="{ name: 'inbox', params: { type: 'unassigned' } }">
-                    <UserSearch />
+                    <CircleDashed />
                     <span>
-                      {{ t('navigation.unassigned') }}
+                      {{ t('globals.terms.unassigned') }}
                     </span>
                   </router-link>
                 </SidebarMenuButton>
@@ -338,9 +321,9 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
               <SidebarMenuItem>
                 <SidebarMenuButton asChild :isActive="isActiveParent('/inboxes/all')">
                   <router-link :to="{ name: 'inbox', params: { type: 'all' } }">
-                    <UsersRound />
+                    <List />
                     <span>
-                      {{ t('navigation.all') }}
+                      {{ t('globals.messages.all') }}
                     </span>
                   </router-link>
                 </SidebarMenuButton>
@@ -359,7 +342,7 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
                       <router-link to="#">
                         <!-- <Users /> -->
                         <span>
-                          {{ t('navigation.teamInboxes') }}
+                          {{ t('globals.terms.teamInbox', 2) }}
                         </span>
                         <ChevronRight
                           class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
@@ -388,18 +371,18 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
               <!-- Views -->
               <Collapsible class="group/collapsible" defaultOpen v-model:open="viewInboxOpen">
                 <SidebarMenuItem>
-                  <CollapsibleTrigger as-child>
+                  <CollapsibleTrigger asChild>
                     <SidebarMenuButton asChild>
-                      <router-link to="#" class="group/item">
+                      <router-link to="#" class="group/item !p-2">
                         <!-- <SlidersHorizontal /> -->
                         <span>
-                          {{ t('navigation.views') }}
+                          {{ t('globals.terms.view', 2) }}
                         </span>
                         <div>
                           <Plus
                             size="18"
                             @click.stop="openCreateViewDialog"
-                            class="rounded-lg cursor-pointer opacity-0 transition-all duration-200 group-hover/item:opacity-100 hover:bg-gray-200 hover:shadow-sm text-gray-600 hover:text-gray-800 transform hover:scale-105 active:scale-100 p-1"
+                            class="rounded cursor-pointer opacity-0 transition-all duration-200 group-hover/item:opacity-100 hover:bg-gray-200 hover:shadow-sm text-gray-600 hover:text-gray-800 transform hover:scale-105 active:scale-100 p-1"
                           />
                         </div>
                         <ChevronRight

frontend/src/components/sidebar/SidebarNavUser.vue

@@ -2,12 +2,12 @@
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
       <SidebarMenuButton
-        size="lg"
-        class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground p-0"
+        size="md"
+        class="p-0"
       >
-        <Avatar class="h-8 w-8 rounded-lg relative overflow-visible">
-          <AvatarImage :src="userStore.avatar" alt="" class="rounded-lg" />
-          <AvatarFallback class="rounded-lg">
+        <Avatar class="h-8 w-8 rounded relative overflow-visible">
+          <AvatarImage :src="userStore.avatar" alt="U" class="rounded" />
+          <AvatarFallback class="rounded">
             {{ userStore.getInitials }}
           </AvatarFallback>
           <div
@@ -30,51 +30,65 @@
       </SidebarMenuButton>
     </DropdownMenuTrigger>
     <DropdownMenuContent
-      class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+      class="w-[--radix-dropdown-menu-trigger-width] min-w-56"
       side="bottom"
       :side-offset="4"
     >
-      <DropdownMenuLabel class="p-0 font-normal space-y-1">
-        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-          <Avatar class="h-8 w-8 rounded-lg">
+      <DropdownMenuLabel class="font-normal space-y-2 px-2">
+        <!-- User header -->
+        <div class="flex items-center gap-2 py-1.5 text-left text-sm">
+          <Avatar class="h-8 w-8 rounded">
             <AvatarImage :src="userStore.avatar" alt="U" />
-            <AvatarFallback class="rounded-lg">
+            <AvatarFallback class="rounded">
               {{ userStore.getInitials }}
             </AvatarFallback>
           </Avatar>
-          <div class="grid flex-1 text-left text-sm leading-tight">
+          <div class="flex-1 flex flex-col leading-tight">
             <span class="truncate font-semibold">{{ userStore.getFullName }}</span>
-            <span class="truncate text-xs">{{ userStore.email }}</span>
+            <span class="truncate text-xs text-muted-foreground">{{ userStore.email }}</span>
           </div>
         </div>
+
         <div class="space-y-2">
-          <!-- Away switch is checked with 'away_manual' or 'away_and_reassigning' -->
-          <div class="flex items-center gap-2 px-1 text-left text-sm justify-between">
-            <span class="text-muted-foreground">{{ t('navigation.away') }}</span>
+          <!-- Dark-mode toggle -->
+          <div class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <Moon v-if="mode === 'dark'" size="16" class="text-muted-foreground" />
+              <Sun v-else size="16" class="text-muted-foreground" />
+              <span class="text-muted-foreground">{{ t('navigation.darkMode') }}</span>
+            </div>
             <Switch
-              :checked="
-                ['away_manual', 'away_and_reassigning'].includes(userStore.user.availability_status)
-              "
-              @update:checked="
-                (val) => {
-                  const newStatus = val ? 'away_manual' : 'online'
-                  userStore.updateUserAvailability(newStatus)
-                }
-              "
+              :checked="mode === 'dark'"
+              @update:checked="(val) => (mode = val ? 'dark' : 'light')"
             />
           </div>
-          <!-- Reassign Replies Switch is checked with 'away_and_reassigning' -->
-          <div class="flex items-center gap-2 px-1 text-left text-sm justify-between">
-            <span class="text-muted-foreground">{{ t('navigation.reassignReplies') }}</span>
-            <Switch
-              :checked="userStore.user.availability_status === 'away_and_reassigning'"
-              @update:checked="
-                (val) => {
-                  const newStatus = val ? 'away_and_reassigning' : 'away_manual'
-                  userStore.updateUserAvailability(newStatus)
-                }
-              "
-            />
+
+          <div class="border-t border-gray-200 dark:border-gray-700 pt-3 space-y-3">
+            <!-- Away toggle -->
+            <div class="flex items-center justify-between text-sm">
+              <span class="text-muted-foreground">{{ t('navigation.away') }}</span>
+              <Switch
+                :checked="
+                  ['away_manual', 'away_and_reassigning'].includes(
+                    userStore.user.availability_status
+                  )
+                "
+                @update:checked="
+                  (val) => userStore.updateUserAvailability(val ? 'away_manual' : 'online')
+                "
+              />
+            </div>
+            <!-- Reassign toggle -->
+            <div class="flex items-center justify-between text-sm">
+              <span class="text-muted-foreground">{{ t('navigation.reassignReplies') }}</span>
+              <Switch
+                :checked="userStore.user.availability_status === 'away_and_reassigning'"
+                @update:checked="
+                  (val) =>
+                    userStore.updateUserAvailability(val ? 'away_and_reassigning' : 'away_manual')
+                "
+              />
+            </div>
           </div>
         </div>
       </DropdownMenuLabel>
@@ -82,7 +96,7 @@
       <DropdownMenuGroup>
         <DropdownMenuItem @click.prevent="router.push({ name: 'account' })">
           <CircleUserRound size="18" class="mr-2" />
-          {{ t('navigation.account') }}
+          {{ t('globals.terms.account') }}
         </DropdownMenuItem>
       </DropdownMenuGroup>
       <DropdownMenuSeparator />
@@ -108,10 +122,13 @@ import {
 import { SidebarMenuButton } from '@/components/ui/sidebar'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Switch } from '@/components/ui/switch'
-import { ChevronsUpDown, CircleUserRound, LogOut } from 'lucide-vue-next'
+import { ChevronsUpDown, CircleUserRound, LogOut, Moon, Sun } from 'lucide-vue-next'
 import { useUserStore } from '@/stores/user'
 import { useRouter } from 'vue-router'
 
+import { useColorMode } from '@vueuse/core'
+
+const mode = useColorMode()
 const userStore = useUserStore()
 const router = useRouter()
 const { t } = useI18n()

frontend/src/components/table/SimpleTable.vue

@@ -1,24 +1,24 @@
 <template>
-  <table class="min-w-full table-fixed divide-y divide-gray-200">
-    <thead class="bg-gray-50">
+  <table class="min-w-full table-fixed divide-y divide-border">
+    <thead class="bg-muted">
       <tr>
         <th
           v-for="(header, index) in headers"
           :key="index"
           scope="col"
-          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+          class="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider"
         >
           {{ header }}
         </th>
         <th scope="col" class="relative px-6 py-3"></th>
       </tr>
     </thead>
-    <tbody class="bg-white divide-y divide-gray-200">
+    <tbody class="bg-background divide-y divide-border">
       <template v-if="data.length === 0">
         <tr>
           <td :colspan="headers.length + 1" class="px-6 py-12 text-center">
             <div class="flex flex-col items-center space-y-4">
-              <span class="text-md text-gray-500">
+              <span class="text-md text-muted-foreground">
                 {{
                   $t('globals.messages.noResults', {
                     name: $t('globals.terms.result', 2).toLowerCase()
@@ -30,15 +30,15 @@
         </tr>
       </template>
       <template v-else>
-        <tr v-for="(item, index) in data" :key="index">
+        <tr v-for="(item, index) in data" :key="index" class="hover:bg-accent">
           <td
             v-for="key in keys"
             :key="key"
-            class="px-6 py-4 text-sm font-medium text-gray-900 whitespace-normal break-words"
+            class="px-6 py-4 text-sm font-medium text-foreground whitespace-normal break-words"
           >
             {{ item[key] }}
           </td>
-          <td class="px-6 py-4 text-sm text-gray-500" v-if="showDelete">
+          <td v-if="showDelete" class="px-6 py-4 text-sm text-muted-foreground">
             <Button size="xs" variant="ghost" @click.prevent="deleteItem(item)">
               <Trash2 class="h-4 w-4" />
             </Button>

frontend/src/components/ui/avatar/AvatarUpload.vue

@@ -14,7 +14,7 @@
 
     <!-- Delete Icon -->
     <X
-      class="absolute top-1 right-1 bg-white rounded-full p-1 shadow-md z-10 opacity-0 group-hover:opacity-100 transition-opacity"
+      class="absolute top-1 right-1 rounded-full p-1 shadow-md z-10 opacity-0 group-hover:opacity-100 transition-opacity"
       size="20"
       @click.stop="emit('remove')"
       v-if="src"

frontend/src/components/ui/button/Button.vue

@@ -1,25 +1,16 @@
 <script setup>
-import { Primitive } from 'radix-vue'
-import { buttonVariants } from '.'
+import { Primitive } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ref, computed } from 'vue'
-import { DotLoader } from '@/components/ui/loader'
-
+import { buttonVariants } from '.'
+import { Loader2 } from 'lucide-vue-next'
 const props = defineProps({
   variant: { type: null, required: false },
   size: { type: null, required: false },
   class: { type: null, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false, default: 'button' },
-  isLoading: { type: Boolean, required: false, default: false }
-})
-
-const isDisabled = ref(false)
-
-const computedClass = computed(() => {
-  return cn(buttonVariants({ variant: props.variant, size: props.size }), props.class, {
-    'cursor-not-allowed opacity-50': props.isLoading || isDisabled.value
-  })
+  isLoading: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false }
 })
 </script>
 
@@ -27,10 +18,22 @@ const computedClass = computed(() => {
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="computedClass"
-    :disabled="isLoading || isDisabled"
+    :class="
+      cn(
+        buttonVariants({ variant, size }),
+        'relative',
+        { 'text-transparent': isLoading },
+        props.class
+      )
+    "
+    :disabled="isLoading || disabled"
   >
-    <DotLoader v-if="isLoading" />
-    <slot v-else />
+    <slot />
+    <span
+      v-if="isLoading"
+      class="absolute inset-0 flex items-center justify-center pointer-events-none text-background"
+    >
+      <Loader2 class="h-5 w-5 animate-spin" />
+    </span>
   </Primitive>
 </template>

frontend/src/components/ui/button/index.js

@@ -1,31 +1,34 @@
-import { cva } from 'class-variance-authority'
+import { cva } from 'class-variance-authority';
 
-export { default as Button } from './Button.vue'
+export { default as Button } from './Button.vue';
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
           'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline'
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-9 px-4 py-2',
         xs: 'h-7 rounded px-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9'
-      }
+        icon: 'h-9 w-9',
+      },
     },
     defaultVariants: {
       variant: 'default',
-      size: 'default'
-    }
-  }
-)
+      size: 'default',
+    },
+  },
+);

frontend/src/components/ui/input/Input.vue

@@ -1,19 +1,19 @@
 <script setup>
-import { useVModel } from '@vueuse/core'
-import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
   defaultValue: { type: [String, Number], required: false },
   modelValue: { type: [String, Number], required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const emits = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue']);
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   passive: true,
-  defaultValue: props.defaultValue
-})
+  defaultValue: props.defaultValue,
+});
 </script>
 
 <template>
@@ -22,7 +22,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     :class="
       cn(
         'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-        props.class
+        props.class,
       )
     "
   />

frontend/src/components/ui/input/index.js

@@ -1 +1 @@
-export { default as Input } from './Input.vue'
+export { default as Input } from './Input.vue';

frontend/src/components/ui/loader/DotLoader.vue

@@ -1,7 +1,11 @@
 <template>
-  <span class="dot-loader">
-    <span class="dot"></span>
-    <span class="dot"></span>
-    <span class="dot"></span>
+  <span class="inline-flex items-center">
+    <span class="w-1 h-1 rounded-full bg-current mx-0.5 animate-dot-flashing"></span>
+    <span
+      class="w-1 h-1 rounded-full bg-current mx-0.5 animate-dot-flashing [animation-delay:0.2s]"
+    ></span>
+    <span
+      class="w-1 h-1 rounded-full bg-current mx-0.5 animate-dot-flashing [animation-delay:0.4s]"
+    ></span>
   </span>
 </template>

frontend/src/components/ui/separator/Separator.vue

@@ -1,21 +1,17 @@
 <script setup>
-import { computed } from 'vue'
-import { Separator } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core';
+import { Separator } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
-  orientation: { type: String, required: false },
-  decorative: { type: Boolean, required: false },
+  orientation: { type: String, required: false, default: 'horizontal' },
+  decorative: { type: Boolean, required: false, default: true },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
@@ -24,8 +20,8 @@ const delegatedProps = computed(() => {
     :class="
       cn(
         'shrink-0 bg-border',
-        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
-        props.class
+        props.orientation === 'horizontal' ? 'h-px w-full' : 'w-px h-full',
+        props.class,
       )
     "
   />

frontend/src/components/ui/separator/index.js

@@ -1 +1 @@
-export { default as Separator } from './Separator.vue'
+export { default as Separator } from './Separator.vue';

frontend/src/components/ui/sheet/Sheet.vue

@@ -1,14 +1,14 @@
 <script setup>
-import { DialogRoot, useForwardPropsEmits } from 'radix-vue'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps({
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  modal: { type: Boolean, required: false }
-})
-const emits = defineEmits(['update:open'])
+  modal: { type: Boolean, required: false },
+});
+const emits = defineEmits(['update:open']);
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>

frontend/src/components/ui/sheet/SheetClose.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { DialogClose } from 'radix-vue'
+import { DialogClose } from 'reka-ui';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-})
+  as: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sheet/SheetContent.vue

@@ -1,19 +1,19 @@
 <script setup>
-import { computed } from 'vue'
+import { reactiveOmit } from '@vueuse/core';
+import { Cross2Icon } from '@radix-icons/vue';
 import {
   DialogClose,
   DialogContent,
   DialogOverlay,
   DialogPortal,
-  useForwardPropsEmits
-} from 'radix-vue'
-import { Cross2Icon } from '@radix-icons/vue'
-import { sheetVariants } from '.'
-import { cn } from '@/lib/utils'
+  useForwardPropsEmits,
+} from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { sheetVariants } from '.';
 
 defineOptions({
-  inheritAttrs: false
-})
+  inheritAttrs: false,
+});
 
 const props = defineProps({
   class: { type: null, required: false },
@@ -22,8 +22,8 @@ const props = defineProps({
   trapFocus: { type: Boolean, required: false },
   disableOutsidePointerEvents: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-})
+  as: { type: null, required: false },
+});
 
 const emits = defineEmits([
   'escapeKeyDown',
@@ -31,16 +31,12 @@ const emits = defineEmits([
   'focusOutside',
   'interactOutside',
   'openAutoFocus',
-  'closeAutoFocus'
-])
+  'closeAutoFocus',
+]);
 
-const delegatedProps = computed(() => {
-  const { class: _, side, ...delegated } = props
+const delegatedProps = reactiveOmit(props, 'class', 'side');
 
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>

frontend/src/components/ui/sheet/SheetDescription.vue

@@ -1,19 +1,15 @@
 <script setup>
-import { computed } from 'vue'
-import { DialogDescription } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core';
+import { DialogDescription } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>

frontend/src/components/ui/sheet/SheetFooter.vue

@@ -1,13 +1,20 @@
 <script setup>
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
-  <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
     <slot />
   </div>
 </template>

frontend/src/components/ui/sheet/SheetHeader.vue

@@ -1,13 +1,15 @@
 <script setup>
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
-  <div :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)">
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
     <slot />
   </div>
 </template>

frontend/src/components/ui/sheet/SheetTitle.vue

@@ -1,19 +1,15 @@
 <script setup>
-import { computed } from 'vue'
-import { DialogTitle } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core';
+import { DialogTitle } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>

frontend/src/components/ui/sheet/SheetTrigger.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { DialogTrigger } from 'radix-vue'
+import { DialogTrigger } from 'reka-ui';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-})
+  as: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sheet/index.js

@@ -1,13 +1,13 @@
-import { cva } from 'class-variance-authority'
+import { cva } from 'class-variance-authority';
 
-export { default as Sheet } from './Sheet.vue'
-export { default as SheetTrigger } from './SheetTrigger.vue'
-export { default as SheetClose } from './SheetClose.vue'
-export { default as SheetContent } from './SheetContent.vue'
-export { default as SheetHeader } from './SheetHeader.vue'
-export { default as SheetTitle } from './SheetTitle.vue'
-export { default as SheetDescription } from './SheetDescription.vue'
-export { default as SheetFooter } from './SheetFooter.vue'
+export { default as Sheet } from './Sheet.vue';
+export { default as SheetClose } from './SheetClose.vue';
+export { default as SheetContent } from './SheetContent.vue';
+export { default as SheetDescription } from './SheetDescription.vue';
+export { default as SheetFooter } from './SheetFooter.vue';
+export { default as SheetHeader } from './SheetHeader.vue';
+export { default as SheetTitle } from './SheetTitle.vue';
+export { default as SheetTrigger } from './SheetTrigger.vue';
 
 export const sheetVariants = cva(
   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
@@ -19,11 +19,11 @@ export const sheetVariants = cva(
           'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
         left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm'
-      }
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
     },
     defaultVariants: {
-      side: 'right'
-    }
-  }
-)
+      side: 'right',
+    },
+  },
+);

frontend/src/components/ui/sidebar/Sidebar.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { Sheet, SheetContent } from '@/components/ui/sheet';
 import { cn } from '@/lib/utils';
+import { Sheet, SheetContent } from '@/components/ui/sheet';
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils';
 
 defineOptions({
@@ -12,7 +12,6 @@ const props = defineProps({
   variant: { type: String, required: false, default: 'sidebar' },
   collapsible: { type: String, required: false, default: 'offcanvas' },
   class: { type: null, required: false },
-  collapseOnMobile: { type: Boolean, required: false, default: true },
 });
 
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
@@ -33,7 +32,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
   </div>
 
   <Sheet
-    v-else-if="isMobile && collapseOnMobile"
+    v-else-if="isMobile"
     :open="openMobile"
     v-bind="$attrs"
     @update:open="setOpenMobile"
@@ -55,7 +54,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
   <div
     v-else
-    :class="cn('group peer', collapseOnMobile ? 'hidden md:block' : 'block')"
+    class="group peer hidden md:block"
     :data-state="state"
     :data-collapsible="state === 'collapsed' ? collapsible : ''"
     :data-variant="variant"
@@ -77,8 +76,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     <div
       :class="
         cn(
-          'duration-200 fixed inset-y-0 z-10 h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
-          collapseOnMobile ? 'hidden' : '',
+          'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
           side === 'left'
             ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
             : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',

frontend/src/components/ui/sidebar/SidebarGroupAction.vue

@@ -1,12 +1,12 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
@@ -14,12 +14,14 @@ const props = defineProps<PrimitiveProps & {
     data-sidebar="group-action"
     :as="as"
     :as-child="asChild"
-    :class="cn(
-      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 after:md:hidden',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 after:md:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>

frontend/src/components/ui/sidebar/SidebarGroupContent.vue

@@ -1,17 +1,13 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
-  <div
-    data-sidebar="group-content"
-    :class="cn('w-full text-sm', props.class)"
-  >
+  <div data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
     <slot />
   </div>
 </template>

frontend/src/components/ui/sidebar/SidebarGroupLabel.vue

@@ -1,12 +1,12 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
@@ -14,10 +14,13 @@ const props = defineProps<PrimitiveProps & {
     data-sidebar="group-label"
     :as="as"
     :as-child="asChild"
-    :class="cn(
-      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-      props.class)"
+    :class="
+      cn(
+        'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>

frontend/src/components/ui/sidebar/SidebarHeader.vue

@@ -1,10 +1,9 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarInput.vue

@@ -1,20 +1,21 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Input } from '@/components/ui/input'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
+import { Input } from '@/components/ui/input';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <Input
     data-sidebar="input"
-    :class="cn(
-      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
-      props.class,
-    )"
+    :class="
+      cn(
+        'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
+        props.class,
+      )
+    "
   >
     <slot />
   </Input>

frontend/src/components/ui/sidebar/SidebarInset.vue

@@ -1,19 +1,20 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <main
-    :class="cn(
-      'relative flex min-h-svh flex-1 flex-col bg-background',
-      'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
-      props.class,
-    )"
+    :class="
+      cn(
+        'relative flex min-h-svh flex-1 flex-col bg-background',
+        'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+        props.class,
+      )
+    "
   >
     <slot />
   </main>

frontend/src/components/ui/sidebar/SidebarMenu.vue

@@ -1,10 +1,9 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarMenuAction.vue

@@ -1,30 +1,31 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = withDefaults(defineProps<PrimitiveProps & {
-  showOnHover?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  as: 'button',
-})
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'button' },
+  showOnHover: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <Primitive
     data-sidebar="menu-action"
-    :class="cn(
-      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 after:md:hidden',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      showOnHover
-        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 after:md:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+        props.class,
+      )
+    "
     :as="as"
     :as-child="asChild"
   >

frontend/src/components/ui/sidebar/SidebarMenuBadge.vue

@@ -1,24 +1,25 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <div
     data-sidebar="menu-badge"
-    :class="cn(
-      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
-      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </div>

frontend/src/components/ui/sidebar/SidebarMenuButton.vue

@@ -1,31 +1,40 @@
-<script setup lang="ts">
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { type Component, computed } from 'vue'
-import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
-import { useSidebar } from './utils'
+<script setup>
+import { computed } from 'vue';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue';
+import { useSidebar } from './utils';
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = withDefaults(defineProps<SidebarMenuButtonProps & {
-  tooltip?: string | Component
-}>(), {
-  as: 'button',
-  variant: 'default',
-  size: 'default',
-})
+const props = defineProps({
+  variant: { type: null, required: false, default: 'default' },
+  size: { type: null, required: false, default: 'default' },
+  isActive: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'button' },
+  tooltip: { type: null, required: false },
+});
 
-const { isMobile, state } = useSidebar()
+const { isMobile, state } = useSidebar();
 
 const delegatedProps = computed(() => {
-  const { tooltip, ...delegated } = props
-  return delegated
-})
+  const { tooltip, ...delegated } = props;
+  return delegated;
+});
 </script>
 
 <template>
-  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+  <SidebarMenuButtonChild
+    v-if="!tooltip"
+    v-bind="{ ...delegatedProps, ...$attrs }"
+  >
     <slot />
   </SidebarMenuButtonChild>
 

frontend/src/components/ui/sidebar/SidebarMenuButtonChild.vue

@@ -1,21 +1,16 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
-import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { sidebarMenuButtonVariants } from '.';
 
-export interface SidebarMenuButtonProps extends PrimitiveProps {
-  variant?: SidebarMenuButtonVariants['variant']
-  size?: SidebarMenuButtonVariants['size']
-  isActive?: boolean
-  class?: HTMLAttributes['class']
-}
-
-const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
-  as: 'button',
-  variant: 'default',
-  size: 'default',
-})
+const props = defineProps({
+  variant: { type: null, required: false, default: 'default' },
+  size: { type: null, required: false, default: 'default' },
+  isActive: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'button' },
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarMenuItem.vue

@@ -1,10 +1,9 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarMenuSkeleton.vue

@@ -1,16 +1,16 @@
-<script setup lang="ts">
-import { Skeleton } from '@/components/ui/skeleton'
-import { cn } from '@/lib/utils'
-import { computed, type HTMLAttributes } from 'vue'
+<script setup>
+import { computed } from 'vue';
+import { cn } from '@/lib/utils';
+import { Skeleton } from '@/components/ui/skeleton';
 
-const props = defineProps<{
-  showIcon?: boolean
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  showIcon: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
 
 const width = computed(() => {
-  return `${Math.floor(Math.random() * 40) + 50}%`
-})
+  return `${Math.floor(Math.random() * 40) + 50}%`;
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarMenuSub.vue

@@ -1,20 +1,21 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <ul
     data-sidebar="menu-badge"
-    :class="cn(
-      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </ul>

frontend/src/components/ui/sidebar/SidebarMenuSubButton.vue

@@ -1,17 +1,14 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = withDefaults(defineProps<PrimitiveProps & {
-  size?: 'sm' | 'md'
-  isActive?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  as: 'a',
-  size: 'md',
-})
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'a' },
+  size: { type: String, required: false, default: 'md' },
+  isActive: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
@@ -21,14 +18,16 @@ const props = withDefaults(defineProps<PrimitiveProps & {
     :as-child="asChild"
     :data-size="size"
     :data-active="isActive"
-    :class="cn(
-      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
-      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-      size === 'sm' && 'text-xs',
-      size === 'md' && 'text-sm',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>

frontend/src/components/ui/sidebar/SidebarMenuSubItem.vue

@@ -1,5 +1,4 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <li>

frontend/src/components/ui/sidebar/SidebarProvider.vue

@@ -1,57 +1,64 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
-import { TooltipProvider } from 'radix-vue'
-import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
-import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
+<script setup>
+import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core';
+import { TooltipProvider } from 'reka-ui';
+import { computed, ref } from 'vue';
+import { cn } from '@/lib/utils';
+import {
+  provideSidebarContext,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+} from './utils';
 
-const props = withDefaults(defineProps<{
-  defaultOpen?: boolean
-  open?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  defaultOpen: true,
-  open: undefined,
-})
+const props = defineProps({
+  defaultOpen: { type: Boolean, required: false, default: true },
+  open: { type: Boolean, required: false, default: undefined },
+  class: { type: null, required: false },
+});
 
-const emits = defineEmits<{
-  'update:open': [open: boolean]
-}>()
+const emits = defineEmits(['update:open']);
 
-const isMobile = useMediaQuery('(max-width: 768px)')
-const openMobile = ref(false)
+const isMobile = useMediaQuery('(max-width: 768px)');
+const openMobile = ref(false);
 
 const open = useVModel(props, 'open', emits, {
   defaultValue: props.defaultOpen ?? false,
-  passive: (props.open === undefined) as false,
-}) as Ref<boolean>
+  passive: props.open === undefined,
+});
 
-function setOpen(value: boolean) {
-  open.value = value // emits('update:open', value)
+function setOpen(value) {
+  open.value = value; // emits('update:open', value)
 
   // This sets the cookie to keep the sidebar state.
-  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 }
 
-function setOpenMobile(value: boolean) {
-  openMobile.value = value
+function setOpenMobile(value) {
+  openMobile.value = value;
 }
 
 // Helper to toggle the sidebar.
 function toggleSidebar() {
-  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
+  return isMobile.value
+    ? setOpenMobile(!openMobile.value)
+    : setOpen(!open.value);
 }
 
-useEventListener('keydown', (event: KeyboardEvent) => {
-  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-    event.preventDefault()
-    toggleSidebar()
+useEventListener('keydown', (event) => {
+  if (
+    event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+    (event.metaKey || event.ctrlKey)
+  ) {
+    event.preventDefault();
+    toggleSidebar();
   }
-})
+});
 
 // We add a state so that we can do data-state="expanded" or "collapsed".
 // This makes it easier to style the sidebar with Tailwind classes.
-const state = computed(() => open.value ? 'expanded' : 'collapsed')
+const state = computed(() => (open.value ? 'expanded' : 'collapsed'));
 
 provideSidebarContext({
   state,
@@ -61,7 +68,7 @@ provideSidebarContext({
   openMobile,
   setOpenMobile,
   toggleSidebar,
-})
+});
 </script>
 
 <template>
@@ -71,7 +78,12 @@ provideSidebarContext({
         '--sidebar-width': SIDEBAR_WIDTH,
         '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       }"
-      :class="cn('group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar', props.class)"
+      :class="
+        cn(
+          'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
+          props.class,
+        )
+      "
       v-bind="$attrs"
     >
       <slot />

frontend/src/components/ui/sidebar/SidebarRail.vue

@@ -1,13 +1,12 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { useSidebar } from './utils'
+<script setup>
+import { cn } from '@/lib/utils';
+import { useSidebar } from './utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 
-const { toggleSidebar } = useSidebar()
+const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
@@ -16,15 +15,17 @@ const { toggleSidebar } = useSidebar()
     aria-label="Toggle Sidebar"
     :tabindex="-1"
     title="Toggle Sidebar"
-    :class="cn(
-      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
-      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
-      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
-      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+        '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        props.class,
+      )
+    "
     @click="toggleSidebar"
   >
     <slot />

frontend/src/components/ui/sidebar/SidebarSeparator.vue

@@ -1,11 +1,10 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Separator } from '@/components/ui/separator'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
+import { Separator } from '@/components/ui/separator';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarTrigger.vue

@@ -1,15 +1,14 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
-import { PanelLeft } from 'lucide-vue-next'
-import { useSidebar } from './utils'
+<script setup>
+import { ViewVerticalIcon } from '@radix-icons/vue';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { useSidebar } from './utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 
-const { toggleSidebar } = useSidebar()
+const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
@@ -20,7 +19,7 @@ const { toggleSidebar } = useSidebar()
     :class="cn('h-7 w-7', props.class)"
     @click="toggleSidebar"
   >
-    <PanelLeft />
+    <ViewVerticalIcon />
     <span class="sr-only">Toggle Sidebar</span>
   </Button>
 </template>

frontend/src/components/ui/sidebar/index.js

@@ -0,0 +1,49 @@
+import { cva } from 'class-variance-authority';
+
+export { default as Sidebar } from './Sidebar.vue';
+export { default as SidebarContent } from './SidebarContent.vue';
+export { default as SidebarFooter } from './SidebarFooter.vue';
+export { default as SidebarGroup } from './SidebarGroup.vue';
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue';
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue';
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue';
+export { default as SidebarHeader } from './SidebarHeader.vue';
+export { default as SidebarInput } from './SidebarInput.vue';
+export { default as SidebarInset } from './SidebarInset.vue';
+export { default as SidebarMenu } from './SidebarMenu.vue';
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue';
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue';
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue';
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue';
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue';
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue';
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue';
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue';
+export { default as SidebarProvider } from './SidebarProvider.vue';
+export { default as SidebarRail } from './SidebarRail.vue';
+export { default as SidebarSeparator } from './SidebarSeparator.vue';
+export { default as SidebarTrigger } from './SidebarTrigger.vue';
+
+export { useSidebar } from './utils';
+
+export const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);

frontend/src/components/ui/sidebar/utils.js

@@ -0,0 +1,10 @@
+import { createContext } from 'reka-ui';
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = '16rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_WIDTH_ICON = '3rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+export const [useSidebar, provideSidebarContext] = createContext('Sidebar');

frontend/src/components/ui/skeleton/Skeleton.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/skeleton/index.js

@@ -1 +1 @@
-export { default as Skeleton } from './Skeleton.vue'
+export { default as Skeleton } from './Skeleton.vue';

frontend/src/components/ui/tooltip/Tooltip.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { TooltipRoot, useForwardPropsEmits } from 'radix-vue'
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps({
   defaultOpen: { type: Boolean, required: false },
@@ -8,11 +8,11 @@ const props = defineProps({
   disableHoverableContent: { type: Boolean, required: false },
   disableClosingTrigger: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  ignoreNonKeyboardFocus: { type: Boolean, required: false }
-})
-const emits = defineEmits(['update:open'])
+  ignoreNonKeyboardFocus: { type: Boolean, required: false },
+});
+const emits = defineEmits(['update:open']);
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>

frontend/src/components/ui/tooltip/TooltipContent.vue

@@ -1,13 +1,14 @@
 <script setup>
-import { computed } from 'vue'
-import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core';
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 defineOptions({
-  inheritAttrs: false
-})
+  inheritAttrs: false,
+});
 
 const props = defineProps({
+  forceMount: { type: Boolean, required: false },
   ariaLabel: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
@@ -21,18 +22,16 @@ const props = defineProps({
   arrowPadding: { type: Number, required: false },
   sticky: { type: String, required: false },
   hideWhenDetached: { type: Boolean, required: false },
-  class: { type: null, required: false }
-})
+  positionStrategy: { type: String, required: false },
+  updatePositionStrategy: { type: String, required: false },
+  class: { type: null, required: false },
+});
 
-const emits = defineEmits(['escapeKeyDown', 'pointerDownOutside'])
+const emits = defineEmits(['escapeKeyDown', 'pointerDownOutside']);
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+const delegatedProps = reactiveOmit(props, 'class');
 
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -42,7 +41,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       :class="
         cn(
           'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          props.class
+          props.class,
         )
       "
     >

frontend/src/components/ui/tooltip/TooltipProvider.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { TooltipProvider } from 'radix-vue'
+import { TooltipProvider } from 'reka-ui';
 
 const props = defineProps({
   delayDuration: { type: Number, required: false },
@@ -7,8 +7,8 @@ const props = defineProps({
   disableHoverableContent: { type: Boolean, required: false },
   disableClosingTrigger: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  ignoreNonKeyboardFocus: { type: Boolean, required: false }
-})
+  ignoreNonKeyboardFocus: { type: Boolean, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/tooltip/TooltipTrigger.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { TooltipTrigger } from 'radix-vue'
+import { TooltipTrigger } from 'reka-ui';
 
 const props = defineProps({
+  reference: { type: null, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-})
+  as: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/tooltip/index.js

@@ -1,4 +1,4 @@
-export { default as Tooltip } from './Tooltip.vue'
-export { default as TooltipContent } from './TooltipContent.vue'
-export { default as TooltipTrigger } from './TooltipTrigger.vue'
-export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as Tooltip } from './Tooltip.vue';
+export { default as TooltipContent } from './TooltipContent.vue';
+export { default as TooltipProvider } from './TooltipProvider.vue';
+export { default as TooltipTrigger } from './TooltipTrigger.vue';

frontend/src/composables/useFileUpload.js

@@ -0,0 +1,142 @@
+import { ref, readonly } from 'vue'
+import { useEmitter } from '@/composables/useEmitter'
+import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
+import { handleHTTPError } from '@/utils/http'
+import api from '@/api'
+
+/**
+ * Composable for handling file uploads
+ * @param {Object} options - Configuration options
+ * @param {Function} options.onFileUploadSuccess - Callback when file upload succeeds (uploadedFile)
+ * @param {Function} options.onUploadError - Optional callback when file upload fails (file, error)
+ * @param {string} options.linkedModel - The linked model for the upload
+ * @param {Array} options.mediaFiles - Optional external array to manage files (if not provided, internal array is used)
+ */
+export function useFileUpload (options = {}) {
+    const {
+        onFileUploadSuccess,
+        onUploadError,
+        linkedModel,
+        mediaFiles: externalMediaFiles
+    } = options
+
+    const emitter = useEmitter()
+    const uploadingFiles = ref([])
+    const isUploading = ref(false)
+    const internalMediaFiles = ref([])
+
+    // Use external mediaFiles if provided, otherwise use internal
+    const mediaFiles = externalMediaFiles || internalMediaFiles
+
+    /**
+     * Handles the file upload process when files are selected.
+     * Uploads each file to the server and adds them to the mediaFiles array.
+     * @param {Event} event - The file input change event containing selected files
+     */
+    const handleFileUpload = (event) => {
+        const files = Array.from(event.target.files)
+        uploadingFiles.value = files
+        isUploading.value = true
+
+        for (const file of files) {
+            api
+                .uploadMedia({
+                    files: file,
+                    inline: false,
+                    linked_model: linkedModel
+                })
+                .then((resp) => {
+                    const uploadedFile = resp.data.data
+
+                    // Add to media files array
+                    if (Array.isArray(mediaFiles.value)) {
+                        mediaFiles.value.push(uploadedFile)
+                    } else {
+                        mediaFiles.push(uploadedFile)
+                    }
+
+                    // Remove from uploading list
+                    uploadingFiles.value = uploadingFiles.value.filter((f) => f.name !== file.name)
+
+                    // Call success callback
+                    if (onFileUploadSuccess) {
+                        onFileUploadSuccess(uploadedFile)
+                    }
+
+                    // Update uploading state
+                    if (uploadingFiles.value.length === 0) {
+                        isUploading.value = false
+                    }
+                })
+                .catch((error) => {
+                    uploadingFiles.value = uploadingFiles.value.filter((f) => f.name !== file.name)
+
+                    // Call error callback or show default toast
+                    if (onUploadError) {
+                        onUploadError(file, error)
+                    } else {
+                        emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
+                            variant: 'destructive',
+                            description: handleHTTPError(error).message
+                        })
+                    }
+
+                    // Update uploading state
+                    if (uploadingFiles.value.length === 0) {
+                        isUploading.value = false
+                    }
+                })
+        }
+    }
+
+    /**
+     * Handles the file delete event.
+     * Removes the file from the mediaFiles array.
+     * @param {String} uuid - The UUID of the file to delete
+     */
+    const handleFileDelete = (uuid) => {
+        if (Array.isArray(mediaFiles.value)) {
+            mediaFiles.value = [
+                ...mediaFiles.value.filter((item) => item.uuid !== uuid)
+            ]
+        } else {
+            const index = mediaFiles.findIndex((item) => item.uuid === uuid)
+            if (index > -1) {
+                mediaFiles.splice(index, 1)
+            }
+        }
+    }
+
+    /**
+     * Upload files programmatically (without event)
+     * @param {File[]} files - Array of files to upload
+     */
+    const uploadFiles = (files) => {
+        const mockEvent = { target: { files } }
+        handleFileUpload(mockEvent)
+    }
+
+    /**
+     * Clear all media files
+     */
+    const clearMediaFiles = () => {
+        if (Array.isArray(mediaFiles.value)) {
+            mediaFiles.value = []
+        } else {
+            mediaFiles.length = 0
+        }
+    }
+
+    return {
+        // State
+        uploadingFiles: readonly(uploadingFiles),
+        isUploading: readonly(isUploading),
+        mediaFiles: externalMediaFiles ? readonly(mediaFiles) : readonly(internalMediaFiles),
+
+        // Methods
+        handleFileUpload,
+        handleFileDelete,
+        uploadFiles,
+        clearMediaFiles
+    }
+}

frontend/src/constants/navigation.js

@@ -1,6 +1,6 @@
 export const reportsNavItems = [
     {
-        titleKey: 'navigation.overview',
+        titleKey: 'globals.terms.overview',
         href: '/reports/overview',
         permission: 'reports:manage'
     }
@@ -8,125 +8,125 @@ export const reportsNavItems = [
 
 export const adminNavItems = [
     {
-        titleKey: 'navigation.workspace',
+        titleKey: 'globals.terms.workspace',
         children: [
             {
-                titleKey: 'navigation.generalSettings',
+                titleKey: 'globals.terms.general',
                 href: '/admin/general',
                 permission: 'general_settings:manage'
             },
             {
-                titleKey: 'navigation.businessHours',
+                titleKey: 'globals.terms.businessHour',
                 href: '/admin/business-hours',
                 permission: 'business_hours:manage'
             },
             {
-                titleKey: 'navigation.slaPolicies',
+                titleKey: 'globals.terms.slaPolicy',
                 href: '/admin/sla',
                 permission: 'sla:manage'
             }
         ]
     },
     {
-        titleKey: 'navigation.conversations',
+        titleKey: 'globals.terms.conversation',
         children: [
             {
-                titleKey: 'navigation.tags',
+                titleKey: 'globals.terms.tag',
                 href: '/admin/conversations/tags',
                 permission: 'tags:manage'
             },
             {
-                titleKey: 'navigation.macros',
+                titleKey: 'globals.terms.macro',
                 href: '/admin/conversations/macros',
                 permission: 'macros:manage'
             },
             {
-                titleKey: 'navigation.statuses',
+                titleKey: 'globals.terms.status',
                 href: '/admin/conversations/statuses',
                 permission: 'status:manage'
             }
         ]
     },
     {
-        titleKey: 'navigation.inboxes',
+        titleKey: 'globals.terms.inbox',
         children: [
             {
-                titleKey: 'navigation.inboxes',
+                titleKey: 'globals.terms.inbox',
                 href: '/admin/inboxes',
                 permission: 'inboxes:manage'
             }
         ]
     },
     {
-        titleKey: 'navigation.teammates',
+        titleKey: 'globals.terms.teammate',
         children: [
             {
-                titleKey: 'navigation.agents',
+                titleKey: 'globals.terms.agent',
                 href: '/admin/teams/agents',
                 permission: 'users:manage'
             },
             {
-                titleKey: 'navigation.teams',
+                titleKey: 'globals.terms.team',
                 href: '/admin/teams/teams',
                 permission: 'teams:manage'
             },
             {
-                titleKey: 'navigation.roles',
+                titleKey: 'globals.terms.role',
                 href: '/admin/teams/roles',
                 permission: 'roles:manage'
             },
             {
-                titleKey: 'navigation.activityLog',
+                titleKey: 'globals.terms.activityLog',
                 href: '/admin/teams/activity-log',
                 permission: 'activity_logs:manage'
             }
         ]
     },
     {
-        titleKey: 'navigation.automations',
+        titleKey: 'globals.terms.automation',
         children: [
             {
-                titleKey: 'navigation.automations',
+                titleKey: 'globals.terms.automation',
                 href: '/admin/automations',
                 permission: 'automations:manage'
             }
         ]
     },
     {
-        titleKey: 'navigation.customAttributes',
+        titleKey: 'globals.terms.customAttribute',
         children: [
             {
-                titleKey: 'navigation.customAttributes',
+                titleKey: 'globals.terms.customAttribute',
                 href: '/admin/custom-attributes',
                 permission: 'custom_attributes:manage'
             }
         ]
     },
     {
-        titleKey: 'navigation.notifications',
+        titleKey: 'globals.terms.notification',
         children: [
             {
-                titleKey: 'navigation.email',
+                titleKey: 'globals.terms.email',
                 href: '/admin/notification',
                 permission: 'notification_settings:manage'
             }
         ]
     },
     {
-        titleKey: 'navigation.templates',
+        titleKey: 'globals.terms.template',
         children: [
             {
-                titleKey: 'navigation.templates',
+                titleKey: 'globals.terms.template',
                 href: '/admin/templates',
                 permission: 'templates:manage'
             }
         ]
     },
     {
-        titleKey: 'navigation.security',
+        titleKey: 'globals.terms.security',
         children: [
             {
-                titleKey: 'navigation.sso',
+                titleKey: 'globals.terms.sso',
                 href: '/admin/sso',
                 permission: 'oidc:manage'
             }
@@ -136,7 +136,7 @@ export const adminNavItems = [
 
 export const accountNavItems = [
     {
-        titleKey: 'navigation.profile',
+        titleKey: 'globals.terms.profile',
         href: '/account/profile',
         description: 'Update your profile'
     }
@@ -144,7 +144,7 @@ export const accountNavItems = [
 
 export const contactNavItems = [
     {
-        titleKey: 'navigation.allContacts',
+        titleKey: 'globals.terms.contact',
         href: '/contacts',
     }
 ]

frontend/src/features/admin/agents/AgentForm.vue

@@ -12,7 +12,7 @@
 
         <div class="space-y-4 flex-2">
           <div class="flex items-center gap-3">
-            <h3 class="text-lg font-semibold text-gray-900">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-foreground">
               {{ props.initialValues.first_name }} {{ props.initialValues.last_name }}
             </h3>
             <Badge :class="['px-2 rounded-full text-xs font-medium', availabilityStatus.color]">
@@ -25,7 +25,7 @@
               <Clock class="w-5 h-5 text-gray-400" />
               <div>
                 <p class="text-sm text-gray-500">{{ $t('form.field.lastActive') }}</p>
-                <p class="text-sm font-medium text-gray-700">
+                <p class="text-sm font-medium text-gray-700 dark:text-foreground">
                   {{
                     props.initialValues.last_active_at
                       ? format(new Date(props.initialValues.last_active_at), 'PPpp')
@@ -38,7 +38,7 @@
               <LogIn class="w-5 h-5 text-gray-400" />
               <div>
                 <p class="text-sm text-gray-500">{{ $t('form.field.lastLogin') }}</p>
-                <p class="text-sm font-medium text-gray-700">
+                <p class="text-sm font-medium text-gray-700 dark:text-foreground">
                   {{
                     props.initialValues.last_login_at
                       ? format(new Date(props.initialValues.last_login_at), 'PPpp')

frontend/src/features/admin/automation/ActionBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-5 rounded-lg" :class="{ 'box p-5': actions.length > 0 }">
+  <div class="space-y-5 rounded" :class="{ 'box p-5': actions.length > 0 }">
     <div class="space-y-5">
       <div v-for="(action, index) in actions" :key="index" class="space-y-5">
         <div v-if="index > 0">
@@ -48,63 +48,17 @@
                 class="w-48"
                 v-if="action.type && conversationActions[action.type]?.type === 'select'"
               >
-                <ComboBox
+                <SelectComboBox
                   v-model="action.value[0]"
                   :items="conversationActions[action.type]?.options"
                   :placeholder="t('form.field.select')"
                   @select="handleValueChange($event, index)"
-                >
-                  <template #item="{ item }">
-                    <div class="flex items-center gap-2 ml-2">
-                      <Avatar v-if="action.type === 'assign_user'" class="w-7 h-7">
-                        <AvatarImage :src="item.avatar_url || ''" :alt="item.label.slice(0, 2)" />
-                        <AvatarFallback>
-                          {{ item.label.slice(0, 2).toUpperCase() }}
-                        </AvatarFallback>
-                      </Avatar>
-                      <span v-if="action.type === 'assign_team'">
-                        {{ item.emoji }}
-                      </span>
-                      <span>{{ item.label }}</span>
-                    </div>
-                  </template>
-
-                  <template #selected="{ selected }">
-                    <div v-if="action.type === 'assign_team'">
-                      <div v-if="selected" class="flex items-center gap-2">
-                        {{ selected.emoji }}
-                        <span>{{ selected.label }}</span>
-                      </div>
-                      <span v-else>{{ $t('form.field.selectTeam') }}</span>
-                    </div>
-
-                    <div v-else-if="action.type === 'assign_user'" class="flex items-center gap-2">
-                      <div v-if="selected" class="flex items-center gap-2">
-                        <Avatar class="w-7 h-7">
-                          <AvatarImage
-                            :src="selected.avatar_url ?? ''"
-                            :alt="selected.label.slice(0, 2)"
-                          />
-                          <AvatarFallback>
-                            {{ selected.label.slice(0, 2).toUpperCase() }}
-                          </AvatarFallback>
-                        </Avatar>
-                        <span>{{ selected.label }}</span>
-                      </div>
-                      <span v-else>{{ $t('form.field.selectUser') }}</span>
-                    </div>
-                    <span v-else>
-                      <span v-if="!selected"> {{ $t('form.field.select') }}</span>
-                      <span v-else>{{ selected.label }} </span>
-                    </span>
-                  </template>
-                </ComboBox>
+                  :type="action.type === 'assign_team' ? 'team' : 'user'"
+                />
               </div>
             </div>
 
-            <div class="cursor-pointer" @click.prevent="removeAction(index)">
-              <X size="16" />
-            </div>
+            <CloseButton :onClose="() => removeAction(index)" />
           </div>
 
           <div
@@ -114,7 +68,7 @@
             <Editor
               v-model:htmlContent="action.value[0]"
               @update:htmlContent="(value) => handleEditorChange(value, index)"
-              :placeholder="t('editor.placeholder')"
+              :placeholder="t('editor.newLine') + t('editor.send') + t('editor.cmdK')"
             />
           </div>
         </div>
@@ -133,7 +87,7 @@
 <script setup>
 import { toRefs } from 'vue'
 import { Button } from '@/components/ui/button'
-import { X } from 'lucide-vue-next'
+import CloseButton from '@/components/button/CloseButton.vue'
 import { useTagStore } from '@/stores/tag'
 import {
   Select,
@@ -143,13 +97,12 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select'
-import ComboBox from '@/components/ui/combobox/ComboBox.vue'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { SelectTag } from '@/components/ui/select'
 import { useConversationFilters } from '@/composables/useConversationFilters'
 import { getTextFromHTML } from '@/utils/strings.js'
 import { useI18n } from 'vue-i18n'
-import Editor from '@/features/conversation/ConversationTextEditor.vue'
+import Editor from '@/components/editor/TextEditor.vue'
+import SelectComboBox from '@/components/combobox/SelectCombobox.vue'
 
 const props = defineProps({
   actions: {

frontend/src/features/admin/automation/RuleBox.vue

@@ -23,7 +23,7 @@
       </RadioGroup>
     </div>
 
-    <div class="space-y-5 rounded-lg" :class="{ 'box p-5': ruleGroup.rules?.length > 0 }">
+    <div class="space-y-5 rounded" :class="{ 'box p-5': ruleGroup.rules?.length > 0 }">
       <div class="space-y-5">
         <div v-for="(rule, index) in ruleGroup.rules" :key="rule" class="space-y-5">
           <div v-if="index > 0">
@@ -102,59 +102,12 @@
 
               <!-- Select input -->
               <div v-if="inputType(index) === 'select'">
-                <ComboBox
+                <SelectComboBox
                   v-model="rule.value"
                   :items="getFieldOptions(rule.field, rule.field_type)"
                   @select="handleValueChange($event, index)"
-                >
-                  <template #item="{ item }">
-                    <div class="flex items-center gap-2 ml-2">
-                      <Avatar v-if="rule.field === 'assigned_user'" class="w-7 h-7">
-                        <AvatarImage :src="item.avatar_url || ''" :alt="item.label.slice(0, 2)" />
-                        <AvatarFallback>
-                          {{ item.label.slice(0, 2).toUpperCase() }}
-                        </AvatarFallback>
-                      </Avatar>
-                      <span v-if="rule.field === 'assigned_team'">
-                        {{ item.emoji }}
-                      </span>
-                      <span>{{ item.label }}</span>
-                    </div>
-                  </template>
-
-                  <template #selected="{ selected }">
-                    <div v-if="rule?.field === 'assigned_team'">
-                      <div v-if="selected" class="flex items-center gap-2">
-                        {{ selected.emoji }}
-                        <span>{{ selected.label }}</span>
-                      </div>
-                      <span v-else>{{ $t('form.field.selectTeam') }}</span>
-                    </div>
-
-                    <div
-                      v-else-if="rule?.field === 'assigned_user'"
-                      class="flex items-center gap-2"
-                    >
-                      <div v-if="selected" class="flex items-center gap-2">
-                        <Avatar class="w-7 h-7">
-                          <AvatarImage
-                            :src="selected.avatar_url || ''"
-                            :alt="selected.label.slice(0, 2)"
-                          />
-                          <AvatarFallback>
-                            {{ selected.label.slice(0, 2).toUpperCase() }}
-                          </AvatarFallback>
-                        </Avatar>
-                        <span>{{ selected.label }}</span>
-                      </div>
-                      <span v-else>{{ $t('form.field.selectUser') }}</span>
-                    </div>
-                    <span v-else>
-                      <span v-if="!selected"> {{ $t('form.field.select') }}</span>
-                      <span v-else>{{ selected.label }} </span>
-                    </span>
-                  </template>
-                </ComboBox>
+                  :type="rule.field === 'assigned_user' ? 'user' : 'team'"
+                />
               </div>
 
               <!-- Tag input -->
@@ -209,9 +162,7 @@
             <div v-else class="flex-1"></div>
 
             <!-- Remove condition -->
-            <div class="cursor-pointer mt-2" @click.prevent="removeCondition(index)">
-              <X size="16" />
-            </div>
+            <CloseButton :onClose="() => removeCondition(index)" />
           </div>
 
           <div class="flex items-center space-x-2">
@@ -242,6 +193,7 @@ import { toRefs, computed, watch } from 'vue'
 import { Checkbox } from '@/components/ui/checkbox'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { Button } from '@/components/ui/button'
+import CloseButton from '@/components/button/CloseButton.vue'
 import {
   Select,
   SelectContent,
@@ -258,13 +210,11 @@ import {
   TagsInputItemDelete,
   TagsInputItemText
 } from '@/components/ui/tags-input'
-import { X } from 'lucide-vue-next'
 import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
-import ComboBox from '@/components/ui/combobox/ComboBox.vue'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { useI18n } from 'vue-i18n'
 import { useConversationFilters } from '@/composables/useConversationFilters'
+import SelectComboBox from '@/components/combobox/SelectCombobox.vue'
 
 const props = defineProps({
   ruleGroup: {

frontend/src/features/admin/automation/RuleTab.vue

@@ -23,6 +23,21 @@
       </Select>
     </div>
 
+    <div
+      v-if="!isLoading && rules.length === 0"
+      class="flex flex-col items-center justify-center py-12 px-4"
+    >
+      <div class="text-center space-y-2">
+        <p class="text-muted-foreground">
+          {{
+            $t('globals.messages.noResults', {
+              name: $t('globals.terms.rule', 2).toLowerCase()
+            })
+          }}
+        </p>
+      </div>
+    </div>
+
     <div class="space-y-4">
       <div v-if="type === 'new_conversation'">
         <draggable v-model="rules" class="space-y-5" item-key="id" @end="onDragEnd">

frontend/src/features/admin/macros/ActionBuilder.vue

@@ -1,125 +1,136 @@
 <template>
-  <div class="space-y-5 rounded-lg">
-    <div class="space-y-5">
-      <div v-for="(action, index) in model" :key="index" class="space-y-5">
-        <hr v-if="index" class="border-t-2 border-dotted border-gray-300" />
+  <div class="space-y-6">
+    <!-- Empty State -->
+    <div
+      v-if="!model.length"
+      class="text-center py-12 px-6 border-2 border-dashed border-muted rounded-lg"
+    >
+      <div class="mx-auto w-12 h-12 bg-muted rounded-full flex items-center justify-center mb-3">
+        <Plus class="w-6 h-6 text-muted-foreground" />
+      </div>
+      <h3 class="text-sm font-medium text-foreground mb-2">
+        {{ $t('globals.messages.no', { name: $t('globals.terms.action', 2).toLowerCase() }) }}
+      </h3>
+      <Button
+        @click.prevent="add"
+        variant="outline"
+        size="sm"
+        class="inline-flex items-center gap-2"
+      >
+        <Plus class="w-4 h-4" />
+        {{ config.addButtonText }}
+      </Button>
+    </div>
 
-        <div class="space-y-3">
-          <div class="flex items-center justify-between">
-            <div class="flex gap-5">
-              <div class="w-48">
-                <Select
-                  v-model="action.type"
-                  @update:modelValue="(value) => updateField(value, index)"
+    <!-- Actions List -->
+    <div v-else class="space-y-6">
+      <div v-for="(action, index) in model" :key="index" class="relative">
+        <!-- Action Card -->
+        <div class="border rounded p-6 shadow-sm hover:shadow-md transition-shadow">
+          <div class="flex items-start justify-between gap-4">
+            <div class="flex-1 space-y-4">
+              <!-- Action Type Selection -->
+              <div class="flex flex-col sm:flex-row gap-4">
+                <div class="flex-1 max-w-xs">
+                  <label class="block text-sm font-medium mb-2">{{
+                    $t('globals.messages.type', {
+                      name: $t('globals.terms.action')
+                    })
+                  }}</label>
+                  <Select
+                    v-model="action.type"
+                    @update:modelValue="(value) => updateField(value, index)"
+                  >
+                    <SelectTrigger class="w-full">
+                      <SelectValue :placeholder="config.typePlaceholder" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem
+                          v-for="(actionConfig, key) in config.actions"
+                          :key="key"
+                          :value="key"
+                        >
+                          {{ actionConfig.label }}
+                        </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <!-- Value Selection -->
+                <div
+                  v-if="action.type && config.actions[action.type]?.type === 'select'"
+                  class="flex-1 max-w-xs"
                 >
-                  <SelectTrigger>
-                    <SelectValue :placeholder="config.typePlaceholder" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectItem
-                        v-for="(actionConfig, key) in config.actions"
-                        :key="key"
-                        :value="key"
-                      >
-                        {{ actionConfig.label }}
-                      </SelectItem>
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
+                  <label class="block text-sm font-medium mb-2">Value</label>
+
+                  <SelectComboBox
+                    v-if="action.type === 'assign_user'"
+                    v-model="action.value[0]"
+                    :items="config.actions[action.type].options"
+                    :placeholder="config.valuePlaceholder"
+                    @update:modelValue="(value) => updateValue(value, index)"
+                    type="user"
+                  />
+
+                  <SelectComboBox
+                    v-else-if="action.type === 'assign_team'"
+                    v-model="action.value[0]"
+                    :items="config.actions[action.type].options"
+                    :placeholder="config.valuePlaceholder"
+                    @update:modelValue="(value) => updateValue(value, index)"
+                    type="team"
+                  />
+                  <SelectComboBox
+                    v-else
+                    v-model="action.value[0]"
+                    :items="config.actions[action.type].options"
+                    :placeholder="config.valuePlaceholder"
+                    @update:modelValue="(value) => updateValue(value, index)"
+                  />
+                </div>
               </div>
 
+              <!-- Tag Selection -->
               <div
-                v-if="action.type && config.actions[action.type]?.type === 'select'"
-                class="w-48"
+                v-if="action.type && config.actions[action.type]?.type === 'tag'"
+                class="max-w-md"
               >
-                <ComboBox
-                  v-model="action.value[0]"
-                  :items="config.actions[action.type].options"
-                  :placeholder="config.valuePlaceholder"
-                  @update:modelValue="(value) => updateValue(value, index)"
-                >
-                  <template #item="{ item }">
-                    <div v-if="action.type === 'assign_user'">
-                      <div class="flex items-center flex-1 gap-2 ml-2">
-                        <Avatar class="w-7 h-7">
-                          <AvatarImage :src="item.avatar_url || ''" :alt="item.label.slice(0, 2)" />
-                          <AvatarFallback
-                            >{{ item.label.slice(0, 2).toUpperCase() }}
-                          </AvatarFallback>
-                        </Avatar>
-                        <span>{{ item.label }}</span>
-                      </div>
-                    </div>
-                    <div v-else-if="action.type === 'assign_team'">
-                      <div class="flex items-center gap-2 ml-2">
-                        <span>{{ item.emoji }}</span>
-                        <span>{{ item.label }}</span>
-                      </div>
-                    </div>
-                    <div v-else>
-                      {{ item.label }}
-                    </div>
-                  </template>
-
-                  <template #selected="{ selected }">
-                    <div v-if="action.type === 'assign_user'">
-                      <div class="flex items-center gap-2">
-                        <div v-if="selected" class="flex items-center gap-2">
-                          <Avatar class="w-7 h-7">
-                            <AvatarImage
-                              :src="selected.avatar_url || ''"
-                              :alt="selected.label.slice(0, 2)"
-                            />
-                            <AvatarFallback>{{
-                              selected.label.slice(0, 2).toUpperCase()
-                            }}</AvatarFallback>
-                          </Avatar>
-                          <span>{{ selected.label }}</span>
-                        </div>
-                        <span v-else>{{ $t('form.field.selectUser') }}</span>
-                      </div>
-                    </div>
-                    <div v-else-if="action.type === 'assign_team'">
-                      <div class="flex items-center gap-2">
-                        <span v-if="selected">
-                          {{ selected.emoji }}
-                          <span>{{ selected.label }}</span>
-                        </span>
-                        <span v-else>
-                          {{ $t('form.field.selectTeam') }}
-                        </span>
-                      </div>
-                    </div>
-                    <div v-else-if="selected">
-                      {{ selected.label }}
-                    </div>
-                    <div v-else>{{ $t('form.field.select') }}</div>
-                  </template>
-                </ComboBox>
+                <label class="block text-sm font-medium mb-2">{{ $t('globals.terms.tag') }}</label>
+                <SelectTag
+                  v-model="action.value"
+                  :items="tagsStore.tagNames.map((tag) => ({ label: tag, value: tag }))"
+                  placeholder="Select tags"
+                />
               </div>
             </div>
 
-            <X class="cursor-pointer w-4" @click="remove(index)" />
-          </div>
-
-          <div v-if="action.type && config.actions[action.type]?.type === 'tag'">
-            <SelectTag
-              v-model="action.value"
-              :items="tagsStore.tagNames.map((tag) => ({ label: tag, value: tag }))"
-              placeholder="Select tag"
-            />
+            <!-- Remove Button -->
+            <CloseButton :onClose="() => remove(index)" />
           </div>
         </div>
       </div>
+
+      <!-- Add Action Button -->
+      <div class="flex justify-center pt-2">
+        <Button
+          type="button"
+          variant="outline"
+          @click="add"
+          class="inline-flex items-center gap-2 border-dashed hover:border-solid"
+        >
+          <Plus class="w-4 h-4" />
+          {{ config.addButtonText }}
+        </Button>
+      </div>
     </div>
-    <Button type="button" variant="outline" @click.prevent="add">{{ config.addButtonText }}</Button>
   </div>
 </template>
 
 <script setup>
 import { Button } from '@/components/ui/button'
-import { X } from 'lucide-vue-next'
+import { Plus } from 'lucide-vue-next'
 import {
   Select,
   SelectContent,
@@ -128,10 +139,10 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select'
-import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
+import CloseButton from '@/components/button/CloseButton.vue'
 import { SelectTag } from '@/components/ui/select'
 import { useTagStore } from '@/stores/tag'
-import ComboBox from '@/components/ui/combobox/ComboBox.vue'
+import SelectComboBox from '@/components/combobox/SelectCombobox.vue'
 
 const model = defineModel('actions', {
   type: Array,

frontend/src/features/admin/macros/MacroForm.vue

@@ -19,7 +19,7 @@
             <Editor
               v-model:htmlContent="componentField.modelValue"
               @update:htmlContent="(value) => componentField.onChange(value)"
-              :placeholder="t('editor.placeholder')"
+              :placeholder="t('editor.newLine') + t('editor.send') + t('editor.cmdK')"
             />
           </div>
         </FormControl>
@@ -27,9 +27,16 @@
       </FormItem>
     </FormField>
 
-    <FormField v-slot="{ componentField }" name="actions">
+    <FormField
+      v-slot="{ componentField }"
+      name="actions"
+      :validate-on-blur="false"
+      :validate-on-change="false"
+    >
       <FormItem>
-        <FormLabel> {{ t('admin.macro.actions') }}</FormLabel>
+        <FormLabel>
+          {{ t('globals.terms.action', 2) }} ({{ t('globals.terms.optional', 1).toLowerCase() }})
+        </FormLabel>
         <FormControl>
           <ActionBuilder
             v-model:actions="componentField.modelValue"
@@ -41,17 +48,57 @@
       </FormItem>
     </FormField>
 
-    <FormField v-slot="{ componentField }" name="visibility">
+    <FormField v-slot="{ componentField, handleChange }" name="visible_when">
       <FormItem>
-        <FormLabel>{{ t('admin.macro.visibility') }}</FormLabel>
+        <FormLabel>{{ t('globals.messages.visibleWhen') }}</FormLabel>
+        <FormControl>
+          <SelectTag
+            :items="[
+              { label: t('globals.messages.replying'), value: 'replying' },
+              {
+                label: t('globals.messages.starting', {
+                  name: t('globals.terms.conversation').toLowerCase()
+                }),
+                value: 'starting_conversation'
+              },
+              {
+                label: t('globals.messages.adding', {
+                  name: t('globals.terms.privateNote', 2).toLowerCase()
+                }),
+                value: 'adding_private_note'
+              }
+            ]"
+            v-model="componentField.modelValue"
+            @update:modelValue="handleChange"
+          />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <FormField
+      v-slot="{ componentField }"
+      name="visibility"
+      :validate-on-blur="false"
+      :validate-on-change="false"
+      :validate-on-input="false"
+      :validate-on-mount="false"
+      :validate-on-model-update="false"
+    >
+      <FormItem>
+        <FormLabel>{{ t('globals.terms.visibility') }}</FormLabel>
         <FormControl>
           <Select v-bind="componentField">
             <SelectTrigger>
-              <SelectValue placeholder="Select visibility" />
+              <SelectValue />
             </SelectTrigger>
             <SelectContent>
               <SelectGroup>
-                <SelectItem value="all">{{ t('admin.macro.visibility.all') }}</SelectItem>
+                <SelectItem value="all">{{
+                  t('globals.messages.all', {
+                    name: t('globals.terms.user', 2).toLowerCase()
+                  })
+                }}</SelectItem>
                 <SelectItem value="team">{{ t('globals.terms.team') }}</SelectItem>
                 <SelectItem value="user">{{ t('globals.terms.user') }}</SelectItem>
               </SelectGroup>
@@ -64,29 +111,14 @@
 
     <FormField v-if="form.values.visibility === 'team'" v-slot="{ componentField }" name="team_id">
       <FormItem>
-        <FormLabel>{{ t('globals.terms.user') }}</FormLabel>
+        <FormLabel>{{ t('globals.terms.team') }}</FormLabel>
         <FormControl>
-          <ComboBox
+          <SelectComboBox
             v-bind="componentField"
             :items="tStore.options"
             :placeholder="t('form.field.selectTeam')"
-          >
-            <template #item="{ item }">
-              <div class="flex items-center gap-2 ml-2">
-                <span>{{ item.emoji }}</span>
-                <span>{{ item.label }}</span>
-              </div>
-            </template>
-            <template #selected="{ selected }">
-              <div class="flex items-center gap-2">
-                <span v-if="selected">
-                  {{ selected.emoji }}
-                  <span>{{ selected.label }}</span>
-                </span>
-                <span v-else>{{ t('form.field.selectTeam') }}</span>
-              </div>
-            </template>
-          </ComboBox>
+            type="team"
+          />
         </FormControl>
         <FormMessage />
       </FormItem>
@@ -94,35 +126,14 @@
 
     <FormField v-if="form.values.visibility === 'user'" v-slot="{ componentField }" name="user_id">
       <FormItem>
-        <FormLabel>{{ t('globals.terms.user') }}</FormLabel>
+        <FormLabel>{{ t('globals.terms.agent') }}</FormLabel>
         <FormControl>
-          <ComboBox
+          <SelectComboBox
             v-bind="componentField"
             :items="uStore.options"
-            :placeholder="t('form.field.selectUser')"
-          >
-            <template #item="{ item }">
-              <div class="flex items-center gap-2 ml-2">
-                <Avatar class="w-7 h-7">
-                  <AvatarImage :src="item.avatar_url || ''" :alt="item.label.slice(0, 2)" />
-                  <AvatarFallback>{{ item.label.slice(0, 2).toUpperCase() }}</AvatarFallback>
-                </Avatar>
-                <span>{{ item.label }}</span>
-              </div>
-            </template>
-            <template #selected="{ selected }">
-              <div class="flex items-center gap-2">
-                <div v-if="selected" class="flex items-center gap-2">
-                  <Avatar class="w-7 h-7">
-                    <AvatarImage :src="selected.avatar_url || ''" :alt="selected.label.slice(0, 2)" />
-                    <AvatarFallback>{{ selected.label.slice(0, 2).toUpperCase() }}</AvatarFallback>
-                  </Avatar>
-                  <span>{{ selected.label }}</span>
-                </div>
-                <span v-else>{{ t('form.field.selectUser') }}</span>
-              </div>
-            </template>
-          </ComboBox>
+            :placeholder="t('form.field.selectAgent')"
+            type="user"
+          />
         </FormControl>
         <FormMessage />
       </FormItem>
@@ -139,24 +150,24 @@ import { Button } from '@/components/ui/button'
 import { Spinner } from '@/components/ui/spinner'
 import { Input } from '@/components/ui/input'
 import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
-import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
 import ActionBuilder from '@/features/admin/macros/ActionBuilder.vue'
 import { useConversationFilters } from '@/composables/useConversationFilters'
 import { useUsersStore } from '@/stores/users'
 import { useTeamStore } from '@/stores/team'
 import { getTextFromHTML } from '@/utils/strings.js'
 import { createFormSchema } from './formSchema.js'
+import SelectComboBox from '@/components/combobox/SelectCombobox.vue'
 import {
   Select,
   SelectContent,
   SelectGroup,
   SelectItem,
   SelectTrigger,
-  SelectValue
+  SelectValue,
+  SelectTag
 } from '@/components/ui/select'
-import ComboBox from '@/components/ui/combobox/ComboBox.vue'
 import { useI18n } from 'vue-i18n'
-import Editor from '@/features/conversation/ConversationTextEditor.vue'
+import Editor from '@/components/editor/TextEditor.vue'
 
 const { macroActions } = useConversationFilters()
 const { t } = useI18n()
@@ -189,7 +200,15 @@ const submitLabel = computed(() => {
   )
 })
 const form = useForm({
-  validationSchema: toTypedSchema(createFormSchema(t))
+  validationSchema: toTypedSchema(createFormSchema(t)),
+  initialValues: {
+    visible_when: props.initialValues.visible_when || [
+      'replying',
+      'starting_conversation',
+      'adding_private_note'
+    ],
+    visibility: props.initialValues.visibility || 'all'
+  }
 })
 
 const actionConfig = ref({

frontend/src/features/admin/macros/dataTableColumns.js

@@ -15,7 +15,7 @@ export const createColumns = (t) => [
   {
     accessorKey: 'visibility',
     header: function () {
-      return h('div', { class: 'text-center' }, t('admin.macro.visibility'))
+      return h('div', { class: 'text-center' }, t('globals.terms.visibility'))
     },
     cell: function ({ row }) {
       return h('div', { class: 'text-center' }, row.getValue('visibility'))

frontend/src/features/admin/macros/dataTableDropdown.vue

@@ -19,7 +19,7 @@
       <AlertDialogHeader>
         <AlertDialogTitle>{{ $t('globals.messages.areYouAbsolutelySure') }}</AlertDialogTitle>
         <AlertDialogDescription>
-          {{ $t('admin.macro.deleteConfirmation') }}
+          {{ $t('globals.messages.deletionConfirmation', { name: $t('globals.terms.macro') }) }}
         </AlertDialogDescription>
       </AlertDialogHeader>
       <AlertDialogFooter>

frontend/src/features/admin/macros/formSchema.js

@@ -1,10 +1,10 @@
 import * as z from 'zod'
 import { getTextFromHTML } from '@/utils/strings.js'
 
-const actionSchema = (t) => z.array(
+const actionSchema = () => z.array(
   z.object({
-    type: z.string().min(1, t('admin.macro.actionTypeRequired')),
-    value: z.array(z.string().min(1, t('admin.macro.actionValueRequired'))),
+    type: z.string().optional(),
+    value: z.array(z.string()).optional(),
   })
 )
 
@@ -13,6 +13,7 @@ export const createFormSchema = (t) => z.object({
   message_content: z.string().optional(),
   actions: actionSchema(t).optional().default([]),
   visibility: z.enum(['all', 'team', 'user']),
+  visible_when: z.array(z.enum(['replying', 'starting_conversation', 'adding_private_note'])),
   team_id: z.string().nullable().optional(),
   user_id: z.string().nullable().optional(),
 })
@@ -34,19 +35,39 @@ export const createFormSchema = (t) => z.object({
   .refine(
     (data) => {
       // If visibility is 'team', team_id is required
-      if (data.visibility === 'team' && !data.team_id) {
-        return false
+      if (data.visibility === 'team') {
+        return !!data.team_id
       }
-      // If visibility is 'user', user_id is required
-      if (data.visibility === 'user' && !data.user_id) {
-        return false
-      }
-      // Otherwise, validation passes
       return true
     },
     {
-      message: t('admin.macro.teamOrUserRequired'),
+      message: t('globals.messages.required'),
+      path: ['team_id'],
+    }
+  )
+  .refine(
+    (data) => {
+      // If visibility is 'user', user_id is required
+      if (data.visibility === 'user') {
+        return !!data.user_id
+      }
+      return true
+    },
+    {
+      message: t('globals.messages.required'),
+      path: ['user_id'],
+    }
+  ).refine(
+    (data) => {
+      // if actions are present, all actions should have type and value defined.
+      if (data.actions && data.actions.length > 0) {
+        return data.actions.every(action => action.type?.length > 0 && action.value?.length > 0)
+      }
+      return true
+    },
+    {
+      message: t('admin.macro.actionInvalid'),
       // Field path to highlight
-      path: ['visibility'],
+      path: ['actions'],
     }
   )

frontend/src/features/admin/roles/RoleForm.vue

@@ -30,7 +30,7 @@
         <div
           v-for="entity in permissions"
           :key="entity.name"
-          class="rounded-lg border border-border bg-card"
+          class="rounded border border-border bg-card"
         >
           <div class="border-b border-border bg-muted/30 px-5 py-3">
             <h4 class="font-medium text-card-foreground">{{ entity.name }}</h4>

frontend/src/features/admin/sla/SLAForm.vue

@@ -27,7 +27,7 @@
           <Input type="text" placeholder="6h" v-bind="componentField" />
         </FormControl>
         <FormDescription>
-          {{ t('admin.sla.firstResponseTime.description') }}
+          {{ t('globals.messages.golangDurationHoursMinutes') }}
         </FormDescription>
         <FormMessage />
       </FormItem>
@@ -39,7 +39,20 @@
         <FormControl>
           <Input type="text" placeholder="24h" v-bind="componentField" />
         </FormControl>
-        <FormDescription>{{ t('admin.sla.resolutionTime.description') }} </FormDescription>
+        <FormDescription>{{ t('globals.messages.golangDurationHoursMinutes') }} </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <FormField v-slot="{ componentField }" name="next_response_time">
+      <FormItem>
+        <FormLabel>{{ t('admin.sla.nextResponseTime') }}</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="30m" v-bind="componentField" />
+        </FormControl>
+        <FormDescription>
+          {{ t('globals.messages.golangDurationHoursMinutes') }}
+        </FormDescription>
         <FormMessage />
       </FormItem>
     </FormField>
@@ -82,7 +95,7 @@
           <div class="flex items-center justify-between mb-5">
             <div class="flex items-center gap-3">
               <span
-                class="flex items-center justify-center w-8 h-8 rounded-lg"
+                class="flex items-center justify-center w-8 h-8 rounded"
                 :class="{
                   'bg-red-100/80 text-red-600': notification.type === 'breach',
                   'bg-amber-100/80 text-amber-600': notification.type === 'warning'
@@ -93,16 +106,19 @@
               </span>
               <div>
                 <div class="font-medium text-foreground">
-                  {{ notification.type === 'warning' ? t('admin.sla.warning') : t('admin.sla.breach') }} {{ t('admin.sla.notification') }}
+                  {{
+                    notification.type === 'warning' ? t('admin.sla.warning') : t('admin.sla.breach')
+                  }}
+                  {{ t('globals.terms.alert').toLowerCase() }}
                 </div>
                 <p class="text-xs text-muted-foreground">
-                  {{ notification.type === 'warning' ? 'Pre-breach alert' : 'Post-breach action' }}
+                  {{ notification.type === 'warning' ? 'Pre-breach alert' : 'Post-breach alert' }}
                 </p>
               </div>
             </div>
             <Button
               variant="ghost"
-              size="sm"
+              size="xs"
               @click.prevent="removeNotification(index)"
               class="opacity-70 hover:opacity-100 text-muted-foreground hover:text-foreground"
             >
@@ -126,16 +142,16 @@
                       {{ t('admin.sla.triggerTiming') }}
                     </FormLabel>
                     <FormControl>
-                      <Select v-bind="componentField" class="hover:border-foreground/30">
+                      <Select v-bind="componentField">
                         <SelectTrigger class="w-full">
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
                           <SelectGroup>
-                            <SelectItem value="immediately" class="focus:bg-accent">
+                            <SelectItem value="immediately">
                               {{ t('admin.sla.immediatelyOnBreach') }}
                             </SelectItem>
-                            <SelectItem value="after" class="focus:bg-accent">
+                            <SelectItem value="after">
                               {{ t('admin.sla.afterSpecificDuration') }}
                             </SelectItem>
                           </SelectGroup>
@@ -149,26 +165,23 @@
                   <FormItem v-if="shouldShowTimeDelay(index)">
                     <FormLabel class="flex items-center gap-1.5 text-sm font-medium">
                       <Hourglass class="w-4 h-4 text-muted-foreground" />
-                      {{ notification.type === 'warning' ? t('admin.sla.advanceWarning') : t('admin.sla.followUpDelay') }}
+                      {{
+                        notification.type === 'warning'
+                          ? t('admin.sla.advanceWarning')
+                          : t('admin.sla.followUpDelay')
+                      }}
                     </FormLabel>
                     <FormControl>
-                      <Select v-bind="componentField" class="hover:border-foreground/30">
-                        <SelectTrigger class="w-full">
-                          <SelectValue :placeholder="t('admin.sla.selectDuration')" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectGroup>
-                            <SelectItem
-                              v-for="duration in delayDurations"
-                              :key="duration"
-                              :value="duration"
-                              class="focus:bg-accent"
-                            >
-                              {{ duration }}
-                            </SelectItem>
-                          </SelectGroup>
-                        </SelectContent>
-                      </Select>
+                      <Input
+                        type="text"
+                        :placeholder="
+                          t('globals.messages.enter', {
+                            name: t('globals.terms.duration').toLowerCase()
+                          })
+                        "
+                        v-bind="componentField"
+                        @keydown.enter.prevent
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -185,7 +198,7 @@
                 <FormItem>
                   <FormLabel class="flex items-center gap-1.5 text-sm font-medium">
                     <Users class="w-4 h-4 text-muted-foreground" />
-                    {{ t('admin.sla.notificationRecipients') }}
+                    {{ t('admin.sla.alertRecipients') }}
                   </FormLabel>
                   <FormControl>
                     <SelectTag
@@ -205,6 +218,45 @@
                 </FormItem>
               </FormField>
             </div>
+
+            <FormField :name="`notifications.${index}.metric`" v-slot="{ componentField }">
+              <FormItem>
+                <FormLabel class="flex items-center gap-1.5 text-sm font-medium">
+                  <SlidersHorizontal class="w-4 h-4 text-muted-foreground" />
+                  {{ t('globals.terms.slaMetric') }}
+                </FormLabel>
+                <FormControl>
+                  <Select v-bind="componentField">
+                    <SelectTrigger class="w-full">
+                      <SelectValue
+                        :placeholder="
+                          t('form.field.select', {
+                            name: t('globals.terms.slaMetric').toLowerCase()
+                          })
+                        "
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value="all">
+                          {{ t('globals.messages.all') }}
+                        </SelectItem>
+                        <SelectItem value="first_response">
+                          {{ t('admin.sla.firstResponseTime') }}
+                        </SelectItem>
+                        <SelectItem value="next_response">
+                          {{ t('admin.sla.nextResponseTime') }}
+                        </SelectItem>
+                        <SelectItem value="resolution">
+                          {{ t('admin.sla.resolutionTime') }}
+                        </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
           </div>
         </div>
       </div>
@@ -212,10 +264,10 @@
       <!-- Empty State -->
       <div
         v-else
-        class="flex flex-col items-center justify-center p-8 space-y-3 rounded-xl bg-muted/30 border border-dashed"
+        class="flex flex-col items-center justify-center p-8 space-y-3 rounded bg-muted/30 border border-dashed"
       >
         <Bell class="w-8 h-8 text-muted-foreground" />
-        <p class="text-sm text-muted-foreground">{{ t('admin.sla.noNotificationsConfigured') }}</p>
+        <p class="text-sm text-muted-foreground">{{ t('admin.sla.noAlertsConfigured') }}</p>
       </div>
     </div>
 
@@ -231,7 +283,17 @@ import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { createFormSchema } from './formSchema'
 import { Button } from '@/components/ui/button'
-import { X, Plus, Timer, CircleAlert, Users, Clock, Hourglass, Bell } from 'lucide-vue-next'
+import {
+  X,
+  Plus,
+  Timer,
+  CircleAlert,
+  Users,
+  Clock,
+  Hourglass,
+  Bell,
+  SlidersHorizontal
+} from 'lucide-vue-next'
 import { useUsersStore } from '@/stores/users'
 import {
   FormControl,
@@ -274,27 +336,11 @@ const props = defineProps({
 
 const usersStore = useUsersStore()
 const submitLabel = computed(() => {
-  return props.submitLabel || (props.initialValues.id ? t('globals.buttons.update') : t('globals.buttons.create'))
+  return (
+    props.submitLabel ||
+    (props.initialValues.id ? t('globals.buttons.update') : t('globals.buttons.create'))
+  )
 })
-const delayDurations = [
-  '5m',
-  '10m',
-  '15m',
-  '30m',
-  '45m',
-  '1h',
-  '2h',
-  '3h',
-  '4h',
-  '5h',
-  '6h',
-  '7h',
-  '8h',
-  '9h',
-  '10h',
-  '11h',
-  '12h'
-]
 
 const { t } = useI18n()
 const form = useForm({
@@ -320,7 +366,8 @@ const addNotification = (type) => {
     type: type,
     time_delay_type: type === 'warning' ? 'before' : 'immediately',
     time_delay: type === 'warning' ? '10m' : '',
-    recipients: []
+    recipients: [],
+    metric: 'all'
   })
   form.setFieldValue('notifications', notifications)
 }
@@ -341,6 +388,8 @@ watch(
 
     const transformedNotifications = (newValues.notifications || []).map((notification) => ({
       ...notification,
+      // Default value, notification applies to all metrics unless specified.
+      metric: notification.metric || 'all',
       time_delay_type:
         notification.type === 'warning'
           ? 'before'

frontend/src/features/admin/sla/formSchema.js

@@ -1,54 +1,79 @@
 import * as z from 'zod'
 import { isGoHourMinuteDuration } from '@/utils/strings'
 
-export const createFormSchema = (t) => z.object({
-    name: z
-        .string()
-        .min(1, { message: t('admin.sla.name.valid') })
-        .max(255, { message: t('admin.sla.name.valid') }),
-    description: z
-        .string()
-        .min(1, { message: t('admin.sla.description.valid') })
-        .max(255, { message: t('admin.sla.description.valid') }),
-    first_response_time: z.string().refine(isGoHourMinuteDuration, {
-        message:
-            t('globals.messages.goHourMinuteDuration'),
-    }),
-    resolution_time: z.string().refine(isGoHourMinuteDuration, {
-        message:
-            t('globals.messages.goHourMinuteDuration'),
-    }),
-    notifications: z
-        .array(
-            z
-                .object({
-                    type: z.enum(['breach', 'warning']),
-                    time_delay_type: z.enum(['immediately', 'after', 'before']),
-                    time_delay: z.string().optional(),
-                    recipients: z
-                        .array(z.string())
-                        .min(1, { message: t('globals.messages.atleastOneRecipient') })
+export const createFormSchema = (t) =>
+    z
+        .object({
+            name: z
+                .string()
+                .min(1, { message: t('admin.sla.name.valid') })
+                .max(255, { message: t('admin.sla.name.valid') }),
+            description: z
+                .string()
+                .min(1, { message: t('admin.sla.description.valid') })
+                .max(255, { message: t('admin.sla.description.valid') }),
+            first_response_time: z.string().nullable().optional().refine(val => !val || isGoHourMinuteDuration(val), {
+                message: t('globals.messages.goHourMinuteDuration'),
+            }),
+            resolution_time: z.string().nullable().optional().refine(val => !val || isGoHourMinuteDuration(val), {
+                message: t('globals.messages.goHourMinuteDuration'),
+            }),
+            next_response_time: z.string().nullable().optional().refine(val => !val || isGoHourMinuteDuration(val), {
+                message: t('globals.messages.goHourMinuteDuration'),
+            }),
+            notifications: z
+                .array(
+                    z
+                        .object({
+                            type: z.enum(['breach', 'warning']),
+                            time_delay_type: z.enum(['immediately', 'after', 'before']),
+                            time_delay: z.string().optional(),
+                            metric: z.enum(['first_response', 'resolution', 'next_response', 'all']),
+                            recipients: z
+                                .array(z.string())
+                                .min(1, { message: t('globals.messages.atleastOneRecipient') }),
+                        })
+                        .superRefine((obj, ctx) => {
+                            if (obj.time_delay_type !== 'immediately') {
+                                if (!obj.time_delay || obj.time_delay === '') {
+                                    ctx.addIssue({
+                                        code: z.ZodIssueCode.custom,
+                                        message: t('globals.messages.required'),
+                                        path: ['time_delay'],
+                                    });
+                                } else if (!isGoHourMinuteDuration(obj.time_delay)) {
+                                    ctx.addIssue({
+                                        code: z.ZodIssueCode.custom,
+                                        message: t('globals.messages.goHourMinuteDuration'),
+                                        path: ['time_delay'],
+                                    });
+                                }
+                            }
+                        })
+                )
+                .optional()
+                .default([]),
+        })
+        .superRefine((data, ctx) => {
+            const { first_response_time, resolution_time, next_response_time } = data
+            const isEmpty = !first_response_time && !resolution_time && !next_response_time
+
+            if (isEmpty) {
+                const msg = t('admin.sla.atleastOneSLATimeRequired')
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    path: ['first_response_time'],
+                    message: msg,
                 })
-                .superRefine((obj, ctx) => {
-                    if (obj.time_delay_type !== 'immediately') {
-                        if (!obj.time_delay || obj.time_delay === '') {
-                            ctx.addIssue({
-                                code: z.ZodIssueCode.custom,
-                                message:
-                                    t('admin.sla.delay.required'),
-                                path: ['time_delay']
-                            })
-                        } else if (!isGoHourMinuteDuration(obj.time_delay)) {
-                            ctx.addIssue({
-                                code: z.ZodIssueCode.custom,
-                                message:
-                                    t('globals.messages.goHourMinuteDuration'),
-                                path: ['time_delay']
-                            })
-                        }
-                    }
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    path: ['resolution_time'],
+                    message: msg,
                 })
-        )
-        .optional()
-        .default([])
-})
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    path: ['next_response_time'],
+                    message: msg,
+                })
+            }
+        })

frontend/src/features/admin/templates/TemplateForm.vue

@@ -17,7 +17,7 @@
 
     <FormField v-slot="{ componentField }" name="subject" v-if="!isOutgoingTemplate">
       <FormItem>
-        <FormLabel>{{ $t('form.field.subject') }}</FormLabel>
+        <FormLabel>{{ $t('globals.terms.subject') }}</FormLabel>
         <FormControl>
           <Input type="text" placeholder="" v-bind="componentField" />
         </FormControl>

frontend/src/features/command/CommandBox.vue

@@ -1,32 +1,15 @@
 <template>
-  <CommandDialog
-    :open="open"
-    @update:open="handleOpenChange"
-    class="transform-gpu z-[51] !min-w-[50vw] !min-h-[60vh]"
-  >
+  <CommandDialog :open="open" @update:open="toggleOpen" class="transform-gpu z-[51] !min-w-[50vw]">
     <CommandInput :placeholder="t('command.typeCmdOrSearch')" @keydown="onInputKeydown" />
-    <CommandList class="!min-h-[60vh] !min-w-[50vw]">
+    <CommandList
+      class="!min-h-[60vh] h-[60vh] !min-w-[50vw]"
+      :class="{ 'overflow-hidden': nestedCommand === 'apply-macro' }"
+    >
       <CommandEmpty>
         <p class="text-muted-foreground">{{ $t('command.noCommandAvailable') }}</p>
       </CommandEmpty>
 
-      <!-- Commands requiring a conversation to be open -->
-      <CommandGroup
-        :heading="t('globals.terms.conversation', 2)"
-        value="conversations"
-        v-if="nestedCommand === null && conversationStore.hasConversationOpen"
-      >
-        <CommandItem value="conv-snooze" @select="setNestedCommand('snooze')">
-          {{ $t('globals.messages.snooze') }}
-        </CommandItem>
-        <CommandItem value="conv-resolve" @select="resolveConversation">
-          {{ $t('globals.messages.resolve') }}
-        </CommandItem>
-        <CommandItem value="apply-macro" @select="setNestedCommand('apply-macro')">
-          {{ $t('globals.messages.applyMacro') }}
-        </CommandItem>
-      </CommandGroup>
-
+      <!-- Snooze Options -->
       <CommandGroup v-if="nestedCommand === 'snooze'" heading="Snooze for">
         <CommandItem value="1 hour" @select="handleSnooze(60)">
           1 {{ $t('globals.terms.hour') }}
@@ -52,22 +35,27 @@
       </CommandGroup>
 
       <!-- Macros -->
-      <div v-if="nestedCommand === 'apply-macro'" class="bg-background">
-        <CommandGroup heading="Apply macro" class="pb-2">
-          <div class="min-h-[400px] overflow-auto">
-            <div class="grid grid-cols-12 gap-3">
+      <div
+        v-if="
+          nestedCommand === 'apply-macro-to-existing-conversation' ||
+          nestedCommand === 'apply-macro-to-new-conversation'
+        "
+      >
+        <CommandGroup heading="Apply macro">
+          <div class="min-h-[400px]">
+            <div class="h-[60vh] grid grid-cols-12">
               <!-- Left Column: Macro List (30%) -->
-              <div class="col-span-4 pr-2 border-r">
+              <div class="col-span-4 pr-4 border-r overflow-y-auto h-full">
                 <CommandItem
                   v-for="(macro, index) in macroStore.macroOptions"
                   :key="macro.value"
-                  :value="macro.label"
+                  :value="macro.label + '|' + index"
                   :data-index="index"
                   @select="handleApplyMacro(macro)"
-                  class="px-3 py-2 rounded-md cursor-pointer transition-all duration-200 hover:bg-primary/10 hover:text-primary"
+                  class="px-3 py-2 rounded cursor-pointer transition-all duration-200 hover:bg-primary/10 hover:"
                 >
                   <div class="flex items-center gap-2">
-                    <Zap size="14" class="text-primary shrink-0" />
+                    <Zap size="14" class="shrink-0" />
                     <span class="text-sm truncate w-full break-words whitespace-normal">{{
                       macro.label
                     }}</span>
@@ -76,67 +64,63 @@
               </div>
 
               <!-- Right Column: Macro Details (70%) -->
-              <div class="col-span-8 pl-2">
+              <div class="col-span-8 px-4 overflow-y-auto h-full pb-12">
                 <div class="space-y-3 text-xs">
                   <!-- Reply Preview -->
-                  <div v-if="replyContent" class="space-y-1">
-                    <p class="text-xs font-semibold text-primary">
+                  <div v-if="replyContent" class="space-y-2">
+                    <p class="text-xs font-semibold text-foreground">
                       {{ $t('command.replyPreview') }}
                     </p>
                     <div
-                      class="w-full min-h-200 p-2 bg-muted/50 rounded-md overflow-auto shadow-sm native-html"
+                      class="w-full min-h-200 p-2 bg-muted/50 rounded overflow-auto shadow native-html"
                       v-dompurify-html="replyContent"
                     />
                   </div>
 
                   <!-- Actions -->
-                  <div v-if="otherActions.length > 0" class="space-y-1">
-                    <p class="text-xs font-semibold text-primary">
+                  <div v-if="otherActions.length > 0" class="space-y-2">
+                    <p class="text-xs font-semibold">
                       {{ $t('globals.terms.action', 2) }}
                     </p>
                     <div class="space-y-1.5 max-w-sm">
                       <div
                         v-for="action in otherActions"
                         :key="action.type"
-                        class="flex items-center gap-2 px-2 py-1.5 bg-muted/30 hover:bg-accent hover:text-accent-foreground rounded-md text-xs transition-all duration-200 group"
+                        class="flex items-center gap-2 px-2 py-1.5 rounded text-xs bg-muted/50 hover:bg-accent hover:text-accent-foreground transition duration-200 group"
                       >
                         <div
-                          class="p-1 bg-primary/10 rounded-full group-hover:bg-primary/20 transition-colors duration-200"
+                          class="p-1 rounded-full group-hover:bg-muted/20 transition duration-200"
                         >
-                          <User
-                            v-if="action.type === 'assign_user'"
-                            :size="10"
-                            class="shrink-0 text-primary"
-                          />
+                          <User v-if="action.type === 'assign_user'" :size="10" class="shrink-0" />
                           <Users
                             v-else-if="action.type === 'assign_team'"
                             :size="10"
-                            class="shrink-0 text-primary"
+                            class="shrink-0"
                           />
                           <Pin
                             v-else-if="action.type === 'set_status'"
                             :size="10"
-                            class="shrink-0 text-primary"
+                            class="shrink-0"
                           />
                           <Rocket
                             v-else-if="action.type === 'set_priority'"
                             :size="10"
-                            class="shrink-0 text-primary"
+                            class="shrink-0"
                           />
                           <Tags
                             v-else-if="action.type === 'add_tags'"
                             :size="10"
-                            class="shrink-0 text-primary"
+                            class="shrink-0"
                           />
                           <Tags
                             v-else-if="action.type === 'set_tags'"
                             :size="10"
-                            class="shrink-0 text-primary"
+                            class="shrink-0"
                           />
                           <Tags
                             v-else-if="action.type === 'remove_tags'"
                             :size="10"
-                            class="shrink-0 text-primary"
+                            class="shrink-0"
                           />
                         </div>
                         <span class="truncate">{{ getActionLabel(action) }}</span>
@@ -159,6 +143,26 @@
           </div>
         </CommandGroup>
       </div>
+
+      <!-- Commands requiring a conversation to be open -->
+      <CommandGroup
+        :heading="t('globals.terms.conversation', 2)"
+        value="conversations"
+        v-else-if="conversationStore.hasConversationOpen && !nestedCommand"
+      >
+        <CommandItem value="conv-snooze" @select="setNestedCommand('snooze')">
+          {{ $t('globals.messages.snooze') }}
+        </CommandItem>
+        <CommandItem value="conv-resolve" @select="resolveConversation">
+          {{ $t('globals.messages.resolve') }}
+        </CommandItem>
+        <CommandItem
+          value="apply-macro"
+          @select="setNestedCommand('apply-macro-to-existing-conversation')"
+        >
+          {{ $t('globals.messages.applyMacro') }}
+        </CommandItem>
+      </CommandGroup>
     </CommandList>
 
     <!-- Navigation -->
@@ -252,7 +256,7 @@ const { Meta_K, Ctrl_K } = useMagicKeys({
 })
 
 watch([Meta_K, Ctrl_K], ([mac, win]) => {
-  if (mac || win) handleOpenChange()
+  if (mac || win) toggleOpen()
 })
 
 const highlightedMacro = ref(null)
@@ -260,8 +264,12 @@ const highlightedMacro = ref(null)
 function handleApplyMacro(macro) {
   // Create a deep copy.
   const plainMacro = JSON.parse(JSON.stringify(macro))
-  conversationStore.setMacro(plainMacro)
-  handleOpenChange()
+  if (nestedCommand.value === 'apply-macro-to-new-conversation') {
+    conversationStore.setMacro(plainMacro, 'new-conversation')
+  } else {
+    conversationStore.setMacro(plainMacro, 'reply')
+  }
+  toggleOpen()
 }
 
 const getActionLabel = computed(() => (action) => {
@@ -286,8 +294,10 @@ const otherActions = computed(
     ) || []
 )
 
-function handleOpenChange() {
-  if (!open.value) nestedCommand.value = null
+function toggleOpen() {
+  if (nestedCommand.value != 'apply-macro-to-new-conversation' && !open.value) {
+    nestedCommand.value = null
+  }
   open.value = !open.value
 }
 
@@ -301,16 +311,16 @@ function formatDuration(minutes) {
 
 async function handleSnooze(minutes) {
   await conversationStore.snoozeConversation(formatDuration(minutes))
-  handleOpenChange()
+  toggleOpen()
 }
 
 async function resolveConversation() {
   await conversationStore.updateStatus(CONVERSATION_DEFAULT_STATUSES.RESOLVED)
-  handleOpenChange()
+  toggleOpen()
 }
 
 function showCustomDialog() {
-  handleOpenChange()
+  toggleOpen()
   showDatePicker.value = true
 }
 
@@ -330,7 +340,7 @@ function handleCustomSnooze() {
   }
   handleSnooze(diffMinutes)
   closeDatePicker()
-  handleOpenChange()
+  toggleOpen()
 }
 
 function onInputKeydown(e) {
@@ -344,9 +354,9 @@ function onInputKeydown(e) {
 }
 
 onMounted(() => {
-  emitter.on(EMITTER_EVENTS.SET_NESTED_COMMAND, (command) => {
-    setNestedCommand(command)
-    open.value = true
+  emitter.on(EMITTER_EVENTS.SET_NESTED_COMMAND, (data) => {
+    setNestedCommand(data.command)
+    open.value = data.open
   })
   watchHighlightedMacro()
 })

frontend/src/features/contact/ContactNotes.vue

@@ -2,7 +2,7 @@
   <div class="w-full space-y-6 pb-8 relative">
     <!-- Header -->
     <div class="flex items-center justify-between mb-4">
-      <span class="text-xl font-semibold text-gray-900">{{ $t('globals.terms.note', 2) }}</span>
+      <span class="text-xl font-semibold text-gray-900 dark:text-foreground">{{ $t('globals.terms.note', 2) }}</span>
       <Button
         variant="outline"
         size="sm"
@@ -27,7 +27,7 @@
             <Editor
               v-model:htmlContent="newNote"
               @update:htmlContent="(value) => (newNote = value)"
-              :placeholder="t('editor.placeholder')"
+              :placeholder="t('editor.newLine') + t('editor.send') + t('editor.cmdK')"
             />
           </div>
           <div class="flex justify-end space-x-3 pt-2">
@@ -54,7 +54,7 @@
         class="overflow-hidden border-gray-2 hover:border-gray-300 transition-all duration-200 box hover:shadow"
       >
         <!-- Header -->
-        <CardHeader class="bg-gray-50/50 border-b p-2">
+        <CardHeader class="bg-gray-50/50 dark:bg-secondary border-b p-2">
           <div class="flex items-center justify-between">
             <div class="flex items-center space-x-3">
               <Avatar class="border border-gray-200 shadow-sm">
@@ -64,7 +64,7 @@
                 </AvatarFallback>
               </Avatar>
               <div>
-                <p class="text-sm font-medium text-gray-900">{{ note.first_name }} {{ note.last_name }}</p>
+                <p class="text-sm font-medium text-gray-900 dark:text-foreground">{{ note.first_name }} {{ note.last_name }}</p>
                 <p class="text-xs text-muted-foreground flex items-center">
                   <ClockIcon class="h-3 w-3 mr-1 inline-block opacity-70" />
                   {{ formatDate(note.created_at) }}
@@ -109,13 +109,13 @@
     <!-- No notes message -->
     <div
       v-if="notes.length === 0 && !isAddingNote && !isLoading"
-      class="box border-dashed p-10 text-center bg-gray-50/50 mt-6"
+      class="box border-dashed p-10 text-center bg-gray-50/50 mt-6 dark:bg-background"
     >
       <div class="flex flex-col items-center">
-        <div class="rounded-full bg-gray-100 p-4 mb-2">
-          <MessageSquareIcon class="text-gray-400" size="25" />
+        <div class="rounded-full bg-gray-100 dark:bg-foreground p-4 mb-2">
+          <MessageSquareIcon class="text-gray-400 dark:text-background" size="25" />
         </div>
-        <h3 class="mt-2 text-base font-medium text-gray-900">{{ $t('contact.notes.empty') }}</h3>
+        <h3 class="mt-2 text-base font-medium text-gray-900 dark:text-foreground">{{ $t('contact.notes.empty') }}</h3>
         <p class="mt-1 text-sm text-muted-foreground max-w-sm mx-auto">
           {{ $t('contact.notes.help') }}
         </p>
@@ -148,7 +148,7 @@ import {
   ClockIcon,
   MessageSquareIcon
 } from 'lucide-vue-next'
-import Editor from '@/features/conversation/ConversationTextEditor.vue'
+import Editor from '@/components/editor/TextEditor.vue'
 import { useI18n } from 'vue-i18n'
 import { useEmitter } from '@/composables/useEmitter'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'

frontend/src/features/conversation/Conversation.vue

@@ -12,7 +12,7 @@
         <DropdownMenu>
           <DropdownMenuTrigger>
             <div
-              class="flex items-center space-x-1 cursor-pointer bg-primary px-2 py-1 rounded-md text-sm"
+              class="flex items-center space-x-1 cursor-pointer bg-primary px-2 py-1 rounded text-sm"
               v-if="!conversationStore.conversation.loading"
             >
               <span class="text-secondary font-medium inline-block">
@@ -63,7 +63,10 @@ const emitter = useEmitter()
 
 const handleUpdateStatus = (status) => {
   if (status === CONVERSATION_DEFAULT_STATUSES.SNOOZED) {
-    emitter.emit(EMITTER_EVENTS.SET_NESTED_COMMAND, 'snooze')
+    emitter.emit(EMITTER_EVENTS.SET_NESTED_COMMAND, {
+      command: 'snooze',
+      open: true
+    })
     return
   }
   conversationStore.updateStatus(status)

frontend/src/features/conversation/CreateConversation.vue

@@ -1,228 +1,213 @@
 <template>
-  <Dialog :open="dialogOpen" @update:open="dialogOpen = false">
-    <DialogContent class="max-w-5xl w-full h-[90vh] flex flex-col">
-      <DialogHeader>
-        <DialogTitle>
-          {{
-            $t('globals.messages.new', {
-              name: $t('globals.terms.conversation')
-            })
-          }}
-        </DialogTitle>
-      </DialogHeader>
-      <form @submit="createConversation" class="flex flex-col flex-1 overflow-hidden">
-        <div class="flex-1 space-y-4 pr-1 overflow-y-auto pb-2">
-          <FormField name="contact_email">
-            <FormItem class="relative">
-              <FormLabel>{{ $t('form.field.email') }}</FormLabel>
-              <FormControl>
-                <Input
-                  type="email"
-                  :placeholder="t('conversation.searchContact')"
-                  v-model="emailQuery"
-                  @input="handleSearchContacts"
-                  autocomplete="off"
-                />
-              </FormControl>
-              <FormMessage />
+  <div>
+    <Dialog v-model:open="dialogOpen">
+      <DialogContent class="max-w-5xl w-full h-[90vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>
+            {{
+              $t('globals.messages.new', {
+                name: $t('globals.terms.conversation').toLowerCase()
+              })
+            }}
+          </DialogTitle>
+        </DialogHeader>
+        <form @submit="createConversation" class="flex flex-col flex-1 overflow-hidden">
+          <!-- Form Fields Section -->
+          <div class="space-y-4 pb-2 flex-shrink-0">
+            <div class="space-y-2">
+              <FormField name="contact_email">
+                <FormItem class="relative">
+                  <FormLabel>{{ $t('form.field.email') }}</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="email"
+                      :placeholder="t('conversation.searchContact')"
+                      v-model="emailQuery"
+                      @input="handleSearchContacts"
+                      autocomplete="off"
+                    />
+                  </FormControl>
+                  <FormMessage />
 
-              <ul
-                v-if="searchResults.length"
-                class="border rounded p-2 max-h-60 overflow-y-auto absolute bg-white w-full z-50 shadow-lg"
-              >
-                <li
-                  v-for="contact in searchResults"
-                  :key="contact.email"
-                  @click="selectContact(contact)"
-                  class="cursor-pointer p-2 hover:bg-gray-100 rounded"
-                >
-                  {{ contact.first_name }} {{ contact.last_name }} ({{ contact.email }})
-                </li>
-              </ul>
-            </FormItem>
-          </FormField>
+                  <ul
+                    v-if="searchResults.length"
+                    class="border rounded p-2 max-h-60 overflow-y-auto absolute w-full z-50 shadow bg-background"
+                  >
+                    <li
+                      v-for="contact in searchResults"
+                      :key="contact.email"
+                      @click="selectContact(contact)"
+                      class="cursor-pointer p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
+                    >
+                      {{ contact.first_name }} {{ contact.last_name }} ({{ contact.email }})
+                    </li>
+                  </ul>
+                </FormItem>
+              </FormField>
 
-          <FormField v-slot="{ componentField }" name="first_name">
-            <FormItem>
-              <FormLabel>{{ $t('form.field.firstName') }}</FormLabel>
-              <FormControl>
-                <Input type="text" placeholder="" v-bind="componentField" required />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
+              <!-- Name Group -->
+              <div class="grid grid-cols-2 gap-4">
+                <FormField v-slot="{ componentField }" name="first_name">
+                  <FormItem>
+                    <FormLabel>{{ $t('form.field.firstName') }}</FormLabel>
+                    <FormControl>
+                      <Input type="text" placeholder="" v-bind="componentField" required />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
 
-          <FormField v-slot="{ componentField }" name="last_name">
-            <FormItem>
-              <FormLabel>{{ $t('form.field.lastName') }}</FormLabel>
-              <FormControl>
-                <Input type="text" placeholder="" v-bind="componentField" required />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
+                <FormField v-slot="{ componentField }" name="last_name">
+                  <FormItem>
+                    <FormLabel>{{ $t('form.field.lastName') }}</FormLabel>
+                    <FormControl>
+                      <Input type="text" placeholder="" v-bind="componentField" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </div>
 
-          <FormField v-slot="{ componentField }" name="subject">
-            <FormItem>
-              <FormLabel>{{ $t('form.field.subject') }}</FormLabel>
-              <FormControl>
-                <Input type="text" placeholder="" v-bind="componentField" required />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
+              <!-- Subject and Inbox Group -->
+              <div class="grid grid-cols-2 gap-4">
+                <FormField v-slot="{ componentField }" name="subject">
+                  <FormItem>
+                    <FormLabel>{{ $t('globals.terms.subject') }}</FormLabel>
+                    <FormControl>
+                      <Input type="text" placeholder="" v-bind="componentField" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
 
-          <FormField v-slot="{ componentField }" name="inbox_id">
-            <FormItem>
-              <FormLabel>{{ $t('form.field.inbox') }}</FormLabel>
-              <FormControl>
-                <Select v-bind="componentField">
-                  <SelectTrigger>
-                    <SelectValue :placeholder="t('form.field.selectInbox')" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectItem
-                        v-for="option in inboxStore.options"
-                        :key="option.value"
-                        :value="option.value"
-                      >
-                        {{ option.label }}
-                      </SelectItem>
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
+                <FormField v-slot="{ componentField }" name="inbox_id">
+                  <FormItem>
+                    <FormLabel>{{ $t('form.field.inbox') }}</FormLabel>
+                    <FormControl>
+                      <Select v-bind="componentField">
+                        <SelectTrigger>
+                          <SelectValue :placeholder="t('form.field.selectInbox')" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectItem
+                              v-for="option in inboxStore.options"
+                              :key="option.value"
+                              :value="option.value"
+                            >
+                              {{ option.label }}
+                            </SelectItem>
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </div>
 
-          <!-- Set assigned team -->
-          <FormField v-slot="{ componentField }" name="team_id">
-            <FormItem>
-              <FormLabel>{{ $t('form.field.assignTeamOptional') }}</FormLabel>
-              <FormControl>
-                <ComboBox
-                  v-bind="componentField"
-                  :items="[{ value: 'none', label: 'None' }, ...teamStore.options]"
-                  :placeholder="t('form.field.selectTeam')"
-                >
-                  <template #item="{ item }">
-                    <div class="flex items-center gap-3 py-2">
-                      <div class="w-7 h-7 flex items-center justify-center">
-                        <span v-if="item.emoji">{{ item.emoji }}</span>
-                        <div
-                          v-else
-                          class="text-primary bg-muted rounded-full w-7 h-7 flex items-center justify-center"
-                        >
-                          <Users size="14" />
-                        </div>
-                      </div>
-                      <span class="text-sm">{{ item.label }}</span>
-                    </div>
-                  </template>
+              <!-- Assignment Group -->
+              <div class="grid grid-cols-2 gap-4">
+                <!-- Set assigned team -->
+                <FormField v-slot="{ componentField }" name="team_id">
+                  <FormItem>
+                    <FormLabel
+                      >{{ $t('form.field.assignTeam') }} ({{
+                        $t('globals.terms.optional').toLowerCase()
+                      }})</FormLabel
+                    >
+                    <FormControl>
+                      <SelectComboBox
+                        v-bind="componentField"
+                        :items="[{ value: 'none', label: 'None' }, ...teamStore.options]"
+                        :placeholder="t('form.field.selectTeam')"
+                        type="team"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
 
-                  <template #selected="{ selected }">
-                    <div class="flex items-center gap-3">
-                      <div class="w-7 h-7 flex items-center justify-center" v-if="selected">
-                        {{ selected?.emoji }}
-                      </div>
-                      <span class="text-sm">{{
-                        selected?.label || t('form.field.selectTeam')
-                      }}</span>
-                    </div>
-                  </template>
-                </ComboBox>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
+                <!-- Set assigned agent -->
+                <FormField v-slot="{ componentField }" name="agent_id">
+                  <FormItem>
+                    <FormLabel
+                      >{{ $t('form.field.assignAgent') }} ({{
+                        $t('globals.terms.optional').toLowerCase()
+                      }})</FormLabel
+                    >
+                    <FormControl>
+                      <SelectComboBox
+                        v-bind="componentField"
+                        :items="[{ value: 'none', label: 'None' }, ...uStore.options]"
+                        :placeholder="t('form.field.selectAgent')"
+                        type="user"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </div>
+            </div>
+          </div>
 
-          <!-- Set assigned agent -->
-          <FormField v-slot="{ componentField }" name="agent_id">
-            <FormItem>
-              <FormLabel>{{ $t('form.field.assignAgentOptional') }}</FormLabel>
-              <FormControl>
-                <ComboBox
-                  v-bind="componentField"
-                  :items="[{ value: 'none', label: 'None' }, ...uStore.options]"
-                  :placeholder="t('form.field.selectAgent')"
-                >
-                  <template #item="{ item }">
-                    <div class="flex items-center gap-3 py-2">
-                      <Avatar class="w-8 h-8">
-                        <AvatarImage
-                          :src="item.value === 'none' ? '' : item.avatar_url || ''"
-                          :alt="item.value === 'none' ? 'N' : item.label.slice(0, 2)"
-                        />
-                        <AvatarFallback>
-                          {{ item.value === 'none' ? 'N' : item.label.slice(0, 2).toUpperCase() }}
-                        </AvatarFallback>
-                      </Avatar>
-                      <span class="text-sm">{{ item.label }}</span>
-                    </div>
-                  </template>
+          <!-- Message Editor Section -->
+          <div class="flex-1 flex flex-col min-h-0 mt-4">
+            <FormField v-slot="{ componentField }" name="content">
+              <FormItem class="flex flex-col h-full">
+                <FormLabel>{{ $t('form.field.message') }}</FormLabel>
+                <FormControl class="flex-1 flex flex-col min-h-0">
+                  <div class="flex flex-col h-full">
+                    <Editor
+                      v-model:htmlContent="componentField.modelValue"
+                      @update:htmlContent="(value) => componentField.onChange(value)"
+                      :contentToSet="contentToSet"
+                      :placeholder="t('editor.newLine') + t('editor.send') + t('editor.cmdK')"
+                      :clearContent="clearEditorContent"
+                      :insertContent="insertContent"
+                      :autoFocus="false"
+                      class="w-full flex-1 overflow-y-auto p-2 box min-h-0"
+                      @send="createConversation"
+                    />
 
-                  <template #selected="{ selected }">
-                    <div class="flex items-center gap-3">
-                      <Avatar class="w-7 h-7" v-if="selected">
-                        <AvatarImage
-                          :src="
-                            selected?.value === 'none'
-                              ? ''
-                              : selected?.avatar_url || ''
-                          "
-                          :alt="selected?.value === 'none' ? 'N' : selected?.label?.slice(0, 2)"
-                        />
-                        <AvatarFallback>
-                          {{
-                            selected?.value === 'none'
-                              ? 'N'
-                              : selected?.label?.slice(0, 2)?.toUpperCase()
-                          }}
-                        </AvatarFallback>
-                      </Avatar>
-                      <span class="text-sm">{{
-                        selected?.label || t('form.field.selectAgent')
-                      }}</span>
-                    </div>
-                  </template>
-                </ComboBox>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
+                    <!-- Macro preview -->
+                    <MacroActionsPreview
+                      v-if="conversationStore.getMacro('new-conversation').actions?.length > 0"
+                      :actions="conversationStore.getMacro('new-conversation')?.actions || []"
+                      :onRemove="
+                        (action) => conversationStore.removeMacroAction(action, 'new-conversation')
+                      "
+                      class="mt-2 flex-shrink-0"
+                    />
 
-          <FormField
-            v-slot="{ componentField }"
-            name="content"
-            class="flex-1 min-h-0 flex flex-col"
-          >
-            <FormItem class="flex flex-col flex-1">
-              <FormLabel>{{ $t('form.field.message') }}</FormLabel>
-              <FormControl class="flex-1 min-h-0 flex flex-col">
-                <div class="flex-1 min-h-0 flex flex-col">
-                  <Editor
-                    v-model:htmlContent="componentField.modelValue"
-                    @update:htmlContent="(value) => componentField.onChange(value)"
-                    :placeholder="t('editor.placeholder')"
-                    class="w-full flex-1 overflow-y-auto p-2 min-h-[200px] box"
-                  />
-                </div>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-        </div>
+                    <!-- Attachments preview -->
+                    <AttachmentsPreview
+                      :attachments="mediaFiles"
+                      :uploadingFiles="uploadingFiles"
+                      :onDelete="handleFileDelete"
+                      v-if="mediaFiles.length > 0 || uploadingFiles.length > 0"
+                      class="mt-2 flex-shrink-0"
+                    />
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+          </div>
 
-        <DialogFooter class="mt-4 pt-2 border-t shrink-0">
-          <Button type="submit" :disabled="loading" :isLoading="loading">
-            {{ $t('globals.buttons.submit') }}
-          </Button>
-        </DialogFooter>
-      </form>
-    </DialogContent>
-  </Dialog>
+          <DialogFooter class="mt-4 pt-2 flex items-center !justify-between w-full flex-shrink-0">
+            <ReplyBoxMenuBar
+              :handleFileUpload="handleFileUpload"
+              @emojiSelect="handleEmojiSelect"
+            />
+            <Button type="submit" :disabled="isDisabled" :isLoading="loading">
+              {{ $t('globals.buttons.submit') }}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  </div>
 </template>
 
 <script setup>
@@ -239,12 +224,13 @@ import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
 import { z } from 'zod'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { ref, watch } from 'vue'
+import { ref, watch, onUnmounted, nextTick, onMounted, computed } from 'vue'
+import AttachmentsPreview from '@/features/conversation/message/attachment/AttachmentsPreview.vue'
+import { useConversationStore } from '@/stores/conversation'
+import MacroActionsPreview from '@/features/conversation/MacroActionsPreview.vue'
+import ReplyBoxMenuBar from '@/features/conversation/ReplyBoxMenuBar.vue'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { useEmitter } from '@/composables/useEmitter'
-import ComboBox from '@/components/ui/combobox/ComboBox.vue'
-import { Users } from 'lucide-vue-next'
 import { handleHTTPError } from '@/utils/http'
 import { useInboxStore } from '@/stores/inbox'
 import { useUsersStore } from '@/stores/users'
@@ -258,7 +244,10 @@ import {
   SelectValue
 } from '@/components/ui/select'
 import { useI18n } from 'vue-i18n'
-import Editor from '@/features/conversation/ConversationTextEditor.vue'
+import { useFileUpload } from '@/composables/useFileUpload'
+import Editor from '@/components/editor/TextEditor.vue'
+import { useMacroStore } from '@/stores/macro'
+import SelectComboBox from '@/components/combobox/SelectCombobox.vue'
 import api from '@/api'
 
 const dialogOpen = defineModel({
@@ -274,13 +263,37 @@ const emitter = useEmitter()
 const loading = ref(false)
 const searchResults = ref([])
 const emailQuery = ref('')
+const conversationStore = useConversationStore()
+const macroStore = useMacroStore()
 let timeoutId = null
 
+const contentToSet = ref('')
+const clearEditorContent = ref(false)
+const insertContent = ref('')
+
+const handleEmojiSelect = (emoji) => {
+  insertContent.value = undefined
+  // Force reactivity so the user can select the same emoji multiple times
+  nextTick(() => (insertContent.value = emoji))
+}
+
+const { uploadingFiles, handleFileUpload, handleFileDelete, mediaFiles, clearMediaFiles } =
+  useFileUpload({
+    linkedModel: 'messages'
+  })
+
+const isDisabled = computed(() => {
+  if (loading.value || uploadingFiles.value.length > 0) {
+    return true
+  }
+  return false
+})
+
 const formSchema = z.object({
   subject: z.string().min(
-    3,
-    t('form.error.min', {
-      min: 3
+    1,
+    t('globals.messages.cannotBeEmpty', {
+      name: t('globals.terms.subject')
     })
   ),
   content: z.string().min(
@@ -296,7 +309,25 @@ const formSchema = z.object({
   agent_id: z.any().optional(),
   contact_email: z.string().email(t('globals.messages.invalidEmailAddress')),
   first_name: z.string().min(1, t('globals.messages.required')),
-  last_name: z.string().min(1, t('globals.messages.required'))
+  last_name: z.string().optional()
+})
+
+onUnmounted(() => {
+  clearTimeout(timeoutId)
+  clearMediaFiles()
+  conversationStore.resetMacro('new-conversation')
+  emitter.emit(EMITTER_EVENTS.SET_NESTED_COMMAND, {
+    command: null,
+    open: false
+  })
+})
+
+onMounted(() => {
+  macroStore.setCurrentView('starting_conversation')
+  emitter.emit(EMITTER_EVENTS.SET_NESTED_COMMAND, {
+    command: 'apply-macro-to-new-conversation',
+    open: false
+  })
 })
 
 const form = useForm({
@@ -350,10 +381,29 @@ const selectContact = (contact) => {
 const createConversation = form.handleSubmit(async (values) => {
   loading.value = true
   try {
-    await api.createConversation(values)
+    // convert ids to numbers if they are not already
+    values.inbox_id = Number(values.inbox_id)
+    values.team_id = values.team_id ? Number(values.team_id) : null
+    values.agent_id = values.agent_id ? Number(values.agent_id) : null
+    // array of attachment ids.
+    values.attachments = mediaFiles.value.map((file) => file.id)
+    const conversation = await api.createConversation(values)
+    const conversationUUID = conversation.data.data.uuid
+
+    // Get macro from context, and set if any actions are available.
+    const macro = conversationStore.getMacro('new-conversation')
+    if (conversationUUID !== '' && macro?.id && macro?.actions?.length > 0) {
+      try {
+        await api.applyMacro(conversationUUID, macro.id, macro.actions)
+      } catch (error) {
+        emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
+          variant: 'destructive',
+          description: handleHTTPError(error).message
+        })
+      }
+    }
     dialogOpen.value = false
     form.resetForm()
-    emailQuery.value = ''
   } catch (error) {
     emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
       variant: 'destructive',
@@ -363,4 +413,19 @@ const createConversation = form.handleSubmit(async (values) => {
     loading.value = false
   }
 })
+
+/**
+ * Watches for changes in the macro id and update message content.
+ */
+watch(
+  () => conversationStore.getMacro('new-conversation').id,
+  () => {
+    // Setting timestamp, so the same macro can be set again.
+    contentToSet.value = JSON.stringify({
+      content: conversationStore.getMacro('new-conversation').message_content,
+      timestamp: Date.now()
+    })
+  },
+  { deep: true }
+)
 </script>

frontend/src/features/conversation/MacroActionsPreview.vue

@@ -4,19 +4,18 @@
       <div
         v-for="action in actions"
         :key="action.type"
-        class="flex items-center bg-white border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group gap-2 py-1"
+        class="flex items-center border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group gap-2"
       >
         <div class="flex items-center space-x-2 px-2">
           <component
             :is="getIcon(action.type)"
             size="16"
-            class="text-gray-500 text-primary group-hover:text-primary"
+            class="text-gray-500 text-primary"
           />
           <Tooltip>
             <TooltipTrigger as-child>
               <div
-                class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900"
-              >
+                class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900 dark:group-hover:text-gray-100">
                 {{ getDisplayValue(action) }}
               </div>
             </TooltipTrigger>
@@ -26,8 +25,8 @@
           </Tooltip>
         </div>
         <button
-          @click.stop="onRemove(action)"
-          class="pr-2 text-gray-400 hover:text-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 rounded transition-colors duration-300 ease-in-out"
+          @click.prevent="onRemove(action)"
+          class="p-2 text-gray-400 hover:text-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 rounded transition-colors duration-300 ease-in-out"
           title="Remove action"
         >
           <X size="14" />

frontend/src/features/conversation/ReplyBox.vue

@@ -42,7 +42,7 @@
     <Dialog :open="isEditorFullscreen" @update:open="isEditorFullscreen = false">
       <DialogContent
         class="max-w-[60%] max-h-[75%] h-[70%] bg-card text-card-foreground p-4 flex flex-col"
-        :class="{ '!bg-[#FEF1E1]': messageType === 'private_note' }"
+        :class="{ '!bg-[#FEF1E1] dark:!bg-[#4C3A24]': messageType === 'private_note' }"
         @escapeKeyDown="isEditorFullscreen = false"
         :hide-close-button="true"
       >
@@ -66,11 +66,10 @@
           v-model:emailErrors="emailErrors"
           v-model:messageType="messageType"
           v-model:showBcc="showBcc"
-          @toggleFullscreen="isEditorFullscreen = true"
+          @toggleFullscreen="isEditorFullscreen = !isEditorFullscreen"
           @send="processSend"
           @fileUpload="handleFileUpload"
-          @inlineImageUpload="handleInlineImageUpload"
-          @fileDelete="handleOnFileDelete"
+          @fileDelete="handleFileDelete"
           @aiPromptSelected="handleAiPromptSelected"
           class="h-full flex-grow"
         />
@@ -79,8 +78,8 @@
 
     <!-- Main Editor non-fullscreen -->
     <div
-      class="bg-card text-card-foreground box m-2 px-2 pt-2 flex flex-col"
-      :class="{ '!bg-[#FEF1E1]': messageType === 'private_note' }"
+      class="bg-background text-card-foreground box m-2 px-2 pt-2 flex flex-col"
+      :class="{ '!bg-[#FEF1E1] dark:!bg-[#4C3A24]': messageType === 'private_note' }"
       v-if="!isEditorFullscreen"
     >
       <ReplyBoxContent
@@ -90,6 +89,7 @@
         :uploadingFiles="uploadingFiles"
         :clearEditorContent="clearEditorContent"
         :contentToSet="contentToSet"
+        :uploadedFiles="mediaFiles"
         v-model:htmlContent="htmlContent"
         v-model:textContent="textContent"
         v-model:selectedText="selectedText"
@@ -102,11 +102,10 @@
         v-model:emailErrors="emailErrors"
         v-model:messageType="messageType"
         v-model:showBcc="showBcc"
-        @toggleFullscreen="isEditorFullscreen = true"
+        @toggleFullscreen="isEditorFullscreen = !isEditorFullscreen"
         @send="processSend"
         @fileUpload="handleFileUpload"
-        @inlineImageUpload="handleInlineImageUpload"
-        @fileDelete="handleOnFileDelete"
+        @fileDelete="handleFileDelete"
         @aiPromptSelected="handleAiPromptSelected"
       />
     </div>
@@ -115,7 +114,6 @@
 
 <script setup>
 import { ref, onMounted, nextTick, watch, computed } from 'vue'
-import { transformImageSrcToCID } from '@/utils/strings'
 import { handleHTTPError } from '@/utils/http'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { useUserStore } from '@/stores/user'
@@ -133,6 +131,7 @@ import {
 } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { useEmitter } from '@/composables/useEmitter'
+import { useFileUpload } from '@/composables/useFileUpload'
 import ReplyBoxContent from '@/features/conversation/ReplyBoxContent.vue'
 import {
   Form,
@@ -155,10 +154,21 @@ const { t } = useI18n()
 const conversationStore = useConversationStore()
 const emitter = useEmitter()
 const userStore = useUserStore()
+
+// Setup file upload composable
+const {
+  uploadingFiles,
+  handleFileUpload,
+  handleFileDelete,
+  mediaFiles,
+  clearMediaFiles,
+} = useFileUpload({
+  linkedModel: 'messages'
+})
+
+// Rest of existing state
 const openAIKeyPrompt = ref(false)
 const isOpenAIKeyUpdating = ref(false)
-
-// Shared state between the two editor components.
 const clearEditorContent = ref(false)
 const isEditorFullscreen = ref(false)
 const isSending = ref(false)
@@ -169,7 +179,6 @@ const bcc = ref('')
 const showBcc = ref(false)
 const emailErrors = ref([])
 const aiPrompts = ref([])
-const uploadingFiles = ref([])
 const htmlContent = ref('')
 const textContent = ref('')
 const selectedText = ref('')
@@ -249,63 +258,6 @@ const updateProvider = async (values) => {
   }
 }
 
-/**
- * Handles the file upload process when files are selected.
- * Uploads each file to the server and adds them to the conversation's mediaFiles.
- * @param {Event} event - The file input change event containing selected files
- */
-const handleFileUpload = (event) => {
-  const files = Array.from(event.target.files)
-  uploadingFiles.value = files
-
-  for (const file of files) {
-    api
-      .uploadMedia({
-        files: file,
-        inline: false,
-        linked_model: 'messages'
-      })
-      .then((resp) => {
-        conversationStore.conversation.mediaFiles.push(resp.data.data)
-        uploadingFiles.value = uploadingFiles.value.filter((f) => f.name !== file.name)
-      })
-      .catch((error) => {
-        uploadingFiles.value = uploadingFiles.value.filter((f) => f.name !== file.name)
-        emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
-          variant: 'destructive',
-          description: handleHTTPError(error).message
-        })
-      })
-  }
-}
-
-// Inline image upload is not supported yet.
-const handleInlineImageUpload = (event) => {
-  for (const file of event.target.files) {
-    api
-      .uploadMedia({
-        files: file,
-        inline: true,
-        linked_model: 'messages'
-      })
-      .then((resp) => {
-        const imageData = {
-          src: resp.data.data.url,
-          alt: resp.data.data.filename,
-          title: resp.data.data.uuid
-        }
-        conversationStore.conversation.mediaFiles.push(resp.data.data)
-        return imageData
-      })
-      .catch((error) => {
-        emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
-          variant: 'destructive',
-          description: handleHTTPError(error).message
-        })
-      })
-  }
-}
-
 /**
  * Returns true if the editor has text content.
  */
@@ -317,36 +269,17 @@ const hasTextContent = computed(() => {
  * Processes the send action.
  */
 const processSend = async () => {
-  let hasAPIErrored = false
+  let hasMessageSendingErrored = false
   isEditorFullscreen.value = false
   try {
     isSending.value = true
-
     // Send message if there is text content in the editor.
     if (hasTextContent.value > 0) {
-      // Replace inline image url with cid.
-      const message = transformImageSrcToCID(htmlContent.value)
-
-      // Check which images are still in editor before sending.
-      const parser = new DOMParser()
-      const doc = parser.parseFromString(htmlContent.value, 'text/html')
-      const inlineImageUUIDs = Array.from(doc.querySelectorAll('img.inline-image'))
-        .map((img) => img.getAttribute('title'))
-        .filter(Boolean)
-
-      // TODO: Inline images are not supported yet, this is some old boilerplate code.
-      conversationStore.conversation.mediaFiles = conversationStore.conversation.mediaFiles.filter(
-        (file) =>
-          // Keep if:
-          // 1. Not an inline image OR
-          // 2. Is an inline image that exists in editor
-          file.disposition !== 'inline' || inlineImageUUIDs.includes(file.uuid)
-      )
-
+      const message = htmlContent.value
       await api.sendMessage(conversationStore.current.uuid, {
         private: messageType.value === 'private_note',
         message: message,
-        attachments: conversationStore.conversation.mediaFiles.map((file) => file.id),
+        attachments: mediaFiles.value.map((file) => file.id),
         // Convert email addresses to array and remove empty strings.
         cc: cc.value
           .split(',')
@@ -367,15 +300,12 @@ const processSend = async () => {
       })
     }
 
-    // Apply macro actions if any.
-    // For macro errors just show toast and clear the editor.
-    if (conversationStore.conversation?.macro?.actions?.length > 0) {
+    // Apply macro actions if any, for macro errors just show toast and clear the editor.
+    const macroID = conversationStore.getMacro('reply')?.id
+    const macroActions = conversationStore.getMacro('reply')?.actions || []
+    if (macroID > 0 && macroActions.length > 0) {
       try {
-        await api.applyMacro(
-          conversationStore.current.uuid,
-          conversationStore.conversation.macro.id,
-          conversationStore.conversation.macro.actions
-        )
+        await api.applyMacro(conversationStore.current.uuid, macroID, macroActions)
       } catch (error) {
         emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
           variant: 'destructive',
@@ -384,22 +314,22 @@ const processSend = async () => {
       }
     }
   } catch (error) {
-    hasAPIErrored = true
+    hasMessageSendingErrored = true
     emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
       variant: 'destructive',
       description: handleHTTPError(error).message
     })
   } finally {
     // If API has NOT errored clear state.
-    if (hasAPIErrored === false) {
+    if (hasMessageSendingErrored === false) {
       // Clear editor.
       clearEditorContent.value = true
 
       // Clear macro.
-      conversationStore.resetMacro()
+      conversationStore.resetMacro('reply')
 
       // Clear media files.
-      conversationStore.resetMediaFiles()
+      clearMediaFiles()
 
       // Clear any email errors.
       emailErrors.value = []
@@ -410,30 +340,17 @@ const processSend = async () => {
     }
     isSending.value = false
   }
-  // Update assignee last seen timestamp.
-  api.updateAssigneeLastSeen(conversationStore.current.uuid)
-}
-
-/**
- * Handles the file delete event.
- * Removes the file from the conversation's mediaFiles.
- * @param {String} uuid - The UUID of the file to delete
- */
-const handleOnFileDelete = (uuid) => {
-  conversationStore.conversation.mediaFiles = conversationStore.conversation.mediaFiles.filter(
-    (item) => item.uuid !== uuid
-  )
 }
 
 /**
  * Watches for changes in the conversation's macro id and update message content.
  */
 watch(
-  () => conversationStore.conversation.macro.id,
+  () => conversationStore.getMacro('reply').id,
   () => {
     // Setting timestamp, so the same macro can be set again.
     contentToSet.value = JSON.stringify({
-      content: conversationStore.conversation.macro.message_content,
+      content: conversationStore.getMacro('reply').message_content,
       timestamp: Date.now()
     })
   },

frontend/src/features/conversation/ReplyBoxContent.vue

@@ -6,35 +6,27 @@
       class="flex justify-between items-center"
       :class="{ 'mb-4': !isFullscreen, 'border-b border-border pb-4': isFullscreen }"
     >
-      <Tabs v-model="messageType" class="rounded-lg border">
-        <TabsList class="bg-muted p-1 rounded-lg">
+      <Tabs v-model="messageType" class="rounded border">
+        <TabsList class="bg-muted p-1 rounded">
           <TabsTrigger
             value="reply"
-            class="px-3 py-1 rounded-lg transition-colors duration-200"
+            class="px-3 py-1 rounded transition-colors duration-200"
             :class="{ 'bg-background text-foreground': messageType === 'reply' }"
           >
             {{ $t('replyBox.reply') }}
           </TabsTrigger>
           <TabsTrigger
             value="private_note"
-            class="px-3 py-1 rounded-lg transition-colors duration-200"
+            class="px-3 py-1 rounded transition-colors duration-200"
             :class="{ 'bg-background text-foreground': messageType === 'private_note' }"
           >
-            {{ $t('replyBox.privateNote') }}
+            {{ $t('globals.terms.privateNote') }}
           </TabsTrigger>
         </TabsList>
       </Tabs>
-      <span
-        class="text-muted-foreground hover:text-foreground transition-colors duration-200 cursor-pointer"
-        variant="ghost"
-        @click="toggleFullscreen"
-      >
-        <component
-          :is="isFullscreen ? Minimize2 : Maximize2"
-          :size="isFullscreen ? '18' : '15'"
-          :class="{ 'mr-2': !isFullscreen, 'mr-1 mb-2': isFullscreen }"
-        />
-      </span>
+      <Button class="text-muted-foreground" variant="ghost" @click="toggleFullscreen">
+        <component :is="isFullscreen ? Minimize2 : Maximize2" />
+      </Button>
     </div>
 
     <!-- To, CC, and BCC fields -->
@@ -43,13 +35,13 @@
       v-if="messageType === 'reply'"
     >
       <div class="flex items-center space-x-2">
-        <label class="w-12 text-sm font-medium text-muted-foreground">To:</label>
+        <label class="w-12 text-sm font-medium text-muted-foreground">TO:</label>
         <Input
           type="text"
           :placeholder="t('replyBox.emailAddresess')"
           v-model="to"
-          class="flex-grow px-3 py-2 text-sm border rounded-md focus:ring-2 focus:ring-ring"
-          @blur="validateEmails('to')"
+          class="flex-grow px-3 py-2 text-sm border rounded focus:ring-2 focus:ring-ring"
+          @blur="validateEmails"
         />
       </div>
       <div class="flex items-center space-x-2">
@@ -58,8 +50,8 @@
           type="text"
           :placeholder="t('replyBox.emailAddresess')"
           v-model="cc"
-          class="flex-grow px-3 py-2 text-sm border rounded-md focus:ring-2 focus:ring-ring"
-          @blur="validateEmails('cc')"
+          class="flex-grow px-3 py-2 text-sm border rounded focus:ring-2 focus:ring-ring"
+          @blur="validateEmails"
         />
         <Button
           size="sm"
@@ -75,8 +67,8 @@
           type="text"
           :placeholder="t('replyBox.emailAddresess')"
           v-model="bcc"
-          class="flex-grow px-3 py-2 text-sm border rounded-md focus:ring-2 focus:ring-ring"
-          @blur="validateEmails('bcc')"
+          class="flex-grow px-3 py-2 text-sm border rounded focus:ring-2 focus:ring-ring"
+          @blur="validateEmails"
         />
       </div>
     </div>
@@ -98,7 +90,7 @@
         v-model:htmlContent="htmlContent"
         v-model:textContent="textContent"
         v-model:cursorPosition="cursorPosition"
-        :placeholder="editorPlaceholder"
+        :placeholder="t('editor.newLine') + t('editor.send') + t('editor.cmdK')"
         :aiPrompts="aiPrompts"
         @aiPromptSelected="handleAiPromptSelected"
         :contentToSet="contentToSet"
@@ -106,23 +98,24 @@
         :clearContent="clearEditorContent"
         :setInlineImage="setInlineImage"
         :insertContent="insertContent"
+        :autoFocus="true"
       />
     </div>
 
     <!-- Macro preview -->
     <MacroActionsPreview
-      v-if="conversationStore.conversation?.macro?.actions?.length > 0"
-      :actions="conversationStore.conversation.macro.actions"
-      :onRemove="conversationStore.removeMacroAction"
+      v-if="conversationStore.getMacro('reply')?.actions?.length > 0"
+      :actions="conversationStore.getMacro('reply').actions"
+      :onRemove="(action) => conversationStore.removeMacroAction(action, 'reply')"
       class="mt-2"
     />
 
     <!-- Attachments preview -->
     <AttachmentsPreview
-      :attachments="attachments"
+      :attachments="uploadedFiles"
       :uploadingFiles="uploadingFiles"
       :onDelete="handleOnFileDelete"
-      v-if="attachments.length > 0 || uploadingFiles.length > 0"
+      v-if="uploadedFiles.length > 0 || uploadingFiles.length > 0"
       class="mt-2"
     />
 
@@ -131,7 +124,6 @@
       class="mt-1 shrink-0"
       :isFullscreen="isFullscreen"
       :handleFileUpload="handleFileUpload"
-      :handleInlineImageUpload="handleInlineImageUpload"
       :isBold="isBold"
       :isItalic="isItalic"
       :isSending="isSending"
@@ -139,16 +131,17 @@
       @toggleItalic="toggleItalic"
       :enableSend="enableSend"
       :handleSend="handleSend"
+      :showSendButton="true"
       @emojiSelect="handleEmojiSelect"
     />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed, nextTick, watch } from 'vue'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { Maximize2, Minimize2 } from 'lucide-vue-next'
-import Editor from './ConversationTextEditor.vue'
+import Editor from '@/components/editor/TextEditor.vue'
 import { useConversationStore } from '@/stores/conversation'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
@@ -159,8 +152,8 @@ import MacroActionsPreview from '@/features/conversation/MacroActionsPreview.vue
 import ReplyBoxMenuBar from '@/features/conversation/ReplyBoxMenuBar.vue'
 import { useI18n } from 'vue-i18n'
 import { validateEmail } from '@/utils/strings'
+import { useMacroStore } from '@/stores/macro'
 
-// Define models for two-way binding
 const messageType = defineModel('messageType', { default: 'reply' })
 const to = defineModel('to', { default: '' })
 const cc = defineModel('cc', { default: '' })
@@ -173,6 +166,7 @@ const selectedText = defineModel('selectedText', { default: '' })
 const isBold = defineModel('isBold', { default: false })
 const isItalic = defineModel('isItalic', { default: false })
 const cursorPosition = defineModel('cursorPosition', { default: 0 })
+const macroStore = useMacroStore()
 
 const props = defineProps({
   isFullscreen: {
@@ -198,6 +192,11 @@ const props = defineProps({
   contentToSet: {
     type: String,
     default: null
+  },
+  uploadedFiles: {
+    type: Array,
+    required: false,
+    default: () => []
   }
 })
 
@@ -216,14 +215,15 @@ const { t } = useI18n()
 
 const insertContent = ref(null)
 const setInlineImage = ref(null)
-const editorPlaceholder = t('replyBox.editor.placeholder')
 
 const toggleBcc = async () => {
   showBcc.value = !showBcc.value
   await nextTick()
-  // If hiding BCC field, clear the content
+  // If hiding BCC field, clear the content and validate email bcc so it doesn't show errors.
   if (!showBcc.value) {
     bcc.value = ''
+    await nextTick()
+    validateEmails()
   }
 }
 
@@ -239,53 +239,42 @@ const toggleItalic = () => {
   isItalic.value = !isItalic.value
 }
 
-const attachments = computed(() => {
-  return conversationStore.conversation.mediaFiles.filter(
-    (upload) => upload.disposition === 'attachment'
-  )
-})
-
 const enableSend = computed(() => {
   return (
     (textContent.value.trim().length > 0 ||
-      conversationStore.conversation?.macro?.actions?.length > 0) &&
+      conversationStore.getMacro('reply')?.actions?.length > 0) &&
     emailErrors.value.length === 0 &&
     !props.uploadingFiles.length
   )
 })
 
 /**
- * Validate email addresses in the To, CC, and BCC fields
- * @param {string} field - 'to', 'cc', or 'bcc'
+ * Validates email addresses in To, CC, and BCC fields.
+ * Populates `emailErrors` with invalid emails grouped by field.
  */
-const validateEmails = (field) => {
-  const emails = field === 'to' ? to.value : field === 'cc' ? cc.value : bcc.value
-  const emailList = emails
-    .split(',')
-    .map((e) => e.trim())
-    .filter((e) => e !== '')
-
-  const invalidEmails = emailList.filter((email) => !validateEmail(email))
-
-  // Clear existing errors
+const validateEmails = async () => {
   emailErrors.value = []
+  await nextTick()
 
-  // Add new error if there are invalid emails
-  if (invalidEmails.length > 0) {
-    emailErrors.value = [
-      ...emailErrors.value,
-      `${t('replyBox.invalidEmailsIn')} '${field}': ${invalidEmails.join(', ')}`
-    ]
-  }
+  const fields = ['to', 'cc', 'bcc']
+  const values = { to: to.value, cc: cc.value, bcc: bcc.value }
+
+  fields.forEach((field) => {
+    const invalid = values[field]
+      .split(',')
+      .map((e) => e.trim())
+      .filter((e) => e && !validateEmail(e))
+
+    if (invalid.length)
+      emailErrors.value.push(`${t('replyBox.invalidEmailsIn')} '${field}': ${invalid.join(', ')}`)
+  })
 }
 
 /**
  * Send the reply or private note
  */
 const handleSend = async () => {
-  validateEmails('to')
-  validateEmails('cc')
-  validateEmails('bcc')
+  await validateEmails()
   if (emailErrors.value.length > 0) {
     emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
       variant: 'destructive',
@@ -300,10 +289,6 @@ const handleFileUpload = (event) => {
   emit('fileUpload', event)
 }
 
-const handleInlineImageUpload = (event) => {
-  emit('inlineImageUpload', event)
-}
-
 const handleOnFileDelete = (uuid) => {
   emit('fileDelete', uuid)
 }
@@ -317,4 +302,17 @@ const handleEmojiSelect = (emoji) => {
 const handleAiPromptSelected = (key) => {
   emit('aiPromptSelected', key)
 }
+
+// Watch and update macro view based on message type this filters our macros.
+watch(
+  messageType,
+  (newType) => {
+    if (newType === 'reply') {
+      macroStore.setCurrentView('replying')
+    } else if (newType === 'private_note') {
+      macroStore.setCurrentView('adding_private_note')
+    }
+  },
+  { immediate: true }
+)
 </script>

frontend/src/features/conversation/ReplyBoxMenuBar.vue

@@ -13,13 +13,13 @@
     <div class="flex justify-items-start gap-2">
       <!-- File inputs -->
       <input type="file" class="hidden" ref="attachmentInput" multiple @change="handleFileUpload" />
-      <input
+      <!-- <input
         type="file"
         class="hidden"
         ref="inlineImageInput"
         accept="image/*"
         @change="handleInlineImageUpload"
-      />
+      /> -->
       <!-- Editor buttons -->
       <Toggle
         class="px-2 py-2 border-0"
@@ -38,7 +38,7 @@
         <Smile class="h-4 w-4" />
       </Toggle>
     </div>
-    <Button class="h-8 w-6 px-8" @click="handleSend" :disabled="!enableSend" :isLoading="isSending">
+    <Button class="h-8 w-6 px-8" @click="handleSend" :disabled="!enableSend" :isLoading="isSending" v-if="showSendButton">
       {{ $t('globals.buttons.send') }}
     </Button>
   </div>
@@ -54,7 +54,7 @@ import EmojiPicker from 'vue3-emoji-picker'
 import 'vue3-emoji-picker/css'
 
 const attachmentInput = ref(null)
-const inlineImageInput = ref(null)
+// const inlineImageInput = ref(null)
 const isEmojiPickerVisible = ref(false)
 const emojiPickerRef = ref(null)
 const emit = defineEmits(['emojiSelect'])
@@ -65,6 +65,7 @@ defineProps({
   isSending: Boolean,
   enableSend: Boolean,
   handleSend: Function,
+  showSendButton: Boolean,
   handleFileUpload: Function,
   handleInlineImageUpload: Function
 })

frontend/src/features/conversation/list/ConversationEmptyList.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col items-center justify-center h-64 space-y-2">
     <component :is="icon" :stroke-width="1" :size="50" />
-    <h1 class="text-md font-semibold text-gray-800">
+    <h1 class="text-md font-semibold text-gray-800 dark:text-foreground">
       {{ title }}
     </h1>
-    <p class="text-gray-600 text-center text-sm">
+    <p class="text-gray-600 dark:text-gray-300 text-center text-sm">
       {{ message }}
     </p>
   </div>

frontend/src/features/conversation/list/ConversationList.vue

@@ -2,12 +2,12 @@
   <div class="h-screen flex flex-col">
     <!-- Header -->
     <div class="flex items-center space-x-4 px-2 h-12 border-b shrink-0">
-      <SidebarTrigger class="h-4 w-4" />
-      <span class="text-xl font-semibold text-gray-800">{{ title }}</span>
+      <SidebarTrigger class="cursor-pointer" />
+      <span class="text-xl font-semibold">{{ title }}</span>
     </div>
 
     <!-- Filters -->
-    <div class="bg-white p-2 flex justify-between items-center">
+    <div class="p-2 flex justify-between items-center">
       <!-- Status dropdown-menu, hidden when a view is selected as views are pre-filtered -->
       <DropdownMenu v-if="!route.params.viewID">
         <DropdownMenuTrigger asChild>
@@ -99,7 +99,7 @@
         <div
           v-if="!conversationStore.conversations.errorMessage"
           key="list"
-          class="divide-y divide-gray-200"
+          class="divide-y divide-gray-200 dark:divide-gray-700"
         >
           <ConversationListItem
             v-for="conversation in conversationStore.conversationsList"
@@ -107,7 +107,7 @@
             :conversation="conversation"
             :currentConversation="conversationStore.current"
             :contactFullName="conversationStore.getContactFullName(conversation.uuid)"
-            class="transition-colors duration-200 hover:bg-gray-50"
+            class="transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-600"
           />
         </div>
 
@@ -144,7 +144,7 @@
 </template>
 
 <script setup>
-import { computed, onUnmounted, ref } from 'vue'
+import { computed } from 'vue'
 import { useConversationStore } from '@/stores/conversation'
 import { MessageCircleQuestion, MessageCircleWarning, ChevronDown, Loader2 } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
@@ -163,7 +163,6 @@ import ConversationListItemSkeleton from '@/features/conversation/list/Conversat
 
 const conversationStore = useConversationStore()
 const route = useRoute()
-let reFetchInterval = ref(null)
 const { t } = useI18n()
 
 const title = computed(() => {
@@ -174,11 +173,6 @@ const title = computed(() => {
   )
 })
 
-onUnmounted(() => {
-  clearInterval(reFetchInterval.value)
-  conversationStore.clearListReRenderInterval()
-})
-
 const handleStatusChange = (status) => {
   conversationStore.setListStatus(status.label)
 }

frontend/src/features/conversation/list/ConversationListItem.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    class="group relative p-4 transition-all duration-200 ease-in-out cursor-pointer hover:bg-accent/20 border-gray-200 last:border-b-0 hover:shadow-sm"
+    class="group relative px-4 p-4 transition-all duration-200 ease-in-out cursor-pointer hover:bg-accent/20 dark:hover:bg-accent/60"
     :class="{
-      'bg-accent/30 border-l-4': conversation.uuid === currentConversation?.uuid
+      'bg-accent/60 border-l-4': conversation.uuid === currentConversation?.uuid
     }"
     @click="navigateToConversation(conversation.uuid)"
   >
@@ -23,11 +23,11 @@
       <div class="flex-1 min-w-0 space-y-2">
         <!-- Contact name and last message time -->
         <div class="flex items-center justify-between gap-2">
-          <h3 class="text-sm font-semibold text-gray-900 truncate">
+          <h3 class="text-sm font-semibold truncate">
             {{ contactFullName }}
           </h3>
           <span class="text-xs text-gray-400 whitespace-nowrap" v-if="conversation.last_message_at">
-            {{ formatTime(conversation.last_message_at) }}
+            {{ relativeLastMessageTime }}
           </span>
         </div>
 
@@ -39,7 +39,9 @@
 
         <!-- Message preview and unread count -->
         <div class="flex items-start justify-between gap-2">
-          <div class="text-sm text-gray-600 flex items-center gap-1.5 flex-1 break-all">
+          <div
+            class="text-sm flex items-center gap-1.5 flex-1 break-all text-gray-600 dark:text-gray-300"
+          >
             <Reply
               class="text-green-600 flex-shrink-0"
               size="15"
@@ -55,21 +57,38 @@
           </div>
         </div>
 
-        <div class="flex items-center mt-2 space-x-2">
-          <SlaBadge
-            v-if="conversation.first_response_deadline_at"
-            :dueAt="conversation.first_response_deadline_at"
-            :actualAt="conversation.first_reply_at"
-            :label="'FRD'"
-            :showExtra="false"
-          />
-          <SlaBadge
-            v-if="conversation.resolution_deadline_at"
-            :dueAt="conversation.resolution_deadline_at"
-            :actualAt="conversation.resolved_at"
-            :label="'RD'"
-            :showExtra="false"
-          />
+        <!-- SLA Badges -->
+        <div class="flex items-center">
+          <div :class="getSlaClass(frdStatus)">
+            <SlaBadge
+              :dueAt="conversation.first_response_deadline_at"
+              :actualAt="conversation.first_reply_at"
+              :label="'FRD'"
+              :showExtra="false"
+              @status="frdStatus = $event"
+              :key="`${conversation.uuid}-${conversation.first_response_deadline_at}-${conversation.first_reply_at}`"
+            />
+          </div>
+          <div :class="getSlaClass(rdStatus)">
+            <SlaBadge
+              :dueAt="conversation.resolution_deadline_at"
+              :actualAt="conversation.resolved_at"
+              :label="'RD'"
+              :showExtra="false"
+              @status="rdStatus = $event"
+              :key="`${conversation.uuid}-${conversation.resolution_deadline_at}-${conversation.resolved_at}`"
+            />
+          </div>
+          <div :class="getSlaClass(nrdStatus)">
+            <SlaBadge
+              :dueAt="conversation.next_response_deadline_at"
+              :actualAt="conversation.next_response_met_at"
+              :label="'NRD'"
+              :showExtra="false"
+              @status="nrdStatus = $event"
+              :key="`${conversation.uuid}-${conversation.next_response_deadline_at}-${conversation.next_response_met_at}`"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -77,15 +96,20 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { formatTime } from '@/utils/datetime'
+import { getRelativeTime } from '@/utils/datetime'
 import { Mail, Reply } from 'lucide-vue-next'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import SlaBadge from '@/features/sla/SlaBadge.vue'
 
+let timer = null
+const now = ref(new Date())
 const router = useRouter()
 const route = useRoute()
+const frdStatus = ref('')
+const rdStatus = ref('')
+const nrdStatus = ref('')
 
 const props = defineProps({
   conversation: Object,
@@ -109,8 +133,26 @@ const navigateToConversation = (uuid) => {
   })
 }
 
+onMounted(() => {
+  timer = setInterval(() => {
+    now.value = new Date()
+  }, 60000)
+})
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+
 const trimmedLastMessage = computed(() => {
   const message = props.conversation.last_message || ''
   return message.length > 100 ? message.slice(0, 100) + '...' : message
 })
+
+const getSlaClass = (status) => (['overdue', 'remaining'].includes(status) ? 'mr-2' : '')
+
+const relativeLastMessageTime = computed(() => {
+  return props.conversation.last_message_at
+    ? getRelativeTime(props.conversation.last_message_at, now.value)
+    : ''
+})
 </script>

frontend/src/features/conversation/message/AgentMessageBubble.vue

@@ -14,10 +14,10 @@
         <div
           class="flex flex-col justify-end message-bubble relative"
           :class="{
-            '!bg-[#FEF1E1]': message.private,
-            'bg-white border border-border': !message.private,
+            'bg-[#FEF1E1] dark:bg-[#4C3A24]': message.private,
+            'border border-border': !message.private,
             'opacity-50 animate-pulse': message.status === 'pending',
-            'bg-red-50 border-red-200': message.status === 'failed'
+            'border-red-400': message.status === 'failed'
           }"
         >
           <!-- Message Envelope -->

frontend/src/features/conversation/message/ContactMessageBubble.vue

@@ -42,7 +42,7 @@
           <div
             v-if="hasQuotedContent"
             @click="toggleQuote"
-            class="text-xs cursor-pointer text-muted-foreground px-2 py-1 w-max hover:bg-muted hover:text-primary rounded-md transition-all"
+            class="text-xs cursor-pointer text-muted-foreground px-2 py-1 w-max hover:bg-muted hover:text-primary rounded transition-all"
           >
             {{
               showQuotedText ? t('conversation.hideQuotedText') : t('conversation.showQuotedText')

frontend/src/features/conversation/message/MessageList.vue

@@ -58,7 +58,7 @@
       <div v-show="!isAtBottom" class="absolute bottom-5 right-6 z-10">
         <button
           @click="handleScrollToBottom"
-          class="w-10 h-10 rounded-full flex items-center justify-center shadow-lg border bg-white text-primary transition-colors duration-200 hover:bg-gray-100"
+          class="w-10 h-10 rounded-full flex items-center justify-center shadow-lg border bg-background text-primary transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-700"
         >
           <ChevronDown size="18" />
         </button>

frontend/src/features/conversation/message/attachment/AttachmentsPreview.vue

@@ -4,16 +4,16 @@
       <div
         v-for="attachment in allAttachments"
         :key="attachment.uuid || attachment.tempId"
-        class="flex items-center bg-white border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group px-2 gap-2"
+        class="flex items-center bg-background border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group px-2 gap-2"
       >
         <div class="flex items-center space-x-1 py-1">
           <DotLoader v-if="attachment.loading"/>
-          <PaperclipIcon v-else size="16" class="text-gray-500 group-hover:text-primary" />
+          <PaperclipIcon v-else size="16" />
 
           <Tooltip>
             <TooltipTrigger as-child>
               <div
-                class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900"
+                class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900 dark:group-hover:text-foreground"
               >
                 {{ getAttachmentName(attachment.filename) }}
                 <span class="text-xs text-gray-500 ml-1">
@@ -29,7 +29,7 @@
 
         <button
           v-if="!attachment.loading"
-          @click.stop="onDelete(attachment.uuid)"
+          @click.prevent="onDelete(attachment.uuid)"
           class="text-gray-400 hover:text-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 rounded transition-colors duration-300 ease-in-out"
           title="Remove attachment"
         >

frontend/src/features/conversation/sidebar/ConversationInfo.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="space-y-4">
-    <div
-      class="flex flex-col"
-      v-if="conversation.subject"
-    >
-      <p class="font-medium">{{ $t('form.field.subject') }}</p>
+    <div class="flex flex-col" v-if="conversation.subject">
+      <p class="font-medium">{{ $t('globals.terms.subject') }}</p>
       <Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />
       <p v-else>
         {{ conversation.subject }}
@@ -34,7 +31,7 @@
           v-if="conversation.first_response_deadline_at"
           :dueAt="conversation.first_response_deadline_at"
           :actualAt="conversation.first_reply_at"
-          :key="conversation.uuid"
+          :key="`${conversation.uuid}-${conversation.first_response_deadline_at}-${conversation.first_reply_at}`"
         />
       </div>
       <Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />
@@ -53,7 +50,7 @@
           v-if="conversation.resolution_deadline_at"
           :dueAt="conversation.resolution_deadline_at"
           :actualAt="conversation.resolved_at"
-          :key="conversation.uuid"
+          :key="`${conversation.uuid}-${conversation.resolution_deadline_at}-${conversation.resolved_at}`"
         />
       </div>
       <Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />
@@ -66,7 +63,15 @@
     </div>
 
     <div class="flex flex-col">
-      <p class="font-medium">{{ $t('form.field.lastReplyAt') }}</p>
+      <div class="flex justify-start items-center space-x-2">
+        <p class="font-medium">{{ $t('form.field.lastReplyAt') }}</p>
+        <SlaBadge
+          v-if="conversation.next_response_deadline_at"
+          :dueAt="conversation.next_response_deadline_at"
+          :actualAt="conversation.next_response_met_at"
+          :key="`${conversation.uuid}-${conversation.next_response_deadline_at}-${conversation.next_response_met_at}`"
+        />
+      </div>
       <Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />
       <p v-if="conversation.last_reply_at">
         {{ format(conversation.last_reply_at, 'PPpp') }}