save 2

Author: Arlen22

packages/admin-vanilla/src/app.inline.css

@@ -411,17 +411,18 @@ body:has(.modal-shell[open]) {
 	position: fixed;
 	inset: 0;
 	z-index: 1000;
-	display: grid;
 	justify-items: center;
 	align-items: start;
 	padding: 28px;
 	background: var(--color-overlay-modal);
 	backdrop-filter: blur(10px);
-	overflow: hidden;
+	overflow: clip;
+	display: flex;
+	flex-direction: column;
 }
 
 .modal-card {
-	width: min(1180px, 100%);
+	width: 100%;
 	max-height: calc(100vh - 56px);
 	display: flex;
 	flex-direction: column;
@@ -452,8 +453,8 @@ footer.modal-header {
 	font-size: 2rem;
 }
 
-.modal-header > div {
-	min-width: 0;
+.modal-title {
+	flex: 1;
 }
 
 .close-button {
@@ -511,8 +512,8 @@ footer.modal-header {
 }
 
 .modal-layout {
-	display: grid;
-	grid-template-columns: 260px minmax(0, 1fr);
+	display: flex;
+	align-items: flex-start;
 	gap: 22px;
 	padding: 24px;
 	flex: 1 1 auto;
@@ -571,6 +572,9 @@ footer.modal-header {
 }
 
 .modal-sidebar {
+	flex: 0 0 260px;
+	width: 260px;
+	max-width: 100%;
 	position: sticky;
 	top: 0;
 	align-self: start;
@@ -580,7 +584,6 @@ footer.modal-header {
 	border-radius: 20px;
 	background: var(--color-surface-sidebar);
 	overflow: hidden;
-	word-break: break-all;
 }
 
 .sidebar-section {
@@ -721,6 +724,52 @@ footer.modal-header {
 	border-bottom: 0;
 }
 
+.prefix-bag-sidebar {
+	margin: 16px 0 0;
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: 10px;
+}
+
+.prefix-bag-sidebar-term {
+	font-size: 0.76rem;
+	letter-spacing: 0.1em;
+	color: var(--color-accent-meta);
+	text-transform: none;
+	margin: 0;
+}
+
+.prefix-bag-sidebar-prefix {
+	font-size: 0.88rem;
+}
+
+.prefix-bag-sidebar-value {
+	margin: 4px 0 0 10px;
+	color: var(--color-text-strong);
+	line-height: 1.45;
+	padding-bottom: 10px;
+	border-bottom: 1px solid var(--color-border-soft);
+}
+
+.prefix-bag-sidebar-value:last-child {
+	padding-bottom: 0;
+	border-bottom: 0;
+}
+
+.prefix-bag-sidebar-pill {
+	display: inline-flex;
+	align-items: center;
+	margin-left: -8px;
+	padding: 4px 8px;
+	border-radius: 999px;
+	background: var(--color-surface-pill);
+	color: var(--color-accent-pill-text);
+	font-weight: 600;
+	font-size: 0.84rem;
+	line-height: 1.2;
+	vertical-align: middle;
+}
+
 .summary-card ul {
 	margin-bottom: 0;
 	padding-left: 18px;
@@ -735,6 +784,8 @@ footer.modal-header {
 }
 
 .modal-main {
+	flex: 1 1 0;
+	min-width: 0;
 	gap: 22px;
 }
 
@@ -1192,6 +1243,7 @@ footer.modal-header {
 .value-ordered-list li {
 	padding-bottom: 10px;
 	border-bottom: 1px solid var(--color-border-soft);
+
 }
 
 .timeline-list li:last-child,
@@ -1329,12 +1381,21 @@ table.value-table td {
 
 	.hero-panel,
 	.section-header,
-	.modal-layout,
 	.modal-section-header,
 	.section-field-grid {
 		grid-template-columns: 1fr;
 	}
 
+	.modal-layout {
+		flex-direction: column;
+	}
+
+	.modal-sidebar {
+		flex: 0 0 auto;
+		width: 100%;
+		position: relative;
+	}
+
 	.composite-fields {
 		grid-template-columns: 1fr;
 	}
@@ -1347,7 +1408,7 @@ table.value-table td {
 	}
 
 	.field-index {
-		position: static;
+		position: relative;
 	}
 
 	.row-editor-row,

packages/admin-vanilla/src/app.tsx

@@ -120,8 +120,8 @@ interface SidebarSectionProps {
 
 interface ToggleFieldProps {
   field: FieldDefinition;
-  value: unknown;
-  onDraftChange: DraftChangeHandler;
+  value: boolean;
+  onDraftChange: DraftChangeHandler<boolean>;
   headerOnly?: boolean;
 }
 
@@ -324,8 +324,10 @@ function formatStorageErrorForDisplay(storageError: string): string {
 
 
 function formatFieldValue(value: any): string {
-  if (typeof value === "string")
-    return value && value.trim() ? value : "—";
+  if (typeof value === "string"
+    || value instanceof IdString
+    || value instanceof KeyString)
+    return value.trim() || "—";
   if (Array.isArray(value)) {
     if (!value.length) return "—";
     if (typeof value[0] === "string")
@@ -462,18 +464,22 @@ function renderMetadataTableField(ctx: ReadonlyFieldContext<readonly string[]>)
 function renderTableField(ctx: ReadonlyFieldContext) {
   const { field, value, itemsByTab } = ctx;
   definitely<readonly string[]>(value);
+  return renderLinesList(value, field.key, itemsByTab)
+}
+
+function renderLinesList(value: readonly string[], key: string, itemsByTab?: AdminRecordStore) {
   const missingCheck =
     itemsByTab ?
-      field.key === "effectiveReadonlyBags" ? new Set(Array.from(itemsByTab.availableBagNames, e => e.toString())) :
-        field.key === "effectivePluginSet" ? itemsByTab.availablePluginNames :
+      key === "effectiveReadonlyBags" ? new Set(Array.from(itemsByTab.availableBagNames, e => e.toString())) :
+        key === "effectivePluginSet" ? itemsByTab.availablePluginNames :
           null : null;
   const lines = value.map(line => ({ line, missing: missingCheck && !missingCheck.has(line), }));
   return <ul class="value-list">{lines.map(({ line, missing }) => <li>
-    {line}
+    {line.split("/").map((e, i, a) => <>{e}{(i !== a.length - 1) ? "/" : ""}<wbr/></>)}
     {missing ? <span class="missing-marker" aria-label="Missing dependency" title="Missing dependency"><MaterialSymbol icon={warningIcon} /></span> : null}
   </li>)}</ul>;
-}
 
+}
 function renderCalloutField(ctx: ReadonlyFieldContext) {
   definitely<string>(ctx.value);
   return <div class="field-callout"><p>{formatFieldValue(ctx.value)}</p></div>;
@@ -727,6 +733,7 @@ class PermissionTableFieldHandler extends FieldTypeHandler<readonly PermissionRo
   }
 }
 
+const defaultPrefixPill = <div class="prefix-bag-sidebar-pill">default</div>;
 class PrefixTableFieldHandler extends FieldTypeHandler<WritablePrefixRow[]> {
   constructor() {
     super();
@@ -736,6 +743,15 @@ class PrefixTableFieldHandler extends FieldTypeHandler<WritablePrefixRow[]> {
     return [];
   }
 
+  public override renderSidebar(ctx: ReadonlyFieldContext<WritablePrefixRow[]>): JSX.Node {
+    return <dl class="prefix-bag-sidebar">
+      {ctx.value.map(e => <>
+        <dt class="prefix-bag-sidebar-term">{e.prefix ? <span class="prefix-bag-sidebar-prefix">"{e.prefix}"</span> : defaultPrefixPill}</dt>
+        <dd class="prefix-bag-sidebar-value">{e.bagName.toString()}</dd>
+      </>)}
+    </dl>
+  }
+
   public override renderEditor(ctx: FieldEditorContext) {
     const { field, value, disabled, modalState, itemsByTab, inputId, onDraftChange, onPendingRowsChange } = ctx;
     const forDisplay = field.mode === "server";
@@ -820,7 +836,7 @@ class PrefixTableFieldHandler extends FieldTypeHandler<WritablePrefixRow[]> {
     return <table class="value-table">
       {displayedMappingRows.map((row) => (
         <tr>
-          <td>{row.prefix ? <code>{'"' + row.prefix + '"'}</code> : <span class="pill-value pill-value-small">default</span>}</td>
+          <td>{row.prefix ? <code>{'"' + row.prefix + '"'}</code> : defaultPrefixPill}</td>
           <td>{row.bagName.toString()}</td>
         </tr>
       ))}
@@ -953,7 +969,7 @@ class ValueListFieldHandler extends FieldTypeHandler<string[]> {
     const lines = typeof ctx.value === "string"
       ? lineListCodec.parse(ctx.value)
       : ctx.value as readonly string[];
-    return <ul class="value-list">{lines.map((line) => <li>{line}</li>)}</ul>;
+    return renderLinesList(lines, ctx.field.key, ctx.itemsByTab);
   }
 
   public override renderEditor(ctx: FieldEditorContext) {
@@ -1064,6 +1080,7 @@ class FallbackFieldHandler extends StringFieldTypeHandler {
   }
 }
 
+
 const textInputFieldHandler = new TextInputFieldHandler("text");
 const numberInputFieldHandler = new TextInputFieldHandler("number");
 const textareaFieldHandler = new TextareaFieldHandler(4);
@@ -1116,7 +1133,7 @@ function renderFieldEditor(input: FieldEditorInput) {
 }
 
 @customElement("mws-field-block")
-class FieldBlockElement extends JSXElement {
+class FieldBlockElement<T> extends JSXElement {
   useLightDOM: boolean = true;
 
   @state() accessor props!: FieldBlockProps;
@@ -1136,6 +1153,7 @@ class FieldBlockElement extends JSXElement {
 ) : null} */}
 
         {useToggleEditor ? (
+          definitely<boolean>(value),
           <ToggleFieldElement field={field} value={value} onDraftChange={this.props.onDraftChange} />
         ) : (
           <div class="field-editor">
@@ -1196,7 +1214,7 @@ class ToggleFieldElement extends JSXElement {
 
   protected render() {
     const { field, value, onDraftChange, headerOnly } = this.props;
-    const checked = value === "enabled";
+    const checked = value === true;
 
     return (
       <div class="toggle-field-row">
@@ -1215,7 +1233,7 @@ class ToggleFieldElement extends JSXElement {
             ref={(element) => {
               if (element.checked !== checked) element.checked = checked;
             }}
-            onchange={(event) => onDraftChange(field.key, (event.currentTarget as HTMLInputElement).checked ? "enabled" : "disabled")}
+            onchange={(event) => onDraftChange(field.key, (event.currentTarget as HTMLInputElement).checked)}
           />
           <span class={checked ? "header-switch-track is-checked" : "header-switch-track"} aria-hidden="true">
             <span class="header-switch-thumb"></span>
@@ -1262,14 +1280,14 @@ class RecordModalElement extends JSXElement {
       }}>
         <section class="modal-card" role="dialog" aria-modal="true" aria-label={`${selectedTab.label} details`}>
           <header class="modal-header">
-            <div>
+            <div class="modal-title">
               <p class="eyebrow">{selectedTab.eyebrow}</p>
               <h3>{isModalLoading ? `Loading ${selectedTab.label.slice(0, -1).toLowerCase()}...` : modalState.mode === "create" ? `New ${selectedTab.label.slice(0, -1)}` : getPrimaryValue(selectedTab, modalState.draft)}</h3>
               <p>{isModalLoading ? "Fetching record details from async storage before rendering the form." : selectedTab.description}</p>
             </div>
-            <button class="close-button" type="button" onclick={onClose} aria-label="Close details">
+            <div class="close-button" onclick={onClose} aria-label="Close details">
               <MaterialSymbol icon={closeIcon} />
-            </button>
+            </div>
           </header>
 
           {isModalLoading ? (

packages/admin-vanilla/src/definition/store.ts

@@ -8,17 +8,17 @@ export class InMemoryAdminStorage implements AdminStorage {
     private deriveItems: (data: DataStore) => AdminRecordStore
   ) {
   }
-
+  jsonReviver = (key: any, val: any) => {
+    if (typeof val === "string" && val.startsWith(IdString.prefix))
+      return new IdString(val.slice(IdString.prefix.length));
+    if (typeof val === "string" && val.startsWith(KeyString.prefix))
+      return new KeyString(val.slice(KeyString.prefix.length));
+    return val;
+  };
   public async loadAll(): Promise<AdminRecordStore> {
     const data = await (await fetch(pathPrefix + "/admin/load")).text();
 
-    this.data = JSON.parse(data, (key, val) => {
-      if (typeof val === "string" && val.startsWith("IdString____"))
-        return new IdString(val.slice("IdString____".length));
-      if (typeof val === "string" && val.startsWith("KeyString____"))
-        return new KeyString(val.slice("KeyString____".length));
-      return val;
-    });
+    this.data = JSON.parse(data, this.jsonReviver);
     return this.deriveItems(this.data);
   }
   private wait(ms: number): Promise<void> {
@@ -42,10 +42,12 @@ export class InMemoryAdminStorage implements AdminStorage {
       body: JSON.stringify(prunedRecord),
     });
 
+    const text = await response.text();
+
     if (response.status !== 200) {
-      throw new Error(await response.text());
+      throw new Error(text);
     } else {
-      const storedRecord = await response.json();
+      const storedRecord = JSON.parse(text, this.jsonReviver);
       console.log(storedRecord, prunedRecord);
       if (id) {
         if (storedRecord.id !== id) location.reload();