From aaba2fa8b58fa500dec8b58cc55c7bd20cbd869c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Gerardo=20Rond=C3=B3n=20Garc=C3=ADa?=
 <61068392+DanielRondonGarcia@users.noreply.github.com>
Date: Wed, 5 Apr 2023 23:09:55 -0500
Subject: [PATCH] Update: Style improvements, Italian localization fix and
 small improvements

- Added 'disabled' class to the input element when tightBorder is false.
- Applied unavailable cursor style and disabled gray background for elements with the 'disabled' class.
- Fixed Italian localization: Changed 'Lingue' to 'Language' to maintain universal terminology and improve user experience.
- Added improvement to resizing the border so that it was at 90% of the screen size
- Added new color for disabled options
- Added title for explain the usage of tightBorder and adjustedContainer
- Added the feature to remove a chat item using the middle click (middle mouse button)
- Properly utilized the MouseEvent event in the ChatItem component
---
 app/components/chat-list.tsx    |  8 ++++++++
 app/components/home.module.scss |  7 +++++++
 app/components/home.tsx         |  3 ++-
 app/components/settings.tsx     | 17 +++++++++++++++++
 app/locales/cn.ts               |  4 ++++
 app/locales/en.ts               |  5 +++++
 app/locales/es.ts               |  5 +++++
 app/locales/it.ts               |  7 ++++++-
 app/locales/tw.ts               |  4 ++++
 app/store/app.ts                |  2 ++
 app/styles/globals.scss         |  9 +++++++++
 11 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/app/components/chat-list.tsx b/app/components/chat-list.tsx
