feat: support trash bin

public/locales/ar/translation.json

@@ -201,5 +201,6 @@
   "remove-bold": "إزالة الخط العريض",
   "remove-underline": "إزالة التسطير",
   "select-block-type": "حدد نوع الكتلة",
-  "block-type-select-placeholder": "نوع المربع"
+  "block-type-select-placeholder": "نوع المربع",
+  "trash": "قمامة"
 }

public/locales/de/translation.json

@@ -195,5 +195,6 @@
   "remove-bold": "Fettdruck entfernen",
   "remove-underline": "Unterstrich entfernen",
   "select-block-type": "Blocktyp auswählen",
-  "block-type-select-placeholder": "Block Typ"
+  "block-type-select-placeholder": "Block Typ",
+  "trash": "Müll"
 }

public/locales/en/translation.json

@@ -200,5 +200,6 @@
   "underline": "Underline",
   "remove-underline": "Remove Underline",
   "select-block-type": "Select Block Type",
-  "block-type-select-placeholder": "Block Type"
+  "block-type-select-placeholder": "Block Type",
+  "trash": "Recycle Bin"
 }

public/locales/es/translation.json

@@ -195,5 +195,6 @@
   "remove-bold": "Eliminar negrita",
   "remove-underline": "Eliminar subrayado",
   "select-block-type": "Seleccione el tipo de bloque",
-  "block-type-select-placeholder": "Tipo de bloque"
+  "block-type-select-placeholder": "Tipo de bloque",
+  "trash": "basura"
 }

public/locales/fr/translation.json

@@ -196,5 +196,6 @@
   "remove-bold": "Supprimer les caractères gras",
   "remove-underline": "Supprimer le soulignement",
   "select-block-type": "Sélectionner le type de bloc",
-  "block-type-select-placeholder": "Type de bloc"
+  "block-type-select-placeholder": "Type de bloc",
+  "trash": "poubelle"
 }

public/locales/ja/translation.json

@@ -193,5 +193,6 @@
   "remove-bold": "太字を削除",
   "remove-underline": "アンダーラインの削除",
   "select-block-type": "ブロックタイプを選択",
-  "block-type-select-placeholder": "ブロックタイプ"
+  "block-type-select-placeholder": "ブロックタイプ",
+  "trash": "ゴミ"
 }

public/locales/ko/translation.json

@@ -195,5 +195,6 @@
   "italic": "이탤릭체",
   "remove-underline": "밑줄 제거",
   "select-block-type": "블록 유형 선택",
-  "block-type-select-placeholder": "블록 유형"
+  "block-type-select-placeholder": "블록 유형",
+  "trash": "쓰레기"
 }

public/locales/pt/translation.json

@@ -192,5 +192,6 @@
   "italic": "Itálico",
   "remove-underline": "Remover o sublinhado",
   "select-block-type": "Selecionar o tipo de bloco",
-  "block-type-select-placeholder": "Tipo de bloco"
+  "block-type-select-placeholder": "Tipo de bloco",
+  "trash": "lixo"
 }

public/locales/ru/translation.json

@@ -196,5 +196,6 @@
   "italic": "Курсив",
   "remove-underline": "Удалить подчеркивание",
   "select-block-type": "Выберите тип блока",
-  "block-type-select-placeholder": "Тип блока"
+  "block-type-select-placeholder": "Тип блока",
+  "trash": "мусор"
 }

public/locales/zh-TW/translation.json

@@ -196,5 +196,6 @@
   "italic": "斜体",
   "remove-underline": "删除下划线",
   "select-block-type": "选择区块类型",
-  "block-type-select-placeholder": "区块类型"
+  "block-type-select-placeholder": "区块类型",
+  "trash": "回收站"
 }

public/locales/zh/translation.json

@@ -199,5 +199,6 @@
   "italic": "斜体",
   "remove-underline": "删除下划线",
   "select-block-type": "选择区块类型",
-  "block-type-select-placeholder": "区块类型"
+  "block-type-select-placeholder": "区块类型",
+  "trash": "回收站"
 }

src/components/BlinkoAddButton/index.tsx

