@necrolab/dashboard 0.4.3

package/src/components/icons/Ticket.vue

@@ -0,0 +1,8 @@
+<template>
+    <svg width="19" height="15" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M7.05 11L9.5 9.1625L11.9062 11L10.9875 8.025L13.4375 6.1H10.4625L9.5 3.125L8.5375 6.1H5.5625L7.96875 8.025L7.05 11ZM2.5 14.5C2.01875 14.5 1.60692 14.3288 1.2645 13.9864C0.9215 13.6434 0.75 13.2312 0.75 12.75V9.25C1.23125 9.25 1.64338 9.0785 1.98638 8.7355C2.32879 8.39308 2.5 7.98125 2.5 7.5C2.5 7.01875 2.32879 6.60663 1.98638 6.26363C1.64338 5.92121 1.23125 5.75 0.75 5.75V2.25C0.75 1.76875 0.9215 1.35692 1.2645 1.0145C1.60692 0.6715 2.01875 0.5 2.5 0.5H16.5C16.9813 0.5 17.3934 0.6715 17.7364 1.0145C18.0788 1.35692 18.25 1.76875 18.25 2.25V5.75C17.7687 5.75 17.3566 5.92121 17.0136 6.26363C16.6712 6.60663 16.5 7.01875 16.5 7.5C16.5 7.98125 16.6712 8.39308 17.0136 8.7355C17.3566 9.0785 17.7687 9.25 18.25 9.25V12.75C18.25 13.2312 18.0788 13.6434 17.7364 13.9864C17.3934 14.3288 16.9813 14.5 16.5 14.5H2.5ZM2.5 12.75H16.5V10.5188C15.9604 10.1979 15.534 9.7715 15.2207 9.2395C14.9069 8.70692 14.75 8.12708 14.75 7.5C14.75 6.87292 14.9069 6.29308 15.2207 5.7605C15.534 5.2285 15.9604 4.80208 16.5 4.48125V2.25H2.5V4.48125C3.03958 4.80208 3.46629 5.2285 3.78012 5.7605C4.09337 6.29308 4.25 6.87292 4.25 7.5C4.25 8.12708 4.09337 8.70692 3.78012 9.2395C3.46629 9.7715 3.03958 10.1979 2.5 10.5188V12.75Z"
+            fill="white"
+        />
+    </svg>
+</template>

package/src/components/icons/Timer.vue

@@ -0,0 +1,8 @@
+<template>
+    <svg width="14" height="17" viewBox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M4.75 2.25V0.75H9.25V2.25H4.75ZM6.25 10.5H7.75V6H6.25V10.5ZM7 16.5C6.075 16.5 5.203 16.322 4.384 15.966C3.5655 15.6095 2.85 15.125 2.2375 14.5125C1.625 13.9 1.1405 13.1845 0.784 12.366C0.428 11.547 0.25 10.675 0.25 9.75C0.25 8.825 0.428 7.953 0.784 7.134C1.1405 6.3155 1.625 5.6 2.2375 4.9875C2.85 4.375 3.5655 3.89075 4.384 3.53475C5.203 3.17825 6.075 3 7 3C7.775 3 8.51875 3.125 9.23125 3.375C9.94375 3.625 10.6125 3.9875 11.2375 4.4625L12.2875 3.4125L13.3375 4.4625L12.2875 5.5125C12.7625 6.1375 13.125 6.80625 13.375 7.51875C13.625 8.23125 13.75 8.975 13.75 9.75C13.75 10.675 13.572 11.547 13.216 12.366C12.8595 13.1845 12.375 13.9 11.7625 14.5125C11.15 15.125 10.4345 15.6095 9.616 15.966C8.797 16.322 7.925 16.5 7 16.5ZM7 15C8.45 15 9.6875 14.4875 10.7125 13.4625C11.7375 12.4375 12.25 11.2 12.25 9.75C12.25 8.3 11.7375 7.0625 10.7125 6.0375C9.6875 5.0125 8.45 4.5 7 4.5C5.55 4.5 4.3125 5.0125 3.2875 6.0375C2.2625 7.0625 1.75 8.3 1.75 9.75C1.75 11.2 2.2625 12.4375 3.2875 13.4625C4.3125 14.4875 5.55 15 7 15Z"
+            fill="white"
+        />
+    </svg>
+</template>

package/src/components/icons/Trash.vue

