@elevasis/ui 2.36.0 → 2.38.0

package/dist/features/notes/index.js

@@ -0,0 +1,621 @@
+import { useUpdateUserNote, useCreateUserNote, useUserNotes, useDeleteUserNote } from '../../chunk-JXVNHVK7.js';
+import { CardHeader } from '../../chunk-S3XR4II4.js';
+import { useInitialization } from '../../chunk-533DUEQY.js';
+import '../../chunk-DD3CCMCZ.js';
+import '../../chunk-2Q2JQSQO.js';
+import '../../chunk-KJ3QUBNU.js';
+import '../../chunk-BRJ3QZ4E.js';
+import '../../chunk-I2KLQ2HA.js';
+import { useState } from 'react';
+import { Box, Group, Text, ScrollArea, Stack, Tooltip, Paper, TextInput, Textarea, Checkbox, Button, Center, Loader, Badge, UnstyledButton, ActionIcon, Menu } from '@mantine/core';
+import { IconPencil, IconPlus, IconNote, IconAlertTriangle, IconUsers, IconLock, IconRobot, IconPinned, IconPinnedOff, IconDotsVertical, IconTrash, IconArrowUp } from '@tabler/icons-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function NotesPanelViewShell({ title, icon: Icon, children, headerRightContent }) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        background: "var(--right-panel-background, var(--glass-background))",
+        backdropFilter: "var(--glass-blur)",
+        WebkitBackdropFilter: "var(--glass-blur)",
+        border: "1px solid var(--color-border)",
+        borderLeft: "none",
+        borderRadius: "0 var(--mantine-radius-default) var(--mantine-radius-default) 0",
+        overflow: "hidden",
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: 2,
+              flexShrink: 0,
+              background: "linear-gradient(90deg, transparent, var(--color-primary), transparent)",
+              opacity: 0.4
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", px: "md", py: "xs", style: { flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsxs(Group, { gap: 8, wrap: "nowrap", style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Icon, { size: 16, style: { color: "var(--color-primary)", flexShrink: 0 } }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { flexShrink: 0 }, children: title })
+          ] }),
+          headerRightContent && /* @__PURE__ */ jsx(Group, { gap: 8, wrap: "nowrap", children: headerRightContent })
+        ] }),
+        /* @__PURE__ */ jsx(ScrollArea, { style: { flex: 1 }, scrollbarSize: 6, children: /* @__PURE__ */ jsx(Stack, { gap: "md", p: "sm", children }) })
+      ]
+    }
+  );
+}
+var PRIORITY_BORDER_COLOR = {
+  urgent: "var(--mantine-color-red-6)",
+  high: "var(--mantine-color-orange-6)",
+  normal: "var(--mantine-color-blue-6)",
+  low: "var(--mantine-color-gray-6)"
+};
+var PRIORITY_OPTIONS = [
+  { value: "low", label: "Low" },
+  { value: "normal", label: "Normal" },
+  { value: "high", label: "High" },
+  { value: "urgent", label: "Urgent" }
+];
+var PRIORITY_LEGEND_ORDER = ["urgent", "high", "normal", "low"];
+function PriorityLegend() {
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      gap: 6,
+      wrap: "nowrap",
+      "aria-label": "Priority legend",
+      px: 8,
+      py: 4,
+      style: {
+        border: "1px solid var(--color-border)",
+        borderRadius: "var(--mantine-radius-default)",
+        background: "var(--glass-background)",
+        backdropFilter: "var(--glass-blur)",
+        WebkitBackdropFilter: "var(--glass-blur)"
+      },
+      children: PRIORITY_LEGEND_ORDER.map((p) => /* @__PURE__ */ jsx(Tooltip, { label: p.charAt(0).toUpperCase() + p.slice(1), withArrow: true, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          "data-priority-dot": p,
+          style: {
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            backgroundColor: PRIORITY_BORDER_COLOR[p],
+            boxShadow: `0 0 4px ${PRIORITY_BORDER_COLOR[p]}40`
+          }
+        }
+      ) }, p))
+    }
+  );
+}
+function PrioritySelector({ value, onChange, disabled }) {
+  return /* @__PURE__ */ jsx(Group, { gap: 6, wrap: "nowrap", role: "radiogroup", "aria-label": "Priority", children: PRIORITY_OPTIONS.map((opt) => {
+    const color = PRIORITY_BORDER_COLOR[opt.value];
+    const selected = value === opt.value;
+    return /* @__PURE__ */ jsxs(
+      UnstyledButton,
+      {
+        role: "radio",
+        "aria-checked": selected,
+        "aria-label": `Priority ${opt.label}`,
+        onClick: () => !disabled && onChange(opt.value),
+        disabled,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "3px 10px",
+          fontSize: "var(--mantine-font-size-xs)",
+          fontWeight: 600,
+          lineHeight: 1.5,
+          color: selected ? "#fff" : "var(--mantine-color-dimmed)",
+          background: selected ? color : "transparent",
+          border: `1px solid ${selected ? color : "var(--color-border)"}`,
+          borderRadius: 999,
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.6 : 1,
+          boxShadow: selected ? `0 0 0 2px ${color}33` : void 0,
+          transition: "background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease"
+        },
+        children: [
+          !selected && /* @__PURE__ */ jsx(
+            Box,
+            {
+              style: {
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                backgroundColor: color
+              }
+            }
+          ),
+          opt.label
+        ]
+      },
+      opt.value
+    );
+  }) });
+}
+function ScopeChip({ visibility, onToggle, disabled, disabledTooltip }) {
+  const isOrg = visibility === "org";
+  const Icon = isOrg ? IconUsers : IconLock;
+  const label = isOrg ? "Shared with org" : "Just for me";
+  const chip = /* @__PURE__ */ jsxs(
+    UnstyledButton,
+    {
+      role: "switch",
+      "aria-checked": isOrg,
+      "aria-label": `Note scope: ${label}`,
+      onClick: () => !disabled && onToggle(),
+      disabled,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "3px 10px",
+        fontSize: "var(--mantine-font-size-xs)",
+        fontWeight: 500,
+        lineHeight: 1.5,
+        color: "var(--color-text-dimmed)",
+        background: "transparent",
+        border: "1px solid var(--color-border)",
+        borderRadius: 999,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.6 : 1,
+        maxWidth: "100%",
+        transition: "background 120ms ease, border-color 120ms ease, color 120ms ease"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Icon, { size: 12, style: { flexShrink: 0 } }),
+        /* @__PURE__ */ jsx(Text, { component: "span", size: "xs", truncate: true, style: { minWidth: 0 }, children: label })
+      ]
+    }
+  );
+  if (disabled && disabledTooltip) {
+    return /* @__PURE__ */ jsx(Tooltip, { label: disabledTooltip, withArrow: true, position: "top", children: /* @__PURE__ */ jsx("span", { children: chip }) });
+  }
+  return chip;
+}
+function NoteCard({ note, onPinToggle, onDelete, onEdit }) {
+  const isAgent = note.createdBy === "agent";
+  const dotColor = PRIORITY_BORDER_COLOR[note.priority] ?? PRIORITY_BORDER_COLOR.normal;
+  const isOrgShared = note.visibility === "org";
+  return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "sm", "data-priority": note.priority, "aria-label": `Note (${note.priority} priority)`, children: /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", align: "flex-start", children: [
+      /* @__PURE__ */ jsxs(Stack, { gap: 4, style: { flex: 1, minWidth: 0 }, children: [
+        note.title && /* @__PURE__ */ jsx(Text, { size: "sm", fw: 700, truncate: true, children: note.title }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: note.content })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", style: { flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            "data-priority-card-dot": note.priority,
+            style: {
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              backgroundColor: dotColor,
+              boxShadow: `0 0 4px ${dotColor}40`,
+              flexShrink: 0,
+              alignSelf: "center"
+            }
+          }
+        ),
+        isAgent && /* @__PURE__ */ jsx(Tooltip, { label: `Created by ${note.source ?? "agent"}`, withArrow: true, children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(IconRobot, { size: 14, style: { opacity: 0.6 } }) }) }),
+        /* @__PURE__ */ jsx(Tooltip, { label: note.pinned ? "Unpin" : "Pin", withArrow: true, children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            variant: "subtle",
+            size: "sm",
+            onClick: () => onPinToggle(note.id, !note.pinned),
+            "aria-label": note.pinned ? "Unpin note" : "Pin note",
+            children: note.pinned ? /* @__PURE__ */ jsx(IconPinned, { size: 14 }) : /* @__PURE__ */ jsx(IconPinnedOff, { size: 14 })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(Menu, { position: "bottom-end", withinPortal: true, children: [
+          /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", "aria-label": "Note options", children: /* @__PURE__ */ jsx(IconDotsVertical, { size: 14 }) }) }),
+          /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
+            /* @__PURE__ */ jsx(Menu.Item, { leftSection: /* @__PURE__ */ jsx(IconPencil, { size: 14 }), onClick: onEdit, children: "Edit" }),
+            /* @__PURE__ */ jsx(Menu.Item, { color: "red", leftSection: /* @__PURE__ */ jsx(IconTrash, { size: 14 }), onClick: () => onDelete(note.id), children: "Delete" })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", align: "center", children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { flexShrink: 0 }, children: new Date(note.updatedAt).toLocaleDateString() }),
+      isOrgShared && note.creatorName && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { flexShrink: 0 }, children: "\xB7" }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", truncate: true, "data-testid": "note-creator-attribution", children: note.creatorName })
+      ] })
+    ] })
+  ] }) });
+}
+function EditNoteForm({ note, onClose, currentUserId }) {
+  const [title, setTitle] = useState(note.title ?? "");
+  const [content, setContent] = useState(note.content);
+  const [priority, setPriority] = useState(note.priority);
+  const [pinned, setPinned] = useState(note.pinned);
+  const [visibility, setVisibility] = useState(note.visibility);
+  const { mutate: updateNote, isPending } = useUpdateUserNote();
+  const dotColor = PRIORITY_BORDER_COLOR[priority] ?? PRIORITY_BORDER_COLOR.normal;
+  const isOwner = currentUserId !== null && note.userId === currentUserId;
+  const scopeDisabled = isPending || !isOwner;
+  function handleSubmit() {
+    if (!content.trim() || !title.trim()) return;
+    const patch = {
+      id: note.id,
+      content: content.trim(),
+      title: title.trim(),
+      priority,
+      pinned
+    };
+    if (isOwner) {
+      patch.visibility = visibility;
+    }
+    updateNote(patch, {
+      onSuccess: () => {
+        onClose();
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "sm", children: /* @__PURE__ */ jsxs(Stack, { gap: 8, children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", align: "center", children: [
+      /* @__PURE__ */ jsx(CardHeader, { icon: /* @__PURE__ */ jsx(IconPencil, { size: 16 }), title: "Edit Note", titleOrder: 6, mb: 0 }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          "data-priority-card-dot": priority,
+          style: {
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            backgroundColor: dotColor,
+            boxShadow: `0 0 4px ${dotColor}40`,
+            flexShrink: 0
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        size: "xs",
+        variant: "filled",
+        placeholder: "Title",
+        required: true,
+        withAsterisk: false,
+        value: title,
+        onChange: (e) => setTitle(e.currentTarget.value),
+        disabled: isPending,
+        "aria-label": "Edit note title"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        size: "xs",
+        variant: "filled",
+        autosize: true,
+        minRows: 3,
+        maxRows: 10,
+        placeholder: "Note content\u2026",
+        value: content,
+        onChange: (e) => setContent(e.currentTarget.value),
+        disabled: isPending,
+        "aria-label": "Edit note content"
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", wrap: "nowrap", gap: "md", children: [
+      /* @__PURE__ */ jsx(PrioritySelector, { value: priority, onChange: setPriority, disabled: isPending }),
+      /* @__PURE__ */ jsxs(Group, { gap: "md", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(
+          ScopeChip,
+          {
+            visibility,
+            onToggle: () => setVisibility((v) => v === "private" ? "org" : "private"),
+            disabled: scopeDisabled,
+            disabledTooltip: !isOwner ? "Only the creator can change visibility" : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            size: "xs",
+            label: "Pin to top",
+            checked: pinned,
+            onChange: (e) => setPinned(e.currentTarget.checked),
+            disabled: isPending
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "flex-end", mt: 4, children: [
+      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "default", onClick: onClose, disabled: isPending, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "xs",
+          variant: "filled",
+          onClick: handleSubmit,
+          disabled: isPending || !content.trim() || !title.trim(),
+          loading: isPending,
+          children: "Save"
+        }
+      )
+    ] })
+  ] }) });
+}
+function CreateNoteForm({ onClose }) {
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [priority, setPriority] = useState("normal");
+  const [pinned, setPinned] = useState(false);
+  const [visibility, setVisibility] = useState("private");
+  const { mutate: createNote, isPending } = useCreateUserNote();
+  const dotColor = PRIORITY_BORDER_COLOR[priority] ?? PRIORITY_BORDER_COLOR.normal;
+  function handleSubmit() {
+    if (!content.trim() || !title.trim()) return;
+    const payload = {
+      title: title.trim(),
+      content: content.trim(),
+      priority,
+      pinned,
+      visibility
+    };
+    createNote(payload, {
+      onSuccess: () => {
+        onClose();
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "sm", children: /* @__PURE__ */ jsxs(Stack, { gap: 8, children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", align: "center", children: [
+      /* @__PURE__ */ jsx(CardHeader, { icon: /* @__PURE__ */ jsx(IconPlus, { size: 16 }), title: "Create Note", titleOrder: 6, mb: 0 }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          "data-priority-card-dot": priority,
+          style: {
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            backgroundColor: dotColor,
+            boxShadow: `0 0 4px ${dotColor}40`,
+            flexShrink: 0
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        size: "xs",
+        variant: "filled",
+        placeholder: "Title",
+        required: true,
+        withAsterisk: false,
+        value: title,
+        onChange: (e) => setTitle(e.currentTarget.value),
+        disabled: isPending,
+        "aria-label": "New note title"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        size: "xs",
+        variant: "filled",
+        autosize: true,
+        minRows: 3,
+        maxRows: 10,
+        placeholder: "Note content\u2026",
+        value: content,
+        onChange: (e) => setContent(e.currentTarget.value),
+        disabled: isPending,
+        "aria-label": "New note content"
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", wrap: "nowrap", gap: "md", children: [
+      /* @__PURE__ */ jsx(PrioritySelector, { value: priority, onChange: setPriority, disabled: isPending }),
+      /* @__PURE__ */ jsxs(Group, { gap: "md", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(
+          ScopeChip,
+          {
+            visibility,
+            onToggle: () => setVisibility((v) => v === "private" ? "org" : "private"),
+            disabled: isPending
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            size: "xs",
+            label: "Pin to top",
+            checked: pinned,
+            onChange: (e) => setPinned(e.currentTarget.checked),
+            disabled: isPending
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "flex-end", mt: 4, children: [
+      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "default", onClick: onClose, disabled: isPending, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "xs",
+          variant: "filled",
+          onClick: handleSubmit,
+          disabled: isPending || !content.trim() || !title.trim(),
+          loading: isPending,
+          children: "Save"
+        }
+      )
+    ] })
+  ] }) });
+}
+function NotesPanelView() {
+  const [showForm, setShowForm] = useState(false);
+  const [editingId, setEditingId] = useState(null);
+  const { data: notes, isLoading, error } = useUserNotes();
+  const { mutate: updateNote } = useUpdateUserNote();
+  const { mutate: deleteNote } = useDeleteUserNote();
+  const { profile } = useInitialization();
+  const currentUserId = profile?.id ?? null;
+  function handlePinToggle(id, pinned) {
+    updateNote({ id, pinned });
+  }
+  function handleDelete(id) {
+    deleteNote(id);
+  }
+  const headerRight = /* @__PURE__ */ jsxs(Group, { gap: 10, wrap: "nowrap", align: "center", children: [
+    /* @__PURE__ */ jsx(PriorityLegend, {}),
+    !showForm && /* @__PURE__ */ jsx(
+      UnstyledButton,
+      {
+        onClick: () => setShowForm(true),
+        style: {
+          fontSize: "var(--mantine-font-size-xs)",
+          color: "var(--mantine-color-blue-6)",
+          fontWeight: 600
+        },
+        children: "+ New Note"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx(NotesPanelViewShell, { title: "Notes", icon: IconNote, headerRightContent: headerRight, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    showForm && /* @__PURE__ */ jsx(CreateNoteForm, { onClose: () => setShowForm(false) }),
+    isLoading && /* @__PURE__ */ jsx(Center, { py: "lg", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }),
+    error && /* @__PURE__ */ jsx(Text, { size: "sm", c: "red.6", children: "Failed to load notes." }),
+    !isLoading && !error && notes?.length === 0 && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No notes yet. Create one above." }),
+    notes?.map(
+      (note) => editingId === note.id ? /* @__PURE__ */ jsx(EditNoteForm, { note, currentUserId, onClose: () => setEditingId(null) }, note.id) : /* @__PURE__ */ jsx(
+        NoteCard,
+        {
+          note,
+          onPinToggle: handlePinToggle,
+          onDelete: handleDelete,
+          onEdit: () => setEditingId(note.id)
+        },
+        note.id
+      )
+    )
+  ] }) });
+}
+function OverviewListRow({ icon, iconColor, iconBackground, title, onClick, meta }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onClick,
+      onKeyDown: onClick ? (e) => (e.key === "Enter" || e.key === " ") && onClick() : void 0,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "6px 4px",
+        borderRadius: "var(--mantine-radius-sm)",
+        cursor: onClick ? "pointer" : void 0,
+        transition: "background 120ms ease"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 22,
+              height: 22,
+              borderRadius: "var(--mantine-radius-sm)",
+              background: iconBackground,
+              color: iconColor,
+              flexShrink: 0
+            },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "xs", style: { flex: 1, minWidth: 0 }, truncate: true, children: title }),
+        meta
+      ]
+    }
+  );
+}
+function OverviewList({ children }) {
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children });
+}
+var HIGHLIGHT_PRIORITIES = ["urgent", "high"];
+var PRIORITY_ICON = {
+  urgent: IconAlertTriangle,
+  high: IconArrowUp,
+  normal: IconNote,
+  low: IconNote
+};
+function formatRelativeDate(iso) {
+  const then = new Date(iso).getTime();
+  const diffMs = Date.now() - then;
+  const dayMs = 24 * 60 * 60 * 1e3;
+  const days = Math.floor(diffMs / dayMs);
+  if (days <= 0) return "Today";
+  if (days === 1) return "Yesterday";
+  if (days < 7) return `${days}d ago`;
+  if (days < 30) return `${Math.floor(days / 7)}w ago`;
+  return new Date(iso).toLocaleDateString();
+}
+function priorityRow(note, onOpen) {
+  const color = PRIORITY_BORDER_COLOR[note.priority];
+  const Icon = PRIORITY_ICON[note.priority];
+  const display = note.title?.trim() || note.content;
+  const priorityLabel = note.priority.charAt(0).toUpperCase() + note.priority.slice(1);
+  return /* @__PURE__ */ jsx(
+    OverviewListRow,
+    {
+      icon: /* @__PURE__ */ jsx(Icon, { size: 13 }),
+      iconColor: color,
+      iconBackground: `${color}1f`,
+      iconTooltip: `${priorityLabel} priority`,
+      title: display,
+      onClick: onOpen,
+      meta: /* @__PURE__ */ jsx(Text, { size: "xs", style: { color: "var(--color-text-dimmed)", whiteSpace: "nowrap" }, children: formatRelativeDate(note.updatedAt) })
+    },
+    note.id
+  );
+}
+function PriorityNotesCard({ onNavigateToNotes }) {
+  const { data: notes } = useUserNotes();
+  const priorityNotes = (notes ?? []).filter((n) => HIGHLIGHT_PRIORITIES.includes(n.priority));
+  if (priorityNotes.length === 0) return null;
+  const urgentCount = priorityNotes.filter((n) => n.priority === "urgent").length;
+  return /* @__PURE__ */ jsxs(Paper, { withBorder: true, p: "md", "data-testid": "priority-notes-card", children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        icon: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 18 }),
+        title: "Priority Notes",
+        titleOrder: 3,
+        mb: "xs",
+        rightSection: urgentCount > 0 ? /* @__PURE__ */ jsxs(Badge, { size: "sm", variant: "light", color: "red", children: [
+          urgentCount,
+          " urgent"
+        ] }) : null
+      }
+    ),
+    /* @__PURE__ */ jsx(OverviewList, { children: priorityNotes.map((note) => priorityRow(note, onNavigateToNotes)) })
+  ] });
+}
+
+export { CreateNoteForm, EditNoteForm, NotesPanelView, NotesPanelViewShell, PRIORITY_BORDER_COLOR, PriorityNotesCard, ScopeChip };

