Add view editor visibility toggle when in "custom" mode

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Added propagation of meaningful `source` view props into nested views rendering (action buttons, prelude, and postlude) through the context as `sourceViewProps`
 - Standardized monospace font size and line height in `struct`, `signature` and `source` views to relay on root settings
 - Added suggestions toggle in query editor on "discovery" page
+- Added view editor visibility toggle when in "custom" mode on "discovery" page
 - Added `Cmd+Click` or `Ctrl+Click` in inspect mode to open hovered view page in view's showcase
 - Added `computeClassName()` and `applyComputedClassName()` methods to view render context API
 - Added root CSS properties: `--discovery-monospace-font-size` and `--discovery-monospace-line-height`

src/core/utils/dom.ts

@@ -14,7 +14,7 @@ export function createElement<TagName extends keyof HTMLElementTagNameMap>(
     tag: TagName,
     attrs?: CreateElementAttrs<TagName> | string | null,
     children?: (Node | string)[] | string
-) {
+): HTMLElementTagNameMap[TagName] {
     const el = document.createElement(tag);
 
     if (typeof attrs === 'string') {

src/pages/discovery/editor-common.css

@@ -26,7 +26,6 @@
     cursor: pointer;
 }
 .page-discovery > .discovery-editor .discovery-editor-tab.active {
-    padding-bottom: 3px;
     margin-bottom: 0;
     background: rgba(108, 188, 241, 0.15);
     cursor: default;
@@ -36,16 +35,10 @@
 }
 .page-discovery > .discovery-editor .discovery-editor-tab:first-child {
     border-top-left-radius: 4px;
-}
-.page-discovery > .discovery-editor .discovery-editor-tab.active:first-child {
     border-bottom-left-radius: 4px;
-    padding-bottom: 2px;
-    margin-bottom: 1px;
 }
 .page-discovery > .discovery-editor .discovery-editor-tab:last-child {
     border-top-right-radius: 4px;
-}
-.page-discovery > .discovery-editor .discovery-editor-tab:not(.active):last-child {
     border-bottom-right-radius: 4px;
 }
 

src/pages/discovery/editor-view.css

@@ -22,6 +22,44 @@
     display: inline-block;
     content: 'View:';
 }
+.page-discovery > .discovery-editor .discovery-editor-tab[data-mode="default"] {
+    border-top-left-radius: 4px;
+}
+.page-discovery > .discovery-editor .view-editor-form:not(.hide-editor) .discovery-editor-tab[data-mode="default"] {
+    border-bottom-left-radius: 0;
+}
+.page-discovery > .discovery-editor .discovery-editor-tab[data-mode="custom"] {
+    cursor: pointer;
+}
+.page-discovery > .discovery-editor .view-editor-form:not(.hide-editor) .discovery-editor-tab[data-mode="custom"] {
+    border-bottom-right-radius: 0;
+    padding-bottom: 3px;
+}
+.page-discovery > .discovery-editor .discovery-editor-tabs .discovery-editor-tab:not(.active) .show-view-editor-toggle {
+    pointer-events: none;
+}
+.page-discovery > .discovery-editor .discovery-editor-tabs .show-view-editor-toggle {
+    display: inline-block;
+    vertical-align: middle;
+    margin: -3px -9px -7px 1px;
+    cursor: pointer;
+}
+.page-discovery > .discovery-editor .discovery-editor-tabs .show-view-editor-toggle::before {
+    content: '';
+    display: inline-block;
+    width: 20px;
+    aspect-ratio: 1;
+    mask: url('./img/minus.svg') center no-repeat;
+    mask-size: 12px;
+    background-color: light-dark(#aaa, #aaac);
+}
+.page-discovery > .discovery-editor .discovery-editor-tabs .discovery-editor-tab.active:hover .show-view-editor-toggle::before {
+    background-color: white;
+    background-color: light-dark(rgba(0, 141, 255, 1), #ccc);
+}
+.page-discovery > .discovery-editor .view-editor-form.hide-editor .discovery-editor-tabs .show-view-editor-toggle::before {
+    mask-image: url('./img/plus.svg')
+}
 .page-discovery > .discovery-editor .discovery-editor-tabs.presets {
     margin-left: 3ex;
 }
@@ -32,6 +70,9 @@
     border-bottom-left-radius: 4px;
 }
 
+.page-discovery > .discovery-editor .view-editor-form.hide-editor .view-editor-form-content {
+    display: none;
+}
 .page-discovery > .discovery-editor .view-editor-form-content {
     padding:
         8px

src/pages/discovery/editor-view.ts

@@ -55,7 +55,6 @@ export default function(host: ViewModel, updateParams: UpdateHostParams) {
         view: string | undefined;
     }> = {};
 
-    let viewSetupEl: HTMLElement;
     let availableViewsEl: HTMLElement;
     let availableViewsTextEl: HTMLElement;
     let availableViewsListEl: HTMLElement;
@@ -72,20 +71,29 @@ export default function(host: ViewModel, updateParams: UpdateHostParams) {
                 createElement('div', {
                     class: 'discovery-editor-tab',
                     'data-mode': viewMode.toLowerCase(),
-                    onclick: () => updateParams({
-                        view: viewMode === 'Default' ? undefined : defaultViewSource
-                    }, true)
-                }, viewMode)
+                    onclick() {
+                        if (!this.classList.contains('active')) {
+                            updateParams({
+                                view: viewMode === 'Default' ? undefined : defaultViewSource,
+                                viewEditorHidden: false
+                            }, true);
+                        } else {
+                            updateParams({
+                                viewEditorHidden: !viewEditorFormEl.classList.contains('hide-editor')
+                            }, true);
+                        }
+                    }
+                }, viewMode === 'Custom'
+                    ? [viewMode, createElement('span', 'show-view-editor-toggle')]
+                    : viewMode
+                )
             )),
             /* availablePresetListEl = */createElement('div', 'discovery-editor-tabs presets', viewPresets.map(({ name, content }) =>
                 createPresetTab(name, content, updateParams)
             )),
             createElement('div', 'view-editor-form-header-links', '<a href="#views-showcase" class="view-link">Views showcase</a>')
         ]),
