feat(em): port extension manager from 1.0 (#3959)

* feat(em): port extension manager from 1.0

* Apply fixes from StyleCI

* chore: phpstan

---------

Co-authored-by: StyleCI Bot <bot@styleci.io>

extensions/package-manager/less/admin.less

@@ -3,7 +3,7 @@
 @import "admin/QueueSection";
 @import "admin/ControlSection";
 
-.PackageManager-controlSection, .PackageManager-queueSection {
+.ExtensionManager-controlSection {
   > .container {
     padding-bottom: 0;
   }
@@ -27,3 +27,53 @@
   opacity: 0.6;
   cursor: not-allowed;
 }
+
+.ButtonGroup--full {
+  width: 100%;
+  display: flex;
+
+  > .Button:first-child {
+    flex-grow: 1;
+    text-align: start;
+  }
+}
+
+.ConfigureAuth-hosts, .ConfigureComposer-repositories {
+  > .ButtonGroup {
+    margin-bottom: 8px;
+  }
+}
+
+.flarum-extension-manager-Page .SettingsGroups .Form {
+  max-height: unset;
+}
+
+.ExtensionManager-SettingsGroups {
+  display: flex;
+  column-count: 3;
+  column-gap: 30px;
+  flex-wrap: wrap;
+
+  .FormSection {
+    min-width: 300px;
+    max-height: 500px;
+    min-height: 20vh;
+    max-width: 400px;
+
+    @media (max-width: 1209px) {
+      margin-bottom: 20px;
+    }
+
+    .Form-controls {
+      margin-top: auto;
+    }
+  }
+}
+
+.ExtensionManager-warnings {
+  margin-bottom: 24px;
+
+  > .Alert {
+    width: 100%;
+  }
+}

extensions/package-manager/less/admin/ControlSection.less

@@ -1,4 +1,4 @@
-.PackageManager-lastUpdatedAt {
+.ExtensionManager-lastUpdatedAt {
   color: var(--control-color);
 
   &-label {
@@ -6,7 +6,7 @@
   }
 }
 
-.PackageManager-updaterControls {
+.ExtensionManager-updaterControls {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
@@ -14,16 +14,18 @@
   margin-bottom: 16px;
 }
 
-.PackageManager-extensions {
+.ExtensionManager-extensions {
+  width: 100%;
+
   &-grid {
     --gap: 12px;
     display: grid;
-    grid-template-columns: repeat(auto-fit, calc(~"100% / 3 - var(--gap)"));
+    grid-template-columns: repeat(auto-fit, 310px);
     gap: var(--gap);
   }
 }
 
-.PackageManager-extension {
+.ExtensionManager-extension {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -79,19 +81,42 @@
   }
 }
 
-.PackageManager-majorUpdate {
+.ExtensionManager-majorUpdate {
   --space: 16px;
   padding: var(--space);
   display: grid;
   grid-template-areas:
     "title logo"
     "helpText logo"
-    "controls logo"
-    "extensions extensions"
-    "failure failure";
-  grid-gap: 0 var(--space);
+    "controls logo";
+  column-gap: 0 var(--space);
   align-items: center;
 
+  &--failed&--incompatibleExtensions {
+    grid-template-areas:
+      "title logo"
+      "helpText logo"
+      "controls logo"
+      "extensions extensions"
+      "failure failure";
+  }
+
+  &--failed {
+    grid-template-areas:
+      "title logo"
+      "helpText logo"
+      "controls logo"
+      "failure failure";
+  }
+
+  &--incompatibleExtensions {
+    grid-template-areas:
+      "title logo"
+      "helpText logo"
+      "controls logo"
+      "extensions extensions";
+  }
+
   > img {
     grid-area: logo;
   }
@@ -116,6 +141,10 @@
     padding-top: var(--space);
     border-top: 1px solid var(--control-bg);
   }
+
+  .ExtensionManager-updaterControls {
+    margin: 0;
+  }
 }
 
 .WhyNotModal {
@@ -124,10 +153,19 @@
   }
 }
 
-.PackageManager-installer .FormControl-container {
-  max-width: 400px;
+.ExtensionManager-installer .FormControl-container {
+  max-width: 450px;
 
   .FormControl {
     width: 300px;
   }
 }
+
+.ExtensionManager-controlSection .container {
+  max-width: 1030px;
+  overflow: visible;
+}
+
+.ExtensionManager-primaryWarning ul {
+  margin: 0;
+}

extensions/package-manager/less/admin/QueueSection.less

@@ -1,4 +1,4 @@
-.PackageManager-queueSection {
+.ExtensionManager-queueSection {
   &-header > .container {
     display: flex;
     justify-content: space-between;
@@ -11,6 +11,7 @@
 
   .Label {
     text-transform: uppercase;
+    margin-inline-end: 8px;
   }
 
   .Table {
@@ -25,7 +26,7 @@
   }
 }
 
-.PackageManager-queueTable {
+.ExtensionManager-queueTable {
   &-package {
     display: flex;
     align-items: center;