fix: restore space to add host tags and redesign predefined tags editor

src/ui/locales/en.json

@@ -1516,8 +1516,7 @@
     "sslManualTitle": "Upload a certificate",
     "updateExternalAutoProvisionFailed": "Failed to update the auto-create setting",
     "hostTags": "Predefined host tags",
-    "hostTagsDesc": "One tag per line, available to all users. Editing this list changes suggestions only; tags already assigned to hosts are kept.",
+    "hostTagsDesc": "Tags every user sees as suggestions in the host editor. Press Space or Enter to add one. Removing a tag here does not remove it from hosts.",
-    "hostTagsSaved": "Host tag suggestions saved.",
     "hostTagsError": "Could not load or save host tag suggestions."
   },
   "newUi": {

src/ui/sidebar/AdminHostTags.tsx

@@ -1,80 +1,99 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button } from "@/components/button";
+import { toast } from "sonner";
+import { X } from "lucide-react";
 import { getHostTags, saveHostTags } from "@/api/host-tags-api";
 
 export function AdminHostTags() {
   const { t } = useTranslation();
-  const [value, setValue] = useState("");
+  const [tags, setTags] = useState<string[]>([]);
+  const [input, setInput] = useState("");
   const [loaded, setLoaded] = useState(false);
   const [saving, setSaving] = useState(false);
-  const [message, setMessage] = useState("");
 
   useEffect(() => {
     let cancelled = false;
     getHostTags()
-      .then((tags) => {
+      .then((list) => {
         if (cancelled) return;
-        setValue(tags.join("\n"));
+        setTags(list);
         setLoaded(true);
       })
       .catch(() => {
-        if (!cancelled) setMessage(t("admin.hostTagsError"));
+        if (!cancelled) toast.error(t("admin.hostTagsError"));
       });
     return () => {
       cancelled = true;
     };
   }, [t]);
 
-  async function save() {
+  async function save(next: string[]) {
+    const previous = tags;
+    setTags(next);
     setSaving(true);
-    setMessage("");
     try {
-      const tags = await saveHostTags(
+      setTags(await saveHostTags(next));
-        value
-          .split("\n")
-          .map((tag) => tag.trim())
-          .filter(Boolean),
-      );
-      setValue(tags.join("\n"));
-      setMessage(t("admin.hostTagsSaved"));
       window.dispatchEvent(new Event("termix:host-tags-changed"));
     } catch {
-      setMessage(t("admin.hostTagsError"));
+      setTags(previous);
+      toast.error(t("admin.hostTagsError"));
     } finally {
       setSaving(false);
     }
   }
 
+  function add(raw: string) {
+    const tag = raw.trim();
+    setInput("");
+    if (!tag || tags.includes(tag)) return;
+    void save([...tags, tag]);
+  }
+
   return (
-    <div className="flex flex-col gap-2 border-t border-border py-3">
+    <div className="flex flex-col gap-1.5">
       <label htmlFor="global-host-tags" className="text-xs font-medium">
         {t("admin.hostTags")}
       </label>
-      <p className="text-[11px] text-muted-foreground">
+      <span className="text-[10px] text-muted-foreground">
         {t("admin.hostTagsDesc")}
-      </p>
+      </span>
-      <textarea
+      <div className="flex flex-wrap items-center gap-1 min-h-9 px-2 py-1 border border-border bg-background focus-within:ring-1 focus-within:ring-ring">
-        id="global-host-tags"
+        {tags.map((tag) => (
-        rows={5}
+          <span
-        disabled={!loaded || saving}
+            key={tag}
-        value={value}
+            className="flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] bg-muted border border-border/60 text-foreground"
-        onChange={(event) => setValue(event.target.value)}
+          >
-        className="w-full border border-border bg-background p-2 text-xs"
+            {tag}
-      />
+            <button
-      <Button
+              type="button"
-        type="button"
+              disabled={saving}
-        size="sm"
+              aria-label={t("common.remove")}
-        disabled={!loaded || saving}
+              onClick={() => void save(tags.filter((tg) => tg !== tag))}
-        onClick={() => void save()}
+              className="text-muted-foreground hover:text-destructive ml-0.5"
-      >
+            >
-        {t("common.save")}
+              <X className="size-2.5" />
-      </Button>
+            </button>
-      {message && (
+          </span>
-        <p role="status" className="text-xs">
+        ))}
-          {message}
+        <input
-        </p>
+          id="global-host-tags"
-      )}
+          className="flex-1 min-w-16 text-xs bg-transparent outline-none placeholder:text-muted-foreground/50"
+          placeholder={tags.length === 0 ? t("hosts.addTag") : ""}
+          disabled={!loaded || saving}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onBlur={() => add(input)}
+          onKeyDown={(e) => {
+            if (e.nativeEvent.isComposing) return;
+            if ((e.key === " " || e.key === "Enter") && input.trim()) {
+              e.preventDefault();
+              add(input);
+            } else if (e.key === "Backspace" && !input && tags.length > 0) {
+              void save(tags.slice(0, -1));
+            }
+          }}
+        />
+      </div>
     </div>
   );
 }

src/ui/sidebar/AdminSettingsSections.tsx

@@ -69,7 +69,6 @@ export function AdminGeneralSettingsSection({
       onToggle={onToggle}
     >
       <div className="flex flex-col gap-0 pt-2">
-        <AdminHostTags />
         <div className="flex flex-col gap-1.5 py-2">
           <span className="text-xs font-medium">
             {t("admin.notificationPrivateEndpoints")}
@@ -351,6 +350,9 @@ export function AdminHostDefaultsSection({
         >
           {t("hostDefaults.editServerDefaults")}
         </Button>
+        <div className="border-t border-border pt-3">
+          <AdminHostTags />
+        </div>
       </div>
     </AccordionSection>
   );

src/ui/sidebar/HostEditorGeneralTab.tsx

@@ -317,7 +317,7 @@ export function HostEditorGeneralTab({
                   onChange={(e) => setField("tagInput", e.target.value)}
                   onKeyDown={(e) => {
                     if (
-                      e.key === "Enter" &&
+                      (e.key === " " || e.key === "Enter") &&
                       !e.nativeEvent.isComposing &&
                       form.tagInput.trim()
                     ) {
@@ -340,15 +340,15 @@ export function HostEditorGeneralTab({
                 aria-label={t("admin.hostTags")}
               >
                 {suggestedTags.map((tag) => (
-                  <Button
+                  <button
                     type="button"
                     key={tag}
-                    variant="outline"
-                    size="sm"
                     onClick={() => addTag(tag)}
+                    className="flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] border border-dashed border-border text-muted-foreground hover:text-foreground hover:border-foreground/40 transition-colors"
                   >
+                    <Plus className="size-2.5" />
                     {tag}
-                  </Button>
+                  </button>
                 ))}
               </div>
             )}

src/ui/tests/sidebar/AdminHostTags.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+
+const getHostTags = vi.fn();
+const saveHostTags = vi.fn();
+
+vi.mock("@/api/host-tags-api", () => ({
+  getHostTags: () => getHostTags(),
+  saveHostTags: (tags: string[]) => saveHostTags(tags),
+}));
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+vi.mock("sonner", () => ({ toast: { error: vi.fn() } }));
+
+import { AdminHostTags } from "@/sidebar/AdminHostTags";
+
+describe("AdminHostTags", () => {
+  beforeEach(() => {
+    getHostTags.mockReset().mockResolvedValue(["prod"]);
+    saveHostTags.mockReset().mockImplementation(async (tags) => tags);
+  });
+
+  it("adds a tag on space and saves the list", async () => {
+    render(<AdminHostTags />);
+    await screen.findByText("prod");
+    const input = screen.getByLabelText("admin.hostTags");
+    await waitFor(() =>
+      expect((input as HTMLInputElement).disabled).toBe(false),
+    );
+    fireEvent.change(input, { target: { value: "web" } });
+    fireEvent.keyDown(input, { key: " " });
+    await screen.findByText("web");
+    expect(saveHostTags).toHaveBeenCalledWith(["prod", "web"]);
+  });
+
+  it("removes a tag and saves the list", async () => {
+    render(<AdminHostTags />);
+    await screen.findByText("prod");
+    fireEvent.click(screen.getByLabelText("common.remove"));
+    await waitFor(() => expect(screen.queryByText("prod")).toBeNull());
+    expect(saveHostTags).toHaveBeenCalledWith([]);
+  });
+});