UI: panels, collapsible panel, synchronous components, etc.

etc/css/layout.css

@@ -0,0 +1,87 @@
+
+.app-frame-container {
+  display: flex;
+  flex-direction: row;
+  width: 100vw;
+  height: calc(100% - 40px);
+}
+
+.app-frame {
+  margin-left: 1px;
+  flex: auto 0 0;
+}
+
+.app-frame:first-child {
+  margin-left: 0px;
+}
+
+.app-frame-inner {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin-left: 1px;
+}
+
+.app-frame-handle {
+  position: absolute;
+  top: 40px;
+
+  width: 5px;
+  height: calc(100% - 40px);
+  background-color: #4F95FF;
+  border-radius: 2px;
+  opacity: 0;
+
+  z-index: 10;
+  overflow: hidden;
+}
+
+.app-frame-handle:hover {
+  cursor: col-resize;
+  transition: opacity 0.5s;
+  opacity: 0.4;
+}
+
+.app-frame-handle:active,
+.app-frame-handle-active {
+  transition: opacity 0.5s;
+  opacity: 1;
+}
+
+.app-panel {
+  padding-bottom: 1px;
+}
+
+.app-panel-collapsed {
+  flex-grow: 0;
+  height: min-content !important;
+}
+
+.app-panel-expanded {
+  flex-grow: 1;
+}
+
+.app-panel-handle {
+  position: absolute;
+
+  width: 100%;
+  height: 5px;
+  background-color: #4F95FF;
+  border-radius: 2px;
+  opacity: 0;
+
+  z-index: 10;
+}
+
+.app-panel-handle:hover {
+  cursor: row-resize;
+  transition: opacity 0.5s;
+  opacity: 0.4;
+}
+
+.app-panel-handle:active,
+.app-panel-handle-active {
+  transition: opacity 0.5s;
+  opacity: 1;
+}

etc/css/panel.css

@@ -0,0 +1,77 @@
+.collapsible-panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  /* height is determined by state */
+  overflow: hidden;
+}
+/* when is a collapsible-panel is collapsed, it should reduce its bounding box, thereby triggering its resize observer */
+.panel-state-collapsed {
+  height: min-content;
+}
+
+/* when is a collapsible-panel is expanded, it should take the full height of its parent app-panel */
+.panel-state-expanded {
+  height: 100%;
+}
+
+/* title area */
+
+.collapsible-panel-title {
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+.collapsible-panel-title-inner {
+  background-color: #232833;
+
+  display: flex;
+  font-weight: 600;
+  font-size: 13px;
+  color: #BDC1CC;
+  width: 100%;
+  height: 30px;
+  align-items: center;
+
+  cursor: pointer;
+}
+
+.collapsible-panel-title-inner:hover {
+  background-color: #272c38;
+}
+
+.btn_close {
+  margin-left: auto !important;
+  padding-right: 4px;
+}
+
+/* content area */
+
+.collapsible-panel-content {
+  background-color: #101115;
+  opacity: 1;
+  max-height: 100vh;
+  flex-grow: 1;
+  flex-shrink: 1;
+  transition: all 0.1s ease-out;
+
+  overflow: scroll;
+  padding-bottom: 1px;
+  border-bottom: 4px solid #232833;
+}
+
+.panel-state-collapsed .collapsible-panel-content {
+  opacity: 1;
+  max-height: 0vh;
+}
+
+.panel-state-collapsed .collapsible-panel-title {
+  opacity: 1;
+}
+
+.collapsible-panel-content-inner {
+  padding: 8px;
+  height: max-content;
+}