From 02824b0907f1dc1ddb101239bf2a5129a6ab4680 Mon Sep 17 00:00:00 2001
From: Believethehype <tobias_baur@yahoo.com>
Date: Wed, 31 Jan 2024 15:06:58 +0100
Subject: [PATCH] noogle: better logout screen

---
 ui/noogle/src/app.css               |  2 +-
 ui/noogle/src/components/Nip07.vue  | 56 +++++++++++++++++++++--------
 ui/noogle/src/components/Search.vue |  3 +-
 ui/noogle/tailwind.config.js        |  1 +
 4 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/ui/noogle/src/app.css b/ui/noogle/src/app.css
index 1c567eb..0a16447 100644
--- a/ui/noogle/src/app.css
+++ b/ui/noogle/src/app.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 :root {
-  color-scheme: light dark;
+  color-scheme: light;
   color: rgba(255, 255, 255, 0.87);
   background-color: #242424;
 }
diff --git a/ui/noogle/src/components/Nip07.vue b/ui/noogle/src/components/Nip07.vue
index 19f2cfc..7ca869e 100644
--- a/ui/noogle/src/components/Nip07.vue
+++ b/ui/noogle/src/components/Nip07.vue
@@ -1,8 +1,28 @@
 <template>
+<!--<label class="swap swap-rotate">
 
+  <input type="checkbox" class="theme-controller" value="synthwave"  @click="toggleDark()" />
+
+  <svg class="swap-on fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/></svg>
+
+  <svg class="swap-off fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/></svg>
+
+</label> -->
   <div>
      <div class="playeauthor-wrapper" v-if="current_user">
-        <img class="avatar" @click="sign_out()" :src="this.avatar" alt="" />
+
+        <div className="dropdown">
+          <div tabIndex={0} role="button" class="button" >
+              <img class="avatar"  :src="this.avatar" alt="" />
+          </div>
+      <div tabIndex={0} className="dropdown-content -start-44 z-[1] horizontal card card-compact w-64 p-2 shadow bg-primary text-primary-content">
+        <div className="card-body">
+          <h3 className="card-title">Sign out of your account</h3>
+          <!--<p>Sign out</p> -->
+          <button className="btn" @click="sign_out()">Sign Out</button>
+        </div>
+      </div>
+    </div>
          <p>{{ this.current_user }}</p>
      </div>
 
@@ -13,7 +33,7 @@
         <div className="card-body">
           <h3 className="card-title">Nip07 Login</h3>
           <p>Use a Browser Nip07 Extension like getalby or nos2x to login</p>
-          <button className="btn" @click="sign_in_nip07()">Nip07 Sign in</button>
+         <button className="btn" @click="sign_in_nip07()">Browser Extension</button>
         </div>
       </div>
     </div>
@@ -38,24 +58,23 @@ import store from '../store';
 import Nip89 from "@/components/Nip89.vue";
 import miniToastr from "mini-toastr";
 import deadnip89s from "@/components/data/deadnip89s.json";
+import {useDark, useToggle} from "@vueuse/core";
+const isDark = useDark();
+//const toggleDark = useToggle(isDark);
+
+
+
 let nip89dvms = []
-let logger = false
+let logger = true
 export default {
    data() {
     return {
       current_user: "",
       avatar: "",
       signer: "",
-      isdark: JSON.parse(localStorage.getItem('isdark')) || false,
 
     };
   },
-  watch: {
-    isdark: function (newVal) {
-      localStorage.setItem('isdark', JSON.stringify(newVal));
-    },
-  },
-
 
   async mounted() {
      try{
@@ -76,9 +95,18 @@ export default {
   },
 
   methods: {
-     handleCheckboxChange() {
-      this.isdark = !this.isdark;
+
+    toggleDark(){
+       isDark.value = !isDark.value
+       useToggle(isDark);
+       console.log(isDark.value)
+      if (localStorage.isDark === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          document.documentElement.classList.add('dark')
+        } else {
+          document.documentElement.classList.remove('dark')
+        }
     },
+
     async sign_in_anon() {
       try {
          await loadWasmAsync();
@@ -267,9 +295,9 @@ export default {
 
     async sign_out(){
       this.current_user = ""
-      await this.state.client.shutdown();
-      localStorage.setItem('nostr-key-method', "")
+      localStorage.setItem('nostr-key-method', "anon")
       localStorage.setItem('nostr-key', "")
+      await this.state.client.shutdown();
       await this.sign_in_anon()
     }
   },
diff --git a/ui/noogle/src/components/Search.vue b/ui/noogle/src/components/Search.vue
index e6064f7..9a5a633 100644
--- a/ui/noogle/src/components/Search.vue
+++ b/ui/noogle/src/components/Search.vue
@@ -408,8 +408,7 @@ defineProps({
 
   width: 350px;
   height: 48px;
-  //color: white;
-  //background: black;
+
 }
 
 .logo {
diff --git a/ui/noogle/tailwind.config.js b/ui/noogle/tailwind.config.js
index bb31a7a..dadc6a9 100644
--- a/ui/noogle/tailwind.config.js
+++ b/ui/noogle/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+    darkMode: "class",
     content: [
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",