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>
2023-08-28 18:15:00 +05:30
parent 8499ac7fec
commit 0eacd6763b
5 changed files with 72 additions and 41 deletions
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -653,11 +653,12 @@
      "chat": "Chat with support",
      "open_docs": "Read Documentation",
      "open_keybindings": "Keyboard shortcuts",
+      "open_github": "Open GitHub repository",
      "social": "Social",
      "title": "General"
    },
    "miscellaneous": {
-      "invite": "Invite people to Hoppscotch",
+      "invite": "Invite your friends to Hoppscotch",
      "title": "Miscellaneous"
    },
    "request": {
@@ -679,25 +680,25 @@
    "environments": {
      "new": "Create new environment",
      "new_variable": "Create a new environment variable",
-      "edit": "Edit selected environment",
-      "delete": "Delete selected environment",
-      "duplicate": "Duplicate selected environment",
+      "edit": "Edit current environment",
+      "delete": "Delete current environment",
+      "duplicate": "Duplicate current environment",
      "edit_global": "Edit global environment",
      "duplicate_global": "Duplicate global environment",
      "title": "Environments"
    },
    "workspace": {
      "new": "Create new team",
-      "edit": "Edit selected team",
-      "delete": "Delete selected team",
+      "edit": "Edit current team",
+      "delete": "Delete current team",
      "invite": "Invite people to team",
-      "switch_to_personal": "Switch to personal workspace",
+      "switch_to_personal": "Switch to your personal workspace",
      "title": "Teams"
    },
    "tab": {
-      "duplicate": "Duplicate tab",
+      "duplicate": "Duplicate current tab",
      "close_current": "Close current tab",
-      "close_others": "Close other tabs",
+      "close_others": "Close all other tabs",
      "new_tab": "Open a new tab",
      "title": "Tabs"
    },
@@ -710,15 +711,15 @@
    "change_language": "Change Language",
    "settings": {
      "theme": {
-        "black": "Black Mode",
-        "dark": "Dark Mode",
-        "light": "Light Mode",
-        "system": "System Mode"
+        "black": "Black",
+        "dark": "Dark",
+        "light": "Light",
+        "system": "System preference"
      },
      "font": {
-        "size_sm": "Change to Small",
-        "size_md": "Change to Medium",
-        "size_lg": "Change to Large"
+        "size_sm": "Small",
+        "size_md": "Medium",
+        "size_lg": "Large"
      },
      "change_interceptor": "Change Interceptor",
      "change_language": "Change Language"
--- a/packages/hoppscotch-common/src/services/inspection/tests/index.spec.ts
+++ b/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", () => {
--- a/packages/hoppscotch-common/src/services/spotlight/searchers/general.searcher.ts
+++ b/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"),
    },
--- a/packages/hoppscotch-common/src/services/spotlight/searchers/settings.searcher.ts
+++ b/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: [
--- a/packages/hoppscotch-common/src/services/spotlight/searchers/tab.searcher.ts
+++ b/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),
    },
  })