From d19121029c15940135167de6e17dd9d22c8aaefd Mon Sep 17 00:00:00 2001
From: Josh Larsen <2565382+joshlarsen@users.noreply.github.com>
Date: Mon, 2 Oct 2023 10:13:17 -0400
Subject: [PATCH 1/2] initial body param encode/decode

---
 frontend/package.json.md5                     |  2 +-
 frontend/src/components/Http/CodeEditor.vue   | 71 +++++++++++++++----
 .../src/components/Shared/ScrollingOutput.vue |  5 +-
 .../components/Workflow/WorkflowEditor.vue    | 16 ++---
 4 files changed, 71 insertions(+), 23 deletions(-)

diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
index dfb3067..d4b7aa1 100755
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@@ -1 +1 @@
-cb5e926b7a528855b91ab347cdea29f0
\ No newline at end of file
+b963a08cc62fff622468bc9a35f804f3
\ No newline at end of file
diff --git a/frontend/src/components/Http/CodeEditor.vue b/frontend/src/components/Http/CodeEditor.vue
index ed7074f..eff5a90 100644
--- a/frontend/src/components/Http/CodeEditor.vue
+++ b/frontend/src/components/Http/CodeEditor.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { watch, ref, onMounted } from 'vue'
 
-import { DocumentDuplicateIcon, SparklesIcon } from '@heroicons/vue/24/outline'
+import { DocumentDuplicateIcon, SparklesIcon, ArrowPathRoundedSquareIcon } from '@heroicons/vue/24/outline'
 import { HighlightHTTP, HighlightBody, FormatCode } from '../../../wailsjs/go/backend/App'
 import { ClipboardSetText } from '../../../wailsjs/runtime'
 
@@ -104,27 +104,72 @@ function formatCode() {
     updateCode()
   })
 }
+
+function encodeParams(rawParams: string) {
+  const lines = rawParams.split('\n')
+  const params = lines.map((line: string) => {
+    const [key, value] = line.split(': ').map(str => str.trim())
+    return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
+  })
+  buffer.value = params.join('&')
+}
+
+function decodeParams(encodedParams: string) {
+  const params = new URLSearchParams(encodedParams)
+  let result = ''
+  params.forEach((value, key) => {
+    result += `${key}: ${value}\n`
+  })
+  buffer.value = result.trim()
+}
+
+function transformCode() {
+  const input = buffer.value.trim()
+
+  // presence of & or = means it's an encoded string
+  if (input.includes('&') || input.includes('=')) {
+    decodeParams(input)
+  } else {
+    encodeParams(input)
+  }
+  updateCode()
+}
 </script>
 
 <template>
   <div class="absolute flex h-7 w-full border border-polar-night-3">
     <button class="rounded px-1 text-snow-storm-1/70 hover:bg-polar-night-3 hover:text-snow-storm-1"
             @click="copyToClipboard">
-      <DocumentDuplicateIcon class="h-6 w-6" aria-hidden="true"/>
+      <DocumentDuplicateIcon class="h-6 w-6"
+                             aria-hidden="true" />
     </button>
     <button class="rounded px-1 text-snow-storm-1/70 hover:bg-polar-night-3 hover:text-snow-storm-1"
             @click="formatCode">
-      <SparklesIcon class="h-6 w-6" aria-hidden="true"/>
+      <SparklesIcon class="h-6 w-6" aria-hidden="true" />
+    </button>
+    <button class="rounded px-1 text-snow-storm-1/70 hover:bg-polar-night-3 hover:text-snow-storm-1"
+            @click="transformCode">
+      <ArrowPathRoundedSquareIcon class="h-6 w-6"
+                                  aria-hidden="true" />
     </button>
   </div>
