Merge pull request #6 from kaishuu0123/feat/change-layout-and-imprv-search-feature

Change layout and improve search feature.

Author: kaishuu0123

.devcontainer/devcontainer.json

@@ -10,6 +10,13 @@
   "features": {
     "ghcr.io/devcontainers/features/node:1": {
       "version": "20.17.0"
+    },
+    "ghcr.io/devcontainers/features/desktop-lite:1": {
+      "version": "latest",
+      "noVncVersion": "1.2.0",
+      "password": "vscode",
+      "webPort": "6080",
+      "vncPort": "5901"
     }
   },
   // Use 'forwardPorts' to make a list of ports inside the container available locally.

package.json

@@ -14,7 +14,7 @@
     "typecheck:web": "tsc --noEmit -p tsconfig.web.json --composite false",
     "typecheck": "npm run typecheck:node && npm run typecheck:web",
     "start": "electron-vite preview",
-    "dev": "GDK_DPI_SCALE=1.25 electron-vite dev",
+    "dev": "electron-vite dev -- --disable-gpu",
     "build": "npm run typecheck && electron-vite build",
     "postinstall": "electron-builder install-app-deps",
     "build:unpack": "npm run build && electron-builder --dir",

src/renderer/src/App.tsx

@@ -47,7 +47,6 @@ import { getTime } from 'date-fns'
 import { Trans, useTranslation } from 'react-i18next'
 import i18n from './i18n/configs'
 import { Drawer, DrawerContent, DrawerTrigger } from './components/ui/drawer'
-import LogoImg from './assets/leavepad_logo.svg'
 
 initializeNoteEditor()
 
