v2.0.0-beta - Убрана тяжелая зависимость iconify, изменён дизайн.

В процессе: синхронизация между устройствами

src/ApiApp.vue

@@ -1,17 +1,16 @@
 <script setup>
-import {Icon} from "@iconify/vue";
 import {onBeforeMount, ref} from "vue";
-import {appWindow} from "@tauri-apps/api/window";
+import {getCurrentWebviewWindow} from "@tauri-apps/api/webviewWindow";
 
-import {useDark, useToggle} from "@vueuse/core";
-import {invoke} from "@tauri-apps/api";
+import {useDark} from "@vueuse/core";
+useDark();
+import {invoke} from "@tauri-apps/api/core";
 import ConfirmModal from "./api_components/ConfirmModal.vue";
 import {listen} from "@tauri-apps/api/event";
 import SettingsModal from "./api_components/SettingsModal.vue";
 import PageHandler from "./api_wiki/PageHandler.vue";
+const appWindow = getCurrentWebviewWindow()
 
-const isDark = useDark();
-const toggleDark = useToggle(isDark);
 
 let wiki_open = ref(false);
 
@@ -109,43 +108,28 @@ function select_input(event){
 </script>
 
 <template>
-    <div data-tauri-drag-region class="z-50 titlebar h-[30px] select-none fixed flex justify-end top-0 right-0 left-0 bg-gray-100 dark:bg-zinc-800">
-        <div @click="$emit('close')" class="fixed left-0 top-0.5 text-lg dark:text-white cursor-pointer" title="Назад">
-            <Icon icon="material-symbols:arrow-back" width="28" height="28"/>
-        </div>
-        <div @click="appWindow.minimize()" class="titlebar-button hover:bg-gray-200 dark:hover:bg-gray-700 justify-center inline-flex w-[30px] h-[30px] items-center dark:text-white" id="titlebar-minimize">
-            <Icon class="" icon="mdi:window-minimize" width="20" height="20"/>
-        </div>
-        <div @click="appWindow.toggleMaximize()" class="titlebar-button hover:bg-gray-200 dark:hover:bg-gray-700 justify-center inline-flex w-[30px] h-[30px] items-center dark:text-white" id="titlebar-maximize">
-            <Icon class="" icon="mdi:window-maximize" width="20" height="20"/>
-        </div>
-        <div @click="appWindow.close()" class="titlebar-button hover:bg-gray-200 dark:hover:bg-gray-700 justify-center inline-flex w-[30px] h-[30px] items-center dark:text-white" id="titlebar-close">
-            <Icon class="" icon="mdi:close" width="26" height="26"/>
-        </div>
-    </div>
     <div v-if="pending">
-        <Icon icon="line-md:loading-twotone-loop" width="96" height="96" class="text-green-500 absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]"/>
+        <img src="/icon/eos-icons--three-dots-loading.svg" alt="Loading" style="width: 96px; height: 96px" class="dark:invert absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]">
     </div>
     <div v-else>
-        <button class="absolute top-10 right-2" @click="toggleDark()">
-            <Icon v-if="!isDark" class="group-hover:invert text-yellow-400" icon="flowbite:sun-solid" width="38" height="38"/>
-            <Icon v-else class="group-hover:invert text-blue-400" icon="ri:moon-fill" width="38" height="38"/>
-        </button>
+        <slot/>
         <div v-if="!wiki_open">
-            <button class="absolute top-10 left-2" @click="open_settings">
-                <Icon icon="material-symbols:settings-outline" width="38" height="38" class="text-zinc-600 dark:text-zinc-200"/>
+            <button class="absolute top-10 right-2" @click="open_settings">
+                <img src="/icon/material-symbols--settings-outline.svg" alt="API settings" style="width: 38px; height: 38px" class="dark:invert">
             </button>
             <div class="mt-8">
                 <div class="mt-[28vh] grid grid-cols-1 grid-rows-3 sm:grid-cols-2 sm:grid-rows-2 gap-2.5 dark:text-white md:mx-16 lg:mx-24">
                     <div class="text-center shadow dark:shadow-white mx-4 sm:mx-0 sm:ml-4 rounded-lg p-1 row-span-1">
                         <p class="mb-4">Статус</p>
                         <div v-if="!api_status" class="flex text-center align-middle items-center">
-                            <Icon class="text-red-500" icon="oui:dot" width="36" height="36"/>
+                            <img src="/icon/api/oui--dot.svg" alt="Api status"
+                                 style="width: 36px; height: 36px; filter: invert(58%) sepia(88%) saturate(5276%) hue-rotate(336deg) brightness(95%) contrast(98%);">
                             <span>Не подключено</span>
                             <button @click="run_api" class="bg-green-500 text-white rounded-lg py-1 px-2 ml-2 hover:bg-green-600 transition-colors">Запустить</button>
                         </div>
                         <div v-else class="flex text-center align-middle items-center">
-                            <Icon class="text-green-500" icon="oui:dot" width="36" height="36"/>
+                            <img src="/icon/api/oui--dot.svg" alt="Api status"
+                                 style="width: 36px; height: 36px; filter: invert(69%) sepia(18%) saturate(2201%) hue-rotate(86deg) brightness(91%) contrast(77%);">
                             <span>Работает</span>
                             <button @click="stop_api" class="bg-green-500 text-white rounded-lg py-1 px-2 ml-2 hover:bg-green-600 transition-colors">Остановить</button>
                         </div>
@@ -165,7 +149,7 @@ function select_input(event){
                         <p v-else class="underline decoration-red-500 decoration-2 underline-offset-2">Нет подключения</p>
                     </div>
                     <div @click="wiki_open = true" class="cursor-pointer group mt-2 text-center shadow dark:shadow-white hover:shadow-md dark:hover:shadow-white ml-4 mr-6 sm:mr-4 rounded-lg p-1 col-start-1 col-end-3 row-start-3 sm:row-span-2">
-                        <Icon class="mt-1 text-zinc-800 dark:text-zinc-100 mx-auto" icon="mingcute:question-line" width="48" height="48"/>
+                        <img src="/icon/mingcute--question-line.svg" alt="How it works" style="width: 48px; height: 48px" class="mt-1 mx-auto dark:invert">
                         <p class="text-xl mt-1 mb-2.5 group-hover:underline">Как этим пользоваться?</p>
                     </div>
                 </div>
@@ -175,8 +159,8 @@ function select_input(event){
             <SettingsModal v-if="settings_modal" @close="settings_modal = false" :autostart="settings_autostart" :port="settings_port"/>
         </div>
         <div v-else>
-            <button class="absolute top-10 left-2" @click="wiki_open = false">
-                <Icon icon="material-symbols:arrow-back" width="34" height="34" class="text-zinc-600 dark:text-zinc-200"/>
+            <button class="absolute top-10 left-12" @click="wiki_open = false">
+                <img src="/icon/material-symbols--arrow-back.svg" alt="Back" style="width: 34px; height: 34px" class="dark:invert">
             </button>
             <PageHandler/>
         </div>