wip: `editable` state semi-purged

webui/src/components/BrowseColumn.svelte

@@ -10,7 +10,6 @@
   export let index: number;
   export let only: boolean;
 
-  let editable = false;
   let detail = only;
   let detailChanged = false;
   $: if (!detailChanged) detail = only;
@@ -47,14 +46,10 @@
 </script>
 
 <div class="browse-column" class:detail>
-  <div class="view" class:editable style="--width: {width}px">
+  <div class="view" style="--width: {width}px">
     <header>
-      <IconButton
-        name="pencil"
-        on:click={() => (editable = !editable)}
-        active={editable}
-      >
-        Edit
+      <IconButton name="link" on:click={() => visit()} disabled={only}>
+        Detach
       </IconButton>
       <IconButton
         name={detail ? "zoom-out" : "zoom-in"}
@@ -66,9 +61,6 @@
       >
         Detail
       </IconButton>
-      <IconButton name="link" on:click={() => visit()} disabled={only}>
-        Detach
-      </IconButton>
       <IconButton
         name="x-circle"
         on:click={() => dispatch("close")}
@@ -77,14 +69,7 @@
         Close
       </IconButton>
     </header>
-    <Inspect
-      {address}
-      editable={editable || false}
-      {index}
-      {detail}
-      on:resolved
-      on:close
-    />
+    <Inspect {address} {index} {detail} on:resolved on:close />
   </div>
   <div class="resizeHandle" on:mousedown|preventDefault={drag} />
 </div>
@@ -123,10 +108,6 @@
     // transition: min-width 0.2s, max-width 0.2s;
     // TODO - container has nowhere to scroll, breaking `detail` scroll
 
