diff --git a/public/css/style.css b/public/css/style.css
index d4a8a7e..0753c90 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -879,6 +879,72 @@ html, body {
color: #333;
}
+.search-ctrl {
+ position: relative;
+}
+
+.search-ctrl__button svg {
+ display: block;
+ margin: 0 auto;
+ width: 18px;
+ height: 18px;
+}
+
+.search-ctrl__button.active {
+ background: #dbe9ff;
+}
+
+.search-panel {
+ position: absolute;
+ top: 0;
+ left: 100%;
+ margin-left: 8px;
+ z-index: 20;
+ width: 240px;
+ background: #fff;
+ border: 1px solid #ddd;
+ border-radius: 6px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ padding: 6px 8px;
+ font-size: 13px;
+}
+
+.search-panel[hidden] {
+ display: none;
+}
+
+.search-panel__input {
+ width: 100%;
+ box-sizing: border-box;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ padding: 5px 7px;
+ font: inherit;
+}
+
+.search-panel__results {
+ list-style: none;
+ margin: 6px 0 0;
+ padding: 0;
+ max-height: 220px;
+ overflow-y: auto;
+}
+
+.search-panel__result {
+ padding: 6px 4px;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.search-panel__result:hover {
+ background: #f0f0f0;
+}
+
+.search-panel__status {
+ padding: 6px 4px;
+ color: #888;
+}
+
.notes-ctrl {
position: relative;
}
diff --git a/public/js/icons.js b/public/js/icons.js
index 5f35733..5ecd1c8 100644
--- a/public/js/icons.js
+++ b/public/js/icons.js
@@ -62,6 +62,12 @@ export const SUNSET_ICON = `
`;
+export const SEARCH_ICON = `
+`;
+
export const NEW_FOLDER_ICON = `