core&ui: problem_main: support sort

packages/ui-default/pages/problem_main.page.styl

@@ -204,7 +204,7 @@
   color: #000000
 
 .search > button
-  width: 40px
+  width: 37px
   height: 36px
   border: 1px solid #00B4CC
   background: #00B4CC
@@ -215,6 +215,16 @@
 
 .search > div
   position: absolute
-  right: 50px
-  top: 8px
-  font-size: rem(17px)
+  right: 170px
+  top: 10px
+  font-size: rem(17px)
+
+.search-sort
+  position: absolute
+  border: none
+  top: 1px
+  height: 34px
+  right: 37px
+  color: #000000
+  cursor: pointer
+  width: 120px

packages/ui-default/pages/problem_main.page.tsx

@@ -85,9 +85,12 @@ function updateSelection() {
 
 function loadQuery() {
   const q = $('[name="q"]').val().toString();
+  const sort = $('[name="sort"]').val().toString();
   const url = new URL(window.location.href);
   if (!q) url.searchParams.delete('q');
   else url.searchParams.set('q', q);
+  if (sort && sort !== 'default') url.searchParams.set('sort', sort);
+  else url.searchParams.delete('sort');
   url.searchParams.delete('page');
   pjax.request({ url: url.toString() });
 }
@@ -443,6 +446,7 @@ const page = new NamedPage(['problem_main'], () => {
   });
   $('#searchForm').on('submit', inputChanged);
   $('#searchForm').find('input').on('input', _.debounce(inputChanged, 500));
+  $('#searchForm').find('select[name="sort"]').on('change', inputChanged);
   $('.dialog-button').on('click', (ev) => {
     categoryDialog.clear().open();
     ev.preventDefault();