Added divider between action buttons and custom ones

.vscode/settings.json

@@ -14,6 +14,10 @@
         {
             "id": "dashboard",
             "name": "Dashboard"
+        },
+        {
+            "id": "panel",
+            "name": "Panel"
         }
     ],
     "squarl.bookmarks": [
@@ -23,6 +27,20 @@
             "description": "Start of dashboard",
             "type": "file",
             "groupId": "dashboard"
+        },
+        {
+            "name": "ViewPanel.tsx",
+            "path": "src/panelWebView/ViewPanel.tsx",
+            "description": "Start of panel",
+            "type": "file",
+            "groupId": "panel"
+        },
+        {
+            "name": "styles.css",
+            "path": "src/panelWebView/styles.css",
+            "description": "Panel styles",
+            "type": "file",
+            "groupId": "panel"
         }
     ],
 }

src/panelWebView/components/Actions.tsx

@@ -29,9 +29,15 @@ const Actions: React.FunctionComponent<IActionsProps> = ({ metadata, settings }:
 
         {
           (settings && settings.scripts && settings.scripts.length > 0) && (
-            settings.scripts.map((value, idx) => (
-              <CustomScript key={value?.title?.replace(/ /g, '') || idx} {...value} />
-            ))
+            <>
+              <div className="divider py-4 w-full" style={{height:`1px`}}></div>
+            
+              {
+                settings.scripts.map((value, idx) => (
+                  <CustomScript key={value?.title?.replace(/ /g, '') || idx} {...value} />
+                ))
+              }
+            </>
           )
         }
       </div>

src/panelWebView/components/BaseView.tsx

@@ -55,12 +55,14 @@ const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings, folderAndF
           <Collapsible id={`base_actions`} title="Actions">
             <div className={`base__actions`}>
               <button onClick={openDashboard}>Open dashboard</button>
+              <button onClick={openPreview} disabled={!settings?.preview?.host}>Open preview</button>
               <StartServerButton settings={settings} />
               {
                 !settings?.isInitialized && <button onClick={initProject}>Initialize project</button>
               }
+              
               <button onClick={createContent} disabled={!settings?.isInitialized}>Create new content</button>
-              <button onClick={openPreview} disabled={!settings?.preview?.host}>Open site preview</button>
+
               {
                 customActions.map((script) => (
                   <button key={script.title} onClick={() => runBulkScript(script)}>{ script.title }</button>

src/panelWebView/styles.css

@@ -518,6 +518,11 @@ vscode-divider {
   }
 }
 
+/* Divider */
+.divider {
+  background: var(--divider-background);
+}
+
 /* Git actions */
 .git_actions__sync {
   display: flex;