[do not merge] Search UX v2 #4: Search page & AddFilterModal

frontend/src/js/components/workspace/WorkspaceSummary.tsx

@@ -24,6 +24,7 @@ import { CaptureFromUrl } from "../Uploads/CaptureFromUrl";
 import { EuiText } from "@elastic/eui";
 import { FileAndFolderCounts } from "../UtilComponents/TreeBrowser/FileAndFolderCounts";
 import buildLink from "../../util/buildLink";
+import { buildWorkspaceSearchQ } from "../Search/chipParsing";
 import history from "../../util/history";
 import { workspaceEntryPath } from "../../util/workspaceUtils";
 import { DownloadTextModal } from "./DownloadTextModal";
@@ -138,11 +139,10 @@ export default function WorkspaceSummary({
       <button
         className="btn"
         onClick={() => {
-          const searchUrl = buildLink(
-            "/search",
-            {},
-            { filters: { workspace: [workspace.id] } },
-          );
+          const searchUrl = buildLink("/search", {
+            q: buildWorkspaceSearchQ(workspace.id),
+            page: 1,
+          });
           window.open(searchUrl, "_blank", "noopener");
         }}
         title="Search workspace"

frontend/src/js/components/workspace/Workspaces.tsx

@@ -73,6 +73,7 @@ import { ReprocessFolderModal } from "./ReprocessFolderModal";
 import { PartialUser } from "../../types/User";
 import { getMyPermissions } from "../../actions/users/getMyPermissions";
 import buildLink from "../../util/buildLink";
+import { buildWorkspaceFolderSearchQ } from "../Search/chipParsing";
 import history from "../../util/history";
 import { takeOwnershipOfWorkspace } from "../../actions/workspaces/takeOwnershipOfWorkspace";
 import { setNodesAsExpanded } from "../../actions/workspaces/setNodesAsExpanded";
@@ -1068,20 +1069,12 @@ class WorkspacesUnconnected extends React.Component<Props, State> {
             if (menuItemProps.content === "Search in folder") {
               history.push(
                 buildLink("/search", {
-                  q: JSON.stringify([
-                    "",
-                    {
-                      n: "Workspace Folder",
-                      v: entry.name,
-                      op: "+",
-                      t: "workspace_folder",
-                      workspaceId: workspace.id,
-                      folderId: entry.id,
-                    },
-                    "*",
-                  ]),
+                  q: buildWorkspaceFolderSearchQ(
+                    workspace.id,
+                    entry.id,
+                    entry.name,
+                  ),
                   page: 1,
-                  filters: { workspace: [workspace.id] },
                 }),
               );
             }

frontend/src/stylesheets/components/_add-filter-modal.scss

@@ -0,0 +1,200 @@
+// ── Add / Edit Filter Modal ──────────────────────────────────────────
+
+.add-filter-modal {
+  &__panel {
+    width: 420px;
+    max-width: 90vw;
+  }
+
+  &__title {
+    margin: 0 0 $baseSpacing * 1.5;
+    font-size: 18px;
+    font-weight: 600;
+    color: $primaryDark;
+    padding-bottom: $baseSpacing;
+    border-bottom: 1px solid $borderColour;
+  }
+
+  &__field {
+    margin-bottom: $baseSpacing * 1.5;
+  }
+
+  &__label {
+    display: block;
+    font-size: 13px;
+    font-weight: 600;
+    color: $primary;
+    margin-bottom: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  &__select {
+    width: 100%;
+    padding: 8px 10px;
+    border: 1px solid $borderColour;
+    border-radius: $borderRadius;
+    background: white;
+    color: $primaryDark;
+    font-size: 14px;
+
+    &:focus {
+      border-color: $highlightColour;
+      outline: none;
+      box-shadow: 0 0 0 2px rgba($highlightColour, 0.2);
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  &__radio-group {
+    display: flex;
+    gap: $baseSpacing;
+  }
+
+  &__radio {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+    cursor: pointer;
+    color: $primaryDark;
+
+    input {
+      margin: 0;
+    }
+  }
+
+  // ── Value inputs ─────────────────
+
+  &__text-input {
+    width: 100%;
+    padding: 8px 10px;
+    border: 1px solid $borderColour;
+    border-radius: $borderRadius;
+    background: white;
+    color: $primaryDark;
+    font-size: 14px;
+
+    &:focus {
+      border-color: $highlightColour;
+      outline: none;
+      box-shadow: 0 0 0 2px rgba($highlightColour, 0.2);
+    }
+  }
+
+  &__date-input {
+    padding: 8px 10px;
+    border: 1px solid $borderColour;
+    border-radius: $borderRadius;
+    background: white;
+    color: $primaryDark;
+    font-size: 14px;
+
+    &:focus {
+      border-color: $highlightColour;
+      outline: none;
+      box-shadow: 0 0 0 2px rgba($highlightColour, 0.2);
+    }
+  }
+
+  &__date-range {
+    display: flex;
+    gap: $baseSpacing;
+  }
+
+  &__date-range-label {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 13px;
+    font-weight: 500;
+    color: $primary;
+
+    input {
+      width: 100%;
+    }
+  }
+
+  &__multi-select {
+    max-height: 220px;
+    overflow-y: auto;
+    border: 1px solid $borderColour;
+    border-radius: $borderRadius;
+    background: white;
+    padding: 4px 0;
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    cursor: pointer;
+    font-size: 14px;
+    color: $primaryDark;
+
+    &:hover {
+      background: rgba($highlightColour, 0.1);
+    }
+
+    input[type="checkbox"] {
+      margin: 0;
+      flex-shrink: 0;
+    }
+  }
+
+  &__option-label {
+    flex: 1;
+    user-select: none;
+  }
+
+  // ── Actions ──────────────────────
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding-top: $baseSpacing;
+    border-top: 1px solid $borderColour;
+    margin-top: $baseSpacing * 0.5;
+  }
+
+  &__cancel-btn {
+    background: $secondary;
+    color: $primaryDark;
+    border: 1px solid $borderColour;
+    padding: 8px 16px;
+    border-radius: $borderRadius;
+    cursor: pointer;
+    font-size: 14px;
+
+    &:hover {
+      background: $secondaryDark;
+    }
+  }
+
+  &__confirm-btn {
+    background: $primary;
+    color: white;
+    border: none;
+    padding: 8px 20px;
+    border-radius: $borderRadius;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+
+    &:hover {
+      background: $primaryDark;
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+}

frontend/src/stylesheets/components/_search.scss

@@ -1,5 +1,18 @@
-.search {
-  position: relative;
+.search-layout {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - #{$headerHeight} - #{$baseSpacing * 4});
+
+  &__header {
+    flex-shrink: 0;
+    padding-bottom: calc($baseSpacing / 2);
+  }
+
+  &__results-scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
 }
 
 .search-box {
@@ -24,6 +37,41 @@
     padding-left: 0;
     font-weight: 500;
   }
+
+  &__text-input {
+    width: 100%;
+    border: none;
+    outline: none;
+    box-shadow: none;
+    background: none;
+    font-size: 16px;
+    font-weight: 500;
+    color: $primaryDark;
+    padding: 0 $baseSpacing;
+    resize: none;
+    overflow: hidden;
+    font-family: inherit;
+    line-height: 1.4;
+
+    &::placeholder {
+      color: $borderColour;
+    }
+  }
+}
+
+.search__select {
+  appearance: auto;
+  padding: 6px 8px;
+  border: 1px solid $borderColour;
+  border-radius: $borderRadius;
+  background: white;
+  font-size: 13px;
+  cursor: pointer;
+
+  &:focus {
+    border-color: $highlightColour;
+    outline: none;
+  }
 }
 
 .search__underbar {

frontend/src/stylesheets/main.scss

@@ -22,4 +22,5 @@
   "./components/lazy-tree-browser", "./components/modal-action",
   "./components/users", "./components/page", "./components/upload-files",
   "./components/markdown-page", "./components/docs-sidebar",
-  "./components/sidebar-comments", "./components/active-filters";
+  "./components/sidebar-comments", "./components/active-filters",
+  "./components/add-filter-modal";