Notebook main toolbar additions (#10271)

* Reworking notebook action bar functionality and appearance.

* added separator

* Revised notebookActions for collapse, clear and trusted such that they can be implemented with a boolean set to T of F and show labels or shift them into tooltip for accessibility. Updated styles for select boxes. Added toolbar icons to common icon location. Split icon definition for use as masked or background-image.

* Completed styles for action icons: collapse, clear and trusted. Added theme colors. Simplified icon behavior styles.

* Made maskedIconClass optional. Added theme colors for toolbar icons, select box border and dropdown arrow. Experimenting with adding masked icon to pseudo element so I can pull out label text from icons.

* Added icons styles to handle masked SVG elements as pseudo element beside button text. Added icons using this method to respect the color theming system.

* Adjusted styles for the cell and run all icons in notebook toolbar.

* Prepped notebook toolbar with placeholder icon for Underline action. Implemented Underline action. Added custom --wip-- ButtonMenu control, a modified copy of DropDown.

* Revised colorRegistry and corresponding notebook styles. Removed unused code from new custom control: buttonMneu. Revised icon styles to create a dropdown arrow for buttonMenu.

* Added new icon for Underline action.

* Removed comment from needed markup.

* Replaced actionItemProvider with optional undefined per DropdownMenuActionViewItem constructor.

* Cleaned up new control, removing unneeded code and referencing what the class needs. Corrected style declaration for overriding input box padding. Removed unused notebook color styles. Scoped element styles to the toolbar so others outside the toolbar are not affected.

* Removed unnecessary !important from style override.

* Removed reference to unused color entry.

* Syntax cleanup.

* Put notebook toolbar improvements behind the preview flag. This involves some conditionals and CSS classes.

* Updated icon used for Manage Packages. Created and updated styles for notebook toolbar icon spacing. Modified notebook.component contributed actions so that the label text is shifted into the title attribute. Added new icon for Not Trusted toggle.

* Replaced SVG code for not-trusted icon.

* Addressed PR feedback: changed masked classname. Revised component and CSS accordingly. Removed unnecessary instance of in-preview class. Fixed code logic that assigns label text to tooltip on incoming contributed action

src/sql/media/icons/action-collapse.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 1H16V2H0V1ZM7 5V4H16V5H7ZM0.148438 6.14844L2.5 3.79688L4.85156 6.14844L4.14844 6.85156L3 5.71094V15H2V5.71094L0.851562 6.85156L0.148438 6.14844Z" fill="#0078D4"/>
+</svg>

src/sql/media/icons/action-expand.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <title>opac_command_icons_bv</title>
+  <path d="M0,1H16V2H0ZM3,13.289l1.148-1.141.7.7L2.5,15.2.148,12.852l.7-.7L2,13.289V4H3ZM7,5V4h9V5ZM7,8V7h9V8Zm0,3V10h9v1Zm0,3V13h9v1Z"/>
+  <rect width="16" height="16" fill="none"/>
+</svg>

src/sql/media/icons/clear.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="15">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H15.953V14.4609H0V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.75 1.414L4.203 6.961L9 11.75L14.539 6.211L9.75 1.414ZM7.289 13.461L8.289 12.461L3.5 7.664L1.109 10.062C1.036 10.136 1 10.227 1 10.336C1 10.445 1.036 10.537 1.109 10.609L3.953 13.461H7.289ZM8.711 13.461H12V14.461H3.539L0.391 11.305C0.266 11.18 0.169 11.033 0.102 10.863C0.034 10.694 0 10.518 0 10.336C0 10.154 0.034 9.978 0.102 9.809C0.169 9.64 0.269 9.49 0.398 9.359L9.75 0L15.953 6.211L8.711 13.461Z" fill="#0078D4"/>
+</g>
+</svg>

src/sql/media/icons/code.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.125 1.5H7.875L4.875 10.5H4.125L7.125 1.5Z" fill="#0078D4"/>
+<path d="M9.07481 8.92422L8.5498 8.32422L10.9498 5.99922L8.5498 3.67422L9.07481 3.07422L11.9998 5.99922L9.07481 8.92422Z" fill="#0078D4"/>
+<path d="M2.925 8.92422L3.45 8.32422L1.05 5.99922L3.45 3.67422L2.925 3.07422L0 5.99922L2.925 8.92422Z" fill="#0078D4"/>
+</svg>

src/sql/media/icons/common-icons.css

@@ -4,12 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 
 .vs .codicon.settings {
-	background-image: url('settings.svg');
+	background-image: url("settings.svg");
 }
 
 .vs-dark .codicon.settings,
 .hc-black .codicon.settings {
-	background-image: url('settings_inverse.svg');
+	background-image: url("settings_inverse.svg");
 }
 
 .vs .codicon.backup,
@@ -123,21 +123,21 @@
 .vs .codicon.scriptToClipboard,
 .vs-dark .codicon.scriptToClipboard,
 .hc-black .codicon.scriptToClipboard {
-	background-image: url('script_to_clipboard.svg');
+	background-image: url("script_to_clipboard.svg");
 	background-repeat: no-repeat;
 	background-position: 2px center;
 }
 
 .vs .codicon.close,
 .vs .codicon.remove {
-	background: url('close.svg') center center no-repeat !important;
+	background: url("close.svg") center center no-repeat !important;
 }
 
 .vs-dark .codicon.close,
 .hc-black .codicon.close,
 .vs-dark .codicon.remove,
 .hc-black .codicon.remove {
-	background: url('close_inverse.svg') center center no-repeat !important;
+	background: url("close_inverse.svg") center center no-repeat !important;
 }
 
 .vs .codicon.filter {
@@ -181,20 +181,20 @@
 
 .hc-black .codicon.toggle-more,
 .vs-dark .codicon.toggle-more {
-	background: url('ellipsis-inverse.svg') center center no-repeat;
+	background: url("ellipsis-inverse.svg") center center no-repeat;
 }
 
 .vs .codicon.toggle-more {
-	background: url('ellipsis.svg') center center no-repeat;
+	background: url("ellipsis.svg") center center no-repeat;
 }
 
 .hc-black .codicon.new,
 .vs-dark .codicon.new {
-	background: url('new_inverse.svg') center center no-repeat;
+	background: url("new_inverse.svg") center center no-repeat;
 }
 
 .vs .codicon.new {
-	background: url('new.svg') center center no-repeat;
+	background: url("new.svg") center center no-repeat;
 }
 
 .vs .codicon.new-query,
@@ -206,7 +206,7 @@
 .vs .codicon.configure-dashboard,
 .hc-black .codicon.configure-dashboard,
 .vs-dark .codicon.configure-dashboard {
-	background: url('configuredashboard.svg') center center no-repeat;
+	background: url("configuredashboard.svg") center center no-repeat;
 }
 
 .vs .codicon.edit,
@@ -217,95 +217,212 @@
 
 .hc-black .codicon.pin,
 .vs-dark .codicon.pin {
-	background: url('pin_inverse.svg') center center no-repeat;
+	background: url("pin_inverse.svg") center center no-repeat;
 }
 
 .vs .codicon.pin {
-	background: url('pin.svg') center center no-repeat;
+	background: url("pin.svg") center center no-repeat;
 }
 
 .hc-black .codicon.unpin,
 .vs-dark .codicon.unpin {
-	background: url('unpin_inverse.svg') center center no-repeat;
+	background: url("unpin_inverse.svg") center center no-repeat;
 }
 
 .vs .codicon.unpin {
-	background: url('unpin.svg') center center no-repeat;
+	background: url("unpin.svg") center center no-repeat;
 }
 
 .vs .sql.codicon.pause {
-	background-image: url('pause.svg')
+	background-image: url("pause.svg");
 }
 
 .vs-dark .sql.codicon.pause,
 .hc-black .sql.codicon.pause {
-	background-image: url('pause_inverse.svg')
+	background-image: url("pause_inverse.svg");
 }
 
 .vs .sql.codicon.continue {
-	background-image: url('continue.svg')
+	background-image: url("continue.svg");
 }
 
 .vs-dark .sql.codicon.continue,
 .hc-black .sql.codicon.continue {
-	background-image: url('continue_inverse.svg')
+	background-image: url("continue_inverse.svg");
 }
 
 .vs .sql.codicon.checked {
-	background-image: url('check.svg')
+	background-image: url("check.svg");
 }
 
 .vs-dark .sql.codicon.checked,
 .hc-black .sql.codicon.checked {
-	background-image: url('check_inverse.svg')
+	background-image: url("check_inverse.svg");
 }
 
 .vs .sql.codicon.start {
-	background-image: url('start.svg')
+	background-image: url("start.svg");
 }
 
 .vs-dark .sql.codicon.start,
 .hc-black .sql.codicon.start {
-	background-image: url('start_inverse.svg')
+	background-image: url("start_inverse.svg");
 }
 
 .vs .sql.codicon.stop {
-	background-image: url('stop.svg')
+	background-image: url("stop.svg");
 }
 
 .vs-dark .sql.codicon.stop,
 .hc-black .sql.codicon.stop {
-	background-image: url('stop_inverse.svg')
+	background-image: url("stop_inverse.svg");
 }
 
 /* Notebook cells */
 .codicon.toolbarIconRunInactive {
-	background-image: url('execute_cell_grey.svg');
+	background-image: url("execute_cell_grey.svg");
 }
 .codicon.toolbarIconRun {
-	background-image: url('execute_cell.svg');
+	background-image: url("execute_cell.svg");
 }
 .codicon.toolbarIconRunError {
-	background-image: url('execute_cell_error.svg');
+	background-image: url("execute_cell_error.svg");
 }
 .codicon.toolbarIconStop {
-	background-image: url('stop_cell_solidanimation.svg');
+	background-image: url("stop_cell_solidanimation.svg");
 }
 .vs-dark .codicon.toolbarIconRunInactive {
-	background-image: url('execute_cell_dark.svg');
+	background-image: url("execute_cell_dark.svg");
 }
 .vs-dark .codicon.toolbarIconRun {
-	background-image: url('execute_cell_white.svg');
+	background-image: url("execute_cell_white.svg");
 }
 .hc-black .codicon.toolbarIconRunInactive {
-	background-image: url('execute_cell_hc.svg');
+	background-image: url("execute_cell_hc.svg");
 }
 .hc-black .codicon.toolbarIconRun {
-	background-image: url('execute_cell_orange_hc.svg');
+	background-image: url("execute_cell_orange_hc.svg");
 }
 .vs-dark .codicon.toolbarIconStop,
 .hc-black .codicon.toolbarIconStop {
-	background-image: url('stop_cell_solidanimation_inverse.svg');
+	background-image: url("stop_cell_solidanimation_inverse.svg");
+}
+
+/* Icons as masked elements for easy theme switching.
+Includes non-masked style declarations. */
+.masked-icon {
+	display: inline-block;
+	height: 20px;
+	width: 20px;
+	-webkit-mask-position: center;
+	-webkit-mask-repeat: no-repeat;
+	mask-position: center;
+	mask-repeat: no-repeat;
+	-webkit-mask-size: 50% 100%;
+	mask-size: 50% 100%;
+}
+
+.codicon.bold {
+	-webkit-mask-image: url("toolbar-bold.svg");
+	mask-image: url("toolbar-bold.svg");
+}
+.codicon.italic {
+	-webkit-mask-image: url("toolbar-italic.svg");
+	mask-image: url("toolbar-italic.svg");
+}
+.codicon.underline {
+	-webkit-mask-image: url("toolbar-underline.svg");
+	mask-image: url("toolbar-underline.svg");
+}
+.codicon.highlight {
+	-webkit-mask-image: url("toolbar-highlight.svg");
+	mask-image: url("toolbar-highlight.svg");
+}
+.codicon.code {
+	-webkit-mask-image: url("toolbar-code.svg");
+	mask-image: url("toolbar-code.svg");
+}
+.codicon.insert-link {
+	-webkit-mask-image: url("toolbar-link.svg");
+	mask-image: url("toolbar-link.svg");
+}
+.codicon.list {
+	-webkit-mask-image: url("toolbar-list.svg");
+	mask-image: url("toolbar-list.svg");
+}
+.codicon.ordered-list {
+	-webkit-mask-image: url("toolbar-ordered-list.svg");
+	mask-image: url("toolbar-ordered-list.svg");
+}
+.codicon.insert-image {
+	-webkit-mask-image: url("toolbar-image.svg");
+	mask-image: url("toolbar-image.svg");
+}
+.codicon.split-toggle-on {
+	-webkit-mask-image: url("toolbar-preview-toggle-on.svg");
+	mask-image: url("toolbar-preview-toggle-on.svg");
+}
+.codicon.split-toggle-off {
+	-webkit-mask-image: url("toolbar-preview-toggle-off.svg");
+	mask-image: url("toolbar-preview-toggle-off.svg");
+}
+.codicon.code {
+	-webkit-mask-image: url("code.svg");
+	mask-image: url("code.svg");
+}
+.codicon.markdown {
+	-webkit-mask-image: url("markdown.svg");
+	mask-image: url("markdown.svg");
+}
+
+.codicon:not(.masked-icon).icon-expand-cells {
+	background-image: url("action-expand.svg");
+}
+.codicon.masked-icon.icon-expand-cells {
+	background-image: none;
+	-webkit-mask-image: url("action-expand.svg");
+	mask-image: url("action-expand.svg");
+}
+
+.codicon:not(.masked-icon).icon-collapse-cells {
+	background-image: url("action-collapse.svg");
+}
+.codicon.masked-icon.icon-collapse-cells {
+	-webkit-mask-image: url("action-collapse.svg");
+	mask-image: url("action-collapse.svg");
+}
+
+.codicon:not(.masked-icon).icon-clear-results {
+	background-image: url("clear.svg");
+}
+.codicon.masked-icon.icon-clear-results {
+	-webkit-mask-image: url("clear.svg");
+	mask-image: url("clear.svg");
+}
+
+.codicon:not(.masked-icon).icon-shield {
+	background-image: url("shield.svg");
+}
+.codicon.masked-icon.icon-shield {
+	-webkit-mask-image: url("shield.svg");
+	mask-image: url("shield.svg");
+}
+
+.codicon:not(.masked-icon).icon-shield-x {
+	background-image: url("shield-x.svg");
+}
+.codicon.masked-icon.icon-shield-x {
+	-webkit-mask-image: url("shield-x.svg");
+	mask-image: url("shield-x.svg");
+}
+
+.codicon:not(.masked-icon).packages {
+	background-image: url("packages.svg");
+}
+.codicon.masked-icon.packages {
+	background-image: none;
+	-webkit-mask-image: url("packages.svg");
+	mask-image: url("packages.svg");
 }
 
 .codicon.arrow-up {
@@ -316,78 +433,95 @@
 	background-image: url("chevron_up_inverse.svg");
 }
 
-.codicon.arrow-down {
+.codicon:not(.masked-icon).arrow-down {
 	background-image: url("chevron_down.svg");
 }
-.vs-dark .codicon.arrow-down,
-.hc-black .codicon.arrow-down {
+.vs-dark .codicon:not(.masked-icon).arrow-down,
+.hc-black .codicon:not(.masked-icon).arrow-down {
 	background-image: url("chevron_down_inverse.svg");
 }
-
-/* Icons as masked elements for easy theme switching */
-.codicon.bold {
-	-webkit-mask-image: url('toolbar-bold.svg');
-	mask-image: url('toolbar-bold.svg');
-}
-.codicon.italic {
-	-webkit-mask-image: url('toolbar-italic.svg');
-	mask-image: url('toolbar-italic.svg');
-}
-.codicon.highlight {
-	-webkit-mask-image: url('toolbar-highlight.svg');
-	mask-image: url('toolbar-highlight.svg');
-}
-.codicon.code {
-	-webkit-mask-image: url('toolbar-code.svg');
-	mask-image: url('toolbar-code.svg');
-}
-.codicon.insert-link {
-	-webkit-mask-image: url('toolbar-link.svg');
-	mask-image: url('toolbar-link.svg');
-}
-.codicon.list {
-	-webkit-mask-image: url('toolbar-list.svg');
-	mask-image: url('toolbar-list.svg');
-}
-.codicon.ordered-list {
-	-webkit-mask-image: url('toolbar-ordered-list.svg');
-	mask-image: url('toolbar-ordered-list.svg');
-}
-.codicon.insert-image {
-	-webkit-mask-image: url('toolbar-image.svg');
-	mask-image: url('toolbar-image.svg');
-}
-.codicon.split-toggle-on {
-	-webkit-mask-image: url('toolbar-preview-toggle-on.svg');
-	mask-image: url('toolbar-preview-toggle-on.svg');
-}
-.codicon.split-toggle-off {
-	-webkit-mask-image: url('toolbar-preview-toggle-off.svg');
-	mask-image: url('toolbar-preview-toggle-off.svg');
+.codicon.masked-icon.arrow-down {
+	background-image: none;
+	-webkit-mask-image: url("chevron_down.svg");
+	mask-image: url("chevron_down.svg");
+}
+
+.vs .codicon.new-blue {
+	background-image: url("new-blue.svg");
+}
+.vs .codicon.start-outline {
+	background-image: url("start-outline.svg");
+}
+
+/* Masked element inside pseudo element */
+.masked-pseudo {
+	background-image: none !important;
+}
+.masked-pseudo:before,
+.masked-pseudo-after:after {
+	content: "";
+	display: block;
+	position: absolute;
+	-webkit-mask-position: center;
+	-webkit-mask-repeat: no-repeat;
+	mask-position: center;
+	mask-repeat: no-repeat;
+	-webkit-mask-size: 50% 100%;
+	mask-size: 50% 100%;
+}
+.masked-pseudo:before {
+	height: 23px;
+	left: 0;
+	top: 2px;
+	width: 30px;
+}
+.masked-pseudo-after:after {
+	height: 23px;
+	right: 0;
+	top: 2px;
+	width: 30px;
+}
+.masked-pseudo-after.dropdown-arrow:after {
+	background-image: none;
+	-webkit-mask-image: url("chevron_down.svg");
+	mask-image: url("chevron_down.svg");
+}
+.masked-pseudo.add-new:before {
+	-webkit-mask-image: url("new.svg");
+	mask-image: url("new.svg");
+}
+.masked-pseudo.start-outline:before {
+	-webkit-mask-image: url("start-outline.svg");
+	mask-image: url("start-outline.svg");
+}
+
+.masked-pseudo.code:before {
+	-webkit-mask-image: url("code.svg");
+	mask-image: url("code.svg");
+}
+.masked-pseudo.markdown:before {
+	-webkit-mask-image: url("markdown.svg");
+	mask-image: url("markdown.svg");
 }
 
-/* Cell toolbar icons */
 .cell-tool-close {
-	background-image: url('close-blue.svg');
+	background-image: url("close-blue.svg");
 }
 .cell-tool-edit {
-	background-image: url('edit.svg');
-}
-.cell-tool-add {
-	background-image: url('new-blue.svg');
+	background-image: url("edit.svg");
 }
 .cell-tool-move-up {
-	background-image: url('down-arrow-blue.svg');
+	background-image: url("down-arrow-blue.svg");
 	transform: scale(-1);
 }
 .cell-tool-move-down {
-	background-image: url('down-arrow-blue.svg');
+	background-image: url("down-arrow-blue.svg");
 }
 .cell-tool-delete {
-	background-image: url('garbage-can-blue.svg');
+	background-image: url("garbage-can-blue.svg");
 }
 .cell-tool-more {
-	background-image: url('ellipsis-blue.svg');
+	background-image: url("ellipsis-blue.svg");
 }
 
 .database-colored.codicon {

src/sql/media/icons/markdown.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.97141 5.96478C3.91424 6.1158 3.85805 6.26778 3.80285 6.42072L3.76737 6.42073C3.73189 6.27162 3.6826 6.12346 3.61952 5.97626C3.55643 5.82906 3.49335 5.68473 3.43026 5.54327L1.14736 0.42188H0V7.7627H0.839822V2.8478C0.839822 2.60692 0.837851 2.36701 0.833908 2.12805C0.829965 1.88909 0.818137 1.64918 0.798423 1.40831C0.837851 1.53448 0.874322 1.66256 0.907836 1.79255C0.94135 1.92255 0.985707 2.0468 1.04091 2.16533L3.5722 7.76272H3.99803L6.53523 2.11944C6.58649 2.00857 6.62887 1.89195 6.66239 1.76961C6.6959 1.64726 6.72843 1.52683 6.75997 1.4083C6.74815 1.64917 6.73632 1.88718 6.72449 2.12231C6.71266 2.35745 6.70675 2.59545 6.70675 2.83632V7.7627H7.57022V0.421875H6.48201L4.15771 5.52032C4.09068 5.66561 4.02858 5.81376 3.97141 5.96478ZM10.2198 7.91182L12 6.18558L11.4677 5.66943L10.5983 6.50674V0.421884H9.84128V6.50674L8.97188 5.66943L8.4396 6.18558L10.2198 7.91182Z" fill="#0078D4"/>
+</svg>

src/sql/media/icons/packages.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 8H15V16H5V8H4V5H10V3H2V10H5V11H1V3H0V0H12V3H11V5H16V8ZM1 2H11V1H1V2ZM14 8H6V15H14V8ZM15 6H5V7H15V6ZM11 12H7V11H11V12ZM7 14V13H10V14H7Z" fill="#0078D4"/>
+</svg>

src/sql/media/icons/shield-x.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.707107 0.0467995L0 0.753906L13.2731 14.027L13.9802 13.3199L0.707107 0.0467995Z" fill="#0078D4"/>
+<path d="M11.919 11.2462C11.5113 11.7276 11.0706 12.1801 10.6 12.6002C10.118 13.0289 9.61185 13.4295 9.084 13.8002C8.56133 14.1729 8.03333 14.5129 7.5 14.8202C6.958 14.5082 6.42667 14.1699 5.906 13.8052C5.37988 13.4346 4.87694 13.0322 4.4 12.6002C3.92098 12.1679 3.47225 11.7031 3.057 11.2092C2.64762 10.7248 2.28594 10.2021 1.977 9.6482C1.66983 9.09775 1.42851 8.51306 1.258 7.9062C1.0845 7.28581 0.997672 6.6444 1 6.0002V2.9842C1.7568 2.94731 2.50663 2.82145 3.234 2.6092C3.24581 2.60679 3.25749 2.60378 3.269 2.6002L2.452 1.7832H2.445C2.05379 1.86792 1.65717 1.92539 1.258 1.9552C0.852 1.9852 0.432667 2.0002 0 2.0002V6.0002C0.00576517 7.43903 0.376682 8.85285 1.078 10.1092C1.4206 10.7198 1.81825 11.2979 2.266 11.8362C2.72145 12.3857 3.22039 12.8977 3.758 13.3672C4.29894 13.8419 4.86653 14.2852 5.458 14.6952C6.052 15.1072 6.652 15.4875 7.258 15.8362L7.5 15.9772L7.742 15.8362C8.36412 15.4911 8.9667 15.1118 9.547 14.7002C10.1359 14.2839 10.7033 13.838 11.247 13.3642C11.7421 12.9319 12.205 12.4639 12.632 11.9642L11.919 11.2462Z" fill="#0078D4"/>
+<path d="M13.7422 1.95309C13.343 1.92327 12.9464 1.8658 12.5552 1.78109C12.1655 1.69691 11.7838 1.57948 11.4142 1.43009C11.022 1.2698 10.6454 1.07363 10.2892 0.844089C10.0778 0.702279 9.85581 0.57691 9.6252 0.469089C9.40678 0.36608 9.18238 0.276252 8.9532 0.200089C8.72526 0.126304 8.4909 0.0740751 8.2532 0.0440894C8.0034 0.0134013 7.75188 -0.0012953 7.5002 8.94351e-05C7.00561 8.10423e-05 6.51358 0.0711405 6.0392 0.211089C5.56916 0.35906 5.12215 0.572129 4.7112 0.844089C4.35504 1.07363 3.97844 1.2698 3.5862 1.43009C3.5692 1.43709 3.5512 1.43909 3.5332 1.44609L4.2952 2.20709C4.63598 2.049 4.96543 1.86757 5.2812 1.66409C5.60941 1.44477 5.96739 1.27369 6.3442 1.15609C6.71995 1.04837 7.10935 0.995823 7.5002 1.00009C7.89393 1.00048 8.28569 1.05568 8.6642 1.16409C9.03785 1.27977 9.39309 1.44813 9.7192 1.66409C10.3557 2.07474 11.0473 2.39292 11.7732 2.60909C12.4983 2.82084 13.2457 2.9467 14.0002 2.98409V6.00009C13.9932 6.64417 13.9038 7.28471 13.7342 7.90609C13.5671 8.5129 13.3285 9.09768 13.0232 9.64809C12.8725 9.92209 12.7089 10.1888 12.5322 10.4481L13.2482 11.1641C13.4961 10.823 13.7238 10.4677 13.9302 10.1001C14.2692 9.48769 14.534 8.83711 14.7192 8.16209C14.9092 7.45725 15.0037 6.73009 15.0002 6.00009V2.00009C14.5682 2.00009 14.1489 1.98442 13.7422 1.95309Z" fill="#0078D4"/>
+</svg>

src/sql/media/icons/shield.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.26991 1.02742C8.02998 0.993516 7.777 0.976562 7.51099 0.976562C6.97897 0.976562 6.49127 1.04567 6.04791 1.1839C5.60456 1.32212 5.1612 1.53467 4.71784 1.82155C4.34229 2.06148 3.96674 2.25708 3.59119 2.40835C3.21564 2.55961 2.83488 2.67697 2.4489 2.76042C2.06292 2.84388 1.6665 2.90125 1.25966 2.93255C0.852811 2.96385 0.432925 2.97949 0 2.97949V6.98536C0 7.74689 0.0951916 8.4693 0.285574 9.15259C0.475954 9.83589 0.739362 10.484 1.07579 11.0968C1.41223 11.7097 1.80994 12.2874 2.26895 12.8299C2.72795 13.3723 3.22607 13.8822 3.76332 14.3594C4.30056 14.8367 4.8678 15.2814 5.46503 15.6934C6.06226 16.1055 6.6634 16.4862 7.26845 16.8357L7.51099 16.9765L7.75353 16.8357C8.35859 16.4862 8.95972 16.1055 9.55695 15.6934C10.1542 15.2814 10.7214 14.8367 11.2587 14.3594C11.7959 13.8822 12.294 13.3723 12.753 12.8299C13.212 12.2874 13.6098 11.7097 13.9462 11.0968C14.2826 10.484 14.546 9.83589 14.7364 9.15259C14.9268 8.4693 15.022 7.74689 15.022 6.98536V2.97949C14.5891 2.97949 14.1692 2.96385 13.7623 2.93255C13.3555 2.90125 12.9591 2.84388 12.5731 2.76042C12.1871 2.67697 11.8063 2.55961 11.4308 2.40835C11.0552 2.25708 10.6797 2.06149 10.3041 1.82155C10.0799 1.68072 9.85817 1.55684 9.6391 1.44991C9.42003 1.34299 9.19705 1.25431 8.97016 1.1839C8.74326 1.11348 8.50985 1.06132 8.26991 1.02742ZM11.7868 3.58976C12.4988 3.7984 13.2433 3.92358 14.0205 3.96531L14.0205 6.98536C14.0205 7.64778 13.9331 8.28413 13.7584 8.8944C13.5837 9.50467 13.345 10.0863 13.0425 10.6391C12.74 11.192 12.3801 11.7149 11.9628 12.2078C11.5455 12.7008 11.097 13.1637 10.6171 13.5966C10.1372 14.0295 9.63259 14.4312 9.10317 14.8015C8.57375 15.1718 8.04302 15.5109 7.51099 15.8186C6.97897 15.5109 6.44824 15.1718 5.91882 14.8015C5.3894 14.4312 4.88476 14.0295 4.40489 13.5966C3.92502 13.1637 3.47645 12.7008 3.05917 12.2078C2.64189 11.7149 2.28199 11.192 1.97946 10.6391C1.67694 10.0863 1.43831 9.50467 1.26357 8.8944C1.08884 8.28413 1.00147 7.64778 1.00147 6.98536V3.96531C1.77865 3.92358 2.52323 3.7984 3.23521 3.58976C3.94719 3.38112 4.63178 3.06556 5.28899 2.64306C5.64368 2.41356 5.99706 2.24535 6.34914 2.13842C6.70122 2.03149 7.0885 1.97803 7.51099 1.97803C7.93348 1.97803 8.32077 2.03149 8.67285 2.13842C9.02493 2.24535 9.3783 2.41356 9.73299 2.64306C10.3902 3.06556 11.0748 3.38112 11.7868 3.58976Z" fill="#0078D4"/>
+</svg>

src/sql/media/icons/start-outline.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 2.7L12.2 8L3 13.3V2.7ZM2 1V15L14.3 8L2 1Z" fill="#0078D4"/>
+</svg>

src/sql/media/icons/toolbar-underline.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8984 21.1333C15.0599 21.1333 14.3464 21.0215 13.7578 20.7979C13.1693 20.5743 12.6901 20.251 12.3203 19.8281C11.9505 19.4052 11.6771 18.8972 11.5 18.3042C11.3229 17.7111 11.237 17.0427 11.2422 16.299V9H12.7422V16.2042C12.7422 16.734 12.7969 17.2226 12.9062 17.6698C13.0156 18.117 13.2005 18.5035 13.4609 18.8292C13.7214 19.1549 14.0625 19.4125 14.4844 19.6021C14.9062 19.7917 15.4297 19.884 16.0547 19.8792C16.6536 19.8792 17.1562 19.7917 17.5625 19.6167C17.9688 19.4417 18.2995 19.1962 18.5547 18.8802C18.8099 18.5642 18.9896 18.1899 19.0938 17.7573C19.1979 17.3247 19.2526 16.8507 19.2578 16.3354V9H20.7578V16.1094C20.7578 16.8774 20.6693 17.5701 20.4922 18.1875C20.3151 18.8049 20.0312 19.3323 19.6406 19.7698C19.25 20.2073 18.7474 20.5427 18.1328 20.776C17.5182 21.0094 16.7734 21.1285 15.8984 21.1333ZM11 22.0667H21V23H11V22.0667Z" fill="#323130"/>
+</svg>