-        viewSetupEl = createElement('div', {
-            class: 'view-editor-form-content',
-            hidden: true
-        }, [
+        createElement('div', 'view-editor-form-content', [
             createElement('button', {
                 class: 'view-button formatting',
                 title: 'Prettify (input should be a JSON)',
@@ -182,14 +190,15 @@ export default function(host: ViewModel, updateParams: UpdateHostParams) {
             const viewContext = contextWithoutEditorParams(context, lastView.context);
             const params = getParamsFromContext(context);
             const viewMode = typeof params.view === 'string' ? 'custom' : 'default';
+            const viewEditorHidden = viewMode === 'default' || params.viewEditorHidden === true;
             let pageView = params.view;
             let view = null;
 
             // update editor
             viewEditor.setValue(pageView);
 
             // update view form
-            viewSetupEl.hidden = viewMode !== 'custom';
+            viewEditorFormEl.classList.toggle('hide-editor', viewEditorHidden);
             viewModeTabsEls.forEach(el =>
                 el.classList.toggle('active', el.dataset.mode === viewMode)
             );

src/pages/discovery/params.ts

@@ -5,12 +5,12 @@ function ensureString(value: unknown, fallback = '') {
     return typeof value === 'string' ? value : fallback;
 }
 
-export const decodedSpecialParams: (keyof KnownParams)[] = ['query', 'graph', 'view', 'title', 'dzen', 'noedit'] as const;
-export const encodedSpecialParams = ['q', 'graph', 'v', 'title', 'dzen', 'noedit'];
+export const decodedSpecialParams: (keyof KnownParams)[] = ['query', 'graph', 'view', 'viewEditorHidden', 'title', 'dzen', 'noedit'] as const;
+export const encodedSpecialParams = ['q', 'graph', 'v', 'vh', 'title', 'dzen', 'noedit'];
 
 export function encodeParams(params: Partial<Params> | string) {
     const normalizedParams = typeof params === 'string' ? { query: params } : params;
-    const { query, graph, view, title, dzen, noedit, ...extra } = normalizedParams;
+    const { query, graph, view, viewEditorHidden, title, dzen, noedit, ...extra } = normalizedParams;
     const pairs: [name: string, value?: string][] = [];
 
     if (dzen) {
@@ -37,6 +37,10 @@ export function encodeParams(params: Partial<Params> | string) {
         pairs.push(view ? ['v', base64.encode(view)] : ['v']);
     }
 
+    if (viewEditorHidden) {
+        pairs.push(['vh']);
+    }
+
     for (const [name, value] of Object.keys(extra || {}).sort()) {
         if (!decodedSpecialParams.includes(name as keyof KnownParams)) {
             pairs.push([name, name.endsWith('-b64') && typeof value === 'string'
@@ -56,6 +60,7 @@ export function decodeParams(pairs: [name: string, value: unknown][]): Params {
         query: base64.decode(ensureString(params.q)),
         graph: JSON.parse(base64.decode(ensureString(params.graph)) || 'null'),
         view: 'v' in params ? base64.decode(ensureString(params.v)) : undefined,
+        viewEditorHidden: 'vh' in params,
         dzen: 'dzen' in params,
         noedit: 'noedit' in params
     };

src/pages/discovery/types.ts

@@ -5,6 +5,7 @@ export type KnownParams = {
     query: string;
     graph: Graph;
     view: string | undefined;
+    viewEditorHidden: boolean;
 };
 export type Params = KnownParams & {
     [key: string]: unknown;