package/dist/features/operations/index.d.ts

@@ -761,7 +761,11 @@ declare const OrganizationModelSchema: z.ZodObject<{
             light: z.ZodOptional<z.ZodString>;
             dark: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>>;
-    }, z.core.$strip>>;
+        voice: z.ZodOptional<z.ZodString>;
+        tagline: z.ZodOptional<z.ZodString>;
+        values: z.ZodOptional<z.ZodArray<z.ZodString>>;
+        themePresetId: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>>;
     navigation: z.ZodDefault<z.ZodObject<{
         sidebar: z.ZodDefault<z.ZodObject<{
             primary: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodType<SidebarNode, unknown, z.core.$ZodTypeInternals<SidebarNode, unknown>>>>;
@@ -808,7 +812,11 @@ declare const OrganizationModelSchema: z.ZodObject<{
             }, z.core.$strip>>;
         }, z.core.$strip>>;
         clientBrief: z.ZodDefault<z.ZodString>;
-    }, z.core.$strip>>;
+        organizationName: z.ZodOptional<z.ZodString>;
+        productName: z.ZodOptional<z.ZodString>;
+        shortName: z.ZodOptional<z.ZodString>;
+        description: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>>;
     customers: z.ZodDefault<z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodObject<{
         id: z.ZodString;
         order: z.ZodNumber;