editor UI for better experience :))

2026-05-12 21:35:27 +07:00
parent 94c58e1d42
commit cb3e720644
8 changed files with 309 additions and 102 deletions
@@ -1,12 +1,11 @@
 "use client";

-import { useEffect, useMemo, useState } from "react";
-import type { Entity } from "@/uhm/types/entities";
+import { useMemo, useState } from "react";
 import type { WikiSnapshot } from "@/uhm/types/wiki";
 import type { EntityWikiLinkSnapshot } from "@/uhm/types/projects";

 type EntityChoice = { id: string; name: string };
-type WikiChoice = { id: string; title: string; operation?: string };
+type WikiChoice = { id: string; title: string };

 type Props = {
  entities: EntityChoice[];
@@ -29,7 +28,7 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
    () =>
      (wikis || [])
        .filter((w) => w && typeof w.id === "string" && w.id.trim().length > 0)
-        .map((w) => ({ id: w.id, title: wikiTitle(w), operation: w.operation })),
+        .map((w) => ({ id: w.id, title: wikiTitle(w) })),
    [wikis]
  );

@@ -39,17 +38,6 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
    return cleaned;
  }, [entities]);

-  // Don't auto-select entity. The user must explicitly pick one.
-  // Only clear the selection if the currently selected entity is no longer available.
-  useEffect(() => {
-    if (!activeEntityId) return;
-    const stillExists = entityChoices.some((e) => e.id === activeEntityId);
-    if (!stillExists) {
-      setActiveEntityId("");
-      setActiveWikiId("");
-    }
-  }, [activeEntityId, entityChoices]);
-
  const activeLinks = useMemo(() => {
    const set = new Set<string>();
    for (const l of links || []) {
@@ -144,6 +132,12 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
              </option>
            ))}
          </select>
+          {activeEntityId ? (
+            <ActiveSelectionLabel
+              label={entityChoices.find((e) => e.id === activeEntityId)?.name || activeEntityId}
+              id={activeEntityId}
+            />
+          ) : null}
        </div>

        <div>
@@ -175,6 +169,12 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
                </option>
              ))}
            </select>
