feat: extension list UI (#4066)

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

@@ -25,62 +25,6 @@
   }
 }
 
-.ExtensionManager-extension {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background-color: var(--control-bg);
-  padding: 8px;
-  border-radius: var(--border-radius);
-
-  &-controls {
-    margin-left: auto;
-  }
-
-  &-icon {
-    --size: 40px;
-  }
-
-  &-name {
-    font-weight: bold;
-  }
-
-  &-version {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    &-latest {
-      text-transform: lowercase;
-      padding: 2px 6px;
-      font-size: 0.7rem;
-    }
-  }
-
-  &--core {
-    --bg-hover: darken(#e7672e, 5);
-    background-color: #e7672e;
-    color: #fff;
-    --button-color: #fff;
-    --button-bg-hover: var(--bg-hover);
-
-    .Button--danger {
-      color: #fff;
-      --button-bg-hover: var(--bg-hover);
-    }
-  }
-
-  &--core &-icon {
-    background-size: 100%;
-    background-color: transparent;
-    filter: grayscale(1) brightness(3.5);
-  }
-
-  &--danger {
-    background-color: var(--control-danger-bg);
-  }
-}
-
 .ExtensionManager-majorUpdate {
   --space: 16px;
   padding: var(--space);
@@ -169,3 +113,8 @@
 .ExtensionManager-primaryWarning ul {
   margin: 0;
 }
+
+.ExtensionManager-extensions--empty {
+  border: 1px solid var(--control-bg);
+  border-radius: var(--border-radius);
+}