references

front/sass/_button.scss

@@ -45,3 +45,10 @@
     font-weight: normal;
   }
 }
+
+.button-text{
+  border: none;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+}

front/sass/_dialog.scss

@@ -14,18 +14,19 @@ body:has(dialog[open]) {
 }
 
 dialog {
-  margin: 10px auto;
+  margin: 2vh auto;
   background-color: #fff;
   padding: 34px;
   border: none;
   border-radius: 5px;
   overflow: auto;
+  max-height: 96vh;
   //position: relative;
 
   .close {
     position: absolute;
-    top: 20px;
-    right: 20px;
+    top: 10px;
+    right: 0px;
   }
 
   .dialog-body {
@@ -44,4 +45,9 @@ dialog::backdrop {
   display: flex;
   align-items: center;
   gap: 8px;
+  position: sticky;
+  top: -34px;
+  z-index: 999;
+  background: #fff;
+  padding: 10px 0;
 }

front/sass/_preview.scss

@@ -1,4 +1,4 @@
-.preview-file{
+.preview-file,.preview-reference{
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -24,7 +24,13 @@
     }
   }
 }
-
+.preview-reference{
+  filter: brightness(97%);
+  padding: 10px 20px;
+  margin-bottom: 4px;
+}
 .sortable-ghost{
   border: 2px dashed var(--primary);
-}
+}
+
+.sortable-drag { opacity: 0 !important; } .sortable-ghost { opacity: 1 !important; }

front/sass/_record-edit.scss

@@ -1,5 +1,12 @@
 .record-edit {
+  position: relative;
 
+  .invalid-feedback{
+    color: var(--error);
+    font-size: 15px;
+    line-height: 20px;
+    margin-top: 10px;
+  }
 }
 
 .record-header {
@@ -19,6 +26,7 @@
   margin: 30px 0 0;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 10px;
   font-size: 14px;
   position: relative;
@@ -26,7 +34,7 @@
   padding: 10px;
   border-radius: 12px;
   background: var(--background);
-  filter: brightness(90%);
+  filter: brightness(97%);
 }
 
 .editor-field {

front/sass/_sidebar.scss

@@ -34,7 +34,8 @@
   padding: 3px 12px 6px;
   color: var(--text);
   filter: brightness(94%);
-  border-bottom: 0px solid var(--border-color);
+  border: none;
+  //border-bottom: 0px solid var(--border-color);
   border-radius: 12px;
 
   &:hover {

front/sass/_toolbar.scss

@@ -18,4 +18,26 @@
 }
 .toolbar-filters{ display: flex;
     align-items: center;
-    gap: 5px;}
+    gap: 5px;}
+
+.applied-filters{
+    display: flex;
+    gap: 4px;
+    margin-top: 10px;
+
+    .applied-filter {
+        font-size: 13px;
+        border-radius: 12px;
+        background: var(--background);
+        padding: 3px 10px;
+        display: flex;
+        justify-content: center;
+        gap: 4px;
+        line-height: 22px;
+    }
+
+    .applied-filter:hover {
+        opacity: .8;
+        background-color: #eee;
+    }
+}

front/sass/app.scss

@@ -126,6 +126,7 @@ $themes: (
     --secondary: #7bc8f1;
     --accent: #5086ed;
     --success: #80c671;
+    --error: red;
 
 }