From 9f51379df9fb5c620e710eda20fe65c6c5cba815 Mon Sep 17 00:00:00 2001
From: sokol <sokol@HP>
Date: Fri, 20 Feb 2026 16:40:13 +0300
Subject: [PATCH] feat: JSON comments support + full-height layout

---
 src/App.tsx                              |  8 ++---
 src/componets/content/ConfigTemplate.tsx | 39 ++++++++++++++----------
 src/componets/content/Content.tsx        | 16 +++++-----
 src/componets/env/Environment.tsx        | 16 +++++-----
 4 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7d403f2..d7f68f9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -98,7 +98,7 @@ function App() {
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
-      <main className="container mx-auto px-4 py-6 max-w-[1920px]">
+      <main className="container mx-auto px-4 py-6 max-w-[1920px] min-h-[calc(100vh-48px)]">
         {/* Header */}
         <div className="mb-6">
           <FileChooser
@@ -112,10 +112,10 @@ function App() {
         </div>
 
         {envs.length > 0 ? (
-          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 min-h-[calc(100vh-200px)]">
             {/* Environment Panel - 5/12 width */}
             <section className="lg:col-span-5 xl:col-span-5 2xl:col-span-5">
-              <div className="sticky top-6">
+              <div className="sticky top-6 h-full">
                 <Environment
                   envs={envs}
                   onChanged={async (e) => await handleEnvChanged(e)}
@@ -127,7 +127,7 @@ function App() {
             </section>
 
             {/* Content Panel - 7/12 width */}
-            <section className="lg:col-span-7 xl:col-span-7 2xl:col-span-7">
+            <section className="lg:col-span-7 xl:col-span-7 2xl:col-span-7 h-full">
               <Content
                 env={currentEnv}
                 config={config}
diff --git a/src/componets/content/ConfigTemplate.tsx b/src/componets/content/ConfigTemplate.tsx
index aed7336..4324ea3 100644
--- a/src/componets/content/ConfigTemplate.tsx
+++ b/src/componets/content/ConfigTemplate.tsx
@@ -34,33 +34,40 @@ export function ConfigTemplateEditor({ config, onSaved }: ConfigTemplateEditorPr
     setMode('view');
   }
 
-  function handleSave() {
-    // Validate JSON before saving (with placeholder support)
+  function validateJson(value: string): boolean {
     try {
-      const sanitizedValue = draftContent.replace(/@[^@]+@/g, '1');
+      if (!value.trim()) {
+        setJsonError(null);
+        return true;
+      }
+      
+      // Strip comments (// single-line and /* */ multi-line) and placeholders
+      const sanitizedValue = value
+        .replace(/\/\*[\s\S]*?\*\//g, '')  // Remove /* */ comments
+        .replace(/\/\/.*$/gm, '')          // Remove // comments
+        .replace(/@[^@]+@/g, '1');         // Replace placeholders
+      
       JSON.parse(sanitizedValue);
       setJsonError(null);
-      onSaved(draftContent);
-      setMode('view');
+      return true;
     } catch (e) {
       setJsonError((e as Error).message);
+      return false;
+    }
+  }
+
+  function handleSave() {
+    // Validate JSON before saving (with comment and placeholder support)
+    if (validateJson(draftContent)) {
+      onSaved(draftContent);
+      setMode('view');
     }
   }
 
   function handleDraftChange(value: string) {
     setDraftContent(value);
     // Validate JSON on every change
-    try {
-      if (value.trim()) {
-        const sanitizedValue = value.replace(/@[^@]+@/g, '1');
-        JSON.parse(sanitizedValue);
-        setJsonError(null);
-      } else {
-        setJsonError(null);
-      }
-    } catch (e) {
-      setJsonError((e as Error).message);
-    }
+    validateJson(value);
   }
 
   function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
diff --git a/src/componets/content/Content.tsx b/src/componets/content/Content.tsx
index 6d77cac..731ad90 100644
--- a/src/componets/content/Content.tsx
+++ b/src/componets/content/Content.tsx
@@ -31,22 +31,24 @@ export function Content({ config, env, onTemplateSaved }: ContentProps) {
   ];
 
   return (
-    <div className="bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden">
-      <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
-      
-      <div className="p-4">
+    <div className="bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden h-full flex flex-col">
+      <div className="flex-shrink-0">
+        <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 min-h-0">
         <TabPanel isActive={activeTab === 'env'}>
           <ContentParams env={env} />
         </TabPanel>
-        
+
         <TabPanel isActive={activeTab === 'template'}>
           <ConfigTemplateEditor config={config} onSaved={onTemplateSaved} />
         </TabPanel>
-        
+
         <TabPanel isActive={activeTab === 'raw'}>
           <ContentRaw config={config} env={env} />
         </TabPanel>
-        
+
         <TabPanel isActive={activeTab === 'test'}>
           <ContentTest config={config} env={env} />
         </TabPanel>
diff --git a/src/componets/env/Environment.tsx b/src/componets/env/Environment.tsx
index 4b56f05..198bf13 100644
--- a/src/componets/env/Environment.tsx
+++ b/src/componets/env/Environment.tsx
@@ -94,10 +94,10 @@ export function Environment({ envs, onChanged, onSelected, onAdd, onRemove }: En
   ));
 
   return (
-    <Card variant="bordered" padding="none" className="h-full">
-      <CardBody className="space-y-1">
+    <Card variant="bordered" padding="none" className="h-full overflow-hidden flex flex-col">
+      <CardBody className="space-y-2 flex flex-col h-full overflow-hidden">
         {/* Environment Selector */}
-        <div className="flex gap-2">
+        <div className="flex-shrink-0 flex gap-2">
           <div className="flex-1">
             <Select
               label="Environment"
@@ -112,7 +112,7 @@ export function Environment({ envs, onChanged, onSelected, onAdd, onRemove }: En
             />
           </div>
 
-          <div className="flex flex-col justify-center gap-2 pt-6">
+          <div className="flex flex-col justify-center gap-2 pt-6 flex-shrink-0">
             <div className="flex gap-2">
               <Button
                 variant="success"
@@ -134,13 +134,13 @@ export function Environment({ envs, onChanged, onSelected, onAdd, onRemove }: En
           </div>
         </div>
 
-        {/* Parameters Section */}
-        <div>
-          <h3 className="text-sm font-semibold text-slate-700 mb-1 uppercase tracking-wide">
+        {/* Parameters Section - Scrollable */}
+        <div className="flex-1 overflow-hidden flex flex-col min-h-0">
+          <h3 className="text-sm font-semibold text-slate-700 mb-1 uppercase tracking-wide flex-shrink-0">
             Parameters
           </h3>
 
-          <div className="space-y-0">
+          <div className="flex-1 overflow-y-auto space-y-0 pr-2 -mr-2">
             {paramCtrls}
 
             <EnvironmentParam