@@ -0,0 +1,8 @@
+<template>
+    <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M2.95834 12.875C2.56876 12.875 2.23537 12.7364 1.95818 12.4592C1.68051 12.1815 1.54168 11.8479 1.54168 11.4583V2.25H0.833344V0.833333H4.37501V0.125H8.62501V0.833333H12.1667V2.25H11.4583V11.4583C11.4583 11.8479 11.3197 12.1815 11.0426 12.4592C10.7649 12.7364 10.4313 12.875 10.0417 12.875H2.95834ZM10.0417 2.25H2.95834V11.4583H10.0417V2.25ZM4.37501 10.0417H5.79168V3.66667H4.37501V10.0417ZM7.20834 10.0417H8.62501V3.66667H7.20834V10.0417Z"
+            fill="white"
+        />
+    </svg>
+</template>

package/src/components/icons/Up.vue

@@ -0,0 +1,10 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="13" height="13" fill="#ffffff">
+        <path
+            d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8
+    0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3
+    0s-12.5-32.8 0-45.3l192-192z"
+            fill="#ffffff"
+        />
+    </svg>
+</template>

package/src/components/icons/Wildcard.vue

@@ -0,0 +1,18 @@
+<template>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+        class="wildcard-icon"
+    >
+        <path
+            fill="currentColor"
+            d="M208 32c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32V172.9l122-70.4c15.3-8.8 34.9-3.6 43.7 11.7l16 27.7c8.8 15.3 3.6 34.9-11.7 43.7L352 256l122 70.4c15.3 8.8 20.5 28.4 11.7 43.7l-16 27.7c-8.8 15.3-28.4 20.6-43.7 11.7L304 339.1V480c0 17.7-14.3 32-32 32H240c-17.7 0-32-14.3-32-32V339.1L86 409.6c-15.3 8.8-34.9 3.6-43.7-11.7l-16-27.7c-8.8-15.3-3.6-34.9 11.7-43.7L160 256 38 185.6c-15.3-8.8-20.5-28.4-11.7-43.7l16-27.7C51.1 98.8 70.7 93.6 86 102.4l122 70.4V32z"
+        />
+    </svg>
+</template>
+
+<style scoped>
+.wildcard-icon {
+    @apply w-4 h-4;
+}
+</style>

package/src/components/icons/index.js

@@ -0,0 +1,111 @@
+import EditIcon from "./Edit.vue";
+import ConsoleIcon from "./Console.vue";
+/**
+ * Imported Icons here in case they need to be edited with
+ * CSS (i.e change fill color)
+ */
+import TasksIcon from "./Tasks.vue";
+import LogoutIcon from "./Logout.vue";
+import PlayIcon from "./Play.vue";
+import PauseIcon from "./Pause.vue";
+import TrashIcon from "./Trash.vue";
+import ExpandIcon from "./Expand.vue";
+import ShrinkIcon from "./Shrink.vue";
+import EventIcon from "./Event.vue";
+import StatusIcon from "./Status.vue";
+import TicketIcon from "./Ticket.vue";
+import CartIcon from "./Cart.vue";
+import ClickIcon from "./Click.vue";
+import MenuIcon from "./Menu.vue";
+import CheckmarkIcon from "./Checkmark.vue";
+import ScrapeIcon from "./Scrape.vue";
+import BoxIcon from "./Box.vue";
+import AwardIcon from "./Award.vue";
+import MailIcon from "./Mail.vue";
+import TagIcon from "./Tag.vue";
+import ScannerIcon from "./Scanner.vue";
+import StadiumIcon from "./Stadium.vue";
+import CameraIcon from "./Camera.vue";
+import BagIcon from "./Bag.vue";
+import SkiIcon from "./Ski.vue";
+import HandIcon from "./Hand.vue";
+import GroupIcon from "./Group.vue";
+import ShieldIcon from "./Shield.vue";
+import TimerIcon from "./Timer.vue";
+import LoyaltyIcon from "./Loyalty.vue";
+import SavingsIcon from "./Savings.vue";
+import StadiumWhiteIcon from "./StadiumWhite.vue";
+import BagWhiteIcon from "./BagWhite.vue";
+import UpIcon from "./Up.vue";
+import DownIcon from "./Down.vue";
+import PlusIcon from "./Plus.vue";
+import ReloadIcon from "./Reload.vue";
+import FilterIcon from "./Filter.vue";
+import SandclockIcon from "./Sandclock.vue";
+import GearIcon from "./Gear.vue";
+import CloseIcon from "./Close.vue";
+import KeyIcon from "./Key.vue";
+import PencilIcon from "./Pencil.vue";
+import SellIcon from "./Sell.vue";
+import SquareCheckIcon from "./SquareCheck.vue";
+import SquareUncheckIcon from "./SquareUncheck.vue";
+import WildcardIcon from "./Wildcard.vue";
+import ProfileIcon from "./Profile.vue";
+import CloseXIcon from "./CloseX.vue";
+import CheckIcon from "./Check.vue";
+import SpinnerIcon from "./Spinner.vue";
+
+export {
+    EditIcon,
+    ConsoleIcon,
+    TasksIcon,
+    LogoutIcon,
+    PlayIcon,
+    PauseIcon,
+    TrashIcon,
+    ExpandIcon,
+    ShrinkIcon,
+    MenuIcon,
+    EventIcon,
+    StatusIcon,
+    TicketIcon,
+    CartIcon,
+    ClickIcon,
+    CheckmarkIcon,
+    ScrapeIcon,
+    BoxIcon,
+    AwardIcon,
+    MailIcon,
+    TagIcon,
+    ScannerIcon,
+    StadiumIcon,
+    CameraIcon,
+    BagIcon,
+    SkiIcon,
+    HandIcon,
+    GroupIcon,
+    ShieldIcon,
+    TimerIcon,
+    LoyaltyIcon,
+    SavingsIcon,
+    StadiumWhiteIcon,
+    BagWhiteIcon,
+    UpIcon,
+    DownIcon,
+    PlusIcon,
+    ReloadIcon,
+    FilterIcon,
+    SandclockIcon,
+    GearIcon,
+    CloseIcon,
+    KeyIcon,
+    PencilIcon,
+    SellIcon,
+    SquareCheckIcon,
+    SquareUncheckIcon,
+    WildcardIcon,
+    ProfileIcon,
+    CloseXIcon,
+    CheckIcon,
+    SpinnerIcon
+};

