feat: add settings page

src/components/CommandPalette/CommandPaletteContext.tsx

@@ -5,13 +5,11 @@ import { JSX } from "solid-js/jsx-runtime";
 import { onMount } from "solid-js";
 
 export interface ActionsContext {
-  showThemeSwitcher: () => void;
   [key: string]: any;
 }
 
 export const CommandPaletteContext = (props: { children: JSX.Element }) => {
   const {
-    appService: { toggleThemeSwitcher, appStore },
     connectionsService: {
       addContentTab,
       removeContentTab,
@@ -21,13 +19,7 @@ export const CommandPaletteContext = (props: { children: JSX.Element }) => {
     },
   } = useAppSelector();
 
-  const actionsContext: ActionsContext = {
-    showThemeSwitcher() {
-      toggleThemeSwitcher();
-      if (appStore.showThemeSwitcher)
-        document.getElementById("theme-switch")?.focus();
-    },
-  };
+  const actionsContext: ActionsContext = {};
 
   onMount(() => {
     document.onkeyup = function(e: KeyboardEvent) {

src/components/CommandPalette/actions.ts

@@ -1,23 +1,14 @@
 import { createEmitter } from "@solid-primitives/event-bus";
 import { defineAction } from "solid-command-palette";
 import { t } from "utils/i18n";
-import { ActionsContext } from "./CommandPaletteContext";
 
 export const commandPaletteEmitter = createEmitter<{
   "focus-query-text-area": boolean;
   "next-result-set": undefined;
   "prev-result-set": undefined;
-  "execute": undefined;
+  execute: undefined;
 }>();
 
-const showThemeSwitcher = defineAction({
-  id: "toggle_theme_switcher",
-  title: t("command_palette.toggle_theme_switcher"),
-  run: ({ rootContext }) => {
-    (rootContext as ActionsContext).showThemeSwitcher();
-  },
-});
-
 const focusOn = defineAction({
   id: "focus_on",
   title: t("command_palette.focus_on"),
@@ -35,7 +26,6 @@ const focusQueryTextArea = defineAction({
 });
 
 export const actions = {
-  [showThemeSwitcher.id]: showThemeSwitcher,
   [focusQueryTextArea.id]: focusQueryTextArea,
   [focusOn.id]: focusOn,
 };

src/components/Screens/Main.tsx

@@ -1,39 +1,48 @@
 import { Alerts } from "components/UI";
-import { CloseIcon } from "components/UI/Icons";
-import { ThemeSwitch } from "components/UI/ThemeSwitch";
+import { CloseIcon, HomeIcon, QuestionMark } from "components/UI/Icons";
 import { useAppSelector } from "services/Context";
-import { For, Match, Show, Switch } from "solid-js";
+import { createSignal, For, Match, Show, Switch } from "solid-js";
 import { Console } from "./Console/Console";
 import { Home } from "./Home/Home";
+import { Settings } from "./Settings/Settings";
 
 export const Main = () => {
   const {
     connectionsService: {
       removeConnectionTab,
-      clearStore,
       connectionStore,
       setConnectionStore,
     },
   } = useAppSelector();
 
+  const [showSettings, setShowSettings] = createSignal(false);
+
   return (
     <div class="w-full h-full flex flex-col">
       <div class="px-2 pt-2 bg-base-300 rounded-none gap-2 flex justify-between items-center">
         <div class="tabs tabs-boxed gap-2">
           <button
-            onClick={() => setConnectionStore("idx", 0)}
-            class="tab tab-sm pt-1"
+            onClick={() => {
+              setShowSettings(false);
+              setConnectionStore("idx", 0);
+            }}
+            class="tab tab-md"
             tabIndex={0}
             classList={{ "tab-active": connectionStore.idx === 0 }}
           >
-            <span class="text-md font-bold">Home</span>
+            <span class="text-md font-bold">
+              <HomeIcon />
+            </span>
           </button>
           <For each={connectionStore.tabs}>
             {(tab, idx) => (
               <div class="flex items-center">
                 <button
-                  onClick={() => setConnectionStore("idx", idx() + 1)}
-                  class="tab tab-sm pt-1"
+                  onClick={() => {
+                    setShowSettings(false);
+                    setConnectionStore("idx", idx() + 1);
+                  }}
+                  class="tab tab-md pt-1"
                   classList={{
                     "tab-active": connectionStore.idx === idx() + 1,
                   }}
@@ -55,19 +64,28 @@ export const Main = () => {
           </For>
         </div>
         <div>
-          {/*
-           */}
-          <button onClick={async () => await clearStore()}>Reset store</button>
-          <ThemeSwitch />
+          <button
+            class="btn btn-square btn-ghost btn-sm"
+            onClick={() => setShowSettings((s) => !s)}
+          >
+            <QuestionMark />
+          </button>
         </div>
       </div>
-      <div class="flex-1 overflow-hidden">
+      <div class="flex-1 overflow-hidden flex">
         <Switch>
-          <Match when={connectionStore.idx === 0}>
-            <Home />
+          <Match when={showSettings()}>
+            <Settings />
           </Match>
-          <Match when={connectionStore.idx !== 0}>
-            <Console />
+          <Match when={!showSettings()}>
+            <Switch>
+              <Match when={connectionStore.idx === 0}>
+                <Home />
+              </Match>
+              <Match when={connectionStore.idx !== 0}>
+                <Console />
+              </Match>
+            </Switch>
           </Match>
         </Switch>
       </div>

src/components/Screens/Settings/Settings.tsx

@@ -0,0 +1,24 @@
+import { ThemeSwitch } from "components/UI/ThemeSwitch";
+import { useAppSelector } from "services/Context";
+
+export const Settings = () => {
+  const {
+    connectionsService: { clearStore },
+  } = useAppSelector();
+
+  return (
+    <div class="p-4 bg-base-300 flex-1">
+      <h1 class="text-2xl font-bold">Settings</h1>
+      <div class="flex gap-4">
+        <ThemeSwitch />
+        <button
+          class="btn btn-sm btn-secondary"
+          onClick={async () => await clearStore()}
+        >
+          Reset store
+        </button>
+      </div>
+      <h2 class="text-xl font-bold mt-4">Shortcuts</h2>
+    </div>
+  );
+};

src/components/UI/Icons/Home.tsx

@@ -0,0 +1,19 @@
+export const HomeIcon = () => {
+  return (
+    <svg
+      class="w-6 h-6 text-primary"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 20 20"
+    >
+      <path
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M3 8v10a1 1 0 0 0 1 1h4v-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5h4a1 1 0 0 0 1-1V8M1 10l9-9 9 9"
+      />
+    </svg>
+  );
+};

src/components/UI/Icons/QuestionMark.tsx

@@ -0,0 +1,19 @@
+export const QuestionMark = () => {
+  return (
+    <svg
+      class="w-6 h-6 text-secondary"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 20 20"
+    >
+      <path
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M7.529 7.988a2.502 2.502 0 0 1 5 .191A2.441 2.441 0 0 1 10 10.582V12m-.01 3.008H10M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+      />
+    </svg>
+  );
+};

src/components/UI/Icons/index.ts

@@ -1,8 +1,9 @@
-export * from './Add'
-export * from './Close'
-export * from './Edit'
-export * from './Fire'
-export * from './Pen'
-export * from './ThreeDots'
-export * from './Vim'
-
+export * from "./Add";
+export * from "./Close";
+export * from "./Edit";
+export * from "./Fire";
+export * from "./Home";
+export * from "./Pen";
+export * from "./QuestionMark";
+export * from "./ThreeDots";
+export * from "./Vim";

src/components/UI/ThemeSwitch.tsx

@@ -1,4 +1,4 @@
-import { For, Show } from "solid-js";
+import { For } from "solid-js";
 import { titleCase } from "../../utils/formatters";
 const THEMES = [
   "retro",
@@ -13,40 +13,31 @@ const THEMES = [
   "cupcake",
 ] as const;
 import { t } from "i18next";
-import { useAppSelector } from "services/Context";
 
 export const ThemeSwitch = () => {
-  const {
-    appService: { appStore },
-  } = useAppSelector();
-
   const select = (theme: (typeof THEMES)[number]) => {
     document.documentElement.dataset.theme = theme;
     localStorage.setItem("theme", theme);
   };
 
   return (
-    <Show when={appStore.showThemeSwitcher}>
-      <div class="dropdown dropdown-left">
-        <label id="theme-switch" tabindex="0" class="m-1 btn btn-xs">
-          {t("components.theme_switch.theme")}
-        </label>
-        <ul
-          tabindex={0}
-          class="p-2 shadow menu dropdown-content  z-[1]
+    <div class="dropdown">
+      <label id="theme-switch" tabindex="0" class="btn btn-sm btn-primary">
+        {t("components.theme_switch.theme")}
+      </label>
+      <ul
+        tabindex={0}
+        class="p-2 shadow menu dropdown-content  z-[1]
           bg-base-100 rounded-box w-52"
-        >
-          <For each={THEMES}>
-            {(theme) => (
-              <li class="py-1">
-                <button onClick={() => select(theme)}>
-                  {titleCase(theme)}
-                </button>
-              </li>
-            )}
-          </For>
-        </ul>
-      </div>
-    </Show>
+      >
+        <For each={THEMES}>
+          {(theme) => (
+            <li class="py-1">
+              <button onClick={() => select(theme)}>{titleCase(theme)}</button>
+            </li>
+          )}
+        </For>
+      </ul>
+    </div>
   );
 };

src/services/App.ts

@@ -1,20 +1,12 @@
 import { createStore } from "solid-js/store";
 
-type AppStore = {
-  showThemeSwitcher?: boolean;
-};
+type AppStore = {};
 
 export const AppService = () => {
-  const [appStore, setAppStore] = createStore<AppStore>({
-    showThemeSwitcher: false,
-  });
-
-  const toggleThemeSwitcher = () => {
-    setAppStore("showThemeSwitcher", !appStore.showThemeSwitcher);
-  };
+  const [appStore, setAppStore] = createStore<AppStore>({});
 
   return {
     appStore,
-    toggleThemeSwitcher,
+    setAppStore,
   };
 };