(core) Update sort and filter UI

Summary:
The sort and filter UI now has a more unified UI, with similar
capabilities that are accessible from different parts of Grist.
It's now also possible to pin individual filters to the filter bar,
which replaces the old toggle for showing all filters in the
filter bar.

Test Plan: Various tests (browser, migration, project).

Reviewers: jarek, dsagal

Reviewed By: jarek, dsagal

Subscribers: dsagal

Differential Revision: https://phab.getgrist.com/D3669

app/client/ui/RightPanelStyles.ts

@@ -33,6 +33,18 @@ export const cssRow = styled('div', `
   }
 `);
 
+export const cssSortFilterColumn = styled('div', `
+  cursor: pointer;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  color: ${theme.text};
+  background-color: ${theme.hover};
+  overflow: hidden;
+  border-radius: 4px;
+  padding: 4px 8px;
+`);
+
 export const cssBlockedCursor = styled('span', `
   &, & * {
     cursor: not-allowed !important;
@@ -51,3 +63,23 @@ export const cssSeparator = styled('div', `
   border-bottom: 1px solid ${theme.pagePanelsBorder};
   margin-top: 16px;
 `);
+
+export const cssSaveButtonsRow = styled('div', `
+  margin: 16px 16px 12px 16px;
+`);
+
+export const cssPinButton = styled('div', `
+  cursor: pointer;
+  --icon-color: ${theme.controlSecondaryFg};
+  border-radius: ${vars.controlBorderRadius};
+  padding: 3px;
+
+  &-pinned {
+    background-color: ${theme.controlPrimaryBg};
+    --icon-color: ${theme.controlPrimaryFg};
+  }
+
+  &:not(&-pinned):hover {
+    background-color: ${theme.hover};
+  }
+`);