Display issues round 1 (#223)

* fix some things in dark mode

* fix favorites -> relayt list when favorites are selected before opening editor

Co-authored-by: dskvr <dskvr@users.noreply.github.com>

src/components/relays/blocks/MapSummary.vue

@@ -59,6 +59,12 @@
   
 </template>
 
+<style>
+.leaflet-popup-content-wrapper {
+  @apply dark:bg-black/80
+}
+</style>
+
 <script>
 import { defineComponent, toRefs } from 'vue'
 import "leaflet/dist/leaflet.css"

src/components/relays/blocks/RelaysResultTable.vue

@@ -33,21 +33,16 @@
                             pin favorites
                           </label>
                         </span>
-                      </th>
 
-                      <th v-if="store.layout.editorIsExpanded && isLoggedIn" scope="col" class="w-16 hidden md:table-cell lg:table-cell xl:table-cell verified">
+                        <!-- <span v-if="isLoggedIn && store.user.kind3" class="ml-6 text-slate-600">
-                        <!-- <span class="verified-shape-wrapper">
+                          <input type="checkbox" @click="handleMine()" class=" cursor-pointer relative top-0.5 mr-1" id="relays-pin-favorites" v-model="store.prefs.mine" /> 
-                          <span class="shape verified"></span>
+                          <label class="cursor-pointer font-thin text-xs" for="relays-pin-favorites">
+                            only mine
+                          </label>
                         </span> -->
-                        <code class="text-xs block">Read</code>
                       </th>
 
-                      <th v-if="store.layout.editorIsExpanded && isLoggedIn" scope="col" class="w-16 hidden md:table-cell lg:table-cell xl:table-cell verified">
+                     
-                        <!-- <span class="verified-shape-wrapper">
-                          <span class="shape verified"></span>
-                        </span> -->
-                        <code class="text-xs block">Write</code>
-                      </th>
                       
                       <!-- <th scope="col" class="relative py-3.5 pl-0 pr-0 sm:pr-0" v-if="isLoggedIn()">
                         <code class="text-xs block">Upvote</code>
@@ -58,10 +53,10 @@
                         </span> -->
                         <code class="text-xs block">NIP-11</code>
                       </th>
-                      <th v-if="!store.layout.editorIsExpanded || !isLoggedIn" scope="col" class="location text-center" v-tooltip:top.tooltip="'Detected location of Relay'">
+                      <th scope="col" class="location text-center" v-tooltip:top.tooltip="'Detected location of Relay'">
                         <code class="text-xs block">Location</code>
                       </th>
-                      <th v-if="!store.layout.editorIsExpanded || !isLoggedIn" scope="col" class="latency text-center" v-tooltip:top.tooltip="'Relay Latency on Read'">
+                      <th scope="col" class="latency text-center" v-tooltip:top.tooltip="'Relay Latency on Read'">
                         <code class="text-xs block">Latency</code>
                       </th>
                       <th v-if="!store.layout.editorIsExpanded || !isLoggedIn" scope="col" class="hidden md:table-cell lg:table-cell xl:table-cell connect text-center" v-tooltip:top.tooltip="'Relay connection status'">
@@ -73,6 +68,21 @@
                       <th v-if="!store.layout.editorIsExpanded && isLoggedIn" scope="col" class="hidden md:table-cell lg:table-cell xl:table-cell write text-center" v-tooltip:top.tooltip="'Relay write status'">
                         <code class="text-xs block">Write</code>
                       </th>
+
+                      <th v-if="store.layout.editorIsExpanded && isLoggedIn" scope="col" class="w-16 hidden md:table-cell lg:table-cell xl:table-cell verified">
+                        <!-- <span class="verified-shape-wrapper">
+                          <span class="shape verified"></span>
+                        </span> -->
+                        <code class="text-xs block">Read</code>
+                      </th>
+
+                      <th v-if="store.layout.editorIsExpanded && isLoggedIn" scope="col" class="w-16 hidden md:table-cell lg:table-cell xl:table-cell verified">
+                        <!-- <span class="verified-shape-wrapper">
+                          <span class="shape verified"></span>
+                        </span> -->
+                        <code class="text-xs block">Write</code>
+                      </th>
+
                       <th scope="col" class="relative py-3.5 pl-0 pr-0 sm:pr-0">
                         <code class="text-xs block">Favorite</code>
                       </th>
@@ -108,11 +118,11 @@
                         </span>
                       </td>
 
-                      <td v-if="!store.layout.editorIsExpanded || !isLoggedIn" class="w-24 location text-center">
+                      <td class="w-24 location text-center">
                         {{ getFlag(relay) }}
                       </td>
 
-                      <td v-if="!store.layout.editorIsExpanded || !isLoggedIn" class="w-24 latency text-center">
+                      <td class="w-24 latency text-center">
                         <span>{{ results[relay]?.latency?.final }}<span v-if="results[relay]?.check?.latency">ms</span></span>
                       </td>
 
@@ -206,8 +216,9 @@
                 </table>
             </div>
           </div>
-          <div class="text-xl block min-w-full align-middle py-8 bg-slate-100 rounded-lg" v-if="!store.relays.getFavorites.length && subsection == 'favorite'">
+          <div class="text-xl block min-w-full align-middle py-8 light:bg-slate-100 rounded-lg" v-if="!store.relays.getFavorites.length && subsection == 'favorite'">
             You have not selected any favorites. To select a favorite, click the heart emoji next to any relay in a relays list. 
+            Alternatively, sign-in to sync your relays list. If you do not see a sign-in, download a NIP-04 compatible extension like nos2x or Alby
           </div>
       </div>
       </div>
@@ -235,6 +246,12 @@
     setRandomRelay(){
       this.randomRelay = this.store.relays.getShuffledPublic[0]
     },
+    handleMine(){
+      setTimeout( () => {
+        if(this.store.prefs.mine)
+          this.store.layout.setActive('relays/find', 'favorite')
+      },1)
+    },
     async likeRelay(relay){
       const id = this.store.relays.getCanonical(relay)
       const event = {

src/components/relays/nav/RelaysFindNav.vue

@@ -20,7 +20,7 @@
       </div>
       <div class="flex justify-center md:hidden lg:hidden">
         <!-- Mobile menu button -->
-        <DisclosureButton class="inline-flex items-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+        <DisclosureButton class="inline-flex items-center rounded-md p-2 text-gray-400 hover:bg-gray-100 dark:hover:bg-black/50 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
           <span>Menu</span>
           <Bars3Icon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
           <XMarkIcon v-else class="block h-6 w-6" aria-hidden="true" />
@@ -41,7 +41,7 @@
           class="block border-l-4 border-indigo-500 bg-indigo-50 py-2 pl-3 pr-4 text-base font-medium text-indigo-700">
           {{  item.name  }}
       </DisclosureButton>
-      <!-- :class="[isActive(item) ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900', 'group flex items-center px-3 py-2 text-sm font-medium']"  -->
+      <!-- :class="[isActive(item) ? 'bg-gray-100 text-gray-900 dark:bg-black/50' : 'text-gray-600 hover:bg-gray-50 hover:bg-black/50 hover:text-gray-900', 'group flex items-center px-3 py-2 text-sm font-medium']"  -->
   </div>
   </DisclosurePanel>
 </Disclosure>
@@ -105,10 +105,11 @@ computed: {
       // //console.log('active?', this.contentIsActive(slug), this.isActive(slug), this.store.layout.getActive('relays/find'), this.store.layout.getActiveItem == slug)
       return { 
         // 'opacity-10' : this.store.layout.editorExpanded,
+        'dark:hover:bg-black/80 dark:text-white/80': true,
         'py-1 px-2': this.store.prefs.getTheme === 'compact',
         'text-lg py-2 px-3': this.store.prefs.getTheme === 'comfortable',
         'text-xl py-3 px-4': this.store.prefs.getTheme === 'spacious',
-        'bg-slate-800 text-white hover:text-white hover:bg-slate-800': this.contentIsActive(slug),
+        'bg-slate-800 text-white hover:text-white dark:hover:bg-black/80 dark:bg-black/50': this.contentIsActive(slug),
         'text-gray-600 hover:bg-gray-50 hover:text-gray-900': !this.contentIsActive(slug),
       }
     }

src/components/relays/partials/NostrSync.vue

@@ -120,24 +120,25 @@ export default defineComponent({
   methods: Object.assign(RelaysLib, {
     toggleEditor: async function(){
       this.store.layout.toggleEditor()
-      if(this.store.layout.editorExpanded)
+      this.queueKind3('user/relay/list')
-        this.queueJob(
+      // if(this.store.layout.editorExpanded)
-          'user/relay/list',
+      //   this.queueJob(
-          async () => {
+      //     'user/relay/list',
-            await this.store.user.setKind3()
+      //     async () => {
-              .then( () => {
+      //       await this.store.user.setKind3()
-                Object.keys(this.store.user.kind3).forEach( key => {
+      //         .then( () => {
-                  this.store.relays.setFavorite(key)
+      //           Object.keys(this.store.user.kind3).forEach( key => {
-                })
+      //             this.store.relays.setFavorite(key)
-                this.store.tasks.completeJob()
+      //           })
-              })
+      //           this.store.tasks.completeJob()
-              .catch( err => {
+      //         })
-                console.error('error!', err)
+      //         .catch( err => {
-                this.store.tasks.completeJob()
+      //           console.error('error!', err)
-              })
+      //           this.store.tasks.completeJob()
-          },
+      //         })
-          true
+      //     },
-        )
+      //     true
+      //   )
     },
     persistChanges: async function(){
       const event = {

src/shared/relays-lib.js

@@ -8,6 +8,11 @@ export default {
       async () => {
         await this.store.user.setKind3()
           .then( () => {
+            this.store.relays.getFavorites.forEach( relay => {
+              if(this.store.user?.kind3?.[relay])
+                return 
+              this.store.user.kind3[relay] = { read: false, write: false }
+            })
             Object.keys(this.store.user.kind3).forEach( key => {
               this.store.relays.setFavorite(key)
             })