feat(vault): add sorting functionality with persistent storage

webapp/src/styles.css

@@ -300,7 +300,7 @@ input[type='file'].input::file-selector-button:hover {
 }
 
 .btn {
-  height: 42px;
+  height: 36px;
   border: 1px solid transparent;
   border-radius: 999px;
   padding: 0 16px;
@@ -678,13 +678,78 @@ input[type='file'].input::file-selector-button:hover {
 }
 
 .list-head .search-input {
-  height: 38px;
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 36px; 
 }
 
 .list-head .btn {
   white-space: nowrap;
 }
 
+.sort-menu-wrap {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.sort-trigger {
+  min-width: 36px;
+  width: 36px;
+  padding: 0;
+  justify-content: center;
+}
+
+.sort-trigger.active {
+  background: linear-gradient(180deg, #e6f0ff, #d9e9ff);
+  border-color: #9dbbec;
+  color: #175ddc;
+}
+
+.sort-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 30;
+  min-width: 156px;
+  padding: 6px;
+  border: 1px solid #d9e1ee;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
+}
+
+.sort-menu-item {
+  width: 100%;
+  border: none;
+  background: transparent;
+  border-radius: 10px;
+  padding: 9px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  color: #0f172a;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.sort-menu-item:hover {
+  background: #f8fbff;
+}
+
+.sort-menu-item.active {
+  background: linear-gradient(180deg, #e6f0ff, #d9e9ff);
+  color: #175ddc;
+  font-weight: 700;
+}
+
+.sort-menu-check-placeholder {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+}
+
 .list-panel {
   overflow: auto;
   min-height: 0;