FIX: improvements for user custom sections (#20190)

Improvements for this PR: https://github.com/discourse/discourse/pull/20057

What was fixed:
- [x] Use ember transitions instead of full reload
- [x] Link was inaccurately kept active
- [x] "+ save" renamed to just "save"
- [x] Render emojis in link name
- [x] UI to set icon
- [x] Delete link is trash icon instead of "x"
- [x] Add another link to on the left and rewording
- [x] Raname "link name" -> "name", "points to" ->  link
- [x] Add limits to fields
- [x] Move add section button to the bottom

app/assets/stylesheets/common/base/sidebar.scss

@@ -86,6 +86,17 @@
       transition-delay: 0s;
     }
   }
+  .sidebar-footer-wrapper {
+    .btn-flat.add-section {
+      padding: 0.25em 0.4em;
+      &:hover {
+        background: var(--d-sidebar-highlight-color);
+        svg {
+          color: var(--primary-medium);
+        }
+      }
+    }
+  }
 }
 
 .sidebar-hamburger-dropdown {
@@ -112,44 +123,17 @@
 }
 
 .sidebar-custom-sections {
-  .btn-flat.add-section {
-    margin-left: calc(var(--d-sidebar-section-link-prefix-width) / 2);
-    margin-right: calc(var(--d-sidebar-section-link-prefix-width) / 2);
-    width: calc(100% - var(--d-sidebar-section-link-prefix-width));
-    svg {
-      height: 0.75em;
-      width: 0.75em;
-      padding-left: 0.5em;
-      padding-right: 0.5em;
-    }
-    &:before,
-    &:after {
-      content: "";
-      flex: 1 1;
-      border-bottom: 1px solid var(--primary-low-mid);
-      margin: auto;
-    }
-    &:hover {
-      background: var(--d-sidebar-highlight-color);
-      border-radius: 5px;
-      &:before,
-      &:after {
-        border-bottom: 1px solid var(--primary-high);
-      }
-    }
-  }
-  a.sidebar-section-link {
-    padding-left: calc(
-      var(--d-sidebar-section-link-prefix-width) +
-        var(--d-sidebar-section-link-prefix-margin-right) +
-        var(--d-sidebar-row-horizontal-padding)
-    );
+  .sidebar-section-wrapper {
+    padding-bottom: 0;
   }
 }
 .sidebar-section-form-modal {
   .modal-inner-container {
     width: var(--modal-max-width);
   }
+  form {
+    margin-bottom: 0;
+  }
   input {
     width: 100%;
   }
@@ -158,7 +142,7 @@
   }
   .row-wrapper {
     display: grid;
-    grid-template-columns: auto auto 2em;
+    grid-template-columns: auto auto auto 2em;
     gap: 1em;
     margin-top: 1em;
   }
@@ -169,13 +153,20 @@
     margin-right: 1em;
   }
   .btn-flat.add-link {
-    float: right;
     margin-top: 1em;
-    margin-right: -0.5em;
+    margin-left: -0.65em;
     &:active,
     &:focus {
       background: none;
     }
+    svg {
+      color: var(--tertiary);
+      width: 0.75em;
+      height: 0.75em;
+    }
+    &:hover svg {
+      color: var(--tertiary-hover);
+    }
   }
   .modal-footer {
     display: flex;