Migrate to native Node.js file access and improve UI

packages/web/src/pages/Vault.tsx

@@ -1,24 +1,28 @@
 import styled from "@emotion/styled"
-import { useCallback, useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import type { Vault, Item } from "opvault.js"
 import { Category } from "opvault.js"
+import { FiLock } from "react-icons/fi"
 import { IoSearch } from "react-icons/io5"
 import { ItemList } from "../components/ItemList"
 import { ItemView } from "../components/Item"
 import { reactIconClass } from "../components/CategoryIcon"
 import { useTranslate } from "../i18n/index"
+import { scrollbar } from "../styles"
 
 const Container = styled.div`
   display: flex;
   height: calc(100vh - var(--titlebar-height));
 `
 const ListContainer = styled.div`
+  border-right: 1px solid var(--border-color);
   width: 300px;
   margin-right: 10px;
   overflow-y: scroll;
   overflow-x: hidden;
   @media (prefers-color-scheme: dark) {
     background: #202020;
+    border-right-color: transparent;
   }
 `
 const ItemContainer = styled.div`
@@ -27,15 +31,20 @@ const ItemContainer = styled.div`
 `
 const SearchContainer = styled.div`
   text-align: center;
-  margin: 10px 0;
   position: relative;
+  flex-grow: 1;
 `
 const SortContainer = styled.div`
   margin: 10px 10px;
 `
+const LockButton = styled.button`
+  && {
+    padding: 5px 10px;
+  }
+`
 const SearchInput = styled.input`
   --margin: 10px;
-  width: calc(100% - var(--margin) * 2);
+  width: calc(100% - var(--margin) * 2 + 9px);
   margin: 0 var(--margin);
   padding-left: 2em !important;
 `
@@ -66,9 +75,9 @@ export const VaultView: React.FC<{ vault: Vault; onLock(): void }> = ({
       case SortBy.Name:
         return (a, b) => (a.overview.title ?? "").localeCompare(b?.overview.title ?? "")
       case SortBy.CreatedAt:
-        return (a, b) => a.createdAt - b.createdAt
+        return (a, b) => b.createdAt - a.createdAt
       case SortBy.UpdatedAt:
-        return (a, b) => a.updatedAt - b.updatedAt
+        return (a, b) => b.updatedAt - a.updatedAt
     }
   }, [sortBy])
 
@@ -95,22 +104,21 @@ export const VaultView: React.FC<{ vault: Vault; onLock(): void }> = ({
 
   return (
     <Container>
-      <ListContainer>
-        <div
-          style={{
-            margin: "10px 10px",
-          }}
-        >
-          <button onClick={onLock}>{t.action_lock}</button>
+      <ListContainer className={scrollbar}>
+        <div style={{ margin: "10px 10px", display: "flex" }}>
+          <LockButton onClick={onLock} title={t.action_lock}>
+            <FiLock />
+          </LockButton>
+          <SearchContainer>
+            <SearchInput
+              type="search"
+              value={search}
+              onChange={e => setSearch(e.currentTarget.value)}
+            />
+            <SearchIcon className={reactIconClass} />
+          </SearchContainer>
         </div>
-        <SearchContainer>
-          <SearchInput
-            type="search"
-            value={search}
-            onChange={e => setSearch(e.currentTarget.value)}
-          />
-          <SearchIcon className={reactIconClass} />
-        </SearchContainer>
+
         <SortContainer>
           <select
             style={{ width: "100%" }}
@@ -124,7 +132,9 @@ export const VaultView: React.FC<{ vault: Vault; onLock(): void }> = ({
         </SortContainer>
         <ItemList items={filtered} onSelect={setItem} selected={item} />
       </ListContainer>
-      <ItemContainer>{item && <ItemView item={item} />}</ItemContainer>
+      <ItemContainer>
+        {item && <ItemView className={scrollbar} item={item} />}
+      </ItemContainer>
     </Container>
   )
 }