Add dropdown menu to new pipeline button

Author: B-i-t-K

app/components/DomExplorer/Pipe/PipeCreateButton.vue

@@ -7,9 +7,11 @@
     @update:model-value="create"
   >
     <template #button>
-      <Button size="icon" class="size-6">
-        <Icon name="plus" class="size-5" />
-      </Button>
+      <slot>
+        <Button size="icon" class="size-6">
+          <Icon name="plus" class="size-5" />
+        </Button>
+      </slot>
     </template>
   </SearchInput>
 </template>
@@ -18,8 +20,13 @@
 import { createPipe, isValidPipeName, type Pipe } from "~/types";
 import { pipes } from "../Pipes";
 
+const props = defineProps<{
+  allowEmpty?: boolean;
+}>();
+
 const emit = defineEmits<{
   create: [Pipe];
+  createEmpty: [];
 }>();
 
 const { presets } = usePresets();
@@ -44,18 +51,29 @@ const groups = computed(() => {
     items: (string | { label: string; value: string })[];
   }[] = [];
 
+  if (props.allowEmpty) {
+    groups.push({
+      name: "",
+      items: [
+        {
+          label: "Empty",
+          value: "$empty",
+        },
+      ],
+    });
+  }
+
   // Force the order
+  if (presetsChoices.value.length > 0) {
+    groups.push({ name: "Preset", items: presetsChoices.value });
+  }
   groups.push({ name: "DEV", items: [] });
   groups.push({ name: "Preset", items: [] });
   groups.push({ name: "Parser", items: [] });
   groups.push({ name: "Sanitizer", items: [] });
   groups.push({ name: "Render", items: [] });
   groups.push({ name: "Other", items: [] });
 
-  if (presetsChoices.value.length > 0) {
-    groups.push({ name: "Preset", items: presetsChoices.value });
-  }
-
   pipes.forEach((pipe) => {
     const group = groups.find((g) => g.name === pipe.category);
     if (group) {
@@ -70,11 +88,15 @@ const groups = computed(() => {
 });
 
 function create(name: string) {
+  if (name === "$empty") {
+    emit("createEmpty");
+    return;
+  }
   if (name.startsWith("preset:")) {
     const preset = presets.value.find((p) => p.id === name.slice(7));
     if (!preset) return;
     for (const pipe of preset.pipes) {
-      emit("create", pipe);
+      emit("create", clonePipe(pipe));
     }
   } else if (isValidPipeName(name)) {
     const newPipe = createPipe(name);

app/components/DomExplorer/SyncMode/SyncModeDialog.vue

@@ -1,12 +1,18 @@
 <template>
   <Dialog v-model:open="open">
     <DialogTrigger>
-      <Button class="h-8 capitalize">{{ buttonTitle }}</Button>
+      <Button class="h-8 capitalize">
+        <Icon name="cable" class="mr-2" />
+        {{ buttonTitle }}
+      </Button>
     </DialogTrigger>
     <DialogContent>
       <DialogHeader>
         <DialogTitle>Sync Tabs</DialogTitle>
-        <DialogDescription class="sr-only"> Sync tabs</DialogDescription>
+        <DialogDescription>
+          You can use this feature to sync tabs between different browser.
+          Synched tabs will be updated in real-time.
+        </DialogDescription>
       </DialogHeader>
 
       <SyncModeConnectionTable />
@@ -15,7 +21,7 @@
         <Button @click="start">Start pairing</Button>
         <Button @click="join">Join pairing</Button>
       </div>
-      <div v-else class="mt-2 h-1 w-full bg-border"/>
+      <div v-else class="mt-2 h-1 w-full bg-border" />
       <SyncModeStartPairing
         v-if="connection && tab === 'start'"
         :connection="connection"

app/components/ui/icon/all.ts

@@ -21,3 +21,4 @@ export { RefreshCwIcon } from "lucide-vue-next";
 export { NetworkIcon } from "lucide-vue-next";
 export { DicesIcon } from "lucide-vue-next";
 export { ScanTextIcon } from "lucide-vue-next";
+export { BookMarkedIcon } from "lucide-vue-next";

app/pages/dom-explorer/index.vue

@@ -6,14 +6,20 @@
           <SyncModeDialog />
           <PresetsDialog>
             <Button class="h-8">
-              <Icon name="settings" class="mr-2" />
+              <Icon name="bookMarked" class="mr-2" />
               Presets
             </Button>
           </PresetsDialog>
-          <Button class="h-8" @click="addPipeline">
-            <Icon name="plus" class="mr-2" />
-            Pipeline
-          </Button>
+          <PipeCreateButton
+            allow-empty
+            @create="addPipeline"
+            @create-empty="addPipeline"
+          >
+            <Button class="h-8">
+              <Icon name="plus" class="mr-2" />
+              Pipeline
+            </Button>
+          </PipeCreateButton>
         </div>
       </template>
     </LayoutHeader>
@@ -40,6 +46,8 @@
 </template>
 
 <script lang="ts" setup>
+import type { Pipe } from "~/types";
+
 const state = ref(parseStateFromHash());
 
 onMounted(() => {
@@ -59,24 +67,11 @@ createDomExplorerSettings({
   },
 });
 
-function addPipeline() {
+function addPipeline(pipe?: Pipe) {
   state.value.pipelines.push({
     id: randomId(),
     name: `Pipeline ${state.value.pipelines.length + 1}`,
-    pipes: [
-      {
-        name: "DomParser",
-        id: randomId(),
-        hide: false,
-        skip: false,
-        opts: {
-          addDoctype: false,
-          output: "innerHTML",
-          selector: "body",
-          type: "text/html",
-        },
-      },
-    ],
+    pipes: pipe ? [pipe] : [],
   });
 }
 

app/types.ts

@@ -3,7 +3,8 @@ import { pipeParser, pipes } from "~/components/DomExplorer/Pipes";
 
 export const pipeNames = pipes.map((pipe) => pipe.name);
 
-export interface Pipe<T extends object = object> {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface Pipe<T = any> {
   name: string;
   id: string;
   hide: boolean;
@@ -75,13 +76,12 @@ export type DomExplorerState = z.infer<typeof stateParser>;
 export type DomExplorerSettings = z.infer<typeof settingsParser>;
 
 export type JSONValue = string | number | boolean | JSONObject | JSONArray;
-export type JSONArray = JSONValue[]
+export type JSONArray = JSONValue[];
 
 export interface JSONObject {
   [x: string]: JSONValue;
 }
 
-
 export function isValidPipeName(name: string): boolean {
   return (pipeNames as string[]).includes(name);
 }