-  <div class="h-full w-full border border-polar-night-3 px-1 pt-9">
-    <div style="min-height: 100px;" :class="[
-      'wrapper h-full w-full overflow-x-auto',
-      busy ? 'wrapper plain text-left' : 'wrapper highlighted min-h-full text-left',
-    ]">
-      <pre ref="pre" class="h-full min-h-full w-full" aria-hidden="true"><code v-html="highlighted"></code></pre>
-      <textarea class="h-full w-full" :readonly="readonly" spellcheck="false" ref="textarea" @input="updateCode"
-                @scroll="syncScroll" @keydown="onKeydown" v-model="buffer"></textarea>
+  <div class="h-full w-full border border-polar-night-3 bg-neutral-800/50 p-8 px-1 pb-2">
+    <div style="min-height: 100px;"
+         :class="[
+           'wrapper h-full w-full overflow-x-auto',
+           busy ? 'wrapper plain text-left' : 'wrapper highlighted min-h-full text-left',
+         ]">
+      <pre ref="pre"
+           class="h-full min-h-full w-full"
+           aria-hidden="true"><code v-html="highlighted"></code></pre>
+      <textarea class="h-full w-full"
+                :readonly="readonly"
+                spellcheck="false"
+                ref="textarea"
+                @input="updateCode"
+                @scroll="syncScroll"
+                @keydown="onKeydown"
+                v-model="buffer"></textarea>
     </div>
   </div>
 </template>
