From 9535a0914cbaa65e1c19f7996c49d8f8ae3442d1 Mon Sep 17 00:00:00 2001
From: Itzik <37775846+PatentLobster@users.noreply.github.com>
Date: Sat, 7 Aug 2021 20:11:31 +0300
Subject: [PATCH] =?UTF-8?q?bugfixes=20bruh=20=F0=9F=91=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ACommand.vue | 133 ++++++++++++++++-
 src/router/index.js         |   2 +-
 src/store/index.js          |   4 +
 src/views/Commands.vue      |   1 +
 src/views/Home.vue          |  22 ++-
 src/views/Interpreter.vue   | 279 +++++++++++++++++++++++-------------
 src/views/Interpreter2.vue  | 226 -----------------------------
 src/views/Snippets.vue      |   6 +-
 8 files changed, 334 insertions(+), 339 deletions(-)
 delete mode 100644 src/views/Interpreter2.vue

diff --git a/src/components/ACommand.vue b/src/components/ACommand.vue
index e3d8360..cdce52e 100644
--- a/src/components/ACommand.vue
+++ b/src/components/ACommand.vue
@@ -1,5 +1,25 @@
 <template>
-  <div class="px-4 py-5 sm:px-6  divide-y">
+  <div class="text-xl text-center">
+      artisan
+      <span class="px-2 text-purple-700">
+         {{command_obj.command}}
+      </span>
+    <span
+        v-for="arg in command_obj.arguments"
+        :key="arg"
+        class="px-2 text-green-600"
+    >
+          {{arg}}
+      </span>
+    <span
+        v-for="option in command_obj.options"
+        :key="option"
+        class="px-2 text-blue-600"
+    >
+          {{option}} {{(option.value) ? option.value : ''}}
+      </span>
+  </div>
+  <div class="px-4 py-5 sm:px-6  divide-y overflow-y-scroll max-h-full mb-2">
     <div class="mb-2">
       <h2 class="text-lg leading-6 font-medium text-gray-900">
         {{ command.name }}
@@ -8,9 +28,9 @@
         {{ command.description }}
       </p>
     </div>
-    <div class=" divide-y">
+    <div class="mb-4 divide-y">
       <div class="sm:col-span-6 py-4"
-           v-for="arg, i in command.definition.arguments" :key="i">
+           v-for="(arg, i) in command.definition.arguments" :key="i">
         <label :for="arg.name"
                class=" block text-md font-medium text-blue-gray-900">
           {{ arg.name }}
@@ -35,6 +55,47 @@
                  class="flex-1 block w-full min-w-0 border-blue-gray-300 rounded-none rounded-r-md text-blue-gray-900 sm:text-sm focus:ring-blue-500 focus:border-blue-500">
         </div>
       </div>
+
+      <div class="sm:col-span-6 py-4"
+           v-for="(arg, i) in command.definition.options" :key="i">
+        <label :for="arg.name"
+               class=" block text-md font-medium text-blue-gray-900">
+          {{ arg.name }}
+          <span
+              class="relative text-xs left-2 bottom-2 font-xs" :class="(arg.is_required) ? 'text-red-500' : 'text-gray-500'"
+          >
+          {{ arg.is_required ? "*Required." : "Not required." }}
+        </span>
+        </label>
+        <p>
+          {{ arg.description }} <br/>
+        </p>
+        <div v-if="arg.accept_value === true" class="mt-1 flex rounded-md shadow-sm">
+                        <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-blue-gray-300 bg-blue-gray-50 text-blue-gray-500 sm:text-sm">
+                          {{ arg.name }}
+                        </span>
+          <input type="text" :name="arg.name" :id="arg.name"
+                 :v-model="options[arg.name]"
+                 @change="option_update"
+                 @keyup="option_update"
+                 class="flex-1 block w-full min-w-0 border-blue-gray-300 rounded-none rounded-r-md text-blue-gray-900 sm:text-sm focus:ring-blue-500 focus:border-blue-500">
+        </div>
+        <div v-else class="mt-1 flex rounded-md py-2">
+          <Switch
+
+              v-model="options[arg.name]"
+              :id="arg.name"
+              @click="option_check"
+              :class="[options[arg.name] ? 'bg-indigo-600' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500']">
+            <span class="sr-only">Use setting</span>
+            <span aria-hidden="true" :class="[options[arg.name] ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']" />
+          </Switch>
+          <span class="inline-flex items-center px-3 text-blue-gray-500 sm:text-sm">
+            {{ arg.name }}
+          </span>
+        </div>
+      </div>
+
       <button
           @click="execute_command"
            class="inline-flex justify-self-center items-center my-2 ml-auto mr-0 px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