package/src/components/ui/Modal.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="modal-mask pt-14 ipadlg:py-1 overflow-y-scroll scrollable">
+        <div class="component-modal" ref="target">
+            <div class="modal-header">
+                <slot name="header" />
+                <button @click="ui.toggleModal()" class="btn-icon border-none hover:bg-dark-400">
+                    <CloseIcon />
+                </button>
+            </div>
+            <div class="modal-body">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { useUIStore } from "@/stores/ui";
+import { onClickOutside } from "@vueuse/core";
+import { ref } from "vue";
+import { CloseIcon } from "@/components/icons";
+
+const ui = useUIStore();
+const target = ref(null);
+
+onClickOutside(target, (event) => {
+    if (event.target.classList.contains("modal-mask")) ui.toggleModal();
+});
+</script>
+<style lang="scss" scoped>
+.modal-mask {
+    @apply fixed top-0 left-0 w-screen h-screen flex duration-300 ease-in-out;
+    z-index: 9998;
+    background-color: rgba(17, 17, 17, 0.85);
+    backdrop-filter: blur(4px);
+}
+.component-modal {
+    margin: auto;
+    width: 640px;
+    @apply bg-dark-300 px-5 py-5 rounded-lg m-auto flex flex-col;
+    
+    .modal-header {
+        @apply flex text-white font-bold;
+        
+        button {
+            @apply ml-auto;
+        }
+    }
+    
+    .modal-body {
+        @apply flex flex-col;
+    }
+}
+@media (max-width: 810px) {
+    .component-modal {
+        width: calc(100vw - 2rem);
+        max-height: calc(100vh - 2rem);
+        overflow-y: auto;
+        margin: 1rem;
+    }
+}
+</style>

package/src/components/ui/Navbar.vue