+            {activeWikiChoice ? (
+              <ActiveSelectionLabel
+                label={activeWikiChoice.title}
+                id={activeWikiChoice.id}
+              />
+            ) : null}

            {wikiChoices.length === 0 ? (
              <div style={{ fontSize: "12px", color: "#94a3b8" }}>No wiki in project yet.</div>
@@ -228,17 +228,19 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
                          title={id}
                        >
                          <div style={{ minWidth: 0 }}>
-                            <div
-                              style={{
-                                color: "#e5e7eb",
-                                fontSize: 12,
-                                whiteSpace: "nowrap",
-                                overflow: "hidden",
-                                textOverflow: "ellipsis",
-                                fontWeight: 700,
-                              }}
-                            >
-                              {w?.title || "Untitled wiki"}
+                            <div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
+                              <span
+                                style={{
+                                  color: "#e5e7eb",
+                                  fontSize: 12,
+                                  whiteSpace: "nowrap",
+                                  overflow: "hidden",
+                                  textOverflow: "ellipsis",
+                                  fontWeight: 700,
+                                }}
+                              >
+                                {w?.title || "Untitled wiki"}
+                              </span>
                            </div>
                            <div style={{ color: "#94a3b8", fontSize: 11, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                              {id}
@@ -279,6 +281,25 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
  );
 }

+function ActiveSelectionLabel({
+  label,
+  id,
+}: {
+  label: string;
+  id: string;
+}) {
+  return (
+    <div style={{ marginTop: 6, display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
+      <span style={{ color: "#cbd5e1", fontSize: 11, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+        {label}
+      </span>
+      <span style={{ color: "#64748b", fontSize: 11, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+        {id}
+      </span>
+    </div>
+  );
+}
+
 function PlusIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
@@ -1,10 +1,12 @@
 "use client";

-import { useMemo, useState } from "react";
+import { useMemo, useState, type KeyboardEvent } from "react";
+import NewBadge from "@/uhm/components/editor/NewBadge";

 type GeometryChoice = {
  id: string;
  label?: string;
+  isNew?: boolean;
 };

 type Props = {
@@ -12,6 +14,7 @@ type Props = {
  selectedGeometryId: string | null;
  selectedGeometryBindingIds: string[];
  onToggleBindGeometryForSelectedGeometry?: (geometryId: string, nextChecked: boolean) => void;
+  onFocusGeometry?: (geometryId: string) => void;
  statusText?: string | null;
  bindingFilterEnabled: boolean;
  onBindingFilterEnabledChange: (next: boolean) => void;
@@ -22,25 +25,37 @@ export default function GeometryBindingPanel({
  selectedGeometryId,
  selectedGeometryBindingIds,
  onToggleBindGeometryForSelectedGeometry,
+  onFocusGeometry,
  statusText,
  bindingFilterEnabled,
  onBindingFilterEnabledChange,
 }: Props) {
  const canBindToggle =
    Boolean(selectedGeometryId) && typeof onToggleBindGeometryForSelectedGeometry === "function";
+  const canFocusGeometry = typeof onFocusGeometry === "function";

  const [collapsed, setCollapsed] = useState(false);

  const rows = useMemo(() => {
    const cleaned = (geometries || [])
      .filter((g) => g && typeof g.id === "string" && g.id.trim().length > 0)
-      .map((g) => ({ id: g.id.trim(), label: (g.label || "").trim() }));
+      .map((g) => ({ id: g.id.trim(), label: (g.label || "").trim(), isNew: Boolean(g.isNew) }));
    cleaned.sort((a, b) => a.id.localeCompare(b.id));
    return cleaned;
  }, [geometries]);

  const bindingSet = useMemo(() => new Set(selectedGeometryBindingIds || []), [selectedGeometryBindingIds]);
+  const selectedGeometry = useMemo(() => {
+    if (!selectedGeometryId) return null;
+    return rows.find((g) => g.id === selectedGeometryId) || null;
+  }, [rows, selectedGeometryId]);

+  const handleFocusKeyDown = (event: KeyboardEvent<HTMLDivElement>, geometryId: string) => {
+    if (!canFocusGeometry) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onFocusGeometry?.(geometryId);
+  };

  return (
    <div
@@ -99,6 +114,64 @@ export default function GeometryBindingPanel({
        </div>
      </div>

+      {collapsed ? null : selectedGeometry ? (
+        <div
+          style={{
+            marginTop: 10,
+            padding: "8px",
+            borderRadius: "6px",
+            border: "1px solid rgba(59, 130, 246, 0.45)",
+            background: "rgba(37, 99, 235, 0.12)",
+            cursor: canFocusGeometry ? "pointer" : "default",
+          }}
+          title={selectedGeometry.id}
+          role={canFocusGeometry ? "button" : undefined}
+          tabIndex={canFocusGeometry ? 0 : undefined}
+          onClick={() => onFocusGeometry?.(selectedGeometry.id)}
+          onKeyDown={(event) => handleFocusKeyDown(event, selectedGeometry.id)}
+        >
+          <div
+            style={{
+              fontSize: 10,
+              color: "#93c5fd",
+              fontWeight: 900,
+              textTransform: "uppercase",
+              lineHeight: 1,
+              marginBottom: 5,
+            }}
+          >
+            Selected
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
+            <span
+              style={{
+                fontSize: "12px",
+                color: "#e5e7eb",
+                fontWeight: 700,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}
+            >
+              {selectedGeometry.label || selectedGeometry.id}
+            </span>
+            {selectedGeometry.isNew ? <NewBadge /> : null}
+          </div>
+          <div
+            style={{
+              marginTop: 3,
+              fontSize: "11px",
+              color: "#94a3b8",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+          >
+            {selectedGeometry.id}
+          </div>
+        </div>
+      ) : null}
+
      {collapsed ? null : rows.length ? (
        <div style={{ marginTop: "10px", display: "grid", gap: "6px", maxHeight: 250, overflowY: "auto", paddingRight: 4 }}>
          {rows
@@ -116,22 +189,37 @@ export default function GeometryBindingPanel({
                    display: "flex",
                    alignItems: "center",
                    gap: 10,
+                    cursor: canFocusGeometry ? "pointer" : "default",
                    opacity: canBindToggle ? 1 : 0.75,
                  }}
                  title={g.id}
+                  role={canFocusGeometry ? "button" : undefined}
+                  tabIndex={canFocusGeometry ? 0 : undefined}
+                  onClick={() => onFocusGeometry?.(g.id)}
+                  onKeyDown={(event) => handleFocusKeyDown(event, g.id)}
                >
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div
                      style={{
-                        fontSize: "12px",
-                        color: "#e5e7eb",
-                        fontWeight: 700,
-                        whiteSpace: "nowrap",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 6,
+                        minWidth: 0,
                      }}
                    >
-                      {g.label || g.id}
+                      <span
+                        style={{
+                          fontSize: "12px",
+                          color: "#e5e7eb",
+                          fontWeight: 700,
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                        }}
+                      >
+                        {g.label || g.id}
+                      </span>
+                      {g.isNew ? <NewBadge /> : null}
                    </div>
                    <div
                      style={{
@@ -150,7 +238,10 @@ export default function GeometryBindingPanel({
                    <button
                      type="button"
                      title={isBound ? "Unbind from selected geometry" : "Bind to selected geometry"}
-                      onClick={() => onToggleBindGeometryForSelectedGeometry!(g.id, !isBound)}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        onToggleBindGeometryForSelectedGeometry!(g.id, !isBound);
+                      }}
                      style={{
                        display: "inline-flex",
                        alignItems: "center",
@@ -1,8 +1,9 @@
 "use client";

-import { useEffect, useMemo, useState, type CSSProperties } from "react";
+import { useMemo, useState, type CSSProperties } from "react";
 import type { EntitySnapshot } from "@/uhm/types/entities";
 import type { EntityFormState } from "@/uhm/lib/editor/session/sessionTypes";
+import NewBadge from "@/uhm/components/editor/NewBadge";

 type Props = {
  entityRefs: EntitySnapshot[];
@@ -46,18 +47,11 @@ export default function ProjectEntityRefsPanel({
  const [editName, setEditName] = useState("");
  const [editDescription, setEditDescription] = useState("");

-  useEffect(() => {
-    if (!activeEntityId) return;
-    if (!entityRefs.some((e) => String(e.id) === String(activeEntityId))) {
-      setActiveEntityId(null);
-    }
-  }, [activeEntityId, entityRefs]);
-
-  useEffect(() => {
-    if (!activeEntity) return;
-    setEditName(typeof activeEntity.name === "string" ? activeEntity.name : "");
-    setEditDescription(activeEntity.description == null ? "" : String(activeEntity.description));
-  }, [activeEntity?.description, activeEntity?.id, activeEntity?.name]);
+  const openEntityEditor = (entity: EntitySnapshot) => {
+    setActiveEntityId(String(entity.id));
+    setEditName(typeof entity.name === "string" ? entity.name : "");
+    setEditDescription(entity.description == null ? "" : String(entity.description));
+  };

  return (
    <div
@@ -113,7 +107,7 @@ export default function ProjectEntityRefsPanel({
            >
              <button
                type="button"
-                onClick={() => setActiveEntityId(String(e.id))}
+                onClick={() => openEntityEditor(e)}
                title="Chon de sua"
                style={{
                  flex: 1,
@@ -126,8 +120,11 @@ export default function ProjectEntityRefsPanel({
                }}
                disabled={!canEditEntity}
              >
-                <div style={{ fontSize: "12px", color: "#e5e7eb", fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
-                  {e.name || e.id}
+                <div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
+                  <span style={{ fontSize: "12px", color: "#e5e7eb", fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                    {e.name || e.id}
+                  </span>
+                  {isNewEntityRef(e) ? <NewBadge /> : null}
                </div>
                <div style={{ fontSize: "11px", color: "#94a3b8", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                  {e.id}
@@ -189,8 +186,11 @@ export default function ProjectEntityRefsPanel({
          }}
        >
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
-            <div style={{ color: "#a7f3d0", fontWeight: 700, fontSize: "12px" }}>
-              Sua entity
+            <div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
+              <span style={{ color: "#a7f3d0", fontWeight: 700, fontSize: "12px" }}>
+                Sua entity
+              </span>
+              {isNewEntityRef(activeEntity) ? <NewBadge /> : null}
            </div>
            <button
              type="button"
@@ -344,6 +344,10 @@ export default function ProjectEntityRefsPanel({
  );
 }

+function isNewEntityRef(entity: EntitySnapshot | null | undefined): boolean {
+  return entity?.source === "inline" && entity?.operation === "create";
+}
+
 const entityInputStyle: CSSProperties = {
  width: "100%",
  borderRadius: "6px",