-    &.editable {
-      border-style: dashed;
-    }
-
     header {
       font-size: 20px;
       position: relative;

webui/src/components/EntryView.svelte

@@ -27,7 +27,6 @@
   export let group: string | undefined = undefined;
   export let icon: string | undefined = undefined;
   export let highlighted = false;
-  export let editable = false;
 
   let currentWidget: string | undefined;
 
@@ -90,7 +89,7 @@
       {/if}
     </h3>
 
-    {#if currentWidget && (availableWidgets.length > 1 || editable)}
+    {#if currentWidget && availableWidgets.length > 1}
       <div class="views">
         {#each availableWidgets as widget (widget.name)}
           <IconButton
@@ -111,7 +110,6 @@
       <svelte:component
         this={component.component}
         {...component.props || {}}
-        {editable}
         on:change
       />
     {/each}

webui/src/components/Inspect.svelte

@@ -28,7 +28,6 @@
   export let address: string;
   export let index: number | undefined;
   export let detail: boolean;
-  export let editable = false;
   let showAsEntries = false;
   let highlightedType: string | undefined;
 
@@ -165,22 +164,18 @@
       ].includes(entry.attribute),
   );
 
-  $: currentUntypedAttributes = editable
-    ? untypedAttributes
-    : filteredUntypedAttributes;
+  $: currentUntypedAttributes = filteredUntypedAttributes;
 
   $: filteredUntypedLinks = untypedLinks.filter(
     (entry) => ![ATTR_IN, ATTR_OF].includes(entry.attribute),
   );
 
-  $: currentUntypedLinks = editable ? untypedLinks : filteredUntypedLinks;
+  $: currentUntypedLinks = filteredUntypedLinks;
 
   $: currentBacklinks =
-    (editable
-      ? $entity?.backlinks
-      : $entity?.backlinks.filter(
-          (entry) => ![ATTR_IN, ATTR_OF].includes(entry.attribute),
-        )) || [];
+    $entity?.backlinks.filter(
+      (entry) => ![ATTR_IN, ATTR_OF].includes(entry.attribute),
+    ) || [];
 
   $: tagged = $entity?.attr[`~${ATTR_IN}`] || [];
 
@@ -347,31 +342,24 @@
         <div class="blob-viewer">
           <BlobViewer
             {address}
-            {editable}
             {detail}
             on:handled={(ev) => (blobHandled = ev.detail)}
           />
         </div>
-        <NotesEditor {address} {editable} on:change={onChange} />
+        <NotesEditor {address} on:change={onChange} />
         {#if !$error}
           <InspectGroups
             {entity}
-            {editable}
             on:highlighted={(ev) => (highlightedType = ev.detail)}
             on:change={() => revalidate()}
           />
           <div class="attributes">
-            <InspectTypeEditor
-              {entity}
-              {editable}
-              on:change={() => revalidate()}
-            />
+            <InspectTypeEditor {entity} on:change={() => revalidate()} />
             {#each Object.entries($allTypes) as [typeAddr, { labels, attributes }]}
               <EntryView
                 entries={($entity?.attributes || []).filter((e) =>
                   attributes.includes(e.attribute),
                 )}
-                {editable}
                 widgets={linkWidgets}
                 on:change={onChange}
                 highlighted={highlightedType == typeAddr}
@@ -380,20 +368,18 @@
               />
             {/each}
 
-            {#if currentUntypedAttributes.length > 0 || editable}
+            {#if currentUntypedAttributes.length > 0}
               <EntryView
                 title={$i18n.t("Other Attributes")}
-                {editable}
                 widgets={attributeWidgets}
                 entries={currentUntypedAttributes}
                 on:change={onChange}
               />
             {/if}
 
-            {#if currentUntypedLinks.length > 0 || editable}
+            {#if currentUntypedLinks.length > 0}
               <EntryView
                 title={$i18n.t("Links")}
-                {editable}
                 widgets={linkWidgets}
                 entries={currentUntypedLinks}
                 on:change={onChange}
@@ -442,12 +428,14 @@
             {/if}
           </div>
 
-          {#if editable}
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div class="button" on:click={deleteObject}>
-              <Icon name="trash" />
-            </div>
-          {/if}
+          <div class="footer">
+            <IconButton
+              name="detail"
+              title={$i18n.t("Show as entries")}
+              active={showAsEntries}
+              on:click={() => (showAsEntries = !showAsEntries)}
+            />
+          </div>
         {:else}
           <div class="error">
             {$error}
@@ -459,7 +447,6 @@
     <div class="entries">
       <h2>{$i18n.t("Attributes")}</h2>
       <EntryList
-        {editable}
         entries={$entity.attributes}
         columns={detail
           ? "timestamp, provenance, attribute, value"
@@ -474,12 +461,14 @@
       />
     </div>
   {/if}
-  <div class="footer">
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class="trash">
     <IconButton
-      name="detail"
-      title="Show as entries"
-      active={showAsEntries}
-      on:click={() => (showAsEntries = !showAsEntries)}
+      name="trash"
+      outline
+      color="#dc322f"
+      on:click={deleteObject}
+      title={$i18n.t("Delete object")}
     />
   </div>
 </div>
@@ -567,4 +556,10 @@
   .error {
     color: red;
   }
+
+  .trash {
+    opacity: 0.66;
+    display: flex;
+    flex-direction: column;
+  }
 </style>

webui/src/components/display/BlobViewer.svelte

@@ -15,7 +15,6 @@
   const dispatch = createEventDispatcher();
 
   export let address: string;
-  export let editable: boolean;
   export let detail: boolean;
 
   let handled = false;
@@ -47,13 +46,13 @@
       </div>
     {/if}
     {#if types.audio}
-      <AudioViewer {address} {detail} {editable} />
+      <AudioViewer {address} {detail} />
     {/if}
     {#if types.video}
       <VideoViewer detail {address} />
     {/if}
     {#if types.image}
-      <ImageViewer {address} {editable} {detail} />
+      <ImageViewer {address} {detail} />
     {/if}
     {#if types.pdf}
       <iframe

webui/src/components/display/blobs/AudioViewer.svelte

@@ -15,7 +15,8 @@
 
   export let address: string;
   export let detail: boolean;
-  export let editable: boolean;
+
+  let editable = false; // TODO
 
   let containerEl: HTMLDivElement;
   let timelineEl: HTMLDivElement;

webui/src/components/display/blobs/ImageViewer.svelte

@@ -9,9 +9,10 @@
   import { ATTR_LABEL } from "upend/constants";
 
   export let address: string;
-  export let editable: boolean;
   export let detail: boolean;
 
+  let editable = false; // TODO
+
   const { entity } = useEntity(address);
 
   let imageLoaded = false;
@@ -23,11 +24,11 @@
     addAnnotation: (a: W3cAnnotation) => void;
     on: ((
       e: "createAnnotation" | "deleteAnnotation",
-      c: (a: W3cAnnotation) => void
+      c: (a: W3cAnnotation) => void,
     ) => void) &
       ((
         e: "updateAnnotation",
-        c: (a: W3cAnnotation, b: W3cAnnotation) => void
+        c: (a: W3cAnnotation, b: W3cAnnotation) => void,
       ) => void);
     clearAnnotations: () => void;
     readOnly: boolean;
@@ -80,7 +81,7 @@
       });
   }
   $: hasAnnotations = $entity?.backlinks.some(
-    (e) => e.attribute === "ANNOTATES"
+    (e) => e.attribute === "ANNOTATES",
   );
 
   let a8sLinkTarget: HTMLDivElement;
@@ -148,8 +149,8 @@
       const annotationObject = await api.fetchEntity(annotation.id);
       await Promise.all(
         annotationObject.attr[ATTR_LABEL].concat(
-          annotationObject.attr["W3C_FRAGMENT_SELECTOR"]
-        ).map(async (e) => api.deleteEntry(e.address))
+          annotationObject.attr["W3C_FRAGMENT_SELECTOR"],
+        ).map(async (e) => api.deleteEntry(e.address)),
       );
       await api.putEntry([
         {

webui/src/components/utils/IconButton.svelte

@@ -5,9 +5,18 @@
   export let active = false;
   export let disabled = false;
   export let title: string | undefined = undefined;
+  export let outline = false;
+  export let color: string | undefined = "var(--active-color, var(--primary))";
 </script>
 
-<button on:click class:active {disabled} {title}>
+<button
+  on:click
+  class:active
+  class:outline
+  {disabled}
+  {title}
+  style="--color: {color}"
+>
   <Icon {name} />
   <div class="text">
     <slot />
@@ -29,13 +38,24 @@
     display: flex;
     align-items: center;
 
-    transition: opacity 0.2s, color 0.2s;
+    transition:
+      opacity 0.2s,
+      color 0.2s,
+      border-color 0.2s;
+  }
+
+  .outline {
+    border: 1px solid var(--foreground);
+    border-radius: 4px;
+
+    padding: 0.25em 1em;
   }
 
   .active,
   button:hover {
     opacity: 1;
-    color: var(--active-color, var(--primary));
+    color: var(--color);
+    border-color: var(--color);
   }
 
   button:disabled {

webui/src/components/utils/NotesEditor.svelte

@@ -7,7 +7,8 @@
   const dispatch = createEventDispatcher();
 
   export let address: string;
-  export let editable: boolean;
+
+  let editable = false;
 
   $: ({ entity } = useEntity(address));