Add search, pagination, and query tips to Query Insights.

This update introduces a search input for filtering queries and a pagination system for easier navigation of results. Query tips now provide optimization suggestions based on detected patterns and statistics, helping users identify and address performance issues more effectively. Styling adjustments were also made to improve the layout and user experience.

frontend/src/styles.css

@@ -255,7 +255,8 @@ button {
 
 .query-insights-page .query-toolbar {
   display: grid;
-  grid-template-columns: minmax(240px, 420px);
+  grid-template-columns: minmax(220px, 320px) minmax(320px, 1fr);
+  gap: 12px;
   align-items: end;
 }
 
@@ -346,6 +347,30 @@ button {
   font-family: "Space Grotesk", "Segoe UI", sans-serif;
 }
 
+.pagination {
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
+.pagination-info {
+  font-size: 12px;
+  color: #9eb8d6;
+}
+
+.pagination-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pagination-actions button {
+  min-height: 30px;
+  padding: 5px 10px;
+}
+
 .query-detail .sql-block {
   margin-top: 10px;
   background: #0a1c3a;
@@ -365,6 +390,29 @@ button {
   line-height: 1.5;
 }
 
+.query-tips {
+  margin-top: 10px;
+  border: 1px solid #2d5f92;
+  border-radius: 10px;
+  padding: 10px;
+  background: #0d2141;
+}
+
+.query-tips h4 {
+  margin: 0 0 8px 0;
+}
+
+.query-tips ul {
+  margin: 0;
+  padding-left: 16px;
+}
+
+.query-tips li {
+  margin-bottom: 6px;
+  color: #d2e3fb;
+  font-size: 13px;
+}
+
 .query-hint {
   margin-top: 10px;
   color: #9eb8d6;