refactor(kanban): add card

src/components/kanban/Board.tsx

@@ -17,7 +17,7 @@ import { IconCircle, IconCircleX } from "@tabler/icons-react";
 import { convertFileSrc } from "@tauri-apps/api/tauri";
 import { genId } from "utils/helper";
 import { imageExtensions } from "utils/file-extensions";
-import { openFileDilog, openFilePath } from "file/open";
+import { openFileDilog, openFilePath, openUrl } from "file/open";
 import { BaseModal } from "components/settings/BaseModal";
 import { useCurrentViewContext } from "context/useCurrentView";
 import { Column, Id, Card, KanbanData } from "./types";
@@ -62,11 +62,11 @@ export default function KanbanBoard({initData, onKanbanChange}: Props) {
     })
   );
 
-  function createCard(columnId: Id) {
+  function createCard(columnId: Id, content?: string) {
     const newCard: Card = {
       id: genId(),
       columnId,
-      content: `Card ${cards.length + 1}`,
+      content: content || `Card ${cards.length + 1}`,
     };
     const newCards = [...cards, newCard];
 
@@ -412,8 +412,12 @@ export default function KanbanBoard({initData, onKanbanChange}: Props) {
                 <button 
                   className="link flex-1 text-left mr-4" 
                   onClick={async () => {
-                    await openFilePath(itm.uri, true);
-                    dispatch({view: 'md', params: { noteId: itm.uri }});
+                    if (itm.category === "note") {
+                      await openFilePath(itm.uri, true);
+                      dispatch({view: 'md', params: { noteId: itm.uri }});
+                    } else {
+                      await openUrl(itm.uri);
+                    }
                   }}
                 >{itm.name}</button>
                 <button 

src/components/kanban/Card.tsx

@@ -1,9 +1,14 @@
 import { useCallback, useState } from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { IconFeather, IconPaperclip } from "@tabler/icons-react";
+import { IconFeather, IconPaperclip, IconStack } from "@tabler/icons-react";
+import { invoke } from '@tauri-apps/api';
 import { useStore } from "lib/store";
 import { isMobile } from "utils/helper";
+import { openFileDilog } from "file/open";
+import { docExtensions } from "utils/file-extensions";
+import FileAPI from "file/files";
+import updateCardItem from './updateCard';
 import { Id, Card } from "./types";
 
 interface Props {
@@ -15,8 +20,9 @@ interface Props {
 
 export default function TaskCard({ card, updateCard, openSetCard }: Props) {
   const [mouseIsOver, setMouseIsOver] = useState(false);
-  const [editMode, setEditMode] = useState(true);
+  const [editMode, setEditMode] = useState(false);
 
+  const initDir = useStore((state) => state.initDir);
   const setIsSidebarOpen = useStore((state) => state.setIsSidebarOpen);
   const setIsFindOrCreateModalOpen = useStore((state) => state.setIsFindOrCreateModalOpen);
   const setCurrentCard = useStore((state) => state.setCurrentCard);
@@ -27,6 +33,32 @@ export default function TaskCard({ card, updateCard, openSetCard }: Props) {
     setCurrentCard(id);
   }, [setIsFindOrCreateModalOpen, setCurrentCard, setIsSidebarOpen]);
 
+  const onAttachClick = useCallback(
+    async () => {
+      const ext = docExtensions;
+      const filePath = await openFileDilog(ext, false);
+      if (filePath && typeof filePath === 'string') {
+        let fileUrl = filePath;
+        // console.log("use asset", useAsset)
+        if (initDir) {
+          const assetPath = await invoke<string[]>(
+            'copy_file_to_assets', { srcPath: filePath, workDir: initDir }
+          );
+          // console.log("asset path", assetPath)
+          fileUrl = assetPath[0] || filePath;
+        }
+
+        const fileInfo = new FileAPI(fileUrl);
+        if (await fileInfo.exists()) {
+          const fileMeta = await fileInfo.getMetadata();
+          const fname = fileMeta.file_name;
+          updateCardItem(card.id, [fname, fileUrl]);
+        }
+      }
+    },
+    [card.id, initDir]
+  );
+
   const {
     setNodeRef,
     attributes,
@@ -75,7 +107,8 @@ export default function TaskCard({ card, updateCard, openSetCard }: Props) {
         className="p-2 h-[100px] items-center flex text-left hover:ring-2 hover:ring-inset hover:ring-purple-500 relative"
       >
         <textarea
-          className="h-[90%] w-full resize-none border-none rounded bg-transparent"
+          className="h-[90%] w-full resize-none border-none rounded bg-transparent" 
+          autoFocus 
           value={card.content}
           onBlur={toggleEditMode}
           onKeyDown={(e) => {
@@ -105,19 +138,25 @@ export default function TaskCard({ card, updateCard, openSetCard }: Props) {
       </p>
 
       {mouseIsOver && (
-        <div className="flex flex-col">
+        <div className="flex flex-row">
           <button
             onClick={() => {onCreateNoteClick(card.id);}}
             className="hover:bg-primary-500 rounded p-1 w-8"
           >
             <IconFeather />
           </button>
+          <button
+              onClick={onAttachClick}
+              className="hover:bg-blue-500 rounded p-1 w-8"
+            >
+              <IconPaperclip />
+          </button>
           <button
               onClick={() => { openSetCard && openSetCard(card.id);}}
               className="hover:bg-green-500 rounded p-1 w-8"
             >
-              <IconPaperclip />
-            </button>
+              <IconStack />
+          </button>
         </div>
       )}
     </div>

src/components/kanban/Column.tsx

@@ -9,7 +9,7 @@ interface Props {
   column: Column;
   toDelColumn: (id: Id) => void;
   updateColumn: (id: Id, title: string) => void;
-  createCard: (columnId: Id) => void;
+  createCard: (columnId: Id, content: string) => void;
   updateCard: (id: Id, content: string) => void;
   deleteCard: (id: Id) => void;
   cards: Card[];
@@ -30,6 +30,8 @@ export default function ColumnContainer({
 }: Props) {
   const [editMode, setEditMode] = useState(false);
   const [mouseIsOver, setMouseIsOver] = useState(false);
+  const [toAddCard, setToAddCard] = useState(false);
+  const [cardContent, setCardContent] = useState("");
 
   const cardsIds = useMemo(() => {
     return cards.map((card) => card.id);
@@ -131,12 +133,26 @@ export default function ColumnContainer({
         </SortableContext>
       </div>
       {/* Column footer */}
-      <button 
-        className="border border-dashed border-green-400 text-white rounded hover:bg-sky-600 min-w-full my-2 px-2 flex items-center justify-center" 
-        onClick={() => {createCard(column.id);}}
-      >
-        <IconPlus /> Add Card
-      </button>
+      <div className="flex flex-col">
+        {toAddCard && (<textarea
+          className="w-[95%] resize-none border-none rounded mx-auto my-1"
+          placeholder="Type then Press Enter" 
+          autoFocus 
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              createCard(column.id, cardContent);
+              setToAddCard(false);
+            }
+          }}
+          onChange={(e) => setCardContent(e.target.value)}
+        />)}
+        <button 
+          className="border border-dashed border-green-400 text-white rounded hover:bg-sky-600 min-w-full my-2 px-2 flex items-center justify-center" 
+          onClick={() => {setToAddCard(!toAddCard)}}
+        >
+          <IconPlus /> Add Card
+        </button>
+      </div>
     </div>
   );
 }

src/components/kanban/updateCard.ts

@@ -10,13 +10,15 @@ import { Id, KanbanData, CardItem, Kanbans } from './types';
  * @param noteId of current note, aka filePath
  * @param oldTitle of current note, to rename
  */
-const updateCard = async (id: Id, noteId: string, oldTitle?: string) => {
+const updateCard = async (id: Id, noteId: string | string[], oldTitle?: string) => {
   const initDir = store.getState().initDir;
   const currentKb = store.getState().currentBoard;
   console.log("currentKb", currentKb);
   if (!initDir || !currentKb.trim()) return;
 
-  const title = noteId.split("/").pop() || noteId;
+  const [title, itemUri, category] = typeof noteId === "string" 
+    ? [noteId.split("/").pop() || noteId, noteId, "note"]
+    : [...noteId, "attach"];
   const kanbanJsonPath = joinPath(initDir, `kanban.json`);
   const jsonFile = new FileAPI(kanbanJsonPath);
   const json = await jsonFile.readFile();
@@ -30,8 +32,8 @@ const updateCard = async (id: Id, noteId: string, oldTitle?: string) => {
     const items = card.items || [];
     const newItem: CardItem = {
       name: title,
-      uri: noteId,
-      category: "note",
+      uri: itemUri,
+      category,
     };
     console.log("old title in card: ", oldTitle)
     if (oldTitle) {

src/lib/store.ts

@@ -220,7 +220,7 @@ export const store = createVanilla<Store>(
       setIsLoaded: setter(set, 'isLoaded'),
       currentDir: undefined,
       setCurrentDir: setter(set, 'currentDir'),
-      currentBoard: '', 
+      currentBoard: 'default', 
       setCurrentBoard: setter(set, 'currentBoard'),
       currentCard: undefined,
       setCurrentCard: setter(set, 'currentCard'),