small tweaks

cheshire-cat-ai · Oct 14, 2024 · 765db50 · 765db50
1 parent 27475e6
commit 765db50
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 53 deletions.
diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
@@ -324,6 +324,13 @@
     "storeRouteMapping": true,
     "useClipboardItems": true,
     "markdown": true,
-    "usePerms": true
+    "usePerms": true,
+    "DirectiveBinding": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "onWatcherCleanup": true,
+    "useId": true,
+    "useModel": true,
+    "useTemplateRef": true
   }
 }
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
@@ -91,6 +91,7 @@ declare global {
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
   const provideLocal: typeof import('@vueuse/core')['provideLocal']
@@ -206,6 +207,7 @@ declare global {
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useId: typeof import('vue')['useId']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
@@ -222,6 +224,7 @@ declare global {
   const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
   const useMemoize: typeof import('@vueuse/core')['useMemoize']
   const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useModel: typeof import('vue')['useModel']
   const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -270,6 +273,7 @@ declare global {
   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
   const useSupported: typeof import('@vueuse/core')['useSupported']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
   const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']

diff --git a/components.d.ts b/components.d.ts
@@ -17,6 +17,7 @@ declare module 'vue' {
     HeroiconsAdjustmentsVertical: typeof import('~icons/heroicons/adjustments-vertical')['default']
     HeroiconsArrowDown20Solid: typeof import('~icons/heroicons/arrow-down20-solid')['default']
     HeroiconsArrowPath: typeof import('~icons/heroicons/arrow-path')['default']
+    HeroiconsArrowRightOnRectangle: typeof import('~icons/heroicons/arrow-right-on-rectangle')['default']
     HeroiconsBars3Solid: typeof import('~icons/heroicons/bars3-solid')['default']
     HeroiconsBoltSolid: typeof import('~icons/heroicons/bolt-solid')['default']
     HeroiconsChevronUpDown20Solid: typeof import('~icons/heroicons/chevron-up-down20-solid')['default']
@@ -33,7 +34,6 @@ declare module 'vue' {
     HeroiconsMagnifyingGlass20Solid: typeof import('~icons/heroicons/magnifying-glass20-solid')['default']
     HeroiconsMicrophoneSolid: typeof import('~icons/heroicons/microphone-solid')['default']
     HeroiconsMoonSolid: typeof import('~icons/heroicons/moon-solid')['default']
-    'HeroiconsOutline:logout': typeof import('~icons/heroicons-outline/logout')['default']
     HeroiconsPaperAirplaneSolid: typeof import('~icons/heroicons/paper-airplane-solid')['default']
     HeroiconsSunSolid: typeof import('~icons/heroicons/sun-solid')['default']
     HeroiconsTrashSolid: typeof import('~icons/heroicons/trash-solid')['default']

diff --git a/src/components/UserDropdown.vue b/src/components/UserDropdown.vue
@@ -4,12 +4,8 @@ import githubLight from 'highlight.js/styles/github.css?raw'
 import githubDark from 'highlight.js/styles/github-dark.css?raw'
 
 const store = useMainStore()
-console.log('jwtPayload store', store.jwtPayload)
-console.log('cookie store', store.cookie)
-console.log('document cookie', document.cookie)
-const { toggleDark } = store
-const { logoutCurrentUser } = store
-const { isDark } = storeToRefs(store)
+const { logoutCurrentUser, toggleDark } = store
+const { isDark, jwtPayload } = storeToRefs(store)
 const { css } = useStyleTag(isDark.value ? githubDark : githubLight)
 
 watchEffect(() => {
@@ -18,49 +14,38 @@ watchEffect(() => {
 </script>
 
 <template>
-    <div class="dropdown dropdown-bottom">
-    <button class="btn btn-circle btn-ghost">
-      <heroicons-user-solid class="size-6" />
-    </button>
-      <ul tabindex="0" class="text-sm dropdown-content join join-vertical !right-0 z-10 mt-6 w-48 p-0">
-        <li>
-          <button
-					class="btn join-item w-full flex-nowrap px-2 text-left font-small opacity-100 pointer-events-none cursor-not-allowed">
-          <span class="grow text-right">
-            <span class="opacity-60">Signed in as</span> {{ store.jwtPayload?.username }}
-          </span>
-          </button>
-        </li>
-        <li>
-          <button
-					class="btn join-item w-full flex-nowrap px-2 text-left font-small"
-          @click="toggleDark()">
-					<span class="grow text-right">
-            Change Theme
-          </span>
-          <span class="rounded-lg p-1">
-            <button class="swap opacity-50">
-              <input v-model="isDark" type="checkbox" class="modal-toggle" />
-              <heroicons-sun-solid class="swap-on size-5" />
-              <heroicons-moon-solid class="swap-off size-5" />
-            </button>
+	<div class="dropdown dropdown-bottom">
+		<button class="btn btn-circle btn-ghost">
+			<heroicons-user-solid class="size-6" />
+		</button>
+		<ul tabindex="0" class="dropdown-content join join-vertical !right-0 z-10 mt-6 w-40 p-0 text-sm">
+			<li>
+				<button class="font-small btn join-item pointer-events-none w-full cursor-not-allowed flex-nowrap px-2 text-left opacity-100">
+					<span class="grow text-right"> <span class="opacity-60">Signed in as</span> {{ jwtPayload?.username }} </span>
+				</button>
+			</li>
+			<li>
+				<button class="font-small btn join-item w-full flex-nowrap px-2 text-left" @click="toggleDark()">
+					<span class="grow text-right"> Change Theme </span>
+					<span class="rounded-lg p-1">
+						<button class="swap opacity-50">
+							<input v-model="isDark" type="checkbox" class="modal-toggle" />
+							<heroicons-sun-solid class="swap-on size-5" />
+							<heroicons-moon-solid class="swap-off size-5" />
+						</button>
 					</span>
-          </button>
-        </li>
-        <li>
-          <button
-					class="btn join-item w-full flex-nowrap px-2 text-right font-small"
-          @click="logoutCurrentUser()">
-					<span class="grow text-right">
-            Logout
-          </span>
-          <span class="rounded-lg p-1">
-            <button class="opacity-50" @click="logoutCurrentUser()">
-              <heroicons-outline:logout class="size-5" />
-            </button>
+				</button>
+			</li>
+			<li>
+				<button class="font-small btn join-item w-full flex-nowrap px-2 text-right" @click="logoutCurrentUser()">
+					<span class="grow text-right"> Logout </span>
+					<span class="rounded-lg p-1">
+						<button class="opacity-50" @click="logoutCurrentUser()">
+							<heroicons-arrow-right-on-rectangle class="size-5" />
+						</button>
 					</span>
-          </button>
-        </li>
-      </ul>
-    </div>
+				</button>
+			</li>
+		</ul>
+	</div>
 </template>
diff --git a/src/stores/useMainStore.ts b/src/stores/useMainStore.ts
@@ -7,7 +7,6 @@ import { createMongoAbility } from '@casl/ability'
 
 import { instantiateApiClient } from '@services/ApiService'
 import LogService from '@services/LogService'
-import type { LocationQueryRaw } from 'vue-router'
 
 interface Filter {
 	[k: string]: {
@@ -88,7 +87,7 @@ export const useMainStore = defineStore('main', () => {
 		const cookies = useCookies().getAll()
 		Object.keys(cookies).forEach(key => delete cookies[key])
 		cookie.value = ''
-		// find different solution for this redirect, maybe having a LoginView and moving login page to frontend is an idea
+		// TODO: find different solution for this redirect, maybe having a LoginView and moving login page to frontend is an idea
 		window.location.href = window.location.origin + '/auth/login'
 	}