feat: enhance mobile vault filter UI and improve styling for better usability

webapp/src/styles/dark.css

@@ -70,6 +70,7 @@
 :root[data-theme='dark'] .textarea,
 :root[data-theme='dark'] select.input,
 :root[data-theme='dark'] .search-input,
+:root[data-theme='dark'] .mobile-vault-filter-trigger,
 :root[data-theme='dark'] .dialog input,
 :root[data-theme='dark'] .dialog textarea,
 :root[data-theme='dark'] .dialog select {
@@ -79,6 +80,13 @@
   box-shadow: none;
 }
 
+:root[data-theme='dark'] .mobile-vault-filter-trigger:hover,
+:root[data-theme='dark'] .mobile-vault-filter-trigger.active {
+  background: var(--panel-muted);
+  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
+  color: var(--text);
+}
+
 :root[data-theme='dark'] .input::placeholder,
 :root[data-theme='dark'] .textarea::placeholder,
 :root[data-theme='dark'] input::placeholder,

webapp/src/styles/forms.css

@@ -31,19 +31,12 @@
 }
 
 select.input {
-  @apply py-0 pr-[42px];
+  @apply py-0 pr-3.5;
   line-height: 1.5;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  background-image:
-    linear-gradient(45deg, transparent 50%, #365fa8 50%),
-    linear-gradient(135deg, #365fa8 50%, transparent 50%);
-  background-position:
-    calc(100% - 18px) calc(50% - 3px),
-    calc(100% - 12px) calc(50% - 3px);
-  background-size: 6px 6px, 6px 6px;
-  background-repeat: no-repeat;
+  appearance: auto;
+  -webkit-appearance: auto;
+  -moz-appearance: auto;
+  background-image: none;
 }
 
 input[type='file'].input {

webapp/src/styles/responsive.css

@@ -302,10 +302,15 @@
   }
 
   .list-head {
-    @apply grid items-center gap-2;
+    @apply grid items-center gap-1.5;
     grid-template-columns: minmax(0, 1fr) auto auto auto;
   }
 
+  .list-head.selection-mode {
+    @apply justify-stretch;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
   .list-count {
     grid-column: auto;
     @apply w-auto whitespace-nowrap text-xs;
@@ -316,15 +321,50 @@
   }
 
   .list-head .search-input {
-    @apply h-[42px] w-full min-w-0 rounded-[14px];
+    @apply h-[34px] w-full min-w-0 rounded-[10px] px-3 py-0 text-[13px] font-semibold;
+    line-height: 34px;
+  }
+
+  .mobile-vault-filter-row {
+    @apply grid min-w-0 gap-1.5;
+    grid-column: 1 / -1;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .list-head .duplicate-mode-head-select {
-    @apply h-[34px] min-w-0 w-auto max-w-full rounded-full;
+    @apply h-[34px] min-w-0 w-auto max-w-full rounded-[10px];
   }
 
   .list-icon-btn {
-    @apply w-auto min-w-0 gap-1.5 whitespace-nowrap px-3 py-0 text-[13px];
+    @apply h-[34px] w-auto min-w-0 gap-1.5 whitespace-nowrap rounded-[10px] px-3 py-0 text-[13px];
+  }
+
+  .list-head.selection-mode > .btn.small {
+    @apply h-[34px] min-w-0 w-full justify-center gap-1 px-2 text-[12px];
+  }
+
+  .list-head.selection-mode > .btn.small .btn-icon {
+    @apply m-0;
+  }
+
+  .sort-trigger {
+    @apply h-[34px] w-[34px] min-w-[34px] rounded-[10px];
+  }
+
+  .sort-trigger.sort-trigger-labeled {
+    @apply h-[34px] w-[34px] min-w-[34px] gap-0 px-0 text-[0];
+  }
+
+  .sort-trigger.sort-trigger-labeled .btn-icon {
+    @apply m-0;
+  }
+
+  .desktop-create-menu-wrap {
+    display: none;
+  }
+
+  .duplicate-mode-head-menu .mobile-vault-filter-menu {
+    min-width: max(100%, 190px);
   }
 
   .toolbar.actions {
@@ -346,6 +386,10 @@
     @apply h-[34px] w-auto min-w-0 gap-1.5 whitespace-nowrap rounded-full px-3 py-0 text-[13px];
   }
 
+  .list-count-status {
+    @apply mb-1 px-1;
+  }
+
   .mobile-fab-wrap {
     @apply fixed right-3.5 z-[45];
     bottom: calc(14px + var(--mobile-tabbar-height, 70px) + env(safe-area-inset-bottom));

webapp/src/styles/vault.css

@@ -221,24 +221,110 @@ select.input.duplicate-mode-toolbar-select {
   @apply h-[34px] w-auto min-w-[156px] max-w-full;
 }
 
+.duplicate-mode-head-menu {
+  @apply min-w-0;
+}
+
 .duplicate-mode-toolbar-select {
   @apply w-auto max-w-[170px] shrink-0;
 }
 
 .list-head {
-  @apply mb-2 flex items-center gap-2.5;
+  @apply mb-1.5 flex items-center gap-2;
+  min-height: 34px;
 }
 
-.list-head .search-input-wrap {
+.list-head.selection-mode {
+  @apply gap-2;
+}
+
+.list-head.selection-mode > .btn.small {
+  @apply min-w-0 flex-1 justify-center;
+}
+
+.list-head .search-input-wrap,
+.duplicate-mode-head-menu {
   @apply min-w-0 flex-auto;
 }
 
 .list-head .search-input {
-  @apply h-[42px];
+  @apply h-[34px] rounded-[10px] px-3 py-0 text-[13px] font-semibold;
+  line-height: 34px;
 }
 
 .list-head .btn {
-  @apply whitespace-nowrap;
+  @apply h-[34px] whitespace-nowrap rounded-[10px] px-3 py-0 text-[13px];
+}
+
+.mobile-vault-filter-row {
+  @apply hidden;
+}
+
+.mobile-vault-filter-control {
+  @apply relative min-w-0;
+}
+
+.mobile-vault-filter-trigger {
+  @apply flex h-[34px] w-full min-w-0 cursor-pointer items-center gap-1.5 rounded-[10px] border px-2.5 py-0 text-left text-[13px] font-semibold;
+  background: var(--panel);
+  border-color: rgba(74, 103, 150, 0.28);
+  color: var(--muted-strong);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
+  transition:
+    border-color var(--dur-fast) var(--ease-smooth),
+    background-color var(--dur-fast) var(--ease-smooth),
+    color var(--dur-fast) var(--ease-smooth),
+    box-shadow var(--dur-fast) var(--ease-smooth);
+}
+
+.mobile-vault-filter-trigger:hover,
+.mobile-vault-filter-trigger.active {
+  border-color: rgba(43, 102, 217, 0.46);
+  background: #f8fbff;
+  color: var(--primary-strong);
+}
+
+.mobile-vault-filter-trigger:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86);
+}
+
+.mobile-vault-filter-trigger-icon,
+.mobile-vault-filter-item-icon {
+  @apply inline-flex shrink-0 items-center justify-center;
+}
+
+.mobile-vault-filter-trigger-label {
+  @apply min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.mobile-vault-filter-chevron {
+  @apply shrink-0;
+}
+
+.mobile-vault-filter-trigger.active .mobile-vault-filter-chevron {
+  transform: rotate(180deg);
+}
+
+.mobile-vault-filter-menu {
+  @apply left-0 right-auto max-h-[280px] min-w-full overflow-auto;
+  min-width: max(100%, 168px);
+}
+
+.mobile-vault-filter-control:last-child .mobile-vault-filter-menu {
+  @apply left-auto right-0;
+}
+
+.mobile-vault-filter-item {
+  @apply gap-2;
+}
+
+.mobile-vault-filter-item-main {
+  @apply flex min-w-0 items-center gap-2;
+}
+
+.mobile-vault-filter-item-main span:last-child {
+  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
 }
 
 .list-count {
@@ -262,6 +348,10 @@ select.input.duplicate-mode-toolbar-select {
   @apply w-9 min-w-9 justify-center gap-0 p-0;
 }
 
+.sort-trigger.sort-trigger-labeled {
+  @apply h-[34px] w-auto min-w-0 gap-1.5 rounded-[10px] px-3;
+}
+
 .sort-trigger.active {
   background: #e9f1ff;
   border-color: #a9c2ee;
@@ -303,6 +393,30 @@ select.input.duplicate-mode-toolbar-select {
   @apply h-3.5 w-3.5 shrink-0;
 }
 
+.desktop-create-menu-wrap {
+  @apply shrink-0;
+}
+
+.desktop-create-trigger {
+  @apply h-[34px] w-[34px] min-w-[34px] gap-0 rounded-[10px] p-0 text-[0];
+}
+
+.desktop-create-trigger .btn-icon {
+  @apply m-0;
+}
+
+.duplicates-helper-toolbar {
+  @apply justify-start pb-0.5;
+}
+
+.duplicates-helper-toolbar .btn.small {
+  @apply h-[34px] rounded-[10px] px-3 py-0 text-[13px];
+}
+
+.list-count-status {
+  @apply mb-1 pl-1;
+}
+
 .list-panel {
   @apply min-h-0 overflow-auto p-2;
   /* Virtualized rows update top/bottom spacers while scrolling. Chrome's scroll anchoring