Restructure files

packages/web/src/pages/Vault.tsx

@@ -88,25 +88,36 @@ export const VaultView: React.FC<{ vault: Vault; onLock(): void }> = ({
     arrayFrom(vault.values()).then(setItems)
   }, [vault])
 
-  const filtered = useMemo(
-    () =>
-      sortedItem
-        .filter(x => x.category !== Category.Tombstone)
-        .filter(
-          search
-            ? x =>
-                stringCompare(search, x.overview.title) ||
-                stringCompare(search, x.overview.ainfo)
-            : () => true
-        ),
-    [sortedItem, search]
-  )
+  const filtered = useMemo(() => {
+    const items = sortedItem.filter(x => x.category !== Category.Tombstone)
+    let res: Item[] = items
+    if (search) {
+      res = []
+      for (const x of items) {
+        const compare = Math.max(
+          stringCompare(search, x.overview.title),
+          stringCompare(search, x.overview.ainfo)
+        ) as CompareResult
+        switch (compare) {
+          case CompareResult.NoMatch:
+            continue
+          case CompareResult.Includes:
+            res.push(x)
+            break
+          case CompareResult.Equals:
+            res.unshift(x)
+            break
+        }
+      }
+    }
+    return res
+  }, [sortedItem, search])
 
   return (
     <Container>
       <ListContainer className={scrollbar}>
         <div style={{ margin: "10px 10px", display: "flex" }}>
-          <LockButton onClick={onLock} title={t.action_lock}>
+          <LockButton onClick={onLock} title={t.action.lock}>
             <FiLock />
           </LockButton>
           <SearchContainer>
@@ -147,8 +158,20 @@ async function arrayFrom<T>(generator: AsyncGenerator<T, void, unknown>) {
   return list
 }
 
-function stringCompare(search: string, source?: string) {
-  if (!search) return true
-  if (!source) return false
-  return source.toLocaleLowerCase().includes(search.toLocaleLowerCase())
+enum CompareResult {
+  NoMatch,
+  Includes,
+  Equals,
+}
+
+function stringCompare(search: string, source?: string) {
+  if (!search) return CompareResult.Includes
+  if (!source) return CompareResult.NoMatch
+  source = source.toLocaleLowerCase()
+  search = search.toLocaleUpperCase()
+  const includes = source.includes(search.toLocaleLowerCase())
+  if (includes) {
+    return source.length === search.length ? CompareResult.Equals : CompareResult.Includes
+  }
+  return CompareResult.NoMatch
 }