@@ -0,0 +1,207 @@
+<template>
+    <div class="navbar" :class="{ 'force-z': menuOpen }">
+        <div :class="[
+                'component-container ios-wrapper flex items-center relative',
+                { 'ios-wrapper': landscapeIos }
+            ]">
+            <!-- Brand -->
+            <img src="@/assets/img/logo_trans.png" class="h-6 lg:h-8 mr-4 z-30 object-cover" alt="Logo: Necro" />
+            <!-- Navlinks -->
+            <ul class="hidden lg:flex">
+                <li>
+                    <router-link to="/"><TasksIcon /><span class="hidden xl:block">Tasks</span></router-link>
+                </li>
+                <li>
+                    <router-link to="/editor"><EditIcon /><span class="hidden xl:block">Editor</span></router-link>
+                </li>
+                <li v-if="ui.profile?.admin">
+                    <router-link to="/console"><ConsoleIcon /><span class="hidden xl:block">Console</span></router-link>
+                </li>
+                <li>
+                    <router-link to="/profiles">
+                        <GroupIcon class="xl:mr-2" />
+                        <span class="hidden xl:block">Profiles</span>
+                    </router-link>
+                </li>
+                <li>
+                    <router-link to="/accounts">
+                        <MailIcon class="xl:mr-2" />
+                        <span class="hidden xl:block">Accounts</span>
+                    </router-link>
+                </li>
+                <li>
+                    <router-link to="/filter"><FilterIcon /><span class="hidden xl:block">Filter</span></router-link>
+                </li>
+            </ul>
+
+            <!-- User Actions -->
+            <button class="hidden lg:block ml-auto mr-4 smooth-hover" @click="logout()">
+                <LogoutIcon />
+            </button>
+            <h4 v-if="ui.profile?.name" class="hidden lg:block text-white text-sm font-medium">
+                <span class="text-lightgray">Logged in as </span>
+                <span class="font-black"> {{ ui.profile?.name }}</span>
+            </h4>
+            <h4 v-else class="hidden lg:block text-white text-sm font-medium">
+                <span class="text-lightgray">Loading </span>
+            </h4>
+            <img
+                v-if="ui.profile?.profilePicture"
+                :src="ui.profile?.profilePicture"
+                alt="Profile Picture"
+                class="h-10 w-10 rounded-full hidden lg:block mx-4"
+            />
+            <div v-else class="h-10 w-10 rounded-full hidden lg:block mx-4 bg-dark-400" />
+            <CountryChooser class="hidden lg:block" />
+
+            <!-- Mobile Toggle -->
+            <button class="flex lg:hidden ml-auto z-30" @click="toggleMenu">
+                <MenuIcon />
+            </button>
+        </div>
+        <!-- Mobile Menu -->
+        <transition name="fade">
+            <div class="mobile-menu flex lg:hidden flex-col z-30" v-if="menuOpen">
+                <CountryChooser class="mx-auto landscape:block hidden mt-4" />
+                <ul class="flex landscape:grid grid-cols-3 mx-auto mt-12 flex-col">
+                    <!-- Close Menu on Nav Link Click -->
+                    <li @click="toggleMenu">
+                        <router-link to="/"><TasksIcon />Tasks</router-link>
+                    </li>
+                    <li @click="toggleMenu">
+                        <router-link to="/editor"><EditIcon />Editor</router-link>
+                    </li>
+                    <li v-if="ui.profile?.admin" @click="toggleMenu">
+                        <router-link to="/console"><ConsoleIcon />Console</router-link>
+                    </li>
+                    <li @click="toggleMenu">
+                        <router-link to="/profiles">
+                            <GroupIcon class="mr-2" />
+                            Profiles
+                        </router-link>
+                    </li>
+                    <li @click="toggleMenu">
+                        <router-link to="/accounts">
+                            <MailIcon class="mr-2" />
+                            Accounts
+                        </router-link>
+                    </li>
+                    <li @click="toggleMenu">
+                        <router-link to="/filter"><FilterIcon />Filter</router-link>
+                    </li>
+                </ul>
+                <!-- User Actions -->
+                <CountryChooser class="mx-auto block landscape:hidden mb-auto" />
+                <div class="flex mx-auto items-center landscape:mb-0">
+                    <button class="mr-4" @click="logout()">
+                        <LogoutIcon />
+                    </button>
+                    <h4 class="text-white text-sm font-medium mr-4">
+                        <span class="text-lightgray">Logged in as </span>
+                        <span class="font-black"> {{ ui.profile?.name }}</span>
+                    </h4>
+                    <img :src="ui.profile?.profilePicture" alt="" class="h-10 w-10 rounded-full" />
+                </div>
+
+                <div class="mx-auto mt-6 mb-14 flex gap-3 items-center">
+                    <div class="bg-gradient-to-r from-dark-400 to-dark-500 rounded-full text-sm shadow-lg p-2 px-4 text-white font-medium border border-light-300">
+                        Dashboard v{{ dashVersion }}
+                    </div>
+                    <div class="bg-gradient-to-r from-dark-400 to-dark-500 rounded-full text-sm shadow-lg p-2 px-4 text-white font-medium border border-light-300">
+                        Bot v{{ ui.botVersion }}
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+<style lang="scss" scoped>
+.navbar {
+    @apply border-b py-5 fixed w-full;
+    top: 0;
+    z-index: 1;
+    backdrop-filter: blur(23px);
+    border-color: #323340;
+    
+    ul {
+        @apply gap-x-4;
+        
+        li a {
+            @apply flex text-white text-sm border-none h-10 items-center px-4 rounded-lg;
+            
+            svg {
+                @apply mr-2;
+            }
+            
+            &.router-link-exact-active {
+                @apply border-solid border border-light-300;
+            }
+        }
+    }
+}
+
+.force-z {
+    z-index: 20000;
+}
+
+.mobile-menu {
+    margin-top: -81px;
+    height: calc(100vh + 40px);
+    will-change: transform, opacity, filter;
+    @apply bg-dark-400 absolute pt-16 pb-8 w-full z-10;
+    
+    ul li {
+        @apply mb-4 mx-auto;
+        
+        a {
+            font-size: 20px !important;
+        }
+    }
+}
+</style>
+
+<script setup>
+import { storeToRefs } from "pinia";
+import { ref } from "vue";
+import { EditIcon, ConsoleIcon, TasksIcon, LogoutIcon, MenuIcon, FilterIcon, GroupIcon, MailIcon } from "@/components/icons";
+import { useUIStore } from "@/stores/ui";
+import router from "@/router/index";
+import CountryChooser from "@/components/ui/controls/CountryChooser.vue";
+import { sendLogout } from "@/stores/requests";
+
+const landscapeIos = ref(false);
+
+function isIOS() {
+    if (/iPad|iPhone|iPod/.test(navigator.platform)) {
+        return true;
+    } else {
+        return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
+    }
+}
+
+function isIpadOS() {
+    return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
+}
+
+window.matchMedia("(orientation: portrait)").addEventListener("change", (e) => {
+    if (!e.matches && isIOS() && !isIpadOS()) landscapeIos.value = true;
+    else landscapeIos.value = false;
+});
+
+const dashVersion = __APP_VERSION__;
+const ui = useUIStore();
+const menuOpen = storeToRefs(ui).menuOpen;
+const toggleMenu = () => {
+    menuOpen.value = !menuOpen.value;
+    document.body.style.overflow = menuOpen.value ? "hidden" : "auto";
+};
+const logout = async () => {
+    ui.logger.Info("Logging out of session");
+    const json = await sendLogout();
+    if (json.error) return ui.showError(json.error);
+    else {
+        ui.setProfile({});
+        router.push("/login");
+    }
+};
+</script>