@@ -160,9 +205,9 @@ pre {
 
 textarea,
 code {
-  font-size: 1.05em !important;
+  font-size: 0.9em !important;
   font-family: monospace !important;
-  line-height: 1.2em !important;
+  line-height: 1.5em !important;
   tab-size: 2;
   word-spacing: 0;
   letter-spacing: 0;
diff --git a/frontend/src/components/Shared/ScrollingOutput.vue b/frontend/src/components/Shared/ScrollingOutput.vue
index 29feb8f..951af47 100644
--- a/frontend/src/components/Shared/ScrollingOutput.vue
+++ b/frontend/src/components/Shared/ScrollingOutput.vue
@@ -21,7 +21,10 @@ onMounted(scrollToBottom)
 
 <template>
   <div class="h-full bg-black p-1">
-    <pre ref="terminal" class="h-full overflow-auto whitespace-pre-wrap text-xs">
+    <pre ref="terminal"
+         class="h-full overflow-auto whitespace-pre-wrap text-xs"><code><template v-for="line in lines">{{ line }}</template></code></pre>
+    <pre ref="terminal"
+         class="h-full overflow-auto whitespace-pre-wrap text-xs">
       <code>
         <template v-for="line in lines">{{ line }}</template>
       </code>
diff --git a/frontend/src/components/Workflow/WorkflowEditor.vue b/frontend/src/components/Workflow/WorkflowEditor.vue
index 8dde466..9e07014 100644
--- a/frontend/src/components/Workflow/WorkflowEditor.vue
+++ b/frontend/src/components/Workflow/WorkflowEditor.vue
@@ -638,13 +638,13 @@ function trackMover(id: string, el: any) {
              :style="getPosition(node.id, i)"
              draggable="true" @mousedown="dragStart(node.id, $event)"
         >
-          <div class="flex items-center">
+          <div class="flex items-center text-sm">
             <div class="flex-shrink">
               <div @mousedown.prevent.stop="startLinkFromInput(node.id, input.name)"
                    v-for="input in node.vars?.inputs?.filter((inp) => inp.linkable)"
                    :key="input.name"
                    class="group my-0 flex items-center py-0 pr-2 leading-4">
-                <div class="mr-2 flex-grow text-right opacity-60">
+                <div id="input-label" class="mr-2 flex-grow text-right font-medium text-green-300 opacity-60">
                   {{ input.name }}
                 </div>
                 <div :data-node="node.id" :data-connector="input.name"
@@ -687,7 +687,7 @@ function trackMover(id: string, el: any) {
                 </div>
               </div>
             </div>
-            <div class="flex-shrink">
+            <div class="flex-shrink text-sm">
               <div @mousedown.prevent.stop="startLinkFromOutput(node.id, output.name)"
                    v-for="output in node.vars?.outputs"
                    :key="output.name"
@@ -695,7 +695,7 @@ function trackMover(id: string, el: any) {
                 <div :data-node="node.id" :data-connector="output.name"
                      class="connector output h-2 w-2 flex-shrink rounded-full border border-frost group-hover:border-4">
                 </div>
-                <div class="ml-2 flex-grow text-right opacity-60">
+                <div id="output-label" class="ml-2 flex-grow text-left text-fuchsia-300 opacity-60">
                   {{ output.name }}
                 </div>
 
@@ -790,10 +790,10 @@ function trackMover(id: string, el: any) {
 .stripy {
   background: repeating-linear-gradient(
       45deg,
-      #242933,
-      #242933 10px,
-      #212630 10px,
-      #212630 20px
+      #222,
+      #222 10px,
+      #232323 10px,
+      #232323 20px
   );
 }
 </style>

From c02408493a2e6e3fe3a6da1e9839d93aaf2f1d36 Mon Sep 17 00:00:00 2001
From: Josh Larsen <2565382+joshlarsen@users.noreply.github.com>
Date: Mon, 2 Oct 2023 16:29:43 -0400
Subject: [PATCH 2/2] ui tweaks

---
 .../src/components/Workflow/WorkflowGUI.vue   |  2 +-
 .../src/components/Workflow/WorkflowList.vue  | 22 +++++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Workflow/WorkflowGUI.vue b/frontend/src/components/Workflow/WorkflowGUI.vue
index 4e73865..706ad67 100644
--- a/frontend/src/components/Workflow/WorkflowGUI.vue
+++ b/frontend/src/components/Workflow/WorkflowGUI.vue
@@ -123,7 +123,7 @@ function exportWorkflow(id: string) {
 
     <InputBox v-if="creating" title="New Workflow" message="Enter the workflow name." @cancel="creating = false"
               @confirm="addWorkflow($event)"/>
-    <div ref="leftPanel" class="box-border h-full w-64 shrink overflow-y-auto pr-2 text-right">
+    <div ref="leftPanel" class="box-border h-full w-48 shrink overflow-y-auto pr-2 text-right">
       <button type="button" @click="creating = true"
               class="mb-1 rounded-full bg-frost-4 p-1.5 text-white shadow-sm hover:bg-frost-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
         <PlusIcon class="h-5 w-5" aria-hidden="true"/>
diff --git a/frontend/src/components/Workflow/WorkflowList.vue b/frontend/src/components/Workflow/WorkflowList.vue
index 13a512f..838723e 100644
--- a/frontend/src/components/Workflow/WorkflowList.vue
+++ b/frontend/src/components/Workflow/WorkflowList.vue
@@ -43,19 +43,23 @@ function renameWorkflow(name: string) {
       </div>
     </div>
     <ul v-else class="block w-full flex-auto text-left">
-      <li v-for="flow in flows" :key="flow.id"
+      <li v-for="flow in flows" :key="flow.id" class="group"
           :class="[flow.id === selected ? 'border-b border-frost-2 bg-polar-night-1': 'border-polar-night-3 hover:border-polar-night-4', 'flex w-full border-t']">
         <a @click="emit('select', flow.id)"
-           class="my-1 block grow cursor-pointer pl-2">
+           class="my-1 block grow cursor-pointer truncate pl-2">
           {{ flow.name }}
-          <p class="text-polar-night-4">{{ flow.id.substring(0, 18) }}</p>
+          <div class="flex items-center justify-between">
+            <div class="py-1 text-xs text-polar-night-4">{{ flow.id.substring(0, 8) }}</div>
+            <div class="hidden group-hover:flex">
+              <button class="shrink pr-2" @click="renaming = flow.id">
+                <PencilSquareIcon class="h-5 w-5 text-polar-night-4 hover:text-frost-1" aria-hidden="true"/>
+              </button>
+              <button class="shrink pr-2" @click="deleting = flow.id">
+                <TrashIcon class="h-4 w-4 text-polar-night-4 hover:text-aurora-1" aria-hidden="true"/>
+              </button>
+            </div>
+          </div>
         </a>
-        <button class="shrink pr-2" @click="renaming = flow.id">
-          <PencilSquareIcon class="h-5 w-5 text-polar-night-4 hover:text-frost-1" aria-hidden="true"/>
-        </button>
-        <button class="shrink pr-2" @click="deleting = flow.id">
-          <TrashIcon class="h-5 w-5 text-polar-night-4 hover:text-aurora-1" aria-hidden="true"/>
-        </button>
       </li>
     </ul>
   </div>