@necrolab/dashboard 0.5.15 → 0.5.17

package/src/components/Editors/Account/{AccountCreator.vue → CreateAccountBatch.vue}

@@ -8,7 +8,7 @@
         <div>
             <div class="form-grid mb-4 mt-7">
                 <div class="input-wrapper relative-positioned z-tooltip col-span-8">
-                    <label class="label-override mb-2">
+                    <label class="label-override mb-2 flex">
                         Account Tag
                         <TagIcon />
                     </label>
@@ -23,11 +23,11 @@
                 </div>
 
                 <div class="input-wrapper col-span-4">
-                    <label class="label-override mb-2">
+                    <label class="label-override mb-2 flex">
                         Threads
                         <EditIcon />
                     </label>
-                    <div :class="`input-default ${errors.includes('threads') ? 'error' : ''}`">
+                    <div :class="`input-default ${errors.includes('threads') ? 'border-2 border-error-300' : ''}`">
                         <input placeholder="1" type="number" min="1" max="50" v-model="creatorConfig.threads" />
                         <div class="input-incrementer">
                             <button @click="creatorConfig.threads++">
@@ -40,20 +40,20 @@
                     </div>
                 </div>
                 <div class="input-wrapper col-span-8">
-                    <label class="label-override mb-2">
+                    <label class="label-override mb-2 flex">
                         Email catchall
                         <MailIcon />
                     </label>
-                    <div :class="`input-default ${errors.includes('catchall') ? 'error' : ''}`">
+                    <div :class="`input-default ${errors.includes('catchall') ? 'border-2 border-error-300' : ''}`">
                         <input placeholder="example.com" v-model="creatorConfig.catchall" />
                     </div>
                 </div>
                 <div class="input-wrapper col-span-4">
-                    <label class="label-override mb-2">
+                    <label class="label-override mb-2 flex">
                         Catchall amount
                         <BagIcon />
                     </label>
-                    <div :class="`input-default ${errors.includes('number') ? 'error' : ''}`">
+                    <div :class="`input-default ${errors.includes('number') ? 'border-2 border-error-300' : ''}`">
                         <input placeholder="1" type="number" min="0" max="5000" v-model="creatorConfig.number" />
                         <div class="input-incrementer">
                             <button @click="creatorConfig.number++">
@@ -66,71 +66,28 @@
                     </div>
                 </div>
                 <div class="input-wrapper col-span-12">
-                    <label class="label-override mb-2">
+                    <label class="label-override mb-2 flex">
                         Emails
                         <MailIcon />
                     </label>
-                    <div :class="`${errors.includes('emails') ? 'error-border' : ''}`">
-                        <textarea
-                            v-model="creatorConfig.emails"
-                            class="proxy-editor"
-                            spellcheck="false"
-                            style="max-height: 250px; min-height: 150px"
-                            placeholder="Enter emails here - One per line"></textarea>
-                    </div>
+                    <textarea
+                        v-model="creatorConfig.emails"
+                        :class="['textarea-emails', errors.includes('emails') && 'textarea-error']"
+                        spellcheck="false"
+                        style="max-height: 250px; min-height: 150px; line-height: 1.6; tab-size: 4; font-family: 'JetBrains Mono', 'Fira Code', 'Menlo', 'Monaco', 'Courier New', monospace"
+                        placeholder="Enter emails here - One per line"></textarea>
                 </div>
             </div>
-            <button
-                class="button-default ml-auto mt-4 flex w-48 items-center justify-center gap-x-2 bg-dark-400 text-xs"
-                @click="done()">
+            <button class="btn-modal ml-auto mt-4" @click="done()">
                 Start
                 <EditIcon />
             </button>
         </div>
     </Modal>
 </template>
