不用網頁引擎，打造真正玻璃效果的搜尋卡片

尋找是編輯器裡經常使用的功能。但因為它一直運作正常，所以很久都沒有動過它。

mote 的尋找視窗也是如此。它一直都是兩行，而且即使先在文件中選取詞語再開啟，搜尋詞欄位仍然是空的。

三款應用程式給出了相同的答案

在修改之前，我們在 Typora、MarkText、Obsidian 中開啟同一份文件的尋找與取代功能並擷取畫面。Notion 則透過公開的說明文件進行確認。整理成表格之後，共通點就很清楚了。

尋找都是從一行開始。取代只在需要時才展開。選取的詞語會直接填入搜尋詞欄位。大多數應用程式也都把相符數量放在輸入欄位裡，並使用箭頭在相符結果之間移動。

mote 也決定遵循這套流程。

預設畫面縮成了一行。可以透過左側按鈕或 Ctrl+H 開啟取代功能。若選取的句子只有一行且不超過 200 個字元，就會自動填入作為搜尋詞。

找不到相符結果時，畫面不會顯示數字 0，而是告知「沒有結果」。輸入欄位也會出現紅色邊框。這樣就能立刻確認是打錯字，還是文件裡真的沒有這個詞。

只是少了一行，畫面上就能看到更多內文。第一筆搜尋結果被卡片遮住的情況也減少了。

相較於取代，我們更常使用尋找。如果總是展開偶爾才用的功能，就等於每次進行常做的工作時都得付出代價。

我們並沒有把所有東西都改得和其他編輯器一樣。浮在右上方的卡片和選項按鈕都保留了原樣。研究其他產品並不是為了模仿，而是為了區分哪些是使用者熟悉的方式，哪些是 mote 自己的選擇。

卡片下方的文字真的會變模糊

尋找卡片看起來像玻璃。這不只是單純的效果。它真的會將卡片下方的內文以模糊方式繪製。

一開始，我們決定在 Linux 上完全拿掉模糊效果。GTK 的算繪器沒有取樣同層元件後方表面的功能。再加上每次捲動文件時背景都會改變，因此每一幀都必須重新計算。我們判斷流暢的畫面比漂亮的畫面更重要。

解決方式不是讓卡片本身變模糊，而是由編輯器直接繪製模糊的畫面。

編輯器在繪製文件時，會把被卡片遮住的部分再畫一次。第二次繪製時會套用 18 px 的模糊效果，卡片則只在上方疊上一層淡淡的色調。

重新繪製的只有卡片下方實際可見的行，而且這項工作是在原本就要繪製的影格內完成。閒置狀態下排程的影格數仍然是 0。

頁首也使用相同的方式。捲動文件時，標題會移到頁首下方，自然地變得模糊。因為清晰畫面和模糊畫面是在同一個瞬間繪製的，所以兩者不會錯位。

我們在玻璃邊界加入了 1 px 的邊框，而不是陰影。這是因為在白色文件上，只靠陰影很難分辨邊緣。卡片與視窗右側之間則保留了 24 px 的空間，讓陰影能夠顯現。

我們沒有加入出現動畫。按下 Ctrl+F 的人已經有想要尋找的內容。即使是短暫的演出，此時也會變成等待。卡片會在按下按鍵的瞬間開啟，並從第一個畫面開始就呈現出玻璃般的效果。

我們也重新找回了過去漏掉的搜尋結果

縮減畫面之後，我們注意到有些地方沒有正確顯示搜尋結果。

表格裡的結果沒有被著色。在閱讀模式中，醒目提示的位置會錯位。而在行內程式碼和螢光標記裡，原本的背景色會遮住搜尋標示。

每個問題的成因都不一樣。

在表格裡，必須分別計算每個儲存格的位置。在閱讀模式中，則必須重新校正隱藏符號的位置。而在有背景色的文字中，必須先繪製搜尋標示。

我們修正了位置的計算方式與顏色的繪製順序，解決了這三個問題。

搜尋結果會以黃色標示。只有目前正在查看的結果會顯示為橘色。畫面、PDF 和 HTML 也都使用相同的顏色。

我們沒有更改文字顏色。因為螢光筆的顏色不是塗在文字上，而是位於紙張與文字之間。

玻璃是有成本的

在尋找卡片開啟的狀態下捲動時，每個畫面都會重新計算模糊效果。雖然只重新繪製卡片下方的部分，但這項成本並不會消失。

因此，我們不會堆疊多層玻璃。只有頁首、側邊欄，以及目前開啟的那一張卡片會使用玻璃效果。

玻璃不是裝飾材料，而是必須在效能範圍內分配使用的預算。

讓尋找視窗變得更美觀與讓它變得更輕巧，看起來像是兩件相反的事。但最後只剩下一個問題。

這個畫面應該在什麼時候重新繪製？