From ca6331e45b46e1648b781ffc0da86d5c4f2544b8 Mon Sep 17 00:00:00 2001
From: caduHD4 <cadumarianogarciapereira@gmail.com>
Date: Sun, 21 Sep 2025 01:48:22 -0300
Subject: [PATCH] fix: improve context menu shortcut styling

---
 src/locales/en/translation.json               |  1 +
 src/locales/pt-BR/translation.json            |  1 +
 .../components/context-menu/context-menu.scss |  5 ++
 .../components/context-menu/context-menu.tsx  |  4 +-
 .../game-context-menu/game-context-menu.tsx   |  3 +-
 .../game-details/modals/repacks-modal.scss    | 63 +++++++++++++------
 .../game-details/modals/repacks-modal.tsx     | 23 ++++---
 7 files changed, 71 insertions(+), 29 deletions(-)

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 945f4cc8..c79741c3 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -119,6 +119,7 @@
     "open_folder": "Open folder",
     "open_download_location": "See downloaded files",
     "create_shortcut": "Create desktop shortcut",
+    "create_shortcut_simple": "Create shortcut",
     "clear": "Clear",
     "remove_files": "Remove files",
     "remove_from_library_title": "Are you sure?",
diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json
index b1bd01fa..076b18fa 100644
--- a/src/locales/pt-BR/translation.json
+++ b/src/locales/pt-BR/translation.json
@@ -107,6 +107,7 @@
     "open_folder": "Abrir pasta",
     "open_download_location": "Ver arquivos baixados",
     "create_shortcut": "Criar atalho na área de trabalho",
+    "create_shortcut_simple": "Criar atalho",
     "remove_files": "Remover arquivos",
     "options": "Gerenciar",
   "properties": "Propriedades",
diff --git a/src/renderer/src/components/context-menu/context-menu.scss b/src/renderer/src/components/context-menu/context-menu.scss
index 2c066440..e8ac6593 100644
--- a/src/renderer/src/components/context-menu/context-menu.scss
+++ b/src/renderer/src/components/context-menu/context-menu.scss
@@ -130,6 +130,11 @@
     margin-top: 4px;
   }
 
+  &--game-not-installed &__submenu &__item--danger:first-of-type {
+    border-top: none;
+    margin-top: 0;
+  }
+
   &__separator {
     height: 1px;
     background: globals.$border-color;
diff --git a/src/renderer/src/components/context-menu/context-menu.tsx b/src/renderer/src/components/context-menu/context-menu.tsx
index f1c2950e..ebbc6b70 100644
--- a/src/renderer/src/components/context-menu/context-menu.tsx
+++ b/src/renderer/src/components/context-menu/context-menu.tsx
@@ -20,6 +20,7 @@ export interface ContextMenuProps {
   position: { x: number; y: number };
   onClose: () => void;
   children?: React.ReactNode;
+  className?: string;
 }
 
 export function ContextMenu({
@@ -28,6 +29,7 @@ export function ContextMenu({
   position,
   onClose,
   children,
+  className,
 }: ContextMenuProps) {
   const menuRef = useRef<HTMLDivElement>(null);
   const [adjustedPosition, setAdjustedPosition] = useState(position);
@@ -160,7 +162,7 @@ export function ContextMenu({
   const menuContent = (
     <div
       ref={menuRef}
-      className="context-menu"
+      className={cn("context-menu", className)}
       style={{
         left: adjustedPosition.x,
         top: adjustedPosition.y,
diff --git a/src/renderer/src/components/game-context-menu/game-context-menu.tsx b/src/renderer/src/components/game-context-menu/game-context-menu.tsx
index 8b179ea5..f772e46e 100644
--- a/src/renderer/src/components/game-context-menu/game-context-menu.tsx
+++ b/src/renderer/src/components/game-context-menu/game-context-menu.tsx
@@ -68,7 +68,7 @@ export function GameContextMenu({
       ? [
           {
             id: "shortcuts",
-            label: t("create_shortcut"),
+            label: t("create_shortcut_simple"),
             icon: <LinkIcon size={16} />,
             disabled: isDeleting,
             submenu: [
@@ -181,6 +181,7 @@ export function GameContextMenu({
         visible={visible}
         position={position}
         onClose={onClose}
+        className={!game.executablePath ? "context-menu--game-not-installed" : undefined}
       />
 
       <ConfirmModal
diff --git a/src/renderer/src/pages/game-details/modals/repacks-modal.scss b/src/renderer/src/pages/game-details/modals/repacks-modal.scss
index 19f3e23b..7ffdb973 100644
--- a/src/renderer/src/pages/game-details/modals/repacks-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/repacks-modal.scss
@@ -2,7 +2,11 @@
 
 .repacks-modal {
   &__filter-container {
-    margin-bottom: calc(globals.$spacing-unit * 2);
+    margin-bottom: 1rem;
+  }
+
+  &__filter-top {
+    margin-bottom: 1rem;
   }
 
   &__repacks {
@@ -63,27 +67,50 @@
   }
 
   &__download-sources {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: calc(globals.$spacing-unit / 2);
-    margin-top: calc(globals.$spacing-unit * 1);
-    max-height: 200px;
-    overflow: auto;
-    padding-right: 8px;
-  }
-
-  &__source-item {
-    display: block;
-    flex: 1 1 auto;
-    min-width: 150px;
+    padding: 0.75rem;
+    background-color: var(--color-background-light);
+    border-radius: 8px;
+    margin-bottom: 1rem;
+    margin-top: calc(globals.$spacing-unit * 0.5);
   }
 
   &__filter-label {
     font-size: globals.$small-font-size;
-    font-weight: 500;
-    margin-bottom: calc(globals.$spacing-unit / 2);
-    color: globals.$body-color;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+    color: var(--color-text-secondary);
     width: 100%;
   }
+
+  &__source-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+    max-height: 200px;
+    overflow-y: auto;
+    align-items: start;
+  }
+
+  &__source-item {
+    padding: 0.35rem 0.75rem;
+    background: var(--color-surface, rgba(0, 0, 0, 0.03));
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    min-height: 38px;
+    box-sizing: border-box;
+  }
+
+  // Ajustes para o label do checkbox
+  &__source-item :global(.checkbox-field) {
+    width: 100%;
+  }
+
+  &__source-item :global(.checkbox-field__label) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+  }
 }
diff --git a/src/renderer/src/pages/game-details/modals/repacks-modal.tsx b/src/renderer/src/pages/game-details/modals/repacks-modal.tsx
index 0d5f38f4..e5c7a7cb 100644
--- a/src/renderer/src/pages/game-details/modals/repacks-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/repacks-modal.tsx
@@ -181,15 +181,20 @@ export function RepacksModal({
 
           <div className="repacks-modal__download-sources">
             <p className="repacks-modal__filter-label">{t("filter_by_source")}</p>
-            {downloadSources.map((source) => (
-              <div key={source.fingerprint} className="repacks-modal__source-item">
-                <CheckboxField
-                  label={source.name || source.url}
-                  checked={selectedFingerprints.includes(source.fingerprint)}
-                  onChange={() => toggleFingerprint(source.fingerprint)}
-                />
-              </div>
-            ))}
+            <div className="repacks-modal__source-grid">
+              {downloadSources.map((source) => (
+                <div 
+                  key={source.fingerprint} 
+                  className="repacks-modal__source-item"
+                >
+                  <CheckboxField
+                    label={source.name || source.url}
+                    checked={selectedFingerprints.includes(source.fingerprint)}
+                    onChange={() => toggleFingerprint(source.fingerprint)}
+                  />
+                </div>
+              ))}
+            </div>
           </div>
         </div>