index 8d02805f7..d9aa51b8e 100644
--- a/app/components/chat-list.tsx
+++ b/app/components/chat-list.tsx
@@ -1,3 +1,4 @@
+import React, { MouseEvent as ReactMouseEvent } from "react";
 import DeleteIcon from "../icons/delete.svg";
 import styles from "./home.module.scss";
 import {
@@ -22,6 +23,12 @@ export function ChatItem(props: {
   id: number;
   index: number;
 }) {
+  const handleMiddleClick = (event: ReactMouseEvent<HTMLDivElement>) => {
+    if (event.button === 1 && props.onDelete) {
+      props.onDelete();
+    }
+  };
+
   return (
     <Draggable draggableId={`${props.id}`} index={props.index}>
       {(provided) => (
@@ -30,6 +37,7 @@ export function ChatItem(props: {
             props.selected && styles["chat-item-selected"]
           }`}
           onClick={props.onClick}
+          onAuxClick={handleMiddleClick}
           ref={provided.innerRef}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
diff --git a/app/components/home.module.scss b/app/components/home.module.scss
index da954dc1d..49d2bcc97 100644
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@@ -37,6 +37,13 @@
 
     border-radius: 0;
   }
+
+  .adjusted-container {
+    --window-width: 90vw;
+    max-width: 90vw;
+    max-height: 90vh;
+    border-radius: 20px;
+  }
 }
 
 .sidebar {
diff --git a/app/components/home.tsx b/app/components/home.tsx
index 9e57cb870..4d1203df0 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -110,7 +110,8 @@ function _Home() {
     <div
       className={`${
         config.tightBorder && !isMobileScreen()
-          ? styles["tight-container"]
+          ? styles["tight-container"] +
+            (config.adjustedContainer ? " " + styles["adjusted-container"] : "")
           : styles.container
       }`}
     >
diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index a14f6473d..5dad70eb2 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -293,6 +293,7 @@ export function Settings(props: { closeSettings: () => void }) {
           <SettingItem title={Locale.Settings.TightBorder}>
             <input
               type="checkbox"
+              title={Locale.Settings.TightBorderExplanation}
               checked={config.tightBorder}
               onChange={(e) =>
                 updateConfig(
@@ -302,6 +303,22 @@ export function Settings(props: { closeSettings: () => void }) {
             ></input>
           </SettingItem>
 
+          <SettingItem title={Locale.Settings.AdjustedContainer}>
+            <input
+              type="checkbox"
+              title={Locale.Settings.AdjustedContainerExplanation}
+              checked={config.adjustedContainer}
+              disabled={!config.tightBorder}
+              className={!config.tightBorder ? "disabled" : ""}
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.adjustedContainer = e.currentTarget.checked),
+                )
+              }
+            ></input>
+          </SettingItem>
+
           <SettingItem title={Locale.Settings.SendPreviewBubble}>
             <input
               type="checkbox"
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index 033e1c2cf..143f4d636 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -83,6 +83,10 @@ const cn = {
     SendKey: "发送键",
     Theme: "主题",
     TightBorder: "紧凑边框",
+    TightBorderExplanation: "此选项将窗口边框调整为适应屏幕尺寸的100%",
+    AdjustedContainer: "调整容器",
+    AdjustedContainerExplanation:
+      "此选项将窗口调整为占据屏幕尺寸的90%，在其周围留下一定边距",
     SendPreviewBubble: "发送预览气泡",
     Prompt: {
       Disable: {
diff --git a/app/locales/en.ts b/app/locales/en.ts
index aefc2e57c..1960192e3 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -85,6 +85,11 @@ const en: LocaleType = {
     SendKey: "Send Key",
     Theme: "Theme",
     TightBorder: "Tight Border",
+    TightBorderExplanation:
+      "This option adjusts the border of the window to fit 100% of the screen size",
+    AdjustedContainer: "Adjusted container",
+    AdjustedContainerExplanation:
+      "This option adjusts the window to occupy 90% of the screen size, leaving some margins around it",
     SendPreviewBubble: "Send Preview Bubble",
     Prompt: {
       Disable: {
diff --git a/app/locales/es.ts b/app/locales/es.ts
index 6997d5f6d..11bd5db51 100644
--- a/app/locales/es.ts
+++ b/app/locales/es.ts
@@ -85,6 +85,11 @@ const es: LocaleType = {
     SendKey: "Tecla de envío",
     Theme: "Tema",
     TightBorder: "Borde ajustado",
+    TightBorderExplanation:
+      "Esta opción ajusta el borde de la ventana para que ocupe el 100% del tamaño de la pantalla",
+    AdjustedContainer: "Contenedor ajustado",
+    AdjustedContainerExplanation:
+      "Esta opción ajusta la ventana para que ocupe el 90% del tamaño de la pantalla, dejando márgenes alrededor",
     SendPreviewBubble: "Enviar burbuja de vista previa",
     Prompt: {
       Disable: {
diff --git a/app/locales/it.ts b/app/locales/it.ts
index 95e6747ba..56f5d27d3 100644
--- a/app/locales/it.ts
+++ b/app/locales/it.ts
@@ -60,7 +60,7 @@ const it: LocaleType = {
       Close: "Chiudi",
     },
     Lang: {
-      Name: "Lingue",
+      Name: "Language",
       Options: {
         cn: "简体中文",
         en: "English",
@@ -85,6 +85,11 @@ const it: LocaleType = {
     SendKey: "Tasto invia",
     Theme: "tema",
     TightBorder: "Bordi stretti",
+    TightBorderExplanation:
+      "Questa opzione adatta il bordo della finestra per adattarlo al 100% della dimensione dello schermo",
+    AdjustedContainer: "Contenitore regolabile",
+    AdjustedContainerExplanation:
+      "Questa opzione adatta la finestra per occupare il 90% della dimensione dello schermo, lasciando dei margini intorno",
     SendPreviewBubble: "Invia l'anteprima della bolla",
     Prompt: {
       Disable: {
diff --git a/app/locales/tw.ts b/app/locales/tw.ts
index 4340fe2c8..63b75e111 100644
--- a/app/locales/tw.ts
+++ b/app/locales/tw.ts
@@ -83,6 +83,10 @@ const tw: LocaleType = {
     SendKey: "發送鍵",
     Theme: "主題",
     TightBorder: "緊湊邊框",
+    TightBorderExplanation: "此選項將視窗邊框調整為適應屏幕尺寸的100％",
+    AdjustedContainer: "調整容器",
+    AdjustedContainerExplanation:
+      "此選項將視窗調整為占据屏幕尺寸的90％，在其周圍留下一定邊距",
     SendPreviewBubble: "發送預覽氣泡",
     Prompt: {
       Disable: {
diff --git a/app/store/app.ts b/app/store/app.ts
index c63fa9d4f..2f90c17c6 100644
--- a/app/store/app.ts
+++ b/app/store/app.ts
@@ -51,6 +51,7 @@ export interface ChatConfig {
   fontSize: number;
   theme: Theme;
   tightBorder: boolean;
+  adjustedContainer: boolean;
   sendPreviewBubble: boolean;
 
   disablePromptHint: boolean;
@@ -139,6 +140,7 @@ const DEFAULT_CONFIG: ChatConfig = {
   fontSize: 14,
   theme: Theme.Auto as Theme,
   tightBorder: false,
+  adjustedContainer: false,
   sendPreviewBubble: true,
 
   disablePromptHint: false,
diff --git a/app/styles/globals.scss b/app/styles/globals.scss
index 6492b000a..72b1c9090 100644
--- a/app/styles/globals.scss
+++ b/app/styles/globals.scss
@@ -9,6 +9,8 @@
   --bar-color: rgba(0, 0, 0, 0.1);
   --theme-color: var(--gray);
 
+  --gray-disabled: rgb(230, 230, 230);
+
   /* shadow */
   --shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1);
   --card-shadow: 0px 2px 4px 0px rgb(0, 0, 0, 0.05);
@@ -26,6 +28,8 @@
   --second: rgb(27 38 42);
   --hover-color: #323232;
 
+  --gray-disabled: rgba(59, 59, 59, 0.62);
+
   --bar-color: rgba(255, 255, 255, 0.1);
 
   --border-in-light: 1px solid rgba(255, 255, 255, 0.192);
@@ -288,3 +292,8 @@ pre {
     overflow: auto;
   }
 }
+
+.disabled {
+  background-color: var(--gray-disabled) !important;
+  cursor: not-allowed !important;
+}