git list refactor

frontend/src/components/git/GitManager.svelte

@@ -157,17 +157,56 @@
     }
     // [/DEF:handlePull:Function]
 
+    // [DEF:closeModal:Function]
+    /**
+     * @purpose Закрывает модальное окно управления Git.
+     * @post show=false.
+     */
+    function closeModal() {
+        show = false;
+    }
+    // [/DEF:closeModal:Function]
+
+    // [DEF:handleBackdropClick:Function]
+    /**
+     * @purpose Закрывает модалку по клику на подложку.
+     * @pre Событие пришло с оверлея.
+     * @post show=false.
+     */
+    function handleBackdropClick(event) {
+        if (event.target === event.currentTarget) {
+            closeModal();
+        }
+    }
+    // [/DEF:handleBackdropClick:Function]
+
     onMount(checkStatus);
 </script>
 
 <!-- [SECTION: TEMPLATE] -->
 {#if show}
-    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        <div class="bg-white p-6 rounded-lg shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
+    <div
+        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+        onclick={handleBackdropClick}
+    >
+        <div
+            class="relative bg-white p-6 rounded-lg shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto"
+            onclick={(event) => event.stopPropagation()}
+        >
+            <button
+                type="button"
+                onclick={closeModal}
+                class="absolute right-4 top-4 z-10 rounded p-1 text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors"
+                aria-label={$t.common?.close || "Close"}
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
             <PageHeader title={`${$t.git?.management}: ${dashboardTitle}`}>
                 <div slot="subtitle" class="text-sm text-gray-500">{$t.common?.id}: {dashboardId}</div>
                 <div slot="actions">
-                    <button onclick={() => show = false} class="text-gray-400 hover:text-gray-600 transition-colors">
+                    <button type="button" onclick={closeModal} class="text-gray-400 hover:text-gray-600 transition-colors">
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                         </svg>