From ef27900934ff113e8f179e4c8682d1ffb5746f78 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Thu, 13 Jul 2023 17:02:54 +0000
Subject: [PATCH] improve search for mobile (not fix)

---
 packages/app/src/App.jsx                      |  1 +
 .../Layout/draggableDrawer/index.jsx          |  8 ++-
 .../Layout/draggableDrawer/index.less         | 37 +++++++++++--
 .../app/src/components/Searcher/index.jsx     |  4 +-
 .../app/src/components/Searcher/index.less    | 52 +++++++++++++++++++
 .../SearchController/endpoints/getSearch.js   |  8 +--
 6 files changed, 100 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/App.jsx b/packages/app/src/App.jsx
index 51175353..918545df 100755
--- a/packages/app/src/App.jsx
+++ b/packages/app/src/App.jsx
@@ -180,6 +180,7 @@ class ComtyApp extends React.Component {
 						sessionController: this.sessionController,
 					},
 					props: {
+						fillEnd: true,
 						bodyStyle: {
 							height: "100%",
 						}
diff --git a/packages/app/src/components/Layout/draggableDrawer/index.jsx b/packages/app/src/components/Layout/draggableDrawer/index.jsx
index 723cecce..742d72f3 100755
--- a/packages/app/src/components/Layout/draggableDrawer/index.jsx
+++ b/packages/app/src/components/Layout/draggableDrawer/index.jsx
@@ -1,6 +1,7 @@
 // © Jack Hanford https://github.com/hanford/react-drag-drawer
 import React, { Component } from "react"
 import { Motion, spring, presets } from "react-motion"
+import classnames from "classnames"
 import PropTypes from "prop-types"
 import document from "global/document"
 import Observer from "react-intersection-observer"
@@ -329,8 +330,13 @@ export default class DraggableDrawer extends Component {
                             id={id}
                             style={containerStyle}
                             onMouseDown={this.onClickOutside}
-                            className="draggable-drawer"
                             ref={getContainerRef}
+                            className={classnames(
+                                "draggable-drawer",
+                                {
+                                    ["fill-end"]: this.props.fillEnd
+                                }
+                            )}
                         >
                             <Observer
                                 className={HaveWeScrolled}
diff --git a/packages/app/src/components/Layout/draggableDrawer/index.less b/packages/app/src/components/Layout/draggableDrawer/index.less
index b9f2fe07..ec50f20f 100755
--- a/packages/app/src/components/Layout/draggableDrawer/index.less
+++ b/packages/app/src/components/Layout/draggableDrawer/index.less
@@ -15,12 +15,15 @@
 	z-index: 40;
 
 	transition: background-color 0.2s linear;
+
 	overflow-y: hidden;
 	overscroll-behavior: none;
 
 	.draggable-drawer_body {
 		position: absolute;
 
+		z-index: 50;
+
 		bottom: 0px;
 
 		width: 100%;
@@ -29,20 +32,21 @@
 		height: fit-content;
 		max-height: 90%;
 
-		padding: 30px 10px 10px 10px;
-
 		background-color: var(--background-color-primary);
 
+		padding: 30px 10px 10px 10px;
+
 		border-top-left-radius: 8px;
 		border-top-right-radius: 8px;
-		z-index: 50;
 
 		.dragger-area {
 			width: 100%;
 			height: 50px;
 
 			position: absolute;
+
 			display: flex;
+
 			align-items: flex-start;
 			justify-content: center;
 
@@ -59,12 +63,14 @@
 				border-radius: 8px;
 			}
 		}
+	}
 
+	.draggable-drawer_body {
 		&::after {
 			content: "";
 
 			display: block;
-			position: fixed;
+			position: absolute;
 
 			left: 0;
 			bottom: 0;
@@ -79,4 +85,27 @@
 			transform: translateY(95%);
 		}
 	}
+
+	&.fill-end {
+		.draggable-drawer_body {
+			&::after {
+				content: "";
+
+				display: block;
+				position: absolute;
+
+				left: 0;
+				bottom: 0;
+
+				width: 100%;
+				height: 120px;
+
+				z-index: 45;
+
+				background-color: var(--background-color-primary);
+
+				transform: translateY(95%);
+			}
+		}
+	}
 }
\ No newline at end of file
diff --git a/packages/app/src/components/Searcher/index.jsx b/packages/app/src/components/Searcher/index.jsx
index 056b81dc..a61e2998 100755
--- a/packages/app/src/components/Searcher/index.jsx
+++ b/packages/app/src/components/Searcher/index.jsx
@@ -154,7 +154,9 @@ export default (props) => {
         if (typeof props.model === "function") {
             result = await props.model(value)
         } else {
-            result = await SearchModel.search(value)
+            result = await SearchModel.search(value, {
+                limit_per_section: app.isMobile ? 3 : 5
+            })
         }
 
         if (typeof props.onSearchResult === "function") {
diff --git a/packages/app/src/components/Searcher/index.less b/packages/app/src/components/Searcher/index.less
index c47fab6e..950d4ab3 100755
--- a/packages/app/src/components/Searcher/index.less
+++ b/packages/app/src/components/Searcher/index.less
@@ -1,3 +1,53 @@
+html {
+    &.mobile {
+        .searcher {
+            display: flex;
+            width: 100%;
+            height: 100%;
+
+            overflow-y: scroll;
+
+            .searcher_results {
+                display: flex;
+
+                width: 100%;
+                height: 100%;
+
+                overflow-y: scroll;
+
+                .searcher_results_category {
+                    display: flex;
+                    flex-direction: column;
+
+                    padding: 0;
+
+                    gap: 5px;
+
+                    .searcher_results_category_header {
+                        font-size: 0.6rem;
+                    }
+
+                    .searcher_results_category_suggestions {
+                        padding: 0 15px;
+
+                        &#playlists {
+                            display: flex;
+                            flex-direction: column;
+
+                            padding: 0;
+
+                            .playlistItem {
+                                width: 100%;
+                                max-width: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
 .searcher {
     position: relative;
 
@@ -14,6 +64,8 @@
     .results {
         border-radius: 10px;
 
+        width: 100%;
+
         overflow-x: hidden;
         overflow-y: overlay;
     }
diff --git a/packages/server/src/controllers/SearchController/endpoints/getSearch.js b/packages/server/src/controllers/SearchController/endpoints/getSearch.js
index 87953dce..ff73ee23 100644
--- a/packages/server/src/controllers/SearchController/endpoints/getSearch.js
+++ b/packages/server/src/controllers/SearchController/endpoints/getSearch.js
@@ -6,7 +6,7 @@ export default {
     route: "/",
     middlewares: ["withOptionalAuthentication"],
     fn: async (req, res) => {
-        const { keywords = "" } = req.query
+        const { keywords = "", params } = req.query
 
         let suggestions = {}
 
@@ -20,7 +20,7 @@ export default {
                         { fullName: { $regex: keywords, $options: "i" } },
                     ]
                 },
-                limit: 5,
+                limit: params.limit_per_section ?? 5,
                 select: "username fullName avatar verified",
             },
             {
@@ -31,7 +31,7 @@ export default {
                         { title: { $regex: keywords, $options: "i" } },
                     ]
                 },
-                limit: 5,
+                limit: params.limit_per_section ?? 5,
             },
             {
                 id: "tracks",
@@ -43,7 +43,7 @@ export default {
                         { album: { $regex: keywords, $options: "i" } },
                     ]
                 },
-                limit: 5,
+                limit: params.limit_per_section ?? 5,
             }
         ]