fix: pin Writing toolbar and Entities header, fix Entities form alignment and red hint text, and make Settings category bar horizontal

apps/web/src/features/entities/EntitiesView.tsx

@@ -127,138 +127,144 @@ export function EntitiesView() {
   };
 
   return (
-    <div className="ps-entities-view" style={{ padding: "20px 24px", overflowY: "auto" }}>
-      <div className="ps-entity-toolbar">
-        <div className="ps-entity-tabs">
-          {TABS.map((t) => (
-            <div key={t.id} className={"ps-entity-tab-wrap" + (t.id === tab ? " active" : "")}>
-              <button
-                type="button"
-                className={"ps-entity-tab" + (t.id === tab ? " active" : "")}
-                onClick={() => setTab(t.id)}
-              >
-                {t.label}
-              </button>
-              {t.createKind && (
+    <div className="ps-entities-view">
+      <div className="ps-entities-pinned-header">
+        <div className="ps-entity-toolbar">
+          <div className="ps-entity-tabs">
+            {TABS.map((t) => (
+              <div key={t.id} className={"ps-entity-tab-wrap" + (t.id === tab ? " active" : "")}>
                 <button
                   type="button"
-                  className="ps-entity-tab-add"
-                  title={t.createLabel ?? `Add to ${t.label}`}
-                  aria-label={t.createLabel ?? `Add to ${t.label}`}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    void handleCreateKind(t.createKind!, t.id);
-                  }}
+                  className={"ps-entity-tab" + (t.id === tab ? " active" : "")}
+                  onClick={() => setTab(t.id)}
                 >
-                  +
+                  {t.label}
                 </button>
-              )}
-            </div>
-          ))}
-        </div>
-
-        <div className="ps-entity-new-group">
-          {activeTabDef.createKind ? (
-            <Button
-              variant="primary"
-              size="sm"
-              onClick={() => void handleCreateKind(activeTabDef.createKind!)}
-            >
-              {activeTabDef.createLabel}
-            </Button>
-          ) : tab === "all" ? (
-            <>
-              <Button
-                variant="secondary"
-                size="sm"
-                onClick={() => void handleCreateKind("character", "people")}
-              >
-                + Person
-              </Button>
-              <Button
-                variant="secondary"
-                size="sm"
-                onClick={() => void handleCreateKind("world", "places")}
-              >
-                + World Item
-              </Button>
-              <Button
-                variant="secondary"
-                size="sm"
-                onClick={() => void handleCreateKind("note", "notes")}
-              >
-                + Note
-              </Button>
-            </>
-          ) : null}
-        </div>
-      </div>
-
-      <div className="ps-entity-search">
-        <Input
-          className="ps-entity-search-input"
-          placeholder="Search people, places, world items, and notes…"
-          value={query}
-          onChange={(ev) => setQuery(ev.target.value)}
-        />
-      </div>
-
-      {tab === "consistency" ? (
-        <ConsistencyPanel
-          issues={issues}
-          onOpenEntity={(id) => {
-            const e = entities.find((x) => x.id === id);
-            if (e) {
-              setDraft(e);
-              setOpen(true);
-            }
-          }}
-        />
-      ) : visible.length === 0 ? (
-        <div className="ps-emptystate">
-          <div className="ps-emptystate-title">No entities in this view yet</div>
-          <p className="ps-muted">
-            {activeTabDef.createKind
-              ? `Click "${activeTabDef.createLabel}" or the + button on the tab to create one.`
-              : "Use the + buttons on the People, Places & World, or Notes tabs to add story entities."}
-          </p>
-        </div>
-      ) : (
-        <div className="ps-entity-grid">
-          {visible.map((e) => (
-            <button
-              key={e.id}
-              type="button"
-              className="ps-entity-card"
-              onClick={() => openEntity(e)}
-            >
-              <div className="ps-entity-card-top">
-                <span className="ps-entity-type-badge">{badgeFor(e)}</span>
+                {t.createKind && (
+                  <button
+                    type="button"
+                    className="ps-entity-tab-add"
+                    title={t.createLabel ?? `Add to ${t.label}`}
+                    aria-label={t.createLabel ?? `Add to ${t.label}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      void handleCreateKind(t.createKind!, t.id);
+                    }}
+                  >
+                    +
+                  </button>
+                )}
               </div>
-              <div className="ps-entity-card-name">{entityLabel(e)}</div>
-              <div className="ps-entity-card-sub">{subFor(e)}</div>
-              {tagsFor(e).length > 0 && (
-                <div className="ps-entity-card-tags">
-                  {tagsFor(e).slice(0, 4).map((t) => (
-                    <span key={t} className="ps-entity-tag">
-                      {t}
-                    </span>
-                  ))}
-                </div>
-              )}
-            </button>
-          ))}
-        </div>
-      )}
+            ))}
+          </div>
 
-      <EntityEditor
-        entity={draft}
-        entities={entities}
-        open={open}
-        onClose={() => setOpen(false)}
-        onSave={save}
-        onDelete={remove}
-      />
+          <div className="ps-entity-new-group">
+            {activeTabDef.createKind ? (
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => void handleCreateKind(activeTabDef.createKind!)}
+              >
+                {activeTabDef.createLabel}
+              </Button>
+            ) : tab === "all" ? (
+              <>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => void handleCreateKind("character", "people")}
+                >
+                  + Person
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => void handleCreateKind("world", "places")}
+                >
+                  + World Item
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => void handleCreateKind("note", "notes")}
+                >
+                  + Note
+                </Button>
+              </>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="ps-entity-search">
+          <Input
+            className="ps-entity-search-input"
+            placeholder="Search people, places, world items, and notes…"
+            value={query}
+            onChange={(ev) => setQuery(ev.target.value)}
+          />
+        </div>
+      </div>
+
+      <div className="ps-entities-body">
+        <div className="ps-entities-main">
+          {tab === "consistency" ? (
+            <ConsistencyPanel
+              issues={issues}
+              onOpenEntity={(id) => {
+                const e = entities.find((x) => x.id === id);
+                if (e) {
+                  setDraft(e);
+                  setOpen(true);
+                }
+              }}
+            />
+          ) : visible.length === 0 ? (
+            <div className="ps-emptystate">
+              <div className="ps-emptystate-title">No entities in this view yet</div>
+              <p className="ps-muted">
+                {activeTabDef.createKind
+                  ? `Click "${activeTabDef.createLabel}" or the + button on the tab to create one.`
+                  : "Use the + buttons on the People, Places & World, or Notes tabs to add story entities."}
+              </p>
+            </div>
+          ) : (
+            <div className="ps-entity-grid">
+              {visible.map((e) => (
+                <button
+                  key={e.id}
+                  type="button"
+                  className={`ps-entity-card${open && draft?.id === e.id ? " is-selected" : ""}`}
+                  onClick={() => openEntity(e)}
+                >
+                  <div className="ps-entity-card-top">
+                    <span className="ps-entity-type-badge">{badgeFor(e)}</span>
+                  </div>
+                  <div className="ps-entity-card-name">{entityLabel(e)}</div>
+                  <div className="ps-entity-card-sub">{subFor(e)}</div>
+                  {tagsFor(e).length > 0 && (
+                    <div className="ps-entity-card-tags">
+                      {tagsFor(e).slice(0, 4).map((t) => (
+                        <span key={t} className="ps-entity-tag">
+                          {t}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <EntityEditor
+          entity={draft}
+          entities={entities}
+          open={open}
+          onClose={() => setOpen(false)}
+          onSave={save}
+          onDelete={remove}
+        />
+      </div>
     </div>
   );
 }

apps/web/src/features/entities/EntityEditor.tsx

@@ -42,7 +42,7 @@ export function EntityEditor({
 
   const isExisting = entities.some((e) => e.id === draft.id);
   const isCharacterDraft = isCharacter(draft);
-  const canDelete = isExisting && isCharacterDraft;
+  const canDelete = isExisting;
 
   const title = isCharacterDraft
     ? (draft.name || "Edit character")

apps/web/src/features/entities/EntityFields.tsx

@@ -9,8 +9,6 @@
 import React from "react";
 import type { Entity, FieldDef } from "@pubscript/core";
 import { ENTITY_FIELDS } from "@pubscript/core";
-import { Input } from "@pubscript/ui";
-import { Select } from "@pubscript/ui";
 
 /** A short display label for an entity, regardless of kind. */
 export function entityLabel(e: Entity): string {
@@ -23,7 +21,9 @@ export function entityLabel(e: Entity): string {
 /** Read a field value from an entity, regardless of where it is stored. */
 export function getFieldValue(e: Entity, key: string): string | string[] {
   if ("fields" in e) {
+    if (key === "name") return e.name;
     const v = e.fields[key];
+    if (Array.isArray(v)) return v;
     return typeof v === "string" ? v : "";
   }
   const v = (e as unknown as Record<string, unknown>)[key];
@@ -34,6 +34,9 @@ export function getFieldValue(e: Entity, key: string): string | string[] {
 /** Return a copy of `e` with `key` set to `value`. */
 export function setFieldValue(e: Entity, key: string, value: string | string[]): Entity {
   if ("fields" in e) {
+    if (key === "name" && typeof value === "string") {
+      return { ...e, name: value };
+    }
     return { ...e, fields: { ...e.fields, [key]: value } };
   }
   return { ...e, [key]: value };
@@ -52,69 +55,66 @@ interface EntityFieldsProps {
   entities?: Entity[];
 }
 
-function renderField(
+function renderFieldControl(
   field: FieldDef,
   value: string | string[],
   onChange: (v: string | string[]) => void,
+  currentEntityId: string,
   entities?: Entity[],
 ) {
-  const label = (
-    <label className="ps-field-label">
-      {field.label}
-      {field.hint ? <span className="ps-field-hint">{field.hint}</span> : null}
-    </label>
-  );
-
   switch (field.type) {
     case "textarea":
       return (
-        <div className="ps-field-span-2">
-          {label}
-          <textarea
-            className="ps-textarea ps-input"
-            value={typeof value === "string" ? value : ""}
-            onChange={(ev) => onChange(ev.target.value)}
-          />
-        </div>
+        <textarea
+          className="ps-textarea ps-input"
+          rows={3}
+          value={typeof value === "string" ? value : ""}
+          onChange={(ev) => onChange(ev.target.value)}
+        />
       );
     case "select":
       return (
-        <div>
-          {label}
-          <Select
-            value={typeof value === "string" ? value : ""}
-            options={(field.options ?? []).map((o) => ({ value: o, label: o }))}
-            onChange={(ev) => onChange(ev.target.value)}
-          />
-        </div>
+        <select
+          className="ps-select"
+          value={typeof value === "string" ? value : ""}
+          onChange={(ev) => onChange(ev.target.value)}
+        >
+          {(field.options ?? []).map((o) => (
+            <option key={o} value={o}>
+              {o}
+            </option>
+          ))}
+        </select>
       );
     case "list":
       return <TagField value={Array.isArray(value) ? value : []} onChange={onChange} />;
     case "link": {
       const opts = (entities ?? [])
-        .filter((e) => e.id !== value)
+        .filter((e) => e.id !== currentEntityId && !("body" in e))
         .map((e) => ({ value: e.id, label: entityLabel(e) }));
       return (
-        <div>
-          {label}
-          <Select
-            value={typeof value === "string" ? value : ""}
-            options={[{ value: "", label: "— none —" }, ...opts]}
-            onChange={(ev) => onChange(ev.target.value)}
-          />
-        </div>
+        <select
+          className="ps-select"
+          value={typeof value === "string" ? value : ""}
+          onChange={(ev) => onChange(ev.target.value)}
+        >
+          <option value="">— None —</option>
+          {opts.map((o) => (
+            <option key={o.value} value={o.value}>
+              {o.label}
+            </option>
+          ))}
+        </select>
       );
     }
     case "text":
       return (
-        <div className="ps-field-span-2">
-          {label}
-          <Input
-            className="ps-input"
-            value={typeof value === "string" ? value : ""}
-            onChange={(ev) => onChange(ev.target.value)}
-          />
-        </div>
+        <input
+          type="text"
+          className="ps-input"
+          value={typeof value === "string" ? value : ""}
+          onChange={(ev) => onChange(ev.target.value)}
+        />
       );
   }
 }
@@ -139,25 +139,27 @@ function TagField({
 
   return (
     <div className="ps-tag-field">
-      <div className="ps-tag-list">
-        {value.map((t, i) => (
-          <span key={`${t}-${i}`} className="ps-tag-chip">
-            {t}
-            <button
-              type="button"
-              className="ps-tag-remove"
-              aria-label={`Remove ${t}`}
-              onClick={() => onChange(value.filter((_, idx) => idx !== i))}
-            >
-              ×
-            </button>
-          </span>
-        ))}
-      </div>
+      {value.length > 0 && (
+        <div className="ps-tag-list">
+          {value.map((t, i) => (
+            <span key={`${t}-${i}`} className="ps-tag-chip">
+              {t}
+              <button
+                type="button"
+                className="ps-tag-remove"
+                aria-label={`Remove ${t}`}
+                onClick={() => onChange(value.filter((_, idx) => idx !== i))}
+              >
+                ×
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
       <input
         className="ps-input"
         value={draft}
-        placeholder="Add tag + Enter"
+        placeholder="Add item + press Enter"
         onChange={(ev) => setDraft(ev.target.value)}
         onKeyDown={(ev) => {
           if (ev.key === "Enter") {
@@ -173,18 +175,31 @@ function TagField({
 export function EntityFields({ entity, onChange, entities }: EntityFieldsProps) {
   const fields = fieldsFor(entity);
 
+  const handleFieldChange = (key: string, val: string | string[]) => {
+    const updated = setFieldValue(entity, key, val);
+    onChange(updated);
+  };
+
   return (
     <div className="ps-entity-fields">
-      {fields.map((field) => (
-        <div key={field.key} className="ps-field">
-          {renderField(
-            field,
-            getFieldValue(entity, field.key),
-            (v) => onChange({ [field.key]: v } as Partial<Entity>),
-            entities,
-          )}
-        </div>
-      ))}
+      {fields.map((field) => {
+        const isCompact = field.type === "select" || field.type === "link";
+        return (
+          <div
+            key={field.key}
+            className={`ps-field${isCompact ? " ps-field-half" : " ps-field-full"}`}
+          >
+            <label className="ps-field-label">{field.label}</label>
+            {renderFieldControl(
+              field,
+              getFieldValue(entity, field.key),
+              (v) => handleFieldChange(field.key, v),
+              entity.id,
+              entities,
+            )}
+          </div>
+        );
+      })}
     </div>
   );
 }