@@ -5,7 +5,7 @@ import { Icon } from '@iconify/react';
 import { observer } from 'mobx-react-lite';
 import { useMediaQuery } from 'usehooks-ts';
 import { ShowEditBlinkoModel } from '../BlinkoRightClickMenu';
-import { getEditorElements } from '../Common/Editor/editorUtils';
+import { FocusEditor, getEditorElements } from '../Common/Editor/editorUtils';
 import { RootStore } from '@/store';
 import { DialogStore } from '@/store/module/Dialog';
 import { BlinkoAiChat } from '../BlinkoAi';
@@ -99,14 +99,7 @@ export const BlinkoAddButton = observer(() => {
   // Handle write action
   const handleWriteAction = () => {
     ShowEditBlinkoModel('2xl', 'create')
-    requestAnimationFrame(() => {
-      const editorElements = getEditorElements()
-      if (editorElements.length > 0) {
-        editorElements.forEach(editorElement => {
-          editorElement.focus()
-        })
-      }
-    })
+    FocusEditor()
     setShowActions(false);
   };
 

src/components/BlinkoCard/index.tsx

@@ -16,6 +16,7 @@ import { CardHeader } from "./cardHeader";
 import { CardFooter } from "./cardFooter";
 import { useHistoryBack } from "@/lib/hooks";
 import { useRouter } from "next/router";
+import { FocusEditor } from "../Common/Editor/editorUtils";
 
 interface BlinkoCardProps {
   blinkoItem: Note & {
@@ -70,6 +71,7 @@ export const BlinkoCard = observer(({ blinkoItem, isShareMode = false }: BlinkoC
   const handleDoubleClick = (e: React.MouseEvent) => {
     blinko.curSelectedNote = _.cloneDeep(blinkoItem);
     ShowEditBlinkoModel();
+    FocusEditor(true)
   };
 
   return (

src/components/BlinkoEditor/index.tsx

@@ -21,7 +21,6 @@ export const BlinkoEditor = observer(({ mode, onSended, onHeightChange }: IProps
   const router = useRouter()
   useEffect(() => {
     blinko.isCreateMode = mode == 'create'
-    FocusEditor()
   }, [mode])
   return <div className="max-h-[100vh]" ref={editorRef} id='global-editor' onClick={() => {
     blinko.isCreateMode = mode == 'create'

src/components/BlinkoRightClickMenu/index.tsx

@@ -14,6 +14,7 @@ import { useEffect, useState } from "react";
 import { NoteType } from "@/server/types";
 import { useRouter } from "next/router";
 import { AiStore } from "@/store/aiStore";
+import { FocusEditor } from "../Common/Editor/editorUtils";
 
 export const ShowEditBlinkoModel = (size: string = '2xl', mode: 'create' | 'edit' = 'edit') => {
   const blinko = RootStore.Get(BlinkoStore)
@@ -31,7 +32,6 @@ export const ShowEditBlinkoModel = (size: string = '2xl', mode: 'create' | 'edit
 }
 export const EditItem = observer(() => {
   const { t } = useTranslation();
-  const blinko = RootStore.Get(BlinkoStore)
   const [isDetailPage, setIsDetailPage] = useState(false)
   const router = useRouter()
   useEffect(() => {
@@ -105,10 +105,32 @@ export const ArchivedItem = observer(() => {
   const { t } = useTranslation();
   const blinko = RootStore.Get(BlinkoStore)
   return <div className="flex items-start gap-2" onClick={e => {
-    blinko.upsertNote.call({ id: blinko.curSelectedNote?.id, isArchived: !blinko.curSelectedNote?.isArchived })
+    if (blinko.curSelectedNote?.isRecycle) {
+      return blinko.upsertNote.call({
+        id: blinko.curSelectedNote?.id,
+        isRecycle: false,
+        isArchived: false
+      })
+    }
+
+    if (blinko.curSelectedNote?.isArchived) {
+      return blinko.upsertNote.call({
+        id: blinko.curSelectedNote?.id,
+        isArchived: false,
+      })
+    }
+
+    if (!blinko.curSelectedNote?.isArchived) {
+      return blinko.upsertNote.call({
+        id: blinko.curSelectedNote?.id,
+        isArchived: true
+      })
+    }
+
+
   }}>
     <Icon icon="eva:archive-outline" width="20" height="20" />
-    {blinko.curSelectedNote?.isArchived ? t('recovery') : t('archive')}
+    {blinko.curSelectedNote?.isArchived || blinko.curSelectedNote?.isRecycle ? t('recovery') : t('archive')}
   </div>
 })
 
@@ -120,12 +142,23 @@ export const AITagItem = observer(() => {
     <div className="flex items-start gap-2" onClick={e => {
       aiStore.autoTag.call(blinko.curSelectedNote?.id!, blinko.curSelectedNote?.content!)
     }}>
-      <Icon icon="carbon:ai-status" width="20" height="20" />
+      <Icon icon="majesticons:tag-line" width="20" height="20" />
       <div>{t('ai-tag')}</div>
     </div>
   );
 });
 
+export const TrashItem = observer(() => {
+  const { t } = useTranslation();
+  const blinko = RootStore.Get(BlinkoStore)
+  return <div className="flex items-start gap-2 text-red-500" onClick={e => {
+    PromiseCall(api.notes.trashMany.mutate({ ids: [blinko.curSelectedNote?.id!] }))
+  }}>
+    <Icon icon="mingcute:delete-2-line" width="20" height="20" />
+    <div>{t('trash')}</div>
+  </div>
+})
+
 export const DeleteItem = observer(() => {
   const { t } = useTranslation();
   const blinko = RootStore.Get(BlinkoStore)
@@ -182,9 +215,18 @@ export const BlinkoRightClickMenu = observer(() => {
       <Divider orientation="horizontal" />
     </ContextMenuItem>
 
-    <ContextMenuItem >
-      <DeleteItem />
-    </ContextMenuItem>
+
+    {!blinko.curSelectedNote?.isRecycle ? (
+      <ContextMenuItem >
+        <TrashItem />
+      </ContextMenuItem>
+    ) : <></>}
+
+    {blinko.curSelectedNote?.isRecycle ? (
+      <ContextMenuItem >
+        <DeleteItem />
+      </ContextMenuItem>
+    ) : <></>}
   </ContextMenu>
 })
 
@@ -217,9 +259,17 @@ export const LeftCickMenu = observer(({ onTrigger, className }: { onTrigger: ()
         </DropdownItem>
       ) : <></>}
 
-      <DropdownItem key="DeleteItem" className="text-danger" >
-        <DeleteItem />
-      </DropdownItem>
+      {!blinko.curSelectedNote?.isRecycle ? (
+        <DropdownItem key="TrashItem">
+          <TrashItem />
+        </DropdownItem>
+      ) : <></>}
+
+      {blinko.curSelectedNote?.isRecycle ? (
+        <DropdownItem key="DeleteItem" className="text-danger" >
+          <DeleteItem />
+        </DropdownItem>
+      ) : <></>}
     </DropdownMenu>
   </Dropdown>
 })

src/components/Common/Editor/Toolbar/SendButton/index.tsx

@@ -12,10 +12,9 @@ interface Props {
 }
 
 export const SendButton = ({ store, isSendLoading }: Props) => {
+  const isPc = useMediaQuery('(min-width: 768px)')
   return (
-    <Div onTap={() => {
-      store.handleSend()
-    }}>
+      <div>
       <Button
         isDisabled={!store.canSend}
         size='sm'
@@ -24,13 +23,24 @@ export const SendButton = ({ store, isSendLoading }: Props) => {
         className={`ml-2 w-[60px] group`}
         isIconOnly
         color='primary'
+        onClick={()=>{
+          if(isPc){
+            store.handleSend()
+          }
+        }}
+        onTouchEnd={(e)=>{
+          e.preventDefault()
+          if(!isPc){
+            store.handleSend()
+          }
+        }}
       >
         {store.files?.some(i => i.uploadPromise?.loading?.value) ? (
           <Icon icon="line-md:uploading-loop" width="24" height="24" />
         ) : (
           <SendIcon className='primary-foreground !text-primary-foreground group-hover:rotate-[-35deg] transition-all' />
         )}
       </Button>
-    </Div>
+      </div>
   );
 }; 

src/components/Common/Editor/Toolbar/ViewModeButton/index.tsx

@@ -2,7 +2,6 @@ import { IconButton } from '../IconButton';
 import { useTranslation } from 'react-i18next';
 import { eventBus } from '@/lib/event';
 import { ViewMode } from '@mdxeditor/editor'
-import { FocusEditor, FocusSourceEditor } from '../../editorUtils';
 
 interface Props {
   viewMode: ViewMode;
@@ -16,11 +15,6 @@ export const ViewModeButton = ({ viewMode }: Props) => {
       onClick={() => {
         const nextMode = viewMode === 'source' ? 'rich-text' : 'source';
         eventBus.emit('editor:setViewMode', nextMode);
-        if (nextMode === 'source') {
-          FocusSourceEditor()
-        } else {
-          FocusEditor()
-        }
       }}
     >
       <IconButton

src/components/Common/Editor/editorUtils.tsx

@@ -67,12 +67,13 @@ export const handleEditorKeyEvents = () => {
 }
 
 
-export const FocusEditor = () => {
+export const FocusEditor = (focusToEnd: boolean = false) => {
   requestAnimationFrame(() => {
     const editorElements = getEditorElements()
     if (editorElements.length > 0) {
       editorElements.forEach(editorElement => {
         editorElement.focus()
+        if(!focusToEnd) return
         const range = document.createRange()
         range.selectNodeContents(editorElement)
         range.collapse(false) 
@@ -82,4 +83,4 @@ export const FocusEditor = () => {
       })
     }
   })
-}
+}

src/components/Layout/MobileNavBar.tsx

@@ -25,7 +25,7 @@ export const MobileNavBar = observer(({ onItemClick }: MobileNavBarProps) => {
 
   return (
     <div className="h-[70px] flex w-full px-4 py-2 gap-2 bg-background block md:hidden">
-      {base.routerList.map(i => (
+      {base.routerList.filter(i => !i.hiddenMobile).map(i => (
         <Link
           className="flex-1"
           key={i.title}

src/pages/index.tsx

@@ -1,7 +1,7 @@
 import { BlinkoStore } from '@/store/blinkoStore';
 import { _ } from '@/lib/lodash';
 import { observer } from 'mobx-react-lite';
-import Masonry from 'react-masonry-css'
+import Masonry from 'react-masonry-css';
 import { useTranslation } from 'react-i18next';
 import { RootStore } from '@/store';
 import { Icon } from '@iconify/react';
@@ -10,9 +10,6 @@ import { BlinkoEditor } from '@/components/BlinkoEditor';
 import { ScrollArea } from '@/components/Common/ScrollArea';
 import { BlinkoCard } from '@/components/BlinkoCard';
 import { useMediaQuery } from 'usehooks-ts';
-import { ShowEditBlinkoModel } from '@/components/BlinkoRightClickMenu';
-import { motion } from 'framer-motion';
-import { getEditorElements } from '@/components/Common/Editor/editorUtils';
 import { BlinkoAddButton } from '@/components/BlinkoAddButton';
 
 const Home = observer(() => {
@@ -23,7 +20,7 @@ const Home = observer(() => {
   const store = RootStore.Local(() => ({
     editorHeight: 65,
     get showEditor() {
-      return !blinko.noteListFilterConfig.isArchived
+      return !blinko.noteListFilterConfig.isArchived && !blinko.noteListFilterConfig.isRecycle
     },
     get showLoadAll() {
       return blinko.noteList.isLoadAll
@@ -73,8 +70,6 @@ const Home = observer(() => {
           {store.showLoadAll && <div className='select-none w-full text-center text-sm font-bold text-ignore my-4'>{t('all-notes-have-been-loaded', { items: blinko.noteList.value?.length })}</div>}
         </ScrollArea>
       }
-
-
     </div>
   );
 });

src/pages/resources.tsx

@@ -4,7 +4,6 @@ import { BlinkoStore } from "@/store/blinkoStore";
 import { Card, Image } from "@nextui-org/react";
 import { observer } from "mobx-react-lite";
 import { useEffect } from "react";
-import { FileIcon, defaultStyles } from 'react-file-icon';
 import { filesize } from "filesize";
 import dayjs from "@/lib/dayjs";
 import { PhotoProvider, PhotoView } from "react-photo-view";