fix: improve title name edit interaction (chartdb#367)

* chore(main): improve table name edit interaction

* chore: fix lint issues

* feat(i18n): add double-click functionality and tooltip translations

- Change editable titles action to `onDoubleClick`
- Add tooltip translations for table name editing feature
- Support for 9 languages: Russian, Japanese, Hindi, French, Spanish,
  German, Ukrainian, Portuguese, and Korean
- Improve UX by indicating double-click edit functionality across languages

* naming + some padding

---------

Co-authored-by: Guy Ben-Aharon <[email protected]>

Author: heyOnuoha

src/globals.css

@@ -3,69 +3,73 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --subtitle: 215.3 19.3% 34.5%;
-  }
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 222.2 84% 4.9%;
+        --radius: 0.5rem;
+        --chart-1: 12 76% 61%;
+        --chart-2: 173 58% 39%;
+        --chart-3: 197 37% 24%;
+        --chart-4: 43 74% 66%;
+        --chart-5: 27 87% 67%;
+        --subtitle: 215.3 19.3% 34.5%;
+    }
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --subtitle: 212.7 26.8% 83.9%;
-  }
+    .dark {
+        --background: 222.2 84% 4.9%;
+        --foreground: 210 40% 98%;
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+        --primary: 210 40% 98%;
+        --primary-foreground: 222.2 47.4% 11.2%;
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+        --accent: 217.2 32.6% 17.5%;
+        --accent-foreground: 210 40% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: 212.7 26.8% 83.9%;
+        --chart-1: 220 70% 50%;
+        --chart-2: 160 60% 45%;
+        --chart-3: 30 80% 55%;
+        --chart-4: 280 65% 60%;
+        --chart-5: 340 75% 55%;
+        --subtitle: 212.7 26.8% 83.9%;
+    }
 }
 
 @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+
+    .text-editable {
+        @apply dark:group-hover:bg-slate-900 group-hover:bg-slate-100 group-hover:ring-[0.5px] rounded-md cursor-pointer;
+    }
+}

src/i18n/locales/de.ts

@@ -346,6 +346,10 @@ export const de: LanguageTranslation = {
             edit_table: 'Tabelle bearbeiten',
             delete_table: 'Tabelle löschen',
         },
+
+        tool_tips: {
+            double_click_to_edit: 'Doppelklicken zum Bearbeiten',
+        },
     },
 };
 

src/i18n/locales/en.ts

@@ -345,6 +345,10 @@ export const en = {
             edit_table: 'Edit Table',
             delete_table: 'Delete Table',
         },
+
+        tool_tips: {
+            double_click_to_edit: 'Double-click to edit',
+        },
     },
 };
 

src/i18n/locales/es.ts

@@ -353,6 +353,10 @@ export const es: LanguageTranslation = {
             edit_table: 'Editar Tabla',
             delete_table: 'Eliminar Tabla',
         },
+
+        tool_tips: {
+            double_click_to_edit: 'Doble clic para editar',
+        },
     },
 };
 

src/i18n/locales/fr.ts

@@ -349,6 +349,10 @@ export const fr: LanguageTranslation = {
             edit_table: 'Éditer la Table',
             delete_table: 'Supprimer la Table',
         },
+
+        tool_tips: {
+            double_click_to_edit: 'Double-cliquez pour modifier',
+        },
     },
 };
 

src/i18n/locales/hi.ts

@@ -348,6 +348,10 @@ export const hi: LanguageTranslation = {
             edit_table: 'तालिका संपादित करें',
             delete_table: 'तालिका हटाएँ',
         },
+
+        tool_tips: {
+            double_click_to_edit: 'संपादित करने के लिए डबल-क्लिक करें',
+        },
     },
 };
 

src/i18n/locales/ja.ts

@@ -350,6 +350,10 @@ export const ja: LanguageTranslation = {
             edit_table: 'テーブルを編集',
             delete_table: 'テーブルを削除',
         },
+
+        tool_tips: {
+            double_click_to_edit: 'ダブルクリックして編集',
+        },
     },
 };
 

src/i18n/locales/ko_KR.ts

@@ -344,6 +344,10 @@ export const ko_KR: LanguageTranslation = {
             edit_table: '테이블 수정',
             delete_table: '테이블 삭제',
         },
+
+        tool_tips: {
+            double_click_to_edit: '더블클릭하여 편집',
+        },
     },
 };
 

src/i18n/locales/pt_BR.ts

@@ -345,6 +345,10 @@ export const pt_BR: LanguageTranslation = {
             edit_table: 'Editar Tabela',
             delete_table: 'Excluir Tabela',
         },
+
+        tool_tips: {
+            double_click_to_edit: 'Duplo clique para editar',
+        },
     },
 };
 

src/i18n/locales/uk.ts

@@ -345,6 +345,10 @@ export const uk: LanguageTranslation = {
             edit_table: 'Редагувати таблицю',
             delete_table: 'Видалити таблицю',
         },
+
+        tool_tips: {
+            double_click_to_edit: 'Двойной клик для редактирования',
+        },
     },
 };