From 5af6b1175c66dda19d4e692d34276db1b8cd016a Mon Sep 17 00:00:00 2001
From: dskvr <dskvr@users.noreply.github.com>
Date: Thu, 12 Jan 2023 13:34:08 +0100
Subject: [PATCH] add dark mode

---
 package.json                                  |   3 +
 src/components/layout/HeaderComponent.vue     |   4 +
 src/components/relays/blocks/MapSummary.vue   |  16 +--
 .../relays/blocks/RelaysResultTable.vue       |   2 +-
 src/components/relays/nav/RelaysFindNav.vue   |   2 +-
 src/components/relays/pages/RelaysFind.vue    |   2 +-
 src/components/relays/pages/RelaysSingle.vue  |  30 ++---
 src/styles/main.scss                          |  82 ++++++++++++
 yarn.lock                                     | 117 +++++++++++++++---
 9 files changed, 209 insertions(+), 49 deletions(-)

diff --git a/package.json b/package.json
index b94dbdf..7735832 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@heroicons/vue": "2.0.13",
     "@popperjs/core": "2.11.6",
     "@vue-leaflet/vue-leaflet": "0.6.1",
+    "@vueuse/core": "9.10.0",
     "@vueuse/head": "1.0.22",
     "array-timsort": "1.0.3",
     "country-code-emoji": "2.3.0",
@@ -48,6 +49,7 @@
     "vue-meta": "3.0.0-alpha.8",
     "vue-router": "4.1.6",
     "vue-tailwind": "2.5.1",
+    "vue-use": "0.2.0",
     "vue3-storage": "0.1.11",
     "webpack": "5.75.0",
     "write-yaml-file": "4.2.0"
@@ -80,6 +82,7 @@
     "style-loader": "3.3.1",
     "tailwindcss": "3.2.4",
     "vue-cli-plugin-yaml-loader": "~1.0.0",
+    "vue-template-compiler": "2.7.14",
     "webpack-cli": "5.0.0",
     "yaml-loader": "^0.6.0"
   },
diff --git a/src/components/layout/HeaderComponent.vue b/src/components/layout/HeaderComponent.vue
index 3f28f94..95787c1 100644
--- a/src/components/layout/HeaderComponent.vue
+++ b/src/components/layout/HeaderComponent.vue
@@ -53,6 +53,8 @@
           </div>
           </div>
           <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+          
+          <DarkMode />
 
           <!-- Profile dropdown -->
           <Menu as="div" class="relative ml-3">
@@ -167,6 +169,7 @@ import UserLib from '@/shared/user-lib.js'
 
 // import PreferencesComponent from '@/components/PreferencesComponent.vue'
 import AuthComponent from '@/components/user/AuthComponent.vue'
+import DarkMode from '@/components/partials/DarkMode.vue'
 
 import {version} from '../../../package.json'
 