@@ -245,7 +244,7 @@ function App(): JSX.Element {
     if (currentSearchValue != null && currentSearchValue != '') {
       const regex = new RegExp(currentSearchValue)
       return notes.filter((note) => {
-        return regex.test(note.name)
+        return regex.test(note.name) || regex.test(note.body)
       })
     }
 
@@ -275,35 +274,22 @@ function App(): JSX.Element {
       >
         <div
           className={cn(
-            'flex flex-col h-screen space-y-2',
+            'flex flex-col h-screen space-y-2 relative',
             isSidebarOpen === true ? 'w-3/12 xl:w-2/12' : ''
           )}
         >
-          <div className="mt-2">
-            {isSidebarOpen === true ? (
-              <Button
-                variant="ghost"
-                className="w-full flex items-center justify-start space-x-2 rounded-none"
-                onClick={onClickSidebarMinimize}
-              >
-                <div className="min-w-8 w-8 min-h-8 h-8">
-                  <img src={LogoImg} />
-                </div>
-                <div className="grow text-left">Leavepad</div>
-                <div className="codicon codicon-chevron-left"></div>
-              </Button>
+          <Button
+            className={cn('absolute left-[100%] top-[50%] -ml-3 w-7 h-7 z-10')}
+            variant="outline"
+            size="icon"
+            onClick={onClickSidebarMinimize}
+          >
+            {isSidebarOpen ? (
+              <span className="codicon codicon-chevron-left"></span>
             ) : (
-              <Button
-                variant="ghost"
-                className="w-full flex items-center justify-start space-x-2 rounded-none"
-                onClick={onClickSidebarMinimize}
-              >
-                <div className="codicon codicon-chevron-right w-full"></div>
-              </Button>
+              <span className="codicon codicon-chevron-right"></span>
             )}
-          </div>
-
-          <Separator />
+          </Button>
 
           <div className="px-2">
             <Button
@@ -338,7 +324,7 @@ function App(): JSX.Element {
           {isSidebarOpen === true ? (
             <div className="px-2">
               <Input
-                placeholder={t('searchByNoteName')}
+                placeholder={t('searchByNoteNameOrNoteBody')}
                 defaultValue={currentSearchValue}
                 onChange={(e) => setCurrentSearchValue(e.target.value)}
               />
@@ -365,14 +351,34 @@ function App(): JSX.Element {
                 </div>
               </ScrollArea>
             ) : (
-              <Drawer direction="left" open={isDrawerOpen} onOpenChange={setDrawerOpen}>
+              <Drawer
+                direction="left"
+                open={isDrawerOpen}
+                onOpenChange={setDrawerOpen}
+                dismissible={false}
+              >
                 <DrawerTrigger asChild>
                   <Button className={cn(isSidebarOpen === false && 'p-2 h-8')}>
-                    <div className="codicon codicon-note"></div>
+                    <div
+                      className="codicon codicon-note"
+                      onClick={() => setDrawerOpen(false)}
+                    ></div>
                   </Button>
                 </DrawerTrigger>
                 <DrawerContent className="w-6/12 md:w-4/12 lg:max-2xl:w-3/12 h-full rounded-none py-3">
                   <div className="flex flex-col h-full space-y-4">
+                    <div className="px-3">
+                      <div className="flex items-center w-full">
+                        <Button
+                          className="w-full items-center justify-start"
+                          onClick={() => setDrawerOpen(false)}
+                        >
+                          <span className="codicon codicon-close"></span>
+                          <span>{t('close')}</span>
+                        </Button>
+                      </div>
+                    </div>
+
                     <div className="px-3">
                       <div className="flex items-center w-full">
                         <div className="grow">

src/renderer/src/components/note-card.tsx

@@ -34,7 +34,7 @@ function NoteCard({ note, onClick, onNoteCardSetName, onDeleteNote }): JSX.Eleme
     <div
       key={note.id}
       className={cn(
-        'flex flex-col w-full items-start gap-2 border rounded-sm px-3 py-2 text-left text-sm transition-all hover:bg-accent group'
+        'flex flex-col w-full items-start gap-1 border rounded-sm px-3 py-2 text-left text-sm transition-all hover:bg-accent group'
       )}
       onClick={() => onClick(note)}
     >
@@ -50,6 +50,7 @@ function NoteCard({ note, onClick, onNoteCardSetName, onDeleteNote }): JSX.Eleme
                 onBlur={(_e) => {
                   saveNoteCardName(note)
                 }}
+                onClick={(e) => e.stopPropagation()}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' && e.nativeEvent.isComposing === false) {
                     saveNoteCardName(note)

src/renderer/src/components/note-tabs.tsx

@@ -18,14 +18,14 @@ function NoteTabs({ noteTabs, activeTabId, onTabClick, onTabCloseClick }): JSX.E
   return (
     <ScrollArea ref={ref} type="always" className="w-full h-full">
       <Tabs value={activeTabId} className="h-full" onValueChange={onTabChange}>
-        <TabsList className="w-full gap-2 rounded-none justify-start p-0 pt-1">
+        <TabsList className="w-full gap-1 rounded-none justify-start px-1 pb-0 pt-1">
           {tabs.map((tab) => {
             return (
               <TabsTrigger
                 key={tab}
                 value={tab}
                 data-tab-id={tab}
-                className="flex items-center gap-3 h-full rounded-none rounded-t-sm"
+                className="flex items-center gap-3 h-full rounded-none rounded-t-sm border border-b-0"
                 asChild
               >
                 <div>

src/renderer/src/i18n/english.json

@@ -1,6 +1,6 @@
 {
   "createNote": "New note",
-  "searchByNoteName": "Search by note name",
+  "searchByNoteNameOrNoteBody": "Search by note name or note body",
   "rename": "Rename",
   "delete": "Delete",
   "save": "Save",
@@ -15,6 +15,7 @@
   "deleteAlertDialogTitleMessage": "Permanently delete {{noteName}} ?",
   "ok": "OK",
   "cancel": "Cancel",
+  "close": "Close",
   "contextMenu": {
     "close": "Close",
     "closeOthers": "Close Others",

src/renderer/src/i18n/japanese.json

@@ -3,7 +3,7 @@
   "rename": "名前を変更",
   "delete": "削除",
   "save": "保存",
-  "searchByNoteName": "ノート名で検索",
+  "searchByNoteNameOrNoteBody": "ノート名か本文で検索",
   "globalSettings": "グローバル設定",
   "createdAt": "作成日時",
   "updatedAt": "更新日時",
@@ -15,6 +15,7 @@
   "deleteAlertDialogTitleMessage": "{{noteName}} を削除しますか？",
   "ok": "OK",
   "cancel": "キャンセル",
+  "close": "閉じる",
   "contextMenu": {
     "close": "閉じる",
     "closeOthers": "他のタブをすべて閉じる",