package/src/components/ui/ReconnectIndicator.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="my-auto relative flex justify-center flex-col items-center" style="height: 80vh">
+        <div class="spinner-container">
+            <div class="spinner"></div>
+            <img :src="logoIcon" alt="Beaker Logo" class="logo" />
+        </div>
+        <span class="text-white text-3xl font-light mt-3">{{ props.message }}{{ dots }}</span>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import logoIcon from "@/assets/img/logo_icon_2.png";
+
+const dots = ref(".");
+
+setInterval(() => {
+    dots.value += ".";
+    if (dots.value.length > 3) dots.value = ".";
+}, 1000);
+
+const props = defineProps({
+    message: {
+        type: String,
+        default: "Reconnecting"
+    }
+});
+</script>
+
+<style scoped>
+.spinner-container {
+    position: relative;
+    width: 200px;
+    height: 200px;
+}
+.logo {
+    position: absolute;
+    width: 180px;
+    height: 180px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    object-fit: cover;
+    object-position: center;
+    z-index: 2;
+}
+.spinner {
+    position: absolute;
+    width: 185px;
+    height: 185px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    border-top: 2px solid #ffffff;
+    animation: spin 1s linear infinite;
+}
+.glow {
+    position: absolute;
+    width: 220px;
+    height: 220px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
+    animation: pulse 2s ease-in-out infinite;
+}
+@keyframes spin {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+@keyframes pulse {
+    0%,
+    100% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 0.5;
+    }
+    50% {
+        transform: translate(-50%, -50%) scale(1.05);
+        opacity: 0.7;
+    }
+}
+</style>