-<style lang="scss" scoped>
-.input-wrapper {
-    label {
-        @apply flex;
-    }
-}
-.error {
-    border-width: 2px !important;
-    border-color: rgb(238 130 130) !important;
-}
-
-.error-border {
-    border: 2px solid rgb(238 130 130) !important;
-    border-radius: 8px;
-}
-
-/* Proxy editor styles */
-.proxy-editor {
-    width: 100%;
-    background-color: oklch(0.19 0 0);
-    color: oklch(0.90 0 0);
-    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
-    padding: 12px;
-    border: none;
-    resize: none;
-    font-size: 14px;
-    line-height: 1.6;
-    tab-size: 4;
-    outline: none;
-    border: 1px solid oklch(0.26 0 0);
-    border-radius: 8px;
-    overflow: auto;
-}
-
-.proxy-editor:focus {
-    border-color: oklch(0.28 0 0);
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
-}
-</style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
-import { EditIcon, TagIcon, SpinnerIcon, UpIcon, DownIcon, MailIcon, BagIcon } from "@/components/icons";
+import { EditIcon, TagIcon, UpIcon, DownIcon, MailIcon, BagIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 
@@ -168,3 +125,15 @@ function done() {
     ui.createAcconts(creatorConfig.value);
 }
 </script>
+<style scoped>
+.textarea-emails {
+    @apply w-full rounded border bg-dark-350 p-3 font-mono text-light-300;
+    @apply outline-none resize-none overflow-auto text-sm;
+    @apply border border-dark-550 hover:border-dark-650;
+    @apply focus:border-dark-700 focus:shadow-focus-ring;
+}
+
+.textarea-error {
+    @apply border-2 border-error-300 hover:border-error-300;
+}
+</style>

package/src/components/Editors/AdminFileEditor.vue

@@ -0,0 +1,179 @@
+<template>
+    <div class="admin-editor-section" :class="{ 'landscape-hidden': isHidden }">
+        <h5 class="text-white text-xl font-bold flex gap-x-3 mb-3">Admin Editor</h5>
+        <div class="flex flex-wrap items-center gap-3 w-full">
+            <div class="unified-search-group flex w-full flex-shrink-0 dropdown-container z-dropdown-high lg:w-auto lg:min-w-64">
+                <Dropdown
+                    class="admin-file-dropdown flex-1"
+                    default="Select a file"
+                    :onClick="loadFile"
+                    :options="availableFiles"
+                    :allowDefault="false"
+                    :includeAdjacentButtons="true"
+                    rightAmount="right-1" />
+                <button
+                    class="refresh-button flex items-center justify-center w-9 h-10 flex-shrink-0 text-white bg-dark-400 transition-standard hover:bg-dark-450"
+                    @click="$emit('refresh-files')"
+                    title="Refresh file list">
+                    <ReloadIcon class="refresh-icon icon-md" />
+                </button>
+            </div>
+            <div v-if="isEditorVisible" class="flex gap-1.5 ml-auto">
+                <button
+                    class="button-default bg-dark-400"
+                    @click="$emit('format')"
+                    v-if="isJsonFile"
+                    title="Format JSON">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round">
+                        <path d="M21 10H7" />
+                        <path d="M21 6H3" />
+                        <path d="M21 14H3" />
+                        <path d="M21 18H7" />
+                    </svg>
+                </button>
+                <button class="button-default bg-dark-400" @click="$emit('save')" title="Save File">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round">
+                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+                        <polyline points="17 21 17 13 7 13 7 21" />
+                        <polyline points="7 3 7 8 15 8" />
+                    </svg>
+                </button>
+                <button class="button-default bg-dark-400" @click="$emit('close')" title="Close File">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
+        </div>
+
+        <transition name="fade">
+            <div v-if="isEditorVisible" class="my-3 relative">
+                <div class="pb-4">
+                    <div class="editor-container overflow-hidden rounded-lg shadow-card bg-dark-350" :class="{ 'has-error': errorMessage }">
+                        <div class="relative w-full h-full">
+                            <pre ref="codeDisplay" class="code-highlight language-json"></pre>
+                            <textarea
+                                ref="codeEditor"
+                                :value="content"
+                                @input="$emit('update:content', $event.target.value)"
+                                class="code-editor"
+                                spellcheck="false"
+                                @scroll="handleScroll"
+                                @keydown.tab.prevent="handleTabKey"></textarea>
+                        </div>
+                    </div>
+                </div>
+
+                <div v-if="errorMessage" class="error-container">
+                    <div class="error-icon">
+                        <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2">
+                            <circle cx="12" cy="12" r="10" />
+                            <line x1="15" y1="9" x2="9" y2="15" />
+                            <line x1="9" y1="9" x2="15" y2="15" />
+                        </svg>
+                    </div>
+                    <div class="error-content">
+                        <div class="error-title">JSON Syntax Error</div>
+                        <div class="error-text">{{ errorMessage }}</div>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick, onMounted } from 'vue';
+import { ReloadIcon } from '@/components/icons';
+import Dropdown from '@/components/ui/controls/atomic/Dropdown.vue';
+import { useCodeEditor } from '@/composables/useCodeEditor';
+
+const props = defineProps({
+    availableFiles: { type: Array, required: true },
+    currentFile: { type: String, default: '' },
+    content: { type: String, default: '' },
+    isHidden: { type: Boolean, default: false },
+    logger: { type: Object, required: true }
+});
+
+const emit = defineEmits(['update:content', 'load-file', 'refresh-files', 'save', 'close', 'format']);
+
+const codeEditor = ref(null);
+const codeDisplay = ref(null);
+const { highlightCode, syncScroll, handleTab } = useCodeEditor(props.logger);
+
+const isEditorVisible = computed(() => props.currentFile !== '');
+const isJsonFile = computed(() => props.currentFile.endsWith('.json'));
+
+const errorMessage = computed(() => {
+    if (!isJsonFile.value) return;
+    try {
+        JSON.parse(props.content);
+    } catch (e) {
+        return e.message;
+    }
+});
+
+const loadFile = (fileName) => {
+    emit('load-file', fileName);
+};
+
+const handleScroll = () => {
+    syncScroll(codeDisplay.value, codeEditor.value);
+};
+
+const handleTabKey = () => {
+    const contentRef = ref(props.content);
+    handleTab(codeEditor.value, contentRef, () => {
+        emit('update:content', contentRef.value);
+    });
+};
+
+watch(() => props.content, () => {
+    nextTick(() => {
+        highlightCode(codeDisplay.value, codeEditor.value, props.content, props.currentFile);
+    });
+});
+
+onMounted(() => {
+    if (props.content) {
+        nextTick(() => {
+            highlightCode(codeDisplay.value, codeEditor.value, props.content, props.currentFile);
+        });
+    }
+});
+</script>