@@ -177,6 +180,7 @@ export default defineComponent({
   components: {
     // PreferencesComponent,
     AuthComponent,
+    DarkMode,
     Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems,
     Bars3Icon, XMarkIcon
   },
diff --git a/src/components/relays/blocks/MapSummary.vue b/src/components/relays/blocks/MapSummary.vue
index a7e342b..5cfd568 100644
--- a/src/components/relays/blocks/MapSummary.vue
+++ b/src/components/relays/blocks/MapSummary.vue
@@ -51,7 +51,7 @@
       </l-marker>
 
     </l-map>
-    <span @click="this.handleToggleMap()">
+    <span @click="this.handleToggleMap()" id="map_control">
       <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" v-if="!store.layout.mapIsExpanded">full map</button>
       <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" v-if="store.layout.mapIsExpanded">relay list</button>
     </span>
@@ -306,7 +306,7 @@ export default defineComponent({
 </script>
 
 <style>
-/* :root {
+:root {
     --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
 }
 
@@ -314,7 +314,7 @@ export default defineComponent({
     .leaflet-tile {
         filter:var(--map-tiles-filter, none);
 	}
-} */
+}
 </style>
 
 <style>
@@ -585,17 +585,7 @@ export default defineComponent({
 
 </script>
 
-<style>
-/* :root {
-    --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
-}
 
-@media (prefers-color-scheme: dark) {
-    .leaflet-tile {
-        filter:var(--map-tiles-filter, none);
-	}
-} */
-</style>
 
 <style scoped>
 
diff --git a/src/components/relays/blocks/RelaysResultTable.vue b/src/components/relays/blocks/RelaysResultTable.vue
index 8d957a3..aa9c228 100644
--- a/src/components/relays/blocks/RelaysResultTable.vue
+++ b/src/components/relays/blocks/RelaysResultTable.vue
@@ -1,5 +1,5 @@
 <template>
-   <div class="-mt-10 pt-0 px-1 sm:px-6 lg:px-8">
+   <div class="pt-0 px-1 sm:px-6 lg:px-8">
       <div class="mt-8 flex flex-col">
       <div class="overflow-x-auto">
           <div class="inline-block min-w-full align-middle" v-if="subsectionRelays.length">
diff --git a/src/components/relays/nav/RelaysFindNav.vue b/src/components/relays/nav/RelaysFindNav.vue
index e43e100..334cb49 100644
--- a/src/components/relays/nav/RelaysFindNav.vue
+++ b/src/components/relays/nav/RelaysFindNav.vue
@@ -1,5 +1,5 @@
 <template>
-  <Disclosure as="nav" class="bg-white mb-5" v-slot="{ open }">
+  <Disclosure as="nav" id="subsection_nav" class="bg-white mb-5" v-slot="{ open }">
   <div class="mx-auto max-w-7xl px-0">
     <div class="flex h-12 justify-center md:justify-between">
       <div class="flex px-2 lg:px-0">
diff --git a/src/components/relays/pages/RelaysFind.vue b/src/components/relays/pages/RelaysFind.vue
index bc804eb..62d1e7e 100644
--- a/src/components/relays/pages/RelaysFind.vue
+++ b/src/components/relays/pages/RelaysFind.vue
@@ -37,7 +37,7 @@
         <RelaysFindNav />
       </div>
     </div>
-    <div v-if="!this.store.layout.mapIsExpanded">
+    <div id="relays_list_wrapper" v-if="!this.store.layout.mapIsExpanded">
       <div 
           v-for="subsection in navSubsection"
           :key="subsection.slug" > 
diff --git a/src/components/relays/pages/RelaysSingle.vue b/src/components/relays/pages/RelaysSingle.vue
index 90f5097..7a824a8 100644
--- a/src/components/relays/pages/RelaysSingle.vue
+++ b/src/components/relays/pages/RelaysSingle.vue
@@ -10,7 +10,7 @@
 
   <div id="wrapper" class="mt-8 mx-auto w-auto max-w-7xl">
     
-      <div v-if="store.tasks.isProcessing('relays/check') && !result" class="flex bg-slate-100 mt-12 shadow">
+      <div v-if="store.tasks.isProcessing('relays/check') && !result" class="data-card flex bg-slate-100 mt-12 shadow">
         <div class="text-slate-800 text-3xl flex-none w-full block py-1 text-center">
           <span class="block lg:text-lg"><strong>Data has not yet populated and is currently being processed.</strong> Depending on the availability of of the <strong>{{ relay  }}</strong>, this may or may not be populated shortly.</span>
         </div>
@@ -18,7 +18,7 @@
 
       <section v-if="result">
 
-        <div class="overflow-hidden bg-slate-100 shadow sm:rounded-lg">
+        <div class="data-card overflow-hidden bg-slate-100 shadow sm:rounded-lg">
           <div class="px-4 py-5 sm:px-6">
             <h1>{{geo?.countryCode ? getFlag : ''}}<span @click="copy(relayFromUrl)">{{ relayFromUrl }}</span></h1>
             <p class="mt-1 w-auto text-xl text-gray-500" v-if="result?.info?.description">{{ result.info.description }}</p>
@@ -35,7 +35,7 @@
         </div>
 
         <div v-if="!result?.check?.connect">
-          <div class="block mt-1 py-24 w-auto bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700" v-if="!result?.check?.connect">
+          <div class="data-card block mt-1 py-24 w-auto bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700" v-if="!result?.check?.connect">
             <h5 class="mb-2 text-2xl font-bold tracking-tight text-red-600 dark:text-red-300">This Relay Appears to be offline</h5>
           </div>
           <div class="flex bg-slate-50 shadow mt-12" v-if="Object.keys(this.result?.geo).length">
@@ -45,9 +45,9 @@
           </div>
         </div>
 
-        <div class="mb-10 overflow-hidden bg-slate-400 border-slate-200 shadow sm:rounded-lg">
+        <div v-if="result?.info?.supported_nips" class="mb-10 overflow-hidden bg-slate-400 border-slate-200 shadow sm:rounded-lg">
           <div class="px-1 py-2 sm:px-6">
-            <div class="flex" v-if="result?.info?.supported_nips">
+            <div class="flex">
               <div class="flex-none">
                 <h3 class="text-lg md:text-lg lg:text-xl xl:text-3xl mb-2 px-2 align-middle mt-4 font-black">nips</h3>
               </div>
@@ -59,7 +59,7 @@
           </div>
         </div>
 
-        <div class="flex sm:rounded-lg bg-slate-50 border-slate-200 mb-10" v-if="geo?.dns">
+        <div class="data-card flex sm:rounded-lg bg-slate-50 border-slate-200 mb-10" v-if="geo?.dns">
           <div class="text-slate-800 text-3xl flex-none w-full block py-1 text-center">
             <span>
               The IP of <strong>{{ geo?.dns.name }}</strong> is <strong>{{ geo?.dns.data }}</strong> <br />
@@ -69,7 +69,7 @@
           </div>
         </div>
 
-        <div class="flex sm:rounded-lg bg-slate-50 border-slate-200 border mb-10" v-if="this.result?.info?.software">
+        <div class="data-card flex sm:rounded-lg bg-slate-50 border-slate-200 border mb-10" v-if="this.result?.info?.software">
           <div class="text-slate-800 text-3xl flex-none w-full block py-1 text-center">
             <span>
                 The current date/time in <strong>{{ geo?.city }}</strong> is <strong>{{ getLocalTime }}</strong>
@@ -77,7 +77,7 @@
           </div>
         </div>
 
-        <div class="flex sm:rounded-lg bg-slate-50 border-slate-200 shadow" v-if="this.result?.info?.software">
+        <div class="data-card flex sm:rounded-lg bg-slate-50 border-slate-200 shadow" v-if="this.result?.info?.software">
           <div class="text-clip overflow-ellipsis text-slate-800 text-lg md:text-xl lg:text-3xl flex-none w-full block py-1 text-center">
             It's running <strong>{{ getSoftware }}:{{ result.info.version }}</strong>
           </div>
@@ -90,13 +90,13 @@
           </div>
         </div> -->
 
-        <div class="flex bg-slate-50 border-slate-200 mt-12 shadow" v-if="this.result?.info?.pubkey">
+        <div class="data-card flex bg-slate-50 border-slate-200 mt-12 shadow" v-if="this.result?.info?.pubkey">
           <div class="text-slate-800 w-full text-sm md:text-lg lg:text-3xl overflow-ellipsis flex-none block py-1 text-center">
             <code class="block">{{ this.result?.info.pubkey }}</code>
           </div>
         </div>
 
-        <div class="flex bg-slate-50 border-slate-200 shadow mt-12" v-if="this.result?.info?.pubkey">
+        <div class="data-card flex bg-slate-50 border-slate-200 shadow mt-12" v-if="this.result?.info?.pubkey">
           <div class="text-slate-800 w-full flex-none block py-1 text-center">
             Here's the details...
           </div>
@@ -104,10 +104,10 @@
 
         
 
-        <div class="py-5" v-if="typeof result?.info !== 'undefined'">
-          <div class="overflow-hidden bg-white shadow sm:rounded-lg relative">
+        <div class="py-5" v-if="typeof result?.info !== 'undefined' && Object.keys(result?.info).length">
+          <div class="data-card overflow-hidden bg-white shadow sm:rounded-lg relative">
             <div class="px-4 py-5 sm:px-6">
-              <h3 class="text-lg md:text1xl lg:text-2xl xl:text-3xl">Relay Info <code class="text-gray-300 text-xs absolute top-3 right-3">NIP-11</code></h3>
+              <h3 class="text-lg md:text1xl lg:text-2xl xl:text-3xl">Relay Info</h3>
             </div>
             <div class="border-t border-gray-200 px-4 py-5 sm:p-0">
               <dl class="sm:divide-y sm:divide-gray-200">
@@ -169,7 +169,7 @@
         
 
       <div :class="getGeoWrapperClass">
-        <div  :class="getDnsClass" class="overflow-hidden bg-white shadow sm:rounded-lg mt-8" v-if="geo">
+        <div  :class="getDnsClass" class="data-card overflow-hidden bg-white shadow sm:rounded-lg mt-8" v-if="geo">
           <div class="px-4 py-5 sm:px-6">
             <h3 class="text-lg md:text1xl lg:text-2xl xl:text-3xl">DNS</h3>
           </div>
@@ -183,7 +183,7 @@
           </div>
         </div>
 
-        <div class="overflow-hidden bg-white shadow sm:rounded-lg mt-8"  :class="getGeoClass" v-if="geo">
+        <div class="data-card overflow-hidden bg-white shadow sm:rounded-lg mt-8"  :class="getGeoClass" v-if="geo">
           <div class="px-4 py-5 sm:px-6">
             <h3 class="text-lg md:text1xl lg:text-2xl xl:text-3xl">Geo Data {{geo?.countryCode ? getFlag : ''}}</h3>
           </div>
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 16a63f2..fca29a8 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -3,6 +3,88 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+    --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
+}
+
+body[theme=dark] {
+ 
+}
+
+
+body[theme=dark] {
+  background: #16171d;
+  color: #fff;
+
+  #relays_list_wrapper {
+    @apply bg-black/20 rounded-lg
+  }
+
+  #headlessui-menu-items-3 {
+    background: #16171d;
+    color: #fff;
+    a:hover {
+      @apply bg-white/10
+    }
+  }
+
+  #subsection_nav {
+    @apply bg-transparent
+  }
+
+  #map_control button {
+    background: #16171d;
+    color: #fff;
+
+  }
+
+  table tbody {
+    border-top:1px solid #333 !important;
+  }
+
+  table tbody tr:hover {
+    @apply bg-slate-50/10
+  }
+
+  * {
+    color: #f0f0f0
+  }
+
+  tr, tbody {
+    @apply bg-transparent
+  }
+
+  main {
+    .data-card {
+      * {
+        @apply border-slate-100/10
+      }
+
+      dl > div {
+        @apply border-none
+      }
+
+      @apply bg-slate-50/10 border-none
+    }
+  }
+
+  .leaflet-tile {
+    filter:var(--map-tiles-filter, none);
+  }
+
+  .leaflet-control-attribution {
+    background:#000
+  }
+}
+
+
+
+
+
+
+
+
+
 
 td ul { padding:0; margin:0; list-style: none; }
 td ul li { list-style: none; }
