added records file picker support for the editor field

ui/src/scss/_base.scss

@@ -127,7 +127,7 @@ code {
     line-height: 1.379rem;
     padding: 0px 4px;
     white-space: nowrap;
-    color: var(--txtPrimaryColor);
+    color: inherit;
     background: var(--baseAlt2Color);
     border-radius: var(--baseRadius);
 }
@@ -527,6 +527,8 @@ a,
     background: var(--baseAlt2Color);
     border-radius: var(--baseRadius);
     color: var(--txtPrimaryColor);
+    outline-offset: -2px;
+    outline: 2px solid transparent;
     @include shadowize();
     i {
         font-size: inherit;
@@ -556,16 +558,31 @@ a,
     &.thumb-circle {
         border-radius: 50%;
     }
-    &.thumb-active {
-        box-shadow: 0px 0px 0px 2px var(--primaryColor);
+
+    // styles
+    @each $name, $color in $colorsMap {
+        &.thumb-#{$name} {
+            outline-color: $color;
+        }
     }
 }
+.handle.thumb:not(.thumb-active),
 a.thumb:not(.thumb-active) {
-    transition: box-shadow var(--baseAnimationSpeed);
+    cursor: pointer;
+    transition: opacity var(--baseAnimationSpeed),
+                outline-color var(--baseAnimationSpeed),
+                transform var(--baseAnimationSpeed),
+                box-shadow var(--baseAnimationSpeed);
     &:hover,
-    &:focus {
+    &:focus-visible,
+    &:active {
+        opacity: 0.8;
         @include shadowize(0px 2px 4px 1px var(--shadowColor));
     }
+    &:active {
+        transition-duration: 0s;
+        transform: scale(0.95);
+    }
 }
 
 .section-title {
@@ -889,3 +906,135 @@ a.thumb:not(.thumb-active) {
     border-radius: var(--baseRadius);
     border: 1px solid var(--baseAlt1Color);
 }
+
+// sidebar menu
+.sidebar-menu {
+    --sidebarListItemMargin: 10px;
+
+    z-index: 0;
+    display: flex;
+    flex-direction: column;
+    width: 200px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background: var(--baseColor);
+    padding: calc(var(--baseSpacing) - 5px) 0 var(--smSpacing);
+    & > * {
+        padding: 0 var(--smSpacing);
+    }
+    .sidebar-content {
+        overflow-x: hidden;
+        overflow-y: auto; /* fallback */
+        overflow-y: overlay;
+        & > :first-child {
+            margin-top: 0;
+        }
+        & > :last-child {
+            margin-bottom: 0;
+        }
+    }
+    .sidebar-footer {
+        margin-top: var(--smSpacing);
+    }
+    .search {
+        display: flex;
+        align-items: center;
+        width: auto;
+        column-gap: 5px;
+        margin: 0 0 var(--xsSpacing);
+        color: var(--txtHintColor);
+        opacity: 0.7;
+        transition: opacity var(--baseAnimationSpeed),
+                    color var(--baseAnimationSpeed);
+        input {
+            border: 0;
+            background: var(--baseColor);
+            transition: box-shadow var(--baseAnimationSpeed),
+                        background var(--baseAnimationSpeed);
+        }
+        .btn-clear {
+            margin-right: -8px;
+        }
+        &:hover,
+        &:focus-within,
+        &.active {
+            opacity: 1;
+            color: var(--txtPrimaryColor);
+            input {
+                background: var(--baseAlt2Color);
+            }
+        }
+    }
+    .sidebar-title {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        width: 100%;
+        margin: var(--baseSpacing) 0 var(--xsSpacing);
+        font-weight: 600;
+        font-size: 1rem;
+        line-height: var(--smLineHeight);
+        color: var(--txtHintColor);
+        .label {
+            font-weight: normal;
+        }
+    }
+    .sidebar-list-item {
+        cursor: pointer;
+        outline: 0;
+        text-decoration: none;
+        position: relative;
+        display: flex;
+        width: 100%;
+        align-items: center;
+        column-gap: 10px;
+        margin: var(--sidebarListItemMargin) 0;
+        padding: 3px 10px;
+        font-size: var(--xlFontSize);
+        min-height: var(--btnHeight);
+        min-width: 0;
+        color: var(--txtHintColor);
+        border-radius: var(--baseRadius);
+        user-select: none;
+        transition: background var(--baseAnimationSpeed),
+                    color var(--baseAnimationSpeed);
+        i {
+            font-size: 18px;
+        }
+        .txt {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        // states
+        &:focus-visible,
+        &:hover,
+        &:active,
+        &.active {
+            color: var(--txtPrimaryColor);
+            background: var(--baseAlt1Color);
+        }
+        &:active {
+            background: var(--baseAlt2Color);
+            transition-duration: var(--activeAnimationSpeed);
+        }
+    }
+    .sidebar-content-compact .sidebar-list-item {
+        --sidebarListItemMargin: 5px;
+    }
+
+    // responsive
+    @media screen and (max-height: 600px) {
+        --sidebarListItemMargin: 5px;
+    }
+    @media screen and (max-width: 1100px) {
+        min-width: 190px;
+        & > * {
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+    }
+}