feat: save query tabs to store, move all text to en.json

src/components/CommandPalette/actions.ts

@@ -1,27 +1,28 @@
 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;
 }>();
 
 const showThemeSwitcher = defineAction({
-  id: "toggle-theme-switcher",
-  title: "Toggle Theme Switcher",
+  id: "toggle_theme_switcher",
+  title: t("command_palette.toggle_theme_switcher"),
   run: ({ rootContext }) => {
     (rootContext as ActionsContext).showThemeSwitcher();
   },
 });
 
 const focusOn = defineAction({
-  id: "focus-on",
-  title: "Focus On",
+  id: "focus_on",
+  title: t("command_palette.focus_on"),
 });
 
 const focusQueryTextArea = defineAction({
-  id: "focus-query-text-area",
-  title: "Focus On Query Text Area",
+  id: "focus_query_text_area",
+  title: t("command_palette.focus_query_text_area"),
   parentActionId: focusOn.id,
   /* Condition for allowing action */
   //   shortcut: "$mod+e", // $mod = Command on Mac & Control on Windows.

src/components/Screens/Console/Content/Content.tsx

@@ -8,12 +8,13 @@ import { ContentComponent, NEW_QUERY_TAB } from "services/ConnectionTabs";
 
 export const Content = () => {
   const {
-    connectionsService: { contentStore, setContentStore },
+    connectionsService: { contentStore, setContentStore, updateStore },
   } = useAppSelector();
 
   const addTab = async () => {
     setContentStore("tabs", [...contentStore.tabs, NEW_QUERY_TAB]);
     setContentStore("idx", contentStore.tabs.length - 1);
+    updateStore();
   };
 
   const closeTab = async (idx: number) => {

src/components/Screens/Console/Content/QueryTab/QueryTab.tsx

@@ -1,4 +1,4 @@
-import { Table } from "components/UI";
+import { Table } from "./Table";
 import { ContentTabData } from "services/ConnectionTabs";
 import { useAppSelector } from "services/Context";
 import { createEffect, createSignal, onCleanup, Show } from "solid-js";

src/components/Screens/Console/Content/QueryTab/QueryTextArea.tsx

@@ -26,6 +26,7 @@ export const QueryTextArea = () => {
       setContentStore,
       getActiveConnection,
       getActiveContentTab,
+      updateStore,
     },
   } = useAppSelector();
 
@@ -64,6 +65,7 @@ export const QueryTextArea = () => {
   const onFormat = () => {
     const formatted = format(code());
     onInput(formatted);
+    updateStore();
   };
 
   const onExecute = async () => {
@@ -77,7 +79,8 @@ export const QueryTextArea = () => {
       setActiveContentQueryTabData({ query: code(), results: result });
     } catch (error) {
       setActiveContentQueryTabMessage("error", error as string);
-    }
+    };
+    updateStore();
   };
 
   createEffect(() => {

src/components/Screens/Console/Sidebar/Sidebar.tsx

@@ -2,6 +2,8 @@ import { TableColumnsCollapse } from "./TableColumnsCollapse";
 import { useAppSelector } from "services/Context";
 import { createSignal, For, onMount } from "solid-js";
 import { createStore } from "solid-js/store";
+import { t } from "utils/i18n";
+import { Label } from "components/UI";
 
 type Table = {
   name: string;
@@ -50,7 +52,11 @@ export const Sidebar = () => {
   return (
     <div class="p-2 bg-base-200 h-full rounded-tr-lg overflow-y-scroll">
       <div class="pb-2 rounded-md">
+        <label for="schema" class="text-xs font-bold py-1 text-primary">
+          {t('components.sidebar.schema')}
+        </label>
         <select
+          id="schema"
           value={displayedSchema()}
           onChange={(e) => select(e.currentTarget.value)}
           class="select select-accent select-bordered select-xs w-full"
@@ -64,19 +70,19 @@ export const Sidebar = () => {
           </For>
         </select>
       </div>
-      <div class="text-sm font-bold py-1 text-primary">Tables</div>
+      <div class="text-xs font-bold py-1 text-primary">{t('components.sidebar.tables')}</div>
       <For each={tables}>
         {(table) => (
-          <div class="rounded-sm mb-1 px-2 min-w-full w-fit">
+          <div class="rounded-sm mb-1 pl-1 min-w-full w-fit">
             <TableColumnsCollapse title={table.name}>
               <For each={table.columns}>
                 {(column) => (
                   <div class="flex w-full justify-between items-center w-full border-b-2 border-base-300">
-                    <span class="text-sm font-medium mr-2">
+                    <span class="text-xs">
                       <span class="px-1"></span>
                       {column.name}
                     </span>
-                    <span class="text-xs font-semibold ml-2">
+                    <span class="text-xs text-neutral-focus font-medium ml-2">
                       {column.props.COLUMN_TYPE}
                     </span>
                   </div>

src/components/Screens/Console/Sidebar/TableColumnsCollapse.tsx

@@ -1,5 +1,6 @@
 import { createSignal, JSXElement } from "solid-js";
 import { useContextMenu, Menu, animation, Item } from "solid-contextmenu";
+import { t } from "utils/i18n";
 
 export const TableColumnsCollapse = (props: {
   title: string;
@@ -23,12 +24,12 @@ export const TableColumnsCollapse = (props: {
             console.log("show table structure");
           }}
         >
-          Show table structure
+          {t('components.sidebar.show_table_structure')}
         </Item>
       </Menu>
       <button
         onClick={() => setOpen(!open())}
-        class="collapse button-ghost flex items-center rounded-sm text-sm font-semibold cursor-pointer border-b-2 border-base-300"
+        class="collapse button-ghost flex items-center text-sm text-base-content font-medium cursor-pointer border-b-2 border-base-300"
       >
         <label class={`swap text-6xl ${open() ? "swap-active" : ""}`}>
           <svg

src/components/UI/FileInput.tsx

@@ -1,5 +1,6 @@
 import { Field, FieldProps } from 'solid-form-handler';
 import { Component, JSX, Show, splitProps } from 'solid-js';
+import { t } from 'utils/i18n';
 import { Label } from '.';
 
 export type FileInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value'> &
@@ -33,7 +34,7 @@ export const FileInput: Component<FileInputProps> = (props) => {
             type="button"
             onClick={() => fileInput?.click()}
           >
-            <span class="p-2 border-end">Choose File</span>
+            <span class="p-2 border-end">{t('components.file_input.choose_file')}</span>
           </button>
         </div>
       )}

src/components/UI/index.ts

@@ -5,5 +5,4 @@ export * from './ColorCircle'
 export * from './FileInput'
 export * from './Label'
 export * from './Select'
-export * from './Table'
 export * from './TextInput'

src/services/ConnectionTabs.ts

@@ -47,7 +47,7 @@ export type ContentTab<C extends ContentComponentKeys> = {
   data: ContentTabData[C];
   error?: {
     message: string;
-    type: keyof typeof MessageType
+    type: keyof typeof MessageType;
   };
 };
 
@@ -117,7 +117,7 @@ export const ConnectionTabsService = () => {
     await store.set(CONNECTIONS_TABS_KEY, JSON.stringify(connectionStore));
     await store.set(CONTENT_TABS_KEY, JSON.stringify(contentStore));
     await store.save();
-  }, 3000);
+  }, 1000);
 
   const addTab = async (tab: ConnectionTab) => {
     if (connectionStore.tabs.find((t) => t.id === tab.id)) return;
@@ -169,7 +169,7 @@ export const ConnectionTabsService = () => {
         i === contentStore.idx
           ? ({
             ...t,
-            error: undefined
+            error: undefined,
           } as ContentTab<"QueryTab">)
           : t
       )
@@ -207,6 +207,7 @@ export const ConnectionTabsService = () => {
     getActiveContentTab,
     setActiveContentQueryTabData,
     setActiveContentQueryTabMessage,
-    resetActiveContentQueryTabMessage
+    resetActiveContentQueryTabMessage,
+    updateStore,
   };
 };

src/utils/i18n/en.json

@@ -4,6 +4,11 @@
     "home": {
       "add_connection": "Add Connection"
     },
+    "command_palette": {
+      "toggle_theme_switcher": "Toggle Theme Switcher",
+      "focus_on": "Focus on",
+      "focus_query_text_area": "Focus On Query Text Area"
+    },
     "components": {
       "add_connection_form": {
         "title": "Add Connection",
@@ -38,8 +43,16 @@
           "execute": "Execute"
         }
       },
+      "sidebar": {
+        "show_table_structure": "Show table structure",
+        "tables": "Tables",
+        "schema": "Schema"
+      },
       "theme_switch": {
         "theme": "Theme"
+      },
+      "file_input": {
+        "choose_file": "Choose file"
       }
     }
   }