diff --git a/yarn.lock b/yarn.lock
index 75a81c7..395545d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -295,7 +295,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.16.4", "@babel/parser@^7.20.7":
+"@babel/parser@^7.16.4", "@babel/parser@^7.18.4", "@babel/parser@^7.20.7":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.7.tgz#66fe23b3c8569220817d5feb8b9dcdc95bb4f71b"
   integrity sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==
@@ -1556,6 +1556,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/web-bluetooth@^0.0.16":
+  version "0.0.16"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
+  integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
+
 "@types/ws@^8.5.1":
   version "8.5.4"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.4.tgz#bb10e36116d6e570dd943735f86c933c1587b8a5"
@@ -1576,33 +1581,33 @@
     "@types/yargs-parser" "*"
 
 "@unhead/dom@^1.0.9":
-  version "1.0.14"
-  resolved "https://registry.yarnpkg.com/@unhead/dom/-/dom-1.0.14.tgz#8c20133c34f3c01f0725072e1af03e531cb0e735"
-  integrity sha512-AMOOMUNbybHrvtuddy5aEkDibL3grwUCoUT1aHHqfvtEy86t/ftRGKT4T9znx54IxlXN9FnoNpeSOg4D8OP/5w==
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/@unhead/dom/-/dom-1.0.15.tgz#03d65840fa4dea279ad70241e36939aa33ee61c1"
+  integrity sha512-W3P9eGazfQPMZTG4ryb5oOA02Z4o16Jxo8DAihF/7Xmg/FVYY5Up9p9et7Nbb6AKNgt1PEz3Sp0xBaw+F6Uyjw==
   dependencies:
-    "@unhead/schema" "1.0.14"
+    "@unhead/schema" "1.0.15"
 
-"@unhead/schema@1.0.14", "@unhead/schema@^1.0.9":
-  version "1.0.14"
-  resolved "https://registry.yarnpkg.com/@unhead/schema/-/schema-1.0.14.tgz#6ef58241b330ff8ca841f29f915ef6f892b9795e"
-  integrity sha512-eL03X15KvI10igudFkvV1sWUIMcMGQed0qOk+V5fyp036NZLQ5MF9ygyZOKkZ71jbdL8/1Afe8+f2tklc4v8zQ==
+"@unhead/schema@1.0.15", "@unhead/schema@^1.0.9":
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/@unhead/schema/-/schema-1.0.15.tgz#1e0ac9ff3261ce15adfcd69eb323768ce973811a"
+  integrity sha512-aWgHDHcemcx20zZun2hCFvZC6Ob4h14D4puhknuQoMkMOZcxh2ffYoJHb6mS3TeQRwAXCOsSFIHAgwIbayjk0w==
   dependencies:
     "@zhead/schema" "^1.0.9"
     hookable "^5.4.2"
 
 "@unhead/ssr@^1.0.9":
-  version "1.0.14"
-  resolved "https://registry.yarnpkg.com/@unhead/ssr/-/ssr-1.0.14.tgz#b0e2e1b54f6ae0ac39e6f5fff72c748264825114"
-  integrity sha512-ScireDoj8AJenQPi60KjGM21d9RePBqMKOKgJbTMLQIyEC34mssoOYU1r5tOexKZJiWJXzbu5qE+NIwoY8P/yA==
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/@unhead/ssr/-/ssr-1.0.15.tgz#96a9d3cd1c2e583d86553214d4e04622e8063304"
+  integrity sha512-WNFljr+HaWdrBVYyKcgLXIk5EldPSKEVJlFbo2ixmSVGnFlqMHMCui/ZrfMLG1QvvFw0ZkXonapkEc/S6loSCQ==
   dependencies:
