chore: improved command labels and icons (#3295)

* chore: improved command labels and icons

* chore: fix tests

---------

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-common/src/services/inspection/__tests__/index.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect } from "vitest"
 import { Inspector, InspectionService, InspectorResult } from "../"
 import { TestContainer } from "dioc/testing"
+import { ref } from "vue"
 
 const inspectorResultMock: InspectorResult[] = [
   {
@@ -21,7 +22,7 @@ const inspectorResultMock: InspectorResult[] = [
 
 const testInspector: Inspector = {
   inspectorID: "inspector1",
-  getInspectorFor: () => inspectorResultMock,
+  getInspections: () => ref(inspectorResultMock),
 }
 
 describe("InspectionService", () => {

packages/hoppscotch-common/src/services/spotlight/searchers/general.searcher.ts

@@ -9,9 +9,9 @@ import {
 
 import IconLinkedIn from "~icons/brands/linkedin"
 import IconTwitter from "~icons/brands/twitter"
-import IconBook from "~icons/lucide/book"
-import IconDiscord from "~icons/lucide/link"
+import IconDiscord from "~icons/brands/discord"
 import IconGitHub from "~icons/lucide/github"
+import IconBook from "~icons/lucide/book"
 import IconLifeBuoy from "~icons/lucide/life-buoy"
 import IconZap from "~icons/lucide/zap"
 
@@ -61,9 +61,9 @@ export class GeneralSpotlightSearcherService extends StaticSpotlightSearcherServ
         invokeAction("flyouts.keybinds.toggle")
       },
     },
-    link_github: {
-      text: [this.t("spotlight.general.social"), "GitHub"],
-      alternates: ["social", "github", "link"],
+    open_github: {
+      text: this.t("spotlight.general.open_github"),
+      alternates: ["repository", "github", "documentation", "hoppscotch"],
       icon: markRaw(IconGitHub),
       action: () => this.openURL("https://hoppscotch.io/github"),
     },

packages/hoppscotch-common/src/services/spotlight/searchers/settings.searcher.ts

@@ -14,11 +14,11 @@ import IconGlobe from "~icons/lucide/globe"
 import IconMonitor from "~icons/lucide/monitor"
 import IconMoon from "~icons/lucide/moon"
 import IconSun from "~icons/lucide/sun"
-import IconType from "~icons/lucide/type"
+import IconCircle from "~icons/lucide/circle"
+import IconCheckCircle from "~icons/lucide/check-circle"
 
 type Doc = {
   text: string | string[]
-  excludeFromSearch?: boolean
   alternates: string[]
   icon: object | Component
 }
@@ -35,6 +35,7 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
   private t = getI18n()
 
   private activeFontSize = useSetting("FONT_SIZE")
+  private activeTheme = useSetting("BG_COLOR")
 
   public readonly searcherID = "settings"
   public searcherSectionTitle = this.t("navigation.settings")
@@ -48,7 +49,11 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
         this.t("spotlight.settings.theme.system"),
       ],
       alternates: ["theme"],
-      icon: markRaw(IconMonitor),
+      icon: computed(() =>
+        this.activeTheme.value === "system"
+          ? markRaw(IconCheckCircle)
+          : markRaw(IconMonitor)
+      ),
     },
     theme_light: {
       text: [
@@ -56,7 +61,11 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
         this.t("spotlight.settings.theme.light"),
       ],
       alternates: ["theme"],
-      icon: markRaw(IconSun),
+      icon: computed(() =>
+        this.activeTheme.value === "light"
+          ? markRaw(IconCheckCircle)
+          : markRaw(IconSun)
+      ),
     },
     theme_dark: {
       text: [
@@ -64,7 +73,11 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
         this.t("spotlight.settings.theme.dark"),
       ],
       alternates: ["theme"],
-      icon: markRaw(IconCloud),
+      icon: computed(() =>
+        this.activeTheme.value === "dark"
+          ? markRaw(IconCheckCircle)
+          : markRaw(IconCloud)
+      ),
     },
     theme_black: {
       text: [
@@ -72,7 +85,11 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
         this.t("spotlight.settings.theme.black"),
       ],
       alternates: ["theme"],
-      icon: markRaw(IconMoon),
+      icon: computed(() =>
+        this.activeTheme.value === "black"
+          ? markRaw(IconCheckCircle)
+          : markRaw(IconMoon)
+      ),
     },
     font_size_sm: {
       text: [
@@ -82,42 +99,51 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
       onClick: () => {
         console.log("clicked")
       },
-      excludeFromSearch: computed(() => this.activeFontSize.value === "small"),
       alternates: [
         "font size",
         "change font size",
         "change font",
         "increase font",
       ],
-      icon: markRaw(IconType),
+      icon: computed(() =>
+        this.activeFontSize.value === "small"
+          ? markRaw(IconCheckCircle)
+          : markRaw(IconCircle)
+      ),
     },
     font_size_md: {
       text: [
         this.t("settings.font_size"),
         this.t("spotlight.settings.font.size_md"),
       ],
-      excludeFromSearch: computed(() => this.activeFontSize.value === "medium"),
       alternates: [
         "font size",
         "change font size",
         "change font",
         "increase font",
       ],
-      icon: markRaw(IconType),
+      icon: computed(() =>
+        this.activeFontSize.value === "medium"
+          ? markRaw(IconCheckCircle)
+          : markRaw(IconCircle)
+      ),
     },
     font_size_lg: {
       text: [
         this.t("settings.font_size"),
         this.t("spotlight.settings.font.size_lg"),
       ],
-      excludeFromSearch: computed(() => this.activeFontSize.value === "large"),
       alternates: [
         "font size",
         "change font size",
         "change font",
         "increase font",
       ],
-      icon: markRaw(IconType),
+      icon: computed(() =>
+        this.activeFontSize.value === "large"
+          ? markRaw(IconCheckCircle)
+          : markRaw(IconCircle)
+      ),
     },
     change_lang: {
       text: [

packages/hoppscotch-common/src/services/spotlight/searchers/tab.searcher.ts

@@ -15,7 +15,10 @@ import {
   currentTabID,
   getActiveTabs,
 } from "~/helpers/rest/tab"
-import IconWindow from "~icons/lucide/app-window"
+import IconCopy from "~icons/lucide/copy"
+import IconCopyPlus from "~icons/lucide/copy-plus"
+import IconXCircle from "~icons/lucide/x-circle"
+import IconXSquare from "~icons/lucide/x-square"
 import { invokeAction } from "~/helpers/actions"
 
 type Doc = {
@@ -50,29 +53,29 @@ export class TabSpotlightSearcherService extends StaticSpotlightSearcherService<
     duplicate_tab: {
       text: this.t("spotlight.tab.duplicate"),
       alternates: ["tab", "duplicate", "duplicate tab"],
-      icon: markRaw(IconWindow),
+      icon: markRaw(IconCopy),
       excludeFromSearch: computed(() => !this.showAction.value),
     },
     close_current_tab: {
       text: this.t("spotlight.tab.close_current"),
       alternates: ["tab", "close", "close tab"],
-      icon: markRaw(IconWindow),
+      icon: markRaw(IconXCircle),
       excludeFromSearch: computed(
-        () => !this.showAction.value ?? getActiveTabs().value.length === 1
+        () => !this.showAction.value || getActiveTabs().value.length === 1
       ),
     },
     close_other_tabs: {
       text: this.t("spotlight.tab.close_others"),
       alternates: ["tab", "close", "close all"],
-      icon: markRaw(IconWindow),
+      icon: markRaw(IconXSquare),
       excludeFromSearch: computed(
-        () => !this.showAction.value ?? getActiveTabs().value.length < 2
+        () => !this.showAction.value || getActiveTabs().value.length < 2
       ),
     },
     open_new_tab: {
       text: this.t("spotlight.tab.new_tab"),
       alternates: ["tab", "new", "open tab"],
-      icon: markRaw(IconWindow),
+      icon: markRaw(IconCopyPlus),
       excludeFromSearch: computed(() => !this.showAction.value),
     },
   })