@@ -45,25 +106,59 @@
         />
       </button>
     </div>
-
   </div>
 
+
 </template>
 
 <script>
+
 import { LightningBoltIcon } from '@heroicons/vue/outline'
+import { Switch } from '@headlessui/vue'
+
 export default {
   name: "Command",
   props: ['command'],
   components: {
-    LightningBoltIcon
+    LightningBoltIcon,
+    Switch,
   },
   data()  {
     return {
       arguments: {},
+      options: {}
     }
   },
   computed: {
+    command_obj() {
+      let parsed = this.command.usage.toString().split(` `).slice(1);
+      for (const arg in this.arguments) {
+        parsed = parsed.map((v) => {
+          if (v.includes(`<${arg}>`)) {
+            return this.arguments[arg].value
+          } else {
+            return v;
+          }
+        })
+      }
+      parsed = parsed.filter((v,i) => {
+        return v !== this.command.usage.toString().split(` `).slice(1)[i]
+      })
+      let options = [];
+      for (const option in this.options) {
+        if(this.options[option] !== undefined && this.options[option].value !== undefined) {
+            options.push(`${option}=${this.options[option].value}`)
+          } else {
+            if (this.options[option])
+              options.push(option)
+          }
+        }
+      return {
+        command: this.command.usage.toString().split(` `)[0],
+        arguments: parsed,
+        options
+      }
+    }
   },
   methods: {
     argument_update(e) {
@@ -73,11 +168,28 @@ export default {
       this.arguments[e.target.id].value = e.target.value
 
     },
+    option_update(e) {
+      if( this.options[e.target.id] === true ) {
+        // this.options(e.target.id);
+        this.options[e.target.id] = false;
+        delete this.options[e.target.id]
+      } else {
+        if (!this.options[e.target.id]) {
+          this.options[e.target.id] = new Object();
+        }
+        this.options[e.target.id].value = e.target.value
+      }
+    },
+    option_check(e) {
+      if (this.options[e.target.id] === false) {
+        this.options.splice(e.target.id, e.target.id)
+      }
+    },
     execute_command() {
       let parsed = this.command.usage.toString().split(` `).slice(1);
       for (const arg in this.arguments) {
         parsed = parsed.map((v) => {
-          if (v.includes(arg)) {
+          if (v.includes(`<${arg}>`)) {
             return this.arguments[arg].value
           } else {
             return v;
@@ -88,6 +200,14 @@ export default {
         return v !== this.command.usage.toString().split(` `).slice(1)[i]
       })
       parsed.unshift(this.command.usage.toString().split(` `)[0])
+      for (const option in this.options) {
+        if(this.options[option].value) {
+          parsed.push(`${option}=${this.options[option].value}`)
+        } else {
+          if (this.options[option])
+          parsed.push(option)
+        }
+      }
       this.$emit('exec', parsed)
     }
   },
@@ -96,6 +216,7 @@ export default {
   watch: {
     command: function() {
       this.arguments = {}
+      this.options = {}
     }
   }
 }
diff --git a/src/router/index.js b/src/router/index.js
index 2c75c84..b871641 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,7 +17,7 @@ const routes = [
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/Interpreter2.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/Interpreter.vue')
   },
   {
     path: '/preferences',
diff --git a/src/store/index.js b/src/store/index.js
index a63c25d..5be3f10 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -43,6 +43,10 @@ export default createStore({
         },
         commands: {},
         sorted_commands: [],
+        ssh_env: {
+            commands: [],
+            env: []
+        }
   },
   mutations: {
       set_php_path(state, payload) {
diff --git a/src/views/Commands.vue b/src/views/Commands.vue
index a825c67..0a35a0e 100644
--- a/src/views/Commands.vue
+++ b/src/views/Commands.vue
@@ -101,6 +101,7 @@ import { mapState } from "vuex";
 import {sync} from 'execa';
 import Modal from "../components/Modal";
 import ACommand from "../components/ACommand";
+
 export default {
   name: "Commands",
   components: {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index da40d48..4c263de 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -3,8 +3,8 @@
     <div class="bg-white shadow mx-auto overflow-hidden sm:rounded-lg">
       <div class="px-8 py-8 sm:px-6 divide-y divide-dotted">
         <div>
-          <h1 class="text-4xl font-bold">
-            Hey <span class="font-gochi"> {{user.name}} </span>
+          <h1 class="text-4xl font-bold text-center">
+            Hey <span class="font-gochi"> {{user.name}}. </span>
           </h1>
         </div>
         <div class="py-4">
@@ -23,7 +23,6 @@
             Add
             <button
                 @click="openLink"
-                to="stinker.php"
                 class="inline-flex items-center px-1 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
               this helper function
             </button>
@@ -31,9 +30,24 @@
           </p>
 
           <CodeBlock>
-            {{`tinker($anything);`}}
+            {{`//base64_encode(serialize($anything)); \n tinker($anything); `}}
           </CodeBlock>
         </div>
+
+        <div class="text-center pt-4 my-auto">
+          Usage: <span
+            class="inline-flex items-center px-1 py-0.5 rounded-l-full rounded-r-0 text-sm font-medium bg-blue-100 text-blue-800">
+              stinker://open</span>
+          <span
+              class="inline-flex items-center px-1 py-0.5 text-sm font-medium bg-yellow-100 text-yellow-800">
+              ?
+            </span>
+          <span
+              class="inline-flex items-center  px-1 py-0.5 rounded-r-full rounded-l-0 text-sm font-medium bg-purple-100 text-purple-800">
+              {base64_string}
+            </span>
+        </div>
+
       </div>
     </div>
   </div>
diff --git a/src/views/Interpreter.vue b/src/views/Interpreter.vue
index 9bc1b2b..79c9b4b 100644
--- a/src/views/Interpreter.vue
+++ b/src/views/Interpreter.vue
@@ -1,143 +1,224 @@
 <template>
   <div class="interpreter">
-    <div class="flex-grow flex-col  min-h-full">
-      <Editor class="flex-col min-w-screen min-h-screen" language="php-x" theme="one-light" :value="code" @input="setCode" v-model="code"></Editor>
-    </div>
-    <div class="absolute flex-grow bottom-0 pt-3 pb-7 min-w-full h-4 bg-blue-50 border shadow shadow-lg  divide-x">
+      <SplitPane>
+        <template v-slot:left>
+          <Editor class=" min-h-screen h-full" language="php-x" theme="one-light"
+                  @input="setCode"
+                  ref="ide"
+                  value=""
+           ></Editor>
+        </template>
+        <template v-slot:right>
+          <Editor v-model="output" :value="output" style="height: 50vh" class="min-h-screen h-full" language="php-x" theme="one-light" />
+      </template>
+      </SplitPane>
+  </div>
+    <div class="absolute flex-grow overflow-visible bottom-0 pt-3 pb-7 min-w-full h-4 bg-blue-50 border shadow shadow-lg  ">
       <div class="relative flex max-h-4 bottom-1 mt-1">
+        <SwitchGroup @click="this.$store.commit('set_auto')" as="div" class="flex items-center ml-3">
+          <Switch :value="auto_exec" :class="[auto_exec ? 'bg-indigo-600' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500']">
+            <span aria-hidden="true" :class="[auto_exec ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']" />
+          </Switch>
+          <SwitchLabel as="span" class="ml-3">
+            <span class="text-sm font-medium text-gray-900">Auto execute. </span>
+          </SwitchLabel>
+        </SwitchGroup>
+        <span class="relative ml-auto mr-12 flex max-h-4 my-auto">
+                <button
+                    type="button"
+                    @click="executeTinker"
+                    class="r-24 inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-6 font-medium border-gray-300 bg-white rounded-md rounded-r-none text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+                >
+                  <LightningBoltIcon
+                      class="relative mr-2 -ml-0.5 text-gray-500 h-4 w-4"
+                      aria-hidden="true" /> Tinker
+                </button>
+                <Menu as="span" class="-ml-px relative block z-30 overflow-visible">
+                  <MenuButton class=" relative my-auto inline-flex items-center px-2  rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
+                    <span class="sr-only">Open options</span>
+                    <ChevronDownIcon class="h-4 w-4" aria-hidden="true" />
+                  </MenuButton>
+                  <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
+                    <MenuItems class="origin-bottom-right absolute -top-24 right-0 z-10  mb-2 mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+                      <div class="py-1">
+                        <MenuItem v-for="server in servers" :key="server.name">
+                          <div
+                              @click="execute_server(server)"
+                              class="text-center flex active text-gray-700 block px-4 py-2 text-sm"
+                              :class="[`hover:bg-${server.color}-50`]"
+                          >
+                            <ServerIcon
+                                :class="`text-${server.color}-500`"
+                                class="w-4 h-4 ml-0 my-auto"/>
+                            <span class="mx-auto my-auto" v-text="server.name" />
+                          </div>
+                        </MenuItem>
+                      </div>
+                    </MenuItems>
+                  </transition>
+                </Menu>
+              </span>
         <button type="button"
                 @click="saveSnippet"
-                class=" ml-auto mr-3 inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-6 font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                class=" mr-24 inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-6 font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
           Save
           <SaveIcon class="ml-2 -mr-0.5 h-4 w-4" aria-hidden="true" />
         </button>
-
-        <button type="button"
-                @click="executeTinker"
-                class="mr-24 inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-6 font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
-        >
-          Execute
-          <LightningBoltIcon class="ml-2 -mr-0.5 h-4 w-4" aria-hidden="true" />
-        </button>
       </div>
-    </div>
-
 
-    <TransitionRoot appear :show="isOpen" as="template">
-      <Dialog as="template"
-              @close="closeModal"
-      >
-        <div class="fixed inset-0 z-10 overflow-y-auto">
-          <div class="min-h-screen px-4 text-center">
-            <TransitionChild
-                as="template"
-                enter="duration-300 ease-out"
-                enter-from="opacity-0"
-                enter-to="opacity-100"
-                leave="duration-200 ease-in"
-                leave-from="opacity-100"
-                leave-to="opacity-0"
-            >
-              <DialogOverlay class="fixed min-w-screen inset-0" />
-            </TransitionChild>
-            <span class="inline-block h-screen  align-middle" aria-hidden="true">
-            &#8203;
-          </span>
 
-            <TransitionChild
-                as="template"
-                enter="duration-300 ease-out"
-                enter-from="opacity-0 scale-95"
-                enter-to="opacity-100 scale-100"
-                leave="duration-200 ease-in"
-                leave-from="opacity-100 scale-100"
-                leave-to="opacity-0 scale-95"
-            >
-              <div
-                  class="inline-block min-w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl"
-              >
-                <div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
-                  <button type="button" class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" @click="isOpen = false">
-                    <span class="sr-only">Close</span>
-                    <XIcon class="h-6 w-6" aria-hidden="true" />
-                  </button>
-                </div>
-                <DialogTitle
-                    as="h3"
-                    class="text-lg font-medium leading-6 text-gray-900"
-                >
-                Output:
-                </DialogTitle>
-                <div class="mt-2 min-h-full">
-                  <Editor v-model="output" :value="output" style="height: 50vh" class="min-h-full" language="php-x" theme="one-light" />
-                </div>
-              </div>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </TransitionRoot>
   </div>
+  <Notif
+      :show="showNotification"
+      :callback="closeNotif"
+      timeout="2500"
+      title="Wohoo!"
+      content="Snippet saved."
+  />
 </template>
 
 <script>
-
-import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import { SaveIcon, LightningBoltIcon, XIcon  } from '@heroicons/vue/outline'
+import { SaveIcon, LightningBoltIcon, ChevronDownIcon  } from '@heroicons/vue/outline'
+import { Switch, SwitchGroup, SwitchLabel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import Editor from "../components/Editor";
-import { spawn } from "child_process";
+import SplitPane from "../components/SplitPane";
+import Notif from "../components/Notif";
 import { mapState } from 'vuex';
+import path from "path";
+const {sync} = require('execa');
+// import * as path from 'path'
+const { Client } = require('@electerm/ssh2');
+const { readFileSync } = require('fs');
+
+
 export default {
   name: 'Tinker',
   components: {
     Editor,
     SaveIcon,
     LightningBoltIcon,
-    XIcon,
-    Dialog,
-    DialogOverlay,
-    DialogTitle,
-    TransitionChild,
-    TransitionRoot
+    ChevronDownIcon,
+    Switch,
+    SwitchGroup,
+    SwitchLabel,
+    SplitPane,
+    Notif,
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuItems,
   },
   data: () => {
     return {
       isOpen: false,
+      showNotification: false
     }
   },
   computed: {
-    ...mapState(['output', 'php_path', 'dir', 'code']),
-
+    ...mapState(['output', 'php_path', 'dir', 'code', 'arg_code', 'tinkering', 'auto_exec', 'code_path', 'servers' ]),
   },
   methods: {
-    executeTinker() {
-      if (this.$store.state.php_path !== "") {
+    async executeTinker() {
+      if (this.$store.state.php_path !== "" && this.tinkering === false) {
         this.$store.commit('clear_output')
-        this.isOpen = true
-        const tinker = spawn(this.$store.state.php_path, [`artisan`, "tinker"], { cwd: this.dir });
-        tinker.stdout.setEncoding("utf-8");
-        tinker.stdin.write(this.code);
-        tinker.stdout.on("data", (data) => {
-          this.$store.commit('set_output', data)
-          this.$store.state.tinkering = false;
-        });
-        tinker.stdin.end();
+        this.$store.state.tinkering = true;
+        let {stdout} = sync(
+            this.$store.state.php_path,
+            [
+                "stinker.phar",
+                this.dir,
+                "tinker",
+                "--tinker_from=" + this.code_path,
+                (this.arg_code !== "") ? "--sideload=" + this.arg_code : ""
+            ],
+            { cwd: __static}
+        );
+        this.$store.commit('set_output', stdout)
+
+        this.$store.state.tinkering = false;
       } else {
         console.log("Error", "php executable not found.\r\nGo to Settings and choose an executable.");
+        this.$store.state.tinkering = false;
       }
     },
-    closeModal() {
-      this.isOpen = false;
+    saveSnippet() {
+      this.$store.dispatch('add_snippet',this.code);
+      this.showNotification = true;
     },
-    openModal() {
-      this.isOpen = true
+    closeNotif() {
+      this.showNotification = false;
     },
     setCode(e) {
-      this.$store.commit('set_code', e.target.value)
+      if (this.auto_exec)
+        this.$store.commit('tinker', true);
+      this.$store.dispatch('update_code', e.target.value)
+      if (this.auto_exec) {
+          setTimeout(() => {
+            this.$store.commit('tinker', false)
+            this.executeTinker()
+          }, 420);
+        }
     },
-    saveSnippet() {
-      this.$store.dispatch('add_snippet',this.code)
+    execute_server(server) {
+      this.$store.commit('clear_output')
+      const conn = new Client();
+      conn.on('ready', () => {
+        console.log('Client :: ready');
+        conn.exec(`rm /tmp/stinkycode`, () => {})
+        conn.sftp((err, sftp) => {
+          if (err) throw err;
+          sftp.readdir('/tmp', (err, list) => {
+            if (err) throw err;
+            console.dir(list);
+          });
+
+          sftp.fastPut(this.code_path, '/tmp/stinkycode', {mode: 777});
+          sftp.fastPut(path.join(__static, "stinker.phar"), '/tmp/stinker.phar', {mode: 777});
+        });
+
+        conn.exec(`php /tmp/stinker.phar ${server.project_path} tinker --tinker_from=/tmp/stinkycode`, (err, stream) => {
+          if (err) this.isError = true;
+          stream.on('close', (code, signal) => {
+            console.log('Stream :: close :: code: ' + code + ', signal: ' + signal);
+            conn.end();
+          }).on('data', (data) => {
+            this.$store.commit('set_output', data)
+            console.log('STDOUT: ' + data);
+          }).stderr.on('data', (data) => {
+            this.isError = true;
+            this.$store.commit('set_output', data)
+            console.log('STDERR: ' + data);
+          });
+        });
+
+      }).connect({
+        host: server.host,
+        port: 22,
+        username: server.username,
+        password: server.password ?? null,
+        passphrase: server.passphrase ?? null,
+        privateKey: (server.pem) ? readFileSync(server.pem) : null
+      });
+
+
     }
-  }
+  },
+  mounted: function () {
+         this.$nextTick(function () {
+           this.$store.commit('refresh_servers')
+           window.addEventListener('keyup', event => {
+             if((event.altKey || event.metaKey ) && event.key === 's'){
+               this.saveSnippet();
+             }
+           });
+
+           if (this.code) {
+              this.$refs.ide.editor.getModel().setValue(this.code);
+              this.executeTinker()
+           }
+
+         });
+  },
+
 }
 </script>
diff --git a/src/views/Interpreter2.vue b/src/views/Interpreter2.vue
deleted file mode 100644
index de4292c..0000000
--- a/src/views/Interpreter2.vue
+++ /dev/null
@@ -1,226 +0,0 @@
-<template>
-  <div class="interpreter">
-      <SplitPane>
-        <template v-slot:left>
-          <Editor class=" min-h-screen h-full" language="php-x" theme="one-light"
-                  @input="setCode"
-                  ref="ide"
-                  value=""
-           ></Editor>
-        </template>
-        <template v-slot:right>
-          <Editor v-model="output" :value="output" style="height: 50vh" class="min-h-screen h-full" language="php-x" theme="one-light" />
-      </template>
-      </SplitPane>
-  </div>
-    <div class="absolute flex-grow overflow-visible bottom-0 pt-3 pb-7 min-w-full h-4 bg-blue-50 border shadow shadow-lg  ">
-      <div class="relative flex max-h-4 bottom-1 mt-1">
-        <SwitchGroup @click="this.$store.commit('set_auto')" as="div" class="flex items-center ml-3">
-          <Switch :value="auto_exec" :class="[auto_exec ? 'bg-indigo-600' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500']">
-            <span aria-hidden="true" :class="[auto_exec ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']" />
-          </Switch>
-          <SwitchLabel as="span" class="ml-3">
-            <span class="text-sm font-medium text-gray-900">Auto execute. </span>
-          </SwitchLabel>
-        </SwitchGroup>
-        <span class="relative ml-auto mr-12 flex max-h-4 my-auto">
-                <button
-                    type="button"
-                    @click="executeTinker"
-                    class="r-24 inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-6 font-medium border-gray-300 bg-white rounded-md rounded-r-none text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
-                >
-                  <LightningBoltIcon
-                      class="relative mr-2 -ml-0.5 text-gray-500 h-4 w-4"
-                      aria-hidden="true" /> Tinker
-                </button>
-                <Menu as="span" class="-ml-px relative block z-30 overflow-visible">
-                  <MenuButton class=" relative my-auto inline-flex items-center px-2  rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
-                    <span class="sr-only">Open options</span>
-                    <ChevronDownIcon class="h-4 w-4" aria-hidden="true" />
-                  </MenuButton>
-                  <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
-                    <MenuItems class="origin-bottom-right absolute -top-24 right-0 z-10  mb-2 mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
-                      <div class="py-1">
-                        <MenuItem v-for="server in servers" :key="server.name">
-                          <div
-                              @click="execute_server(server)"
-                              class="text-center flex active text-gray-700 block px-4 py-2 text-sm"
-                              :class="[`hover:bg-${server.color}-50`]"
-                          >
-                            <ServerIcon
-                                :class="`text-${server.color}-500`"
-                                class="w-4 h-4 ml-0 my-auto"/>
-                            <span class="mx-auto my-auto" v-text="server.name" />
-                          </div>
-                        </MenuItem>
-                      </div>
-                    </MenuItems>
-                  </transition>
-                </Menu>
-              </span>
-        <button type="button"
-                @click="saveSnippet"
-                class=" mr-24 inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-6 font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
-          Save
-          <SaveIcon class="ml-2 -mr-0.5 h-4 w-4" aria-hidden="true" />
-        </button>
-      </div>
-
-
-  </div>
-  <Notif
-      :show="showNotification"
-      :callback="closeNotif"
-      timeout="2500"
-      title="Wohoo!"
-      content="Snippet saved."
-  />
-</template>
-
-<script>
-import { SaveIcon, LightningBoltIcon, ChevronDownIcon  } from '@heroicons/vue/outline'
-import { Switch, SwitchGroup, SwitchLabel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import Editor from "../components/Editor";
-import SplitPane from "../components/SplitPane";
-import Notif from "../components/Notif";
-import { mapState } from 'vuex';
-import path from "path";
-const {sync} = require('execa');
-// import * as path from 'path'
-const { Client } = require('@electerm/ssh2');
-const { readFileSync } = require('fs');
-
-
-export default {
-  name: 'Tinker',
-  components: {
-    Editor,
-    SaveIcon,
-    LightningBoltIcon,
-    ChevronDownIcon,
-    Switch,
-    SwitchGroup,
-    SwitchLabel,
-    SplitPane,
-    Notif,
-    Menu,
-    MenuButton,
-    MenuItem,
-    MenuItems,
-  },
-  data: () => {
-    return {
-      isOpen: false,
-      showNotification: false
-    }
-  },
-  computed: {
-    ...mapState(['output', 'php_path', 'dir', 'code', 'arg_code', 'tinkering', 'auto_exec', 'code_path', 'servers' ]),
-  },
-  methods: {
-    async executeTinker() {
-      if (this.$store.state.php_path !== "" && this.tinkering === false) {
-        this.$store.commit('clear_output')
-        this.$store.state.tinkering = true;
-        let {stdout} = sync(
-            this.$store.state.php_path,
-            [
-                "stinker.phar",
-                this.dir,
-                "tinker",
-                "--tinker_from=" + this.code_path,
-                (this.arg_code !== "") ? "--sideload=" + this.arg_code : ""
-            ],
-            { cwd: __static}
-        );
-        this.$store.commit('set_output', stdout)
-
-        this.$store.state.tinkering = false;
-      } else {
-        console.log("Error", "php executable not found.\r\nGo to Settings and choose an executable.");
-        this.$store.state.tinkering = false;
-      }
-    },
-    saveSnippet() {
-      this.$store.dispatch('add_snippet',this.code);
-      this.showNotification = true;
-    },
-    closeNotif() {
-      this.showNotification = false;
-    },
-    setCode(e) {
-      if (this.auto_exec)
-        this.$store.commit('tinker', true);
-      this.$store.dispatch('update_code', e.target.value)
-      if (this.auto_exec) {
-          setTimeout(() => {
-            this.$store.commit('tinker', false)
-            this.executeTinker()
-          }, 420);
-        }
-    },
-    execute_server(server) {
-      this.$store.commit('clear_output')
-      const conn = new Client();
-      conn.on('ready', () => {
-        console.log('Client :: ready');
-        conn.exec(`rm /tmp/stinkycode`, () => {})
-        conn.sftp((err, sftp) => {
-          if (err) throw err;
-          sftp.readdir('/tmp', (err, list) => {
-            if (err) throw err;
-            console.dir(list);
-          });
-
-          sftp.fastPut(this.code_path, '/tmp/stinkycode', {mode: 777});
-          sftp.fastPut(path.join(__static, "stinker.phar"), '/tmp/stinker.phar', {mode: 777});
-        });
-
-        conn.exec(`php /tmp/stinker.phar ${server.project_path} tinker --tinker_from=/tmp/stinkycode`, (err, stream) => {
-          if (err) this.isError = true;
-          stream.on('close', (code, signal) => {
-            console.log('Stream :: close :: code: ' + code + ', signal: ' + signal);
-            conn.end();
-          }).on('data', (data) => {
-            this.$store.commit('set_output', data)
-            console.log('STDOUT: ' + data);
-          }).stderr.on('data', (data) => {
-            this.isError = true;
-            this.$store.commit('set_output', data)
-            console.log('STDERR: ' + data);
-          });
-        });
-
-      }).connect({
-        host: server.host,
-        port: 22,
-        username: server.username,
-        password: server.password ?? null,
-        passphrase: server.passphrase ?? null,
-        privateKey: (server.pem) ? readFileSync(server.pem) : null
-      });
-
-
-    }
-  },
-  mounted: function () {
-         this.$nextTick(function () {
-           this.$store.commit('refresh_servers')
-           window.addEventListener('keyup', event => {
-             if((event.altKey || event.metaKey ) && event.key === 's'){
-               this.saveSnippet();
-             }
-           });
-
-           if (this.code) {
-              this.$refs.ide.editor.getModel().setValue(this.code);
-              this.executeTinker()
-           }
-
-         });
-  },
-
-
-
-}
-</script>
diff --git a/src/views/Snippets.vue b/src/views/Snippets.vue
index 58f1237..aa68c70 100644
--- a/src/views/Snippets.vue
+++ b/src/views/Snippets.vue
@@ -15,7 +15,7 @@
           <CodeBlock>
             {{snippet.code}}
           </CodeBlock>
-          <div class="relative ml-auto mr-2 mt-3 overflow-visible z-30">
+          <div class="relative ml-auto mr-2 mt-3 overflow-visible">
             <button
                 @click="delete_snippet(snippet)"
                 type="button"
@@ -26,7 +26,7 @@
                   aria-hidden="true" /> Delete
             </button>
 
-              <span class="relative z-10 flex py-2 shadow-sm rounded-md overflow-visible">
+              <span class="relative flex py-2 shadow-sm rounded-md overflow-visible">
                 <button
                     type="button"
                     @click="execute_snippet(snippet.code)"
@@ -36,7 +36,7 @@
                   class="mr-2 -ml-0.5 h-4 w-4"
                   aria-hidden="true" /> Tinker
                 </button>
-                <Menu as="span" class="-ml-px relative block z-30 overflow-visible">
+                <Menu as="span" class="-ml-px relative block overflow-visible">
                   <MenuButton class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
                     <span class="sr-only">Open options</span>
                     <ChevronDownIcon class="h-5 w-5" aria-hidden="true" />