-    "@unhead/schema" "1.0.14"
+    "@unhead/schema" "1.0.15"
 
 "@unhead/vue@^1.0.9":
-  version "1.0.14"
-  resolved "https://registry.yarnpkg.com/@unhead/vue/-/vue-1.0.14.tgz#fb5691baa72d0bf1dd963e9233849bdbff2eb26d"
-  integrity sha512-PwJLCSq/eVLbLw7SbMCa20rEeL301w52UG2YhRpQTfsChBMBRGg3Nsl/PPWIurwkBXPpCsVL3AFppaCK5BCJ5Q==
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/@unhead/vue/-/vue-1.0.15.tgz#b5cc91045e101e82276f9966976a608abe61f957"
+  integrity sha512-D2NQH8fBKdYgTdIDrarx24qDEblgLIwzPDeAY36PyP6ib8oG6oaI+5lrpMG+NtQ7k9LBqL5d6mQgYn/02kdjZg==
   dependencies:
-    "@unhead/schema" "1.0.14"
+    "@unhead/schema" "1.0.15"
     hookable "^5.4.2"
 
 "@vue-leaflet/vue-leaflet@0.6.1":
@@ -1869,6 +1874,15 @@
     "@vue/compiler-core" "3.2.45"
     "@vue/shared" "3.2.45"
 
+"@vue/compiler-sfc@2.7.14":
+  version "2.7.14"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz#3446fd2fbb670d709277fc3ffa88efc5e10284fd"
+  integrity sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==
+  dependencies:
+    "@babel/parser" "^7.18.4"
+    postcss "^8.4.14"
+    source-map "^0.6.1"
+
 "@vue/compiler-sfc@3.2.45":
   version "3.2.45"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz#7f7989cc04ec9e7c55acd406827a2c4e96872c70"
@@ -1983,6 +1997,16 @@
   resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
   integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==
 