package/src/components/ui/Splash.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="darkBG h-screen w-screen z-[1000] fixed flex items-center flex-col justify-center gap-y-3">
+        <img src="@/assets/img/logo_trans.png" class="w-[300px] mx-auto" />
+        <SpinnerIcon />
+    </div>
+</template>
+
+<script setup>
+import { SpinnerIcon } from "@/components/icons";
+</script>
+<style lang="scss" scoped>
+.darkBG {
+    background-color: rgba(28, 28, 49, 100%);
+}
+</style>
+
+<style>
+img {
+    transition: 0.3s;
+}
+img:hover {
+    transform: scale(1.1);
+}
+</style>

package/src/components/ui/controls/CountryChooser.vue

@@ -0,0 +1,87 @@
+<template>
+    <div @click="open = !open">
+        <div class="dropdown input-default p-4 w-16 bg-dark-550 small-dropdown">
+            <span class="flex justify-between items-center z-inf text-white">
+                <div class="flex gap-3 justify-center">
+                    <img class="w-5" :src="`/flags/${ui.currentCountry.siteId.split('_')[1].toLowerCase()}.svg`" />
+                </div>
+            </span>
+            <transition name="fade">
+                <div
+                    v-if="open"
+                    class="dropdown-content special-dropdown mt-2 snap-mandatory snap-y z-inf overflow-scroll hidden-scrollbars"
+                >
+                    <div class="snap-start pt-2 text-sm font-bold text-center">TM</div>
+                    <div
+                        v-bind:key="country.id"
+                        v-for="(country, i) in countries.TM"
+                        :class="`cursor-pointer snap-start w-12  ${i === 0 ? 'pt-2' : 'my-2'}`"
+                        @click="ui.setCurrentCountry(country, true, 'TM')"
+                    >
+                        <div class="flex justify-between smooth-hover">
+                            <span class="text-sm">{{ country.siteId.split("_")[1] }} </span>
+                            <img class="w-5" :src="`/flags/${country.siteId.split('_')[1].toLowerCase()}.svg`" />
+                        </div>
+                    </div>
+                    <div class="snap-start pt-2 text-sm font-bold text-center">AXS</div>
+                    <div
+                        v-bind:key="country.id"
+                        v-for="(country, i) in countries.AXS"
+                        :class="`cursor-pointer snap-start w-12 ${i === 0 ? 'pt-2' : 'my-2'}`"
+                        @click="ui.setCurrentCountry(country, true, 'AXS')"
+                    >
+                        <div class="flex gap-3 justify-between smooth-hover">
+                            <span class="text-sm">{{ country.siteId.split("_")[1] }} </span>
+                            <img class="w-5" :src="`/flags/${country.siteId.split('_')[1].toLowerCase()}.svg`" />
+                        </div>
+                    </div>
+                </div>
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useUIStore } from "@/stores/ui";
+import { countries } from "@/stores/countries";
+const ui = useUIStore();
+const open = ref(false);
+</script>
+
+<style scoped>
+.special-dropdown {
+    @apply min-w-20;
+}
+
+.small-dropdown {
+    background-clip: border-box !important;
+    border-radius: 100% !important;
+    padding: 0;
+    width: 3em !important;
+    height: 3em !important;
+    display: flex;
+    justify-items: center;
+    justify-content: center;
+}
+
+.dropdown-content {
+    left: -1.25rem;
+    background-clip: border-box !important;
+    @apply border border-light-300;
+    border-width: 2px;
+    --tw-border-opacity: 1;
+    border-color: rgb(41 42 67 / var(--tw-border-opacity));
+    max-height: 13rem;
+}
+
+@media (max-width: 1024px) {
+    .small-dropdown {
+        @apply bg-dark-550 !important;
+    }
+
+    .dropdown-content {
+        @apply bg-dark-550 !important;
+    }
+}
+</style>

package/src/components/ui/controls/EyeToggle.vue

@@ -0,0 +1,11 @@
+<template>
+    <button @click="toggle" class="w-22 cursor-pointer">
+        <img v-if="value" class="w-5 h-5" src="@/assets/img/eyes/open.svg" alt="Open Eye" />
+        <img v-else class="w-5 h-5" src="@/assets/img/eyes/closed.svg" alt="Closed Eye" />
+    </button>
+</template>
+
+<script setup>
+const value = defineModel();
+const toggle = () => (value.value = !value.value);
+</script>