+"@vueuse/core@9.10.0":
+  version "9.10.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.10.0.tgz#2ef6e55ca773c5b2db1e3f13b8292af96dd32214"
+  integrity sha512-CxMewME07qeuzuT/AOIQGv0EhhDoojniqU6pC3F8m5VC76L47UT18DcX88kWlP3I7d3qMJ4u/PD8iSRsy3bmNA==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.16"
+    "@vueuse/metadata" "9.10.0"
+    "@vueuse/shared" "9.10.0"
+    vue-demi "*"
+
 "@vueuse/head@1.0.22":
   version "1.0.22"
   resolved "https://registry.yarnpkg.com/@vueuse/head/-/head-1.0.22.tgz#66b591d6e4dc636c6578d1c04a96bd6c2e00f3b6"
@@ -1993,6 +2017,18 @@
     "@unhead/ssr" "^1.0.9"
     "@unhead/vue" "^1.0.9"
 
+"@vueuse/metadata@9.10.0":
+  version "9.10.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-9.10.0.tgz#1a5eb94ca755bd8e666505f47da7d88969cffdc7"
+  integrity sha512-G5VZhgTCapzU9rv0Iq2HBrVOSGzOKb+OE668NxhXNcTjUjwYxULkEhAw70FtRLMZc+hxcFAzDZlKYA0xcwNMuw==
+
+"@vueuse/shared@9.10.0":
+  version "9.10.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-9.10.0.tgz#49874a0f9955d28689b3133de660367c63dbc030"
+  integrity sha512-vakHJ2ZRklAzqmcVBL38RS7BxdBA4+5poG9NsSyqJxrt9kz0zX3P5CXMy0Hm6LFbZXUgvKdqAS3pUH1zX/5qTQ==
+  dependencies:
+    vue-demi "*"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -3464,11 +3500,21 @@ csstype@^2.6.8:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
   integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
 
+csstype@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
+  integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
+
 data-uri-to-buffer@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz#b5db46aea50f6176428ac05b73be39a57701a64b"
   integrity sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==
 
+de-indent@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
+
 debug@*, debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
@@ -7417,7 +7463,7 @@ postcss@^7.0.14, postcss@^7.0.36:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.1.10, postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.17, postcss@^8.4.18, postcss@^8.4.19:
+postcss@^8.1.10, postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.14, postcss@^8.4.17, postcss@^8.4.18, postcss@^8.4.19:
   version "8.4.21"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
   integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
@@ -8959,6 +9005,11 @@ vue-router@4.1.6, vue-router@^4.0.0-0:
   dependencies:
     "@vue/devtools-api" "^6.4.5"
 
+vue-router@^3.0.1:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"
+  integrity sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"
@@ -8984,11 +9035,28 @@ vue-tailwind@2.5.1:
     lodash.pick "^4.4.0"
     lodash.range "^3.2.0"
 
+vue-template-compiler@2.7.14:
+  version "2.7.14"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1"
+  integrity sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.2.0"
+
 vue-template-es2015-compiler@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-use@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/vue-use/-/vue-use-0.2.0.tgz#55b94c0e734ef67c191790f3ae51cb17ff83a9db"
+  integrity sha512-5AXDyzSQOSTL5MpiDEDZ9OiBCboM1KhbXFA+zgmrYgdSbZn9ntfBtAKQt4ous8xZOKiGehaNIB6w4qHEQ3kdmg==
+  dependencies:
+    vue "^2.5.16"
+    vue-router "^3.0.1"
+    vuex "^3.0.1"
+
 vue3-storage@0.1.11:
   version "0.1.11"
   resolved "https://registry.yarnpkg.com/vue3-storage/-/vue3-storage-0.1.11.tgz#c92ae70b0d57a1959ba86a7d0178884972b1fc10"
@@ -9000,6 +9068,14 @@ vue3-storage@0.1.11:
     vue-class-component "^8.0.0-0"
     vue-router "^4.0.0-0"
 
+vue@^2.5.16:
+  version "2.7.14"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"
+  integrity sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==
+  dependencies:
+    "@vue/compiler-sfc" "2.7.14"
+    csstype "^3.1.0"
+
 vue@^3.0.0, vue@^3.2.45:
   version "3.2.45"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.45.tgz#94a116784447eb7dbd892167784619fef379b3c8"
@@ -9011,6 +9087,11 @@ vue@^3.0.0, vue@^3.2.45:
     "@vue/server-renderer" "3.2.45"
     "@vue/shared" "3.2.45"
 
+vuex@^3.0.1:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
+  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
+
 watchpack@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"