From 720ed68dfd1e1bce4ffcfe30190af9cad10eca30 Mon Sep 17 00:00:00 2001
From: etc1290 <52283388+etc1290@users.noreply.github.com>
Date: Sat, 15 Apr 2023 11:17:49 +0800
Subject: [PATCH 01/54] Update gitignore

---
 .gitignore  |   1 +
 Stemmeta.db | Bin 20480 -> 0 bytes
 2 files changed, 1 insertion(+)
 delete mode 100644 Stemmeta.db

diff --git a/.gitignore b/.gitignore
index 19ec355..edb816a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 *.exe
 node_modules
 *.code-workspace
+*.db
diff --git a/Stemmeta.db b/Stemmeta.db
deleted file mode 100644
index e600593c07ebb0e21fd7eec0c5dac670137a24ce..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 20480
zcmeI)&u-H&90zbacE>WQH6TUNPP2Mxt4)&ti3^tv)Y}mMcHvZIovEUxPM0{+b{wz4
zoyTC0fZz?_h=c?jCJr3<IVnS%kalI$*R37@9NV=&x5!anJljc~(XaAimN<Qn-DI4z
zEv*@2twp9woj8?pQTG=gUzS>IbIjW6CzG8wtn*d9S8u6;1OW&@00Izz00bZa0SG_<
z0ucBs@Ki3v>+AfbOZGBT9%S^KIx5XUW$gH3*n0GQxV<~nyW0<UhWbL^zD;IkgGLUH
z@ADgR6!F(j>Ny`9m-rl<8{P9wz5YrVhTU|(tHabfGckp>xzo1FGF{n}R<Tj{@N-ii
zXAbG+qC<1XC6n$y+UG?&ONt{sHAnq={-knwYR83{8S4i1*yabCb<;G1K~F5j4<gP|
zyKfE`+iS*AJn{=3-SwsH1($Zb<2wpsUiQ>&%2K^!>bv@+K2QY-0uX=z1Rwwb2tWV=
z5P$##AOL~?OyHK3ELz)~q;8r|^U_vj*%8#V>YEZvpRyDDiT9HEJTq-haa`Z`;R@|Y
zsxM6aQm5)0RgfS60SG_<0uX=z1Rwwb2tWV=5V*nuEy1~zz7)cjK_EmJHqZYjOnp>8
z)Ms^ag*S+$LjVF0fB*y_009U<00Izz00ge9z-<|=@pI?@QpsqwZfef|#aY~({|9Xu
u#o^iczkmOqt5Zf_BnUtN0uX=z1Rwwb2tWV=5P$##u9d(t7ZI=jFyJ?^>aWxQ


From ab9d6d9282ffa1bf2715197fae4ad97a5d95fa72 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:19:06 +0800
Subject: [PATCH 02/54] Fix the bug that monitored path still is highlighted
 after dropping

I add a dragend check to target
---
 log.md                |  7 ++++++-
 template/index-mnt.js | 34 ++++++++++++++++------------------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/log.md b/log.md
index 5e312b1..9c4b66b 100644
--- a/log.md
+++ b/log.md
@@ -1,7 +1,12 @@
 # Stembase
  File tagging system
 
-
+---
+	## 2023.04.17		version 0.5.3.3
+	-- Bug fix
+	# Fixed
+	1. Fix the bug that monitored path is highlighted after dropping
+		-- finished
 ---
 	## 2023.04.14		version 0.5.3.2
 	-- Bug fix
diff --git a/template/index-mnt.js b/template/index-mnt.js
index da4b7d1..0fc4907 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -14,6 +14,18 @@ const mntfold = ()=>{
 		})
 	}
 }
+// Side:	The Style of Monitored system
+const mntstyle = ()=>{
+	const mntdropzone = document.querySelectorAll('.mnt-dropzone')
+	for(let i=0;i<mntdropzone.length;i++){
+		mntdropzone[i].addEventListener('mouseener',()=>{
+			mntdropzone[i].firstChild.style.background = 'rgb(124,225,192)'
+		})
+		mntdropzone[i].addEventListener('mouseout',()=>{
+			mntdropzone[i].firstChild.style.background = ''
+		})
+	}
+}
 // Side:	Context menu of monitored data
 const mntmenu = ()=>{
 	const contextMenu = document.getElementById('mnt-cm')
@@ -43,10 +55,12 @@ const mntfunc = ()=>{
 		target.addEventListener('dragstart',(event)=>{
 			event.dataTransfer.setData('text/plain',event.target.id)
 		})
+		target.addEventListener('dragend',()=>{
+			target.style.background = ''
+		})
 		// Style
 		target.addEventListener('click',()=>{
 			const apple = target.clientWidth
-			console.log(apple)
 		})
 		target.addEventListener('mousedown',()=>{
 			target.style.background = 'rgb(124,225,192)'
@@ -58,23 +72,7 @@ const mntfunc = ()=>{
 	
 	// Folder function
 	// Shortcut
-	const mntshortcut = document.getElementById('mnt-shortcut')
-	let mntheight = 0
-	mntshortcut.addEventListener('dragenter',()=>{
-		mntheight = mntshortcut.offsetHeight
-	})
-	mntshortcut.addEventListener('dragover',()=>{
-		mntshortcut.style.height = (mntheight + 50) + 'px'
-		console.log('in')
-	})
-	mntshortcut.addEventListener('dragleave',()=>{
-		console.log('leave')
-		mntshortcut.style.height = 'auto'
-	})
-	mntshortcut.addEventListener('drop',()=>{
-		console.log('drop')
-		mntshortcut.style.height = 'auto'
-	})
+	
 	// Drop folder
 	const mntdropzone = document.querySelectorAll('.mnt-dropzone')
 	const mntcancel = (event)=>{

From 76b551693f311213fe9f7ac56b31c52cf2d23bab Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:31:41 +0800
Subject: [PATCH 03/54] Monitored groups highlight

Highlight the corresponding header of monitored group when hovering
---
 log.md                |  4 ++++
 template/index-mnt.js | 11 +++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/log.md b/log.md
index 9c4b66b..d61f622 100644
--- a/log.md
+++ b/log.md
@@ -4,9 +4,13 @@
 ---
 	## 2023.04.17		version 0.5.3.3
 	-- Bug fix
+	-- Style change
 	# Fixed
 	1. Fix the bug that monitored path is highlighted after dropping
 		-- finished
+	# Changed
+	1. When hovering, the header of monitored groups would be highlighted
+		-- finished
 ---
 	## 2023.04.14		version 0.5.3.2
 	-- Bug fix
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 0fc4907..8093b6c 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -17,12 +17,14 @@ const mntfold = ()=>{
 // Side:	The Style of Monitored system
 const mntstyle = ()=>{
 	const mntdropzone = document.querySelectorAll('.mnt-dropzone')
+	const mntfolderheader = document.querySelectorAll('.mnt-folder-header')
 	for(let i=0;i<mntdropzone.length;i++){
-		mntdropzone[i].addEventListener('mouseener',()=>{
-			mntdropzone[i].firstChild.style.background = 'rgb(124,225,192)'
+		mntdropzone[i].addEventListener('mouseenter',()=>{
+			console.log(mntfolderheader[i])
+			mntfolderheader[i].style.background = 'rgb(124,225,192)'
 		})
-		mntdropzone[i].addEventListener('mouseout',()=>{
-			mntdropzone[i].firstChild.style.background = ''
+		mntdropzone[i].addEventListener('mouseleave',()=>{
+			mntfolderheader[i].style.background = ''
 		})
 	}
 }
@@ -108,6 +110,7 @@ const mntmain = async()=>{
 const mntInit = ()=>{
 	mntmain()
 	mntfold()
+	mntstyle()
 	mntmenu()
 	
 }

From 6fb9a701a0032dc63e945c9bad848bd88468db00 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:36:40 +0800
Subject: [PATCH 04/54] Fix monitored group bug

Append to target folder rather than append to target to prevent hierarchy confused
---
 log.md                | 2 ++
 template/index-mnt.js | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/log.md b/log.md
index d61f622..876578d 100644
--- a/log.md
+++ b/log.md
@@ -8,6 +8,8 @@
 	# Fixed
 	1. Fix the bug that monitored path is highlighted after dropping
 		-- finished
+	2. Fix the bug that all objects in a monitored groups are merged
+		-- finished
 	# Changed
 	1. When hovering, the header of monitored groups would be highlighted
 		-- finished
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 8093b6c..9c263c4 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -87,7 +87,7 @@ const mntfunc = ()=>{
 		target.addEventListener('drop',(event)=>{
 			mntcancel(event)
 			const id = event.dataTransfer.getData('text/plain')
-			event.target.appendChild(document.getElementById(id))
+			target.appendChild(document.getElementById(id))
 		})
 		target.addEventListener('dragenter',mntcancel)
 		target.addEventListener('dragover',mntcancel)

From fef542733e96b7c27ae2bcd559301fc4561d095c Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Tue, 18 Apr 2023 08:40:46 +0800
Subject: [PATCH 05/54] Re-import dragging resize function

By applying counter on checking enter and leave, i solve the problems of dragenter and dragleave. It realizes the dragging resize function
---
 log.md                |  6 ++++++
 static/css/index.css  |  2 ++
 template/index-mnt.js | 23 +++++++++++++++++++++--
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/log.md b/log.md
index 876578d..8a5f1e1 100644
--- a/log.md
+++ b/log.md
@@ -1,6 +1,12 @@
 # Stembase
  File tagging system
 
+---
+	## 2023.04.18		version 0.5.4
+	-- Function re-import
+	# Added
+	1. Fix the dragenter and dragleave bug and re-import resize function
+		-- finished
 ---
 	## 2023.04.17		version 0.5.3.3
 	-- Bug fix
diff --git a/static/css/index.css b/static/css/index.css
index b7c159f..0aaa993 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -34,6 +34,8 @@
 }
 .mnt-folder{
 	border-bottom:	5px solid rgb(255,238,214);
+	height:			auto;
+	transition:		0.5s ease;
 }
 .mnt-folder-header{
 	border-bottom:	5px solid rgb(255,238,214);
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 9c263c4..0a62a34 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -5,7 +5,6 @@ const mntfold = ()=>{
 	const mntcontent = document.querySelectorAll('.mnt-folder-content')
 	for(let i=0;i<mntheader.length;i++){
 		mntheader[i].addEventListener('click',()=>{
-			console.log(mntcontent[i].style.height)
 			if(mntcontent[i].style.height==''){
 				mntcontent[i].style.height = 'auto'
 			}else{
@@ -20,7 +19,6 @@ const mntstyle = ()=>{
 	const mntfolderheader = document.querySelectorAll('.mnt-folder-header')
 	for(let i=0;i<mntdropzone.length;i++){
 		mntdropzone[i].addEventListener('mouseenter',()=>{
-			console.log(mntfolderheader[i])
 			mntfolderheader[i].style.background = 'rgb(124,225,192)'
 		})
 		mntdropzone[i].addEventListener('mouseleave',()=>{
@@ -76,6 +74,7 @@ const mntfunc = ()=>{
 	// Shortcut
 	
 	// Drop folder
+	let counter= false
 	const mntdropzone = document.querySelectorAll('.mnt-dropzone')
 	const mntcancel = (event)=>{
 		event.preventDefault()
@@ -91,6 +90,26 @@ const mntfunc = ()=>{
 		})
 		target.addEventListener('dragenter',mntcancel)
 		target.addEventListener('dragover',mntcancel)
+		target.addEventListener('dragenter',()=>{
+			
+			if(!counter){
+				console.log(target.clientHeight)
+				target.style.height = (target.clientHeight + 100) + 'px'
+				counter = 0
+			}
+			counter++
+		})
+		target.addEventListener('dragleave',()=>{
+			counter--
+			if(counter==0){
+				target.style.height = 'auto'
+				counter = false
+			}
+		})
+		target.addEventListener('drop',()=>{
+			counter = 0
+			target.style.height = 'auto'
+		})
 	}
 		
 }

From cf504d91bf99a2954b90cd2d6784eb53695f6511 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Tue, 18 Apr 2023 11:29:53 +0800
Subject: [PATCH 06/54] Add smooth animation when dropping

Set transition at outer div
---
 log.md                |  3 +++
 static/css/index.css  |  1 -
 template/index-mnt.js | 39 ++++++++++++++++++++++++++++++++++++---
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/log.md b/log.md
index 8a5f1e1..dea8d00 100644
--- a/log.md
+++ b/log.md
@@ -7,6 +7,9 @@
 	# Added
 	1. Fix the dragenter and dragleave bug and re-import resize function
 		-- finished
+	2. Add smooth expansion and collapsing animation to monitored groups
+		-- finished
+		
 ---
 	## 2023.04.17		version 0.5.3.3
 	-- Bug fix
diff --git a/static/css/index.css b/static/css/index.css
index 0aaa993..ec7ef5c 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -34,7 +34,6 @@
 }
 .mnt-folder{
 	border-bottom:	5px solid rgb(255,238,214);
-	height:			auto;
 	transition:		0.5s ease;
 }
 .mnt-folder-header{
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 0a62a34..9f3ee23 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -60,7 +60,7 @@ const mntfunc = ()=>{
 		})
 		// Style
 		target.addEventListener('click',()=>{
-			const apple = target.clientWidth
+			
 		})
 		target.addEventListener('mousedown',()=>{
 			target.style.background = 'rgb(124,225,192)'
@@ -81,6 +81,7 @@ const mntfunc = ()=>{
 		event.stopPropagation()
 		return false
 	}
+	/*
 	for(let i=0;i<mntdropzone.length;i++){
 		const target = mntdropzone[i]
 		target.addEventListener('drop',(event)=>{
@@ -110,8 +111,40 @@ const mntfunc = ()=>{
 			counter = 0
 			target.style.height = 'auto'
 		})
-	}
-		
+	}*/
+
+	const mntfoldercontent = document.querySelectorAll('.mnt-folder-content')
+	for(let i=0;i<mntdropzone.length;i++){
+		const target = mntdropzone[i]
+		const content = mntfoldercontent[i]
+		target.addEventListener('drop',(event)=>{
+			mntcancel(event)
+			const id = event.dataTransfer.getData('text/plain')
+			content.appendChild(document.getElementById(id))
+		})
+		target.addEventListener('dragenter',mntcancel)
+		target.addEventListener('dragover',mntcancel)
+		target.addEventListener('dragenter',()=>{
+			
+			if(!counter){
+				console.log(target.clientHeight)
+				content.style.height = (content.clientHeight + 100) + 'px'
+				counter = 0
+			}
+			counter++
+		})
+		target.addEventListener('dragleave',()=>{
+			counter--
+			if(counter==0){
+				content.style.height = ''
+				counter = false
+			}
+		})
+		target.addEventListener('drop',()=>{
+			counter = 0
+			content.style.height = ''
+		})
+	}		
 }
 // Main:	Load all monitored data
 const mntmain = async()=>{

From 955f8e49a6810966e5da7f53cc151fd38395c6b6 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Wed, 19 Apr 2023 08:39:57 +0800
Subject: [PATCH 07/54] Expand check

By class to check if monitored group is expanded , if so restore after dropping or ccollapse
---
 log.md                | 13 +++++++++++++
 static/css/index.css  |  5 +++--
 template/index-mnt.js | 21 ++++++++++++++++-----
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/log.md b/log.md
index dea8d00..9d9d4dc 100644
--- a/log.md
+++ b/log.md
@@ -1,6 +1,19 @@
 # Stembase
  File tagging system
 
+---
+	## 2023.04.19		version 0.5.4.1
+	-- Funcction iplementation
+	-- Code rewrite
+	# Added
+	1. Add expand check in dragging function to prevent collapsing
+		-- finished
+	# Changed
+	1. Rewrite some codes from flexible to fixed due to css poor behaviour
+		-- finished
+	# Bugged
+	1. Smooth transition now is missing
+		-- finished
 ---
 	## 2023.04.18		version 0.5.4
 	-- Function re-import
diff --git a/static/css/index.css b/static/css/index.css
index ec7ef5c..91a96dd 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -38,6 +38,7 @@
 }
 .mnt-folder-header{
 	border-bottom:	5px solid rgb(255,238,214);
+	height:			26px;
 }
 .mnt-folder-content{
 	white-space:	nowrap;
@@ -45,11 +46,11 @@
 	overflow-y:		hidden;
 	height:			0px;
 	width:			auto;
-	max-height:		20vh;
-	transition:		0.5s;
+	max-height:		20vh;	
 }
 .mnt-data{
 	width:			100%;
+	height:			21px;
 }
 .mnt-data:hover{
 	background:		rgb(154,255,222);
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 9f3ee23..53219b3 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -5,10 +5,14 @@ const mntfold = ()=>{
 	const mntcontent = document.querySelectorAll('.mnt-folder-content')
 	for(let i=0;i<mntheader.length;i++){
 		mntheader[i].addEventListener('click',()=>{
+			
 			if(mntcontent[i].style.height==''){
-				mntcontent[i].style.height = 'auto'
+				//mntcontent[i].style.height = 'auto'
+				mntcontent[i].style.height = mntcontent[i].childElementCount*21 + 31 + 'px'
+				mntcontent[i].classList.add('mnt-expanding')
 			}else{
 				mntcontent[i].style.height = ''
+				mntcontent[i].classList.remove('mnt-expanding')
 			}
 		})
 	}
@@ -117,6 +121,7 @@ const mntfunc = ()=>{
 	for(let i=0;i<mntdropzone.length;i++){
 		const target = mntdropzone[i]
 		const content = mntfoldercontent[i]
+		let isExpand = false
 		target.addEventListener('drop',(event)=>{
 			mntcancel(event)
 			const id = event.dataTransfer.getData('text/plain')
@@ -125,9 +130,7 @@ const mntfunc = ()=>{
 		target.addEventListener('dragenter',mntcancel)
 		target.addEventListener('dragover',mntcancel)
 		target.addEventListener('dragenter',()=>{
-			
 			if(!counter){
-				console.log(target.clientHeight)
 				content.style.height = (content.clientHeight + 100) + 'px'
 				counter = 0
 			}
@@ -136,13 +139,21 @@ const mntfunc = ()=>{
 		target.addEventListener('dragleave',()=>{
 			counter--
 			if(counter==0){
-				content.style.height = ''
+				if(content.classList.contains('mnt-expanding')){
+					content.style.height = content.childElementCount*21 + 31 + 'px'
+				}else{
+					content.style.height = ''
+				}			
 				counter = false
 			}
 		})
 		target.addEventListener('drop',()=>{
 			counter = 0
-			content.style.height = ''
+			if(content.classList.contains('mnt-expanding')){
+				content.style.height = content.childElementCount*21 + 31 + 'px'
+			}else{
+				content.style.height = ''
+			}	
 		})
 	}		
 }

From a42798bdd3b28a67b035ec8017031321ad51cc01 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Wed, 19 Apr 2023 10:58:31 +0800
Subject: [PATCH 08/54] Smooth effect missingg bug fix

Apply transition at mnt-folder-content rather than outer div
---
 log.md               | 6 +++---
 static/css/index.css | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/log.md b/log.md
index 9d9d4dc..488818a 100644
--- a/log.md
+++ b/log.md
@@ -5,15 +5,15 @@
 	## 2023.04.19		version 0.5.4.1
 	-- Funcction iplementation
 	-- Code rewrite
+	# Fixed
+	1. Fix smooth effect missing bug
+		-- finished
 	# Added
 	1. Add expand check in dragging function to prevent collapsing
 		-- finished
 	# Changed
 	1. Rewrite some codes from flexible to fixed due to css poor behaviour
 		-- finished
-	# Bugged
-	1. Smooth transition now is missing
-		-- finished
 ---
 	## 2023.04.18		version 0.5.4
 	-- Function re-import
diff --git a/static/css/index.css b/static/css/index.css
index 91a96dd..9c67005 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -34,7 +34,7 @@
 }
 .mnt-folder{
 	border-bottom:	5px solid rgb(255,238,214);
-	transition:		0.5s ease;
+	
 }
 .mnt-folder-header{
 	border-bottom:	5px solid rgb(255,238,214);
@@ -45,8 +45,8 @@
 	overflow-x:		auto;
 	overflow-y:		hidden;
 	height:			0px;
-	width:			auto;
 	max-height:		20vh;	
+	transition:		0.5s ease;
 }
 .mnt-data{
 	width:			100%;

From ab2be4f586badf0468e96796ac9d7fae5efe6c37 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Wed, 19 Apr 2023 14:39:47 +0800
Subject: [PATCH 09/54] Fix monitored data highlight effect last permanetly

Check status by class
---
 log.md                |  4 +++
 template/index-mnt.js | 57 +++++++++++++++++--------------------------
 template/index.html   |  4 +--
 3 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/log.md b/log.md
index 488818a..8570d5d 100644
--- a/log.md
+++ b/log.md
@@ -4,10 +4,14 @@
 ---
 	## 2023.04.19		version 0.5.4.1
 	-- Funcction iplementation
+	-- Bug fix
 	-- Code rewrite
+	-- Remove wasted codes
 	# Fixed
 	1. Fix smooth effect missing bug
 		-- finished
+	2. Fix monitored data highlight effect last permanently
+		-- finished
 	# Added
 	1. Add expand check in dragging function to prevent collapsing
 		-- finished
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 53219b3..acb402b 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -7,7 +7,6 @@ const mntfold = ()=>{
 		mntheader[i].addEventListener('click',()=>{
 			
 			if(mntcontent[i].style.height==''){
-				//mntcontent[i].style.height = 'auto'
 				mntcontent[i].style.height = mntcontent[i].childElementCount*21 + 31 + 'px'
 				mntcontent[i].classList.add('mnt-expanding')
 			}else{
@@ -29,6 +28,14 @@ const mntstyle = ()=>{
 			mntfolderheader[i].style.background = ''
 		})
 	}
+	const mnt = document.getElementById('mnt')
+	mnt.addEventListener('mousedown',()=>{
+		const mntselected = document.querySelector('.mnt-selected')
+		if(mntselected){
+			mntselected.style.background = ''
+			mntselected.classList.remove('mnt-selected')
+		}
+	})
 }
 // Side:	Context menu of monitored data
 const mntmenu = ()=>{
@@ -58,13 +65,17 @@ const mntfunc = ()=>{
 		// Drag
 		target.addEventListener('dragstart',(event)=>{
 			event.dataTransfer.setData('text/plain',event.target.id)
+			/*const clone = target.cloneNode(true)
+			target.parentNode.insertBefore(clone,target)
+			clone.id = event.target.id + '-clone'
+			event.dataTransfer.setData('text/plain',clone.id)*/
 		})
 		target.addEventListener('dragend',()=>{
 			target.style.background = ''
 		})
 		// Style
 		target.addEventListener('click',()=>{
-			
+			target.classList.add('mnt-selected')			
 		})
 		target.addEventListener('mousedown',()=>{
 			target.style.background = 'rgb(124,225,192)'
@@ -76,7 +87,15 @@ const mntfunc = ()=>{
 	
 	// Folder function
 	// Shortcut
-	
+	// All List
+	/*
+	const mntmain = document.getElementById('mnt-main')
+	mntmain.addEventListener('dragstart',()=>{
+		console.log('apple')
+	})
+	mntmain.addEventListener('dragend',()=>{
+		console.log('bana')
+	})*/
 	// Drop folder
 	let counter= false
 	const mntdropzone = document.querySelectorAll('.mnt-dropzone')
@@ -85,37 +104,6 @@ const mntfunc = ()=>{
 		event.stopPropagation()
 		return false
 	}
-	/*
-	for(let i=0;i<mntdropzone.length;i++){
-		const target = mntdropzone[i]
-		target.addEventListener('drop',(event)=>{
-			mntcancel(event)
-			const id = event.dataTransfer.getData('text/plain')
-			target.appendChild(document.getElementById(id))
-		})
-		target.addEventListener('dragenter',mntcancel)
-		target.addEventListener('dragover',mntcancel)
-		target.addEventListener('dragenter',()=>{
-			
-			if(!counter){
-				console.log(target.clientHeight)
-				target.style.height = (target.clientHeight + 100) + 'px'
-				counter = 0
-			}
-			counter++
-		})
-		target.addEventListener('dragleave',()=>{
-			counter--
-			if(counter==0){
-				target.style.height = 'auto'
-				counter = false
-			}
-		})
-		target.addEventListener('drop',()=>{
-			counter = 0
-			target.style.height = 'auto'
-		})
-	}*/
 
 	const mntfoldercontent = document.querySelectorAll('.mnt-folder-content')
 	for(let i=0;i<mntdropzone.length;i++){
@@ -125,6 +113,7 @@ const mntfunc = ()=>{
 		target.addEventListener('drop',(event)=>{
 			mntcancel(event)
 			const id = event.dataTransfer.getData('text/plain')
+			console.log(id)
 			content.appendChild(document.getElementById(id))
 		})
 		target.addEventListener('dragenter',mntcancel)
diff --git a/template/index.html b/template/index.html
index 898527c..c94891e 100644
--- a/template/index.html
+++ b/template/index.html
@@ -17,8 +17,8 @@
 		<div id='main-function'>
 			<div id='mnt'>
 				<div id='mnt-cm' class='context-menu'>
-					<p class='mnt-cm-option'>Option 1</p>
-					<p class='mnt-cm-option'>Option 2</p>
+					<p class='mnt-cm-option'>New</p>
+					<p class='mnt-cm-option'>Remove</p>
 				</div>
 				<div id='mnt-shortcut' class='mnt-folder mnt-dropzone'>
 					<p class='mnt-folder-header'>Shortcut</p> 

From 3a8cc7f411c69e6c63579ffd8caa352ba2c023ee Mon Sep 17 00:00:00 2001
From: etc1290 <52283388+etc1290@users.noreply.github.com>
Date: Wed, 19 Apr 2023 19:46:27 +0800
Subject: [PATCH 10/54] Set Light Mode as Default

Set Light Mode as Default and remove unused package
---
 main.js               | 2 +-
 static/js/DarkMode.js | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/main.js b/main.js
index 4c8cf02..97b225f 100644
--- a/main.js
+++ b/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain, nativeTheme, dialog, session } = require('electron')
+const { app, BrowserWindow, ipcMain, dialog, session } = require('electron')
 const path = require('path')
 const fs = require('fs')
 const glob = require('glob')
diff --git a/static/js/DarkMode.js b/static/js/DarkMode.js
index 03f341b..c08286d 100644
--- a/static/js/DarkMode.js
+++ b/static/js/DarkMode.js
@@ -1,5 +1,8 @@
 const { ipcMain, nativeTheme } = require('electron')
-	// Main: toggle
+	
+nativeTheme.themeSource = 'light'
+
+// Main: toggle
 	
 ipcMain.handle('dm-main',	() =>{
 	if (nativeTheme.shouldUseDarkColors){
@@ -13,5 +16,5 @@ ipcMain.handle('dm-main',	() =>{
 })
 	// Side: Reset to system
 ipcMain.handle('dm-reset',	() =>{
-	nativeTheme.themeSource = 'light'
+	nativeTheme.themeSource = 'system'
 })
\ No newline at end of file

From a4bcd9f1d2b313c265cf3b68dfb3702827127c9a Mon Sep 17 00:00:00 2001
From: etc1290 <52283388+etc1290@users.noreply.github.com>
Date: Wed, 19 Apr 2023 20:20:28 +0800
Subject: [PATCH 11/54] Fix Bug

Fix fail to open file problem and  comment unusing css code
---
 static/css/index.css  | 7 +++++--
 static/js/DeleteDB.js | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/static/css/index.css b/static/css/index.css
index 9c67005..773311c 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -167,9 +167,12 @@
 #tag-match-result:hover{
 	background:		rgb(231,238,238);
 }
-#tag-search-output{
 
-}
+/* TODO */
+/* #tag-search-output{
+
+} */
+
 /* Alice Blue */
 #tag-search-result:hover{
 	background:		rgb(223,239,247);
diff --git a/static/js/DeleteDB.js b/static/js/DeleteDB.js
index 436f882..010a599 100644
--- a/static/js/DeleteDB.js
+++ b/static/js/DeleteDB.js
@@ -23,5 +23,6 @@ ipcMain.handle('ts-delDB', () => {
 
 ipcMain.handle('fs-openfile', (evt, v) => {
     console.log(v)
+    exe('chcp 65001')
     exe(v)
 })
\ No newline at end of file

From 0a1eae7446966cf4d60731b3c891ce5a184c5d96 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Thu, 20 Apr 2023 07:51:27 +0800
Subject: [PATCH 12/54] Fix execution priority bug

Modify with correctly async/await
---
 log.md                |  7 +++++++
 template/index-mnt.js | 40 ++++++++++++++++------------------------
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/log.md b/log.md
index 8570d5d..3c024c2 100644
--- a/log.md
+++ b/log.md
@@ -1,6 +1,13 @@
 # Stembase
  File tagging system
 
+---
+	## 2023.04.20		version 0.5.4.2
+	-- Bug fix
+	# Fixed
+	1. Fix the bug that mntfunc run before mntmain over
+		-- finished
+		
 ---
 	## 2023.04.19		version 0.5.4.1
 	-- Funcction iplementation
diff --git a/template/index-mnt.js b/template/index-mnt.js
index acb402b..8b51398 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -65,18 +65,12 @@ const mntfunc = ()=>{
 		// Drag
 		target.addEventListener('dragstart',(event)=>{
 			event.dataTransfer.setData('text/plain',event.target.id)
-			/*const clone = target.cloneNode(true)
-			target.parentNode.insertBefore(clone,target)
-			clone.id = event.target.id + '-clone'
-			event.dataTransfer.setData('text/plain',clone.id)*/
 		})
 		target.addEventListener('dragend',()=>{
 			target.style.background = ''
 		})
 		// Style
-		target.addEventListener('click',()=>{
-			target.classList.add('mnt-selected')			
-		})
+		target.addEventListener('click',()=>{target.classList.add('mnt-selected')})
 		target.addEventListener('mousedown',()=>{
 			target.style.background = 'rgb(124,225,192)'
 		})
@@ -88,14 +82,6 @@ const mntfunc = ()=>{
 	// Folder function
 	// Shortcut
 	// All List
-	/*
-	const mntmain = document.getElementById('mnt-main')
-	mntmain.addEventListener('dragstart',()=>{
-		console.log('apple')
-	})
-	mntmain.addEventListener('dragend',()=>{
-		console.log('bana')
-	})*/
 	// Drop folder
 	let counter= false
 	const mntdropzone = document.querySelectorAll('.mnt-dropzone')
@@ -112,9 +98,11 @@ const mntfunc = ()=>{
 		let isExpand = false
 		target.addEventListener('drop',(event)=>{
 			mntcancel(event)
-			const id = event.dataTransfer.getData('text/plain')
-			console.log(id)
-			content.appendChild(document.getElementById(id))
+			const dropid = event.dataTransfer.getData('text/plain')
+			const dropdata = document.getElementById(dropid)
+			const dropclone = dropdata.cloneNode(true)
+			dropdata.parentNode.insertBefore(dropclone,dropdata.nextSibling)
+			content.appendChild(dropdata)
 		})
 		target.addEventListener('dragenter',mntcancel)
 		target.addEventListener('dragover',mntcancel)
@@ -156,14 +144,18 @@ const mntmain = async()=>{
 		mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
 	}
 	updateDiv.innerHTML = mntdata.join('')
-	mntfunc()	
+	return true
 }
 //Initailizer
-const mntInit = ()=>{
-	mntmain()
-	mntfold()
-	mntstyle()
-	mntmenu()
+const mntInit = async()=>{
+	const isReady = await mntmain()
+	if(isReady){
+		mntfunc()
+		mntfold()
+		mntstyle()
+		mntmenu()
+	}
+	
 	
 }
 mntInit()
\ No newline at end of file

From 3c848100bf417078c08810326e705b02f7f1b46a Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Thu, 20 Apr 2023 09:06:27 +0800
Subject: [PATCH 13/54] Rewrite function

Rewrite mntfunc data function in delegation way and add target check to actuate it
---
 log.md                | 13 +++++++++-
 template/index-mnt.js | 57 +++++++++++++++++++++++++++----------------
 2 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/log.md b/log.md
index 3c024c2..e24ce25 100644
--- a/log.md
+++ b/log.md
@@ -4,10 +4,21 @@
 ---
 	## 2023.04.20		version 0.5.4.2
 	-- Bug fix
+	-- Rewrite function
 	# Fixed
 	1. Fix the bug that mntfunc run before mntmain over
 		-- finished
-		
+	# Changed
+	1. Rewrite function in delegation way
+		1.1 mntfunc data function
+			-- finished
+		1.2 mntfunc folder function
+			-- processing
+		1.3 mntstyle
+			-- processing
+		1.4 mntfold
+			-- processing
+		-- processing
 ---
 	## 2023.04.19		version 0.5.4.1
 	-- Funcction iplementation
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 8b51398..39fa7b9 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -1,6 +1,6 @@
 
 // Side:	Monitored group collapse and expand
-const mntfold = ()=>{
+const mntfold = (target)=>{
 	const mntheader = document.querySelectorAll('.mnt-folder-header')
 	const mntcontent = document.querySelectorAll('.mnt-folder-content')
 	for(let i=0;i<mntheader.length;i++){
@@ -17,7 +17,7 @@ const mntfold = ()=>{
 	}
 }
 // Side:	The Style of Monitored system
-const mntstyle = ()=>{
+const mntstyle = (target)=>{
 	const mntdropzone = document.querySelectorAll('.mnt-dropzone')
 	const mntfolderheader = document.querySelectorAll('.mnt-folder-header')
 	for(let i=0;i<mntdropzone.length;i++){
@@ -52,33 +52,44 @@ const mntmenu = ()=>{
 	}
 }	
 // Side:	Function of monitored data
-const mntfunc = ()=>{
+const mntfunc = (target)=>{
 	// Data function
-	const mntdata = document.querySelectorAll('.mnt-data')
-	for(let i=0;i<mntdata.length;i++){
+	const mntcheck = (event)=>{
+		return event.target.classList.contains('mnt-data')
+	}
+	for(let i=0;i<target.length;i++){
 		// Jump to monitored path
-		const target = mntdata[i]
-		target.addEventListener('dblclick',()=>{
-			floorNum = 'fs-floor-0'
-			fsfunc(target.innerHTML)
+		const el = target[i]
+		el.addEventListener('dblclick',(event)=>{
+			if(mntcheck(event)){
+				floorNum = 'fs-floor-0'
+				fsfunc(event.target.innerHTML)
+			}		
 		})
 		// Drag
-		target.addEventListener('dragstart',(event)=>{
+		el.addEventListener('dragstart',(event)=>{
 			event.dataTransfer.setData('text/plain',event.target.id)
 		})
-		target.addEventListener('dragend',()=>{
-			target.style.background = ''
+		el.addEventListener('dragend',(event)=>{
+			event.target.style.background = ''
 		})
 		// Style
-		target.addEventListener('click',()=>{target.classList.add('mnt-selected')})
-		target.addEventListener('mousedown',()=>{
-			target.style.background = 'rgb(124,225,192)'
+		el.addEventListener('click',(event)=>{
+			if(mntcheck(event)){
+				event.target.classList.add('mnt-selected')
+			}		
+		})
+		el.addEventListener('mousedown',(event)=>{
+			if(mntcheck(event)){
+				event.target.style.background = 'rgb(124,255,192'
+			}		
 		})
-		target.addEventListener('mouseup',()=>{
-			target.style.background = 'rgb(154,255,222)'
+		el.addEventListener('mouseup',(event)=>{
+			if(mntcheck(event)){
+				event.target.style.background = 'rgb(154,255,222)'
+			}			
 		})
 	}
-	
 	// Folder function
 	// Shortcut
 	// All List
@@ -147,12 +158,16 @@ const mntmain = async()=>{
 	return true
 }
 //Initailizer
+const mntApplier = (target)=>{
+	mntfunc(target)
+	mntfold(target)
+	mntstyle(target)
+}
 const mntInit = async()=>{
 	const isReady = await mntmain()
 	if(isReady){
-		mntfunc()
-		mntfold()
-		mntstyle()
+		const mntfolder = document.querySelectorAll('.mnt-folder')
+		mntApplier(mntfolder)
 		mntmenu()
 	}
 	

From b774e36ef863d944643502a461b2c7ac2808cc3a Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Thu, 20 Apr 2023 11:24:40 +0800
Subject: [PATCH 14/54] Rewrite mntfunc folder function

Rewrite mntfunc folder function in delegation way
---
 log.md                |  2 +-
 template/index-mnt.js | 65 +++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/log.md b/log.md
index e24ce25..136e1b9 100644
--- a/log.md
+++ b/log.md
@@ -13,7 +13,7 @@
 		1.1 mntfunc data function
 			-- finished
 		1.2 mntfunc folder function
-			-- processing
+			-- finished
 		1.3 mntstyle
 			-- processing
 		1.4 mntfold
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 39fa7b9..4ba9370 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -54,8 +54,13 @@ const mntmenu = ()=>{
 // Side:	Function of monitored data
 const mntfunc = (target)=>{
 	// Data function
-	const mntcheck = (event)=>{
-		return event.target.classList.contains('mnt-data')
+	const mntcheck = (event,isFolder = false)=>{
+		if(isFolder){
+			return event.currentTarget.classList.contains('mnt-dropzone')
+		}else{
+			return event.target.classList.contains('mnt-data')
+		}// Should be simplified if no longer need it
+		
 	}
 	for(let i=0;i<target.length;i++){
 		// Jump to monitored path
@@ -89,11 +94,65 @@ const mntfunc = (target)=>{
 				event.target.style.background = 'rgb(154,255,222)'
 			}			
 		})
+		// Folder Function
+		// Drop Folder
+		let counter = isExpand = false
+		const mntcancel = (event)=>{
+			event.preventDefault()
+			event.stopPropagation()
+			return false
+		}
+		if(el.classList.contains('mnt-dropzone')){
+			el.addEventListener('drop',(event)=>{
+				mntcancel(event)
+				const dropid = event.dataTransfer.getData('text/plain')
+				const dropdata = document.getElementById(dropid)
+				const isClone = dropdata.parentNode.parentNode.classList.contains('mnt-dropzone')
+				if(!isClone){
+					const dropclone = dropdata.cloneNode(true)
+					dropdata.parentNode.insertBefore(dropclone,dropdata.nextSibling)
+				}
+				const content = event.currentTarget.querySelector('.mnt-folder-content')
+				content.appendChild(dropdata)
+			})
+			el.addEventListener('dragenter',mntcancel)
+			el.addEventListener('dragover',mntcancel)
+			el.addEventListener('dragenter',(event)=>{
+				const content = event.currentTarget.querySelector('.mnt-folder-content')
+				if(!counter){
+					content.style.height = (content.clientHeight + 100) + 'px'
+					counter = 0
+				}
+				counter++
+			})
+			const mntexpand = (content)=>{
+				if(content.classList.contains('mnt-expanding')){
+					content.style.height = content.childElementCount*21 + 31 + 'px'
+				}else{
+					content.style.height = ''
+				}
+			}
+			el.addEventListener('dragleave',(event)=>{
+				counter--
+				const content = event.currentTarget.querySelector('.mnt-folder-content')
+				if(counter==0){
+					mntexpand(content)
+					counter = false
+				}
+			})
+			el.addEventListener('drop',(event)=>{
+				counter = 0
+				const content = event.currentTarget.querySelector('.mnt-folder-content')
+				mntexpand(content)
+			})
+		}
 	}
 	// Folder function
 	// Shortcut
 	// All List
 	// Drop folder
+	
+	/*
 	let counter= false
 	const mntdropzone = document.querySelectorAll('.mnt-dropzone')
 	const mntcancel = (event)=>{
@@ -143,7 +202,7 @@ const mntfunc = (target)=>{
 				content.style.height = ''
 			}	
 		})
-	}		
+	}	*/	
 }
 // Main:	Load all monitored data
 const mntmain = async()=>{

From 7855f81ee6f686a51fbd2a5cf30c44b7026a3f57 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Thu, 20 Apr 2023 11:39:28 +0800
Subject: [PATCH 15/54] Rewrite mntstyle

Rewrite mntstyle in delegation and add red color to notate droppable or not
---
 log.md                |  2 +-
 template/index-mnt.js | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/log.md b/log.md
index 136e1b9..39fb52f 100644
--- a/log.md
+++ b/log.md
@@ -15,7 +15,7 @@
 		1.2 mntfunc folder function
 			-- finished
 		1.3 mntstyle
-			-- processing
+			-- finished
 		1.4 mntfold
 			-- processing
 		-- processing
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 4ba9370..e8c11c5 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -18,6 +18,27 @@ const mntfold = (target)=>{
 }
 // Side:	The Style of Monitored system
 const mntstyle = (target)=>{
+	const mntcheck = (event)=>{
+		return event.currentTarget.classList.contains('mnt-dropzone')
+	}
+	for(let i=0;i<target.length;i++){
+		const el = target[i]
+		el.addEventListener('mouseenter',(event)=>{
+			const content = event.currentTarget.querySelector('.mnt-folder-header')
+			const isDropzone = mntcheck(event)
+			if(isDropzone){
+				content.style.background = 'rgb(124,255,192)'
+			}else{
+				content.style.background = 'rgb(255,174,189)'
+			}
+		})
+		el.addEventListener('mouseleave',(event)=>{
+			console.log(event.currentTarget)
+			const content = event.currentTarget.querySelector('.mnt-folder-header')
+			content.style.background = ''
+		})
+	}
+	/*
 	const mntdropzone = document.querySelectorAll('.mnt-dropzone')
 	const mntfolderheader = document.querySelectorAll('.mnt-folder-header')
 	for(let i=0;i<mntdropzone.length;i++){
@@ -36,6 +57,7 @@ const mntstyle = (target)=>{
 			mntselected.classList.remove('mnt-selected')
 		}
 	})
+	*/
 }
 // Side:	Context menu of monitored data
 const mntmenu = ()=>{

From 1b0046d80d0c6758aab1524a4e55a0c950e30557 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Thu, 20 Apr 2023 11:47:53 +0800
Subject: [PATCH 16/54] Fix the bug that drop cannot remove highlight effect

Merge click check to mousedown to fix it cause drop not count as mouseup so click cannot be fired
---
 log.md                |  4 +++-
 template/index-mnt.js | 31 ++++++-------------------------
 2 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/log.md b/log.md
index 39fb52f..9bcd6eb 100644
--- a/log.md
+++ b/log.md
@@ -2,12 +2,14 @@
  File tagging system
 
 ---
-	## 2023.04.20		version 0.5.4.2
+	## 2023.04.20		version 0.5.5
 	-- Bug fix
 	-- Rewrite function
 	# Fixed
 	1. Fix the bug that mntfunc run before mntmain over
 		-- finished
+	2. Fix the bug that drop cannot trigger highlight remove
+		-- finished
 	# Changed
 	1. Rewrite function in delegation way
 		1.1 mntfunc data function
diff --git a/template/index-mnt.js b/template/index-mnt.js
index e8c11c5..2a5e289 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -38,26 +38,6 @@ const mntstyle = (target)=>{
 			content.style.background = ''
 		})
 	}
-	/*
-	const mntdropzone = document.querySelectorAll('.mnt-dropzone')
-	const mntfolderheader = document.querySelectorAll('.mnt-folder-header')
-	for(let i=0;i<mntdropzone.length;i++){
-		mntdropzone[i].addEventListener('mouseenter',()=>{
-			mntfolderheader[i].style.background = 'rgb(124,225,192)'
-		})
-		mntdropzone[i].addEventListener('mouseleave',()=>{
-			mntfolderheader[i].style.background = ''
-		})
-	}
-	const mnt = document.getElementById('mnt')
-	mnt.addEventListener('mousedown',()=>{
-		const mntselected = document.querySelector('.mnt-selected')
-		if(mntselected){
-			mntselected.style.background = ''
-			mntselected.classList.remove('mnt-selected')
-		}
-	})
-	*/
 }
 // Side:	Context menu of monitored data
 const mntmenu = ()=>{
@@ -101,14 +81,15 @@ const mntfunc = (target)=>{
 			event.target.style.background = ''
 		})
 		// Style
-		el.addEventListener('click',(event)=>{
-			if(mntcheck(event)){
-				event.target.classList.add('mnt-selected')
-			}		
-		})
 		el.addEventListener('mousedown',(event)=>{
 			if(mntcheck(event)){
+				const mntselected = document.querySelectorAll('.mnt-selected')
+				for(let i=0;i<mntselected.length;i++){
+					mntselected[i].classList.remove('mnt-selected')
+					mntselected[i].style.background = ''
+				}
 				event.target.style.background = 'rgb(124,255,192'
+				event.target.classList.add('mnt-selected')
 			}		
 		})
 		el.addEventListener('mouseup',(event)=>{

From 19280a43ad88fda56825f394b1c6c89df7342299 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Thu, 20 Apr 2023 13:09:26 +0800
Subject: [PATCH 17/54] Rewrite mntfold function

Rewrite mntfold in delegation way abd improve it by adding a general counter
---
 log.md                |  6 +-----
 template/index-mnt.js | 28 +++++++++++++++++++---------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/log.md b/log.md
index 9bcd6eb..aeecaba 100644
--- a/log.md
+++ b/log.md
@@ -13,14 +13,10 @@
 	# Changed
 	1. Rewrite function in delegation way
 		1.1 mntfunc data function
-			-- finished
 		1.2 mntfunc folder function
-			-- finished
 		1.3 mntstyle
-			-- finished
 		1.4 mntfold
-			-- processing
-		-- processing
+		-- finished
 ---
 	## 2023.04.19		version 0.5.4.1
 	-- Funcction iplementation
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 2a5e289..4988aca 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -1,6 +1,22 @@
 
 // Side:	Monitored group collapse and expand
 const mntfold = (target)=>{
+	for(let i=0;i<target.length;i++){
+		const el = target[i]
+		el.addEventListener('click',(event)=>{
+			const header = event.currentTarget.querySelector('.mnt-folder-header')
+			const content = event.currentTarget.querySelector('.mnt-folder-content')
+			const isExpand = content.classList.contains('mnt-expanding')
+			if(isExpand){
+				content.style.height = ''
+				content.classList.remove('mnt-expanding')
+			}else{
+				content.style.height = content.childElementCount*21 + 31 + 'px'
+				content.classList.add('mnt-expanding')
+			}
+		})
+	}
+	/*
 	const mntheader = document.querySelectorAll('.mnt-folder-header')
 	const mntcontent = document.querySelectorAll('.mnt-folder-content')
 	for(let i=0;i<mntheader.length;i++){
@@ -14,7 +30,7 @@ const mntfold = (target)=>{
 				mntcontent[i].classList.remove('mnt-expanding')
 			}
 		})
-	}
+	}*/
 }
 // Side:	The Style of Monitored system
 const mntstyle = (target)=>{
@@ -33,7 +49,6 @@ const mntstyle = (target)=>{
 			}
 		})
 		el.addEventListener('mouseleave',(event)=>{
-			console.log(event.currentTarget)
 			const content = event.currentTarget.querySelector('.mnt-folder-header')
 			content.style.background = ''
 		})
@@ -56,13 +71,8 @@ const mntmenu = ()=>{
 // Side:	Function of monitored data
 const mntfunc = (target)=>{
 	// Data function
-	const mntcheck = (event,isFolder = false)=>{
-		if(isFolder){
-			return event.currentTarget.classList.contains('mnt-dropzone')
-		}else{
-			return event.target.classList.contains('mnt-data')
-		}// Should be simplified if no longer need it
-		
+	const mntcheck = (event)=>{
+		return event.currentTarget.classList.contains('mnt-dropzone')		
 	}
 	for(let i=0;i<target.length;i++){
 		// Jump to monitored path

From 37b863a2fd7f0585090459408deadad2a9364697 Mon Sep 17 00:00:00 2001
From: etc1290 <52283388+etc1290@users.noreply.github.com>
Date: Fri, 21 Apr 2023 10:05:08 +0800
Subject: [PATCH 18/54] UI Improvement

1. Reduce button bar area
2. Layout arrangement for fs-main
3. Remove <br> on each fs-data-label to increase density and select accuracy

Remove testing data
---
 data/Stemdb.db       | Bin 57344 -> 0 bytes
 static/css/index.css |   9 ++++++---
 template/index.js    |   2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)
 delete mode 100644 data/Stemdb.db

diff --git a/data/Stemdb.db b/data/Stemdb.db
deleted file mode 100644
index a2f9834bf6efbdabb903dfba22f7e5207c6a1eac..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 57344
zcmeI*|7#m%90%~b+~qEp^zN|>C6xWJTW9IYx?$2Nn;UAkb>EtbZu1A>prq}y8k=0Y
z<jOXNj2nW8C^$j<3;a!x4V(&sPMDyAvY#AoW5c1KBL1ZQ;17PDOPVgN>n%;jI(Q$=
z)63nHPoL*?*V4P^dG0y#e6HYe`&hYB%6s;(^oS(O(lfR#NzzVwS@c?1R9X?Qg+*Ri
zS>gLmY1@=!vVSBqF)pzP`;NVDeP~{_UbiN@M$Gf(8;S9*b%~!=h=5%XfB*y_009U<
z00IzLs{(#9p{Lfbm;G0~{A7`jm)(L_uGGJE?KwO;a&*)_I<h-AYWLN*_Su``MqgpN
z&nUPapWzkTEqk^*Uo6`5ZsGVmAEMoEzQp?skDsJH%l6Jy3Z;DIls(H&Z5Dy-{Jd8#
zxKkBg;;uIsAKYqcsgd=vRB)&H$?EYU{l7m^%R}!c>gAZo)K{#nUH6hbUC(Zw-5=9a
z$)x=1d{F1Z{1|;1&2^<Mi}ehvXoWHdbse&)>Rx_kaYNh)tE@p6GQ2S31{wpxjXpgv
zXj4jS?i8=u`wB(AS?n3K%dS1mi=3{1rt;OP{4^I^=I5sKi(81lDP*lY%@L30XExLJ
zdyQ8+u0au~SVOglbe#I*T53n~ZpY~`KQ@t}B++k#WlK}GxUWTn<KkC?<3eSmFRl5w
z(3ZvHvcmaCMO^*q*RQWsUMj*whLTvn7M3kd+4SdBEwyEf{9;h4`pI17^m`(XZSCA%
zcpGi1?2?@U{}5#z^f$_Ss;5Uj+aJUfr-yh&nm*kpHr<oeiodIU$3&Rs-()(&!p`c!
z0Yyvg?77>iA<8z95ve*53C)-m85Q~y8WVp;O?qk8A&FgN9@}Q!w%(&RSReoa2tWV=
z5P$##AOHafKmY=F709uu<oB{YPdYDDd8O(MXLdaH_;zP6ug-eqIj8KsB({#Z<r76d
zJ;TTIZk}#;IY&HRn#@<ZbNk~Det!2gC+%b$XL$Hff}-_wAexiO9Eee@?zUq&>GWP*
zl}cMfs<^C<OY1zMs?zD+kSI$(<T&Xka{0+>E!{6um5iQNV>GaxZ8HT=yyA2`HFiT{
z|FXZ>pX^t5o8Dl700bZa0SG_<0uX=z1Rwwb2teQ=5{N3Y%$P_M36aKPBGq+~s;Z(G
zMsWRaxf1)#a;;C9%6yi4h$@JpLI45~fB*y_009U<00Izzz?u{oQ~h3f)s5CoJp|Z6
z)$i#*EGLuLuln6>M{?4!tWpXKv#f7`zEe3J_My9V1yFaZzG1AIGw1_gvR@>XeJ`==
z>~Ho5tzdxw1Rwwb2tWV=5P$##AOHafKw!-aBvfU+Tz@u4JSHnWvKa2qsNA}7nCps?
zl<DaZOpnkCJx_s&@&7S)UZURrzp<O_2lh4lf_*|8us{F;5P$##AOHafKmY;|fB*y_
z@Bjs(mLhd$vsz4%l4Y0cx+3*>yy|sD6=}n4dA3}2=c`psrQP(r07FrvUV7Amo39!X
zTAj?#%@sM_7?4uIn&|%@V^^BS|I=N7D-W=O_|Xu600bZa0SG_<0uX=z1Rwwb2!slV
zvHg~{bhLjoS{w5(QbiGIB(gC6KgKRd>;k*WZqXQk-`O|pQ+6rz#~=d)AOHafKmY;|
zfB*y_009U<00Q?@KvTNqY}V4L2S2s{$70mSU$p=0rm{h9wEsuNZfgHm<4UhwYyVfo
zYOVc05>rw}(Ecy_|0lYxN$evw%WUhWb<WCJ>&(mMNplNr#sUEdKmY;|fB*y_009U<
z;Gqy04`!t6UiAagnw~e8&5l`OO1ch&b28a%E|}jg*?!ra3|#~s3TC)#JDQWGSlh)M
zcVRQjEqjigxB}g)(Y$sWTCGxjUc1JXYc49Lwre>|^VD{YXitf`_F9Iimx->Q4=SQG
zEl<|hT$<YT_rXX9Le;L{4+PWyrCOz4QYtYLK=l7lu+NwE|7YK_%d{B_1Rwwb2tWV=
z5P$##AOHafKmY=3KtS~5ug&mR>+`>So<B_!c~<KGpXj<Sv5o8^D_ZY#T{nl!Q|4FJ
zEo<CLu7L`o2oQh(1Rwwb2tWV=5P$##?nU6)sNdWE%x-BX<2b|FEXzfy`M>4K+8T|n
zjqU`Z{ofj=V9AaIqc;1*Sk&)sKU&cKAKRgpLMPVy-}ZlfR6V_+<ti<0|JO*yXgy4W
zIhfY2(f%KOT0Px5%wqe$dWcHX#+-#gY3lv&I}xhhfByiLD%IxHe~teCn)SBCF0nUR
zfo-yWq&HX~009U<00Izz00bZa0SG_<0{2_sKwPC!7OU>r-nhw<arPM$sRP3`#IOe6
zY_~*x^mzWUkRZeKg#J=Uo-wz4qR6Lb_&D8FnBf&?7d^}WOsgMi+$|CP|21}_ssI1|
zKE#L*0SG_<0uX=z1Rwwb2tWV=5P(1@1w_yPcwD50A<{d?0xUlNU$f3h>}B>A`;t9s
zU86TxAOHafKmY;|fB*y_009U<00Q@2;GpV<4nJ7d2;OMVzN7s=zF+k_F<iqKReiJN
eVGT=5q-|2h!h%GzN+~SQvZ_aRDQ8wc65v09Q<yaX

diff --git a/static/css/index.css b/static/css/index.css
index 773311c..0ca512d 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -4,7 +4,7 @@
 	display:		flex;
 }
 #main-function{
-	height:			70vh;
+	height:			90vh;
 	width:			100%;
 	display:		flex;
 }
@@ -56,7 +56,7 @@
 	background:		rgb(154,255,222);
 }
 #fs{
-	width:			50%;
+	width:			60%;
 	border-top:		5px solid rgb(255,238,214);
 }
 #fs-info{
@@ -73,7 +73,7 @@
 	height:			3vh;
 }
 #fs-main{
-	height:			90%;
+	height:			96%;
 	overflow-x:		auto;
 	overflow-y:		hidden;
 	display:		flex;
@@ -128,6 +128,8 @@
 #tag{
 	height:			100%;
 	width:			30%;
+	/* resize:			horizontal; */
+    overflow:		auto;
 	text-align:		center;
 	vertical-align: top;
 }
@@ -157,6 +159,7 @@
 }
 #buttonbar{
 	border-top:		5px solid rgb(255,238,214);
+	display: 		flex;
 }
 #tag-match-div{
 	height:			0vh;
diff --git a/template/index.js b/template/index.js
index 741d05e..c405c13 100644
--- a/template/index.js
+++ b/template/index.js
@@ -171,7 +171,7 @@ const fsfunc = async (v=false,isDrive=false) => {
 			const fsbtn = `<div class='fs-data-label' id='datalabel` + i +`'><button class='fs-data'>` + file[i] + `</button>`
 			const fssize = `<p class='fs-data-size'>`+ size[i] + `</p>`
 			const fsmtime = `<p class='fs-data-mtime'>`+ mtime[i] +`</p></div>`
-			const fsdata = fsbtn + fssize + fsmtime + `<br>`
+			const fsdata = fsbtn + fssize + fsmtime
 			fsdataset[i] = fsdata
 		}	
 	}

From 46d3ff63284ef7a7098fc6a957ebd8d9d80ffe1f Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Mon, 24 Apr 2023 15:09:23 +0800
Subject: [PATCH 19/54] Make a positioncheck for more accurate position spawn

---
 log.md                |  8 +++++
 static/css/index.css  |  3 ++
 template/index-mnt.js | 72 +++++++++++++++++++++++++++++--------------
 template/index.html   | 13 ++++++--
 4 files changed, 71 insertions(+), 25 deletions(-)

diff --git a/log.md b/log.md
index aeecaba..43d899c 100644
--- a/log.md
+++ b/log.md
@@ -1,6 +1,14 @@
 # Stembase
  File tagging system
 
+---
+	## 2023.04.24		version 0.5.5.1
+	-- Rewrite function
+	-- Improve contextMenu positioning accuracy
+	# Changed
+	1. Rewrite function in delegation way
+		1.1 mntmenu
+	2. Improve positioning accuracy of contextMenu in mnt
 ---
 	## 2023.04.20		version 0.5.5
 	-- Bug fix
diff --git a/static/css/index.css b/static/css/index.css
index 0ca512d..1e011f1 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -32,6 +32,9 @@
 #mnt-cm-option:hover{
 	background:		rgb(181,199,208);
 }
+.mnt-cm-dropmenu{
+	display:		none;
+}
 .mnt-folder{
 	border-bottom:	5px solid rgb(255,238,214);
 	
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 4988aca..121e805 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -16,21 +16,7 @@ const mntfold = (target)=>{
 			}
 		})
 	}
-	/*
-	const mntheader = document.querySelectorAll('.mnt-folder-header')
-	const mntcontent = document.querySelectorAll('.mnt-folder-content')
-	for(let i=0;i<mntheader.length;i++){
-		mntheader[i].addEventListener('click',()=>{
-			
-			if(mntcontent[i].style.height==''){
-				mntcontent[i].style.height = mntcontent[i].childElementCount*21 + 31 + 'px'
-				mntcontent[i].classList.add('mnt-expanding')
-			}else{
-				mntcontent[i].style.height = ''
-				mntcontent[i].classList.remove('mnt-expanding')
-			}
-		})
-	}*/
+
 }
 // Side:	The Style of Monitored system
 const mntstyle = (target)=>{
@@ -55,18 +41,58 @@ const mntstyle = (target)=>{
 	}
 }
 // Side:	Context menu of monitored data
-const mntmenu = ()=>{
+const mntmenu = (target)=>{
+	
+	// Main menu
 	const contextMenu = document.getElementById('mnt-cm')
-	const mntfolder = document.querySelectorAll('.mnt-folder')
-	for(let i=0;i<mntfolder.length;i++){
-		mntfolder[i].addEventListener('contextmenu',(event)=>{
+	const menuPositioner = (event)=>{
+		const winX = document.body.clientWidth
+		const winY = document.body.clientHeight
+		const {clientX : mouseX, clientY: mouseY} = event
+		const menuX = contextMenu.style.width
+		const menuY = contextMenu.style.height
+		const secMargin = 10
+		let posLeft = posTop = ''
+		const overflowLimX = mouseX + menuX + secMargin
+		const overflowLimY = mouseY + menuY + secMargin
+		if(overflowLimX >= winX && overflowLimY >=winY){
+			posLeft = mouseX - menuX - secMargin + 'px'
+			posTop = mouseY - menuY - secMargin + 'px'
+		}else if(overflowLimX >= winX){
+			posLeft = mouseX - menuX - secMargin + 'px'
+			posTop = mouseY + secMargin + 'px'
+		}else if(overflowLimY >= winY){
+			posLeft = clientX + secMargin + 'px'
+			posTop = clientY - menuY - secMargin + 'px'
+		}else{
+			posLeft = clientX + secMargin + 'px'
+			posTop = clientY + secMargin + 'px'
+		}
+		return [posLeft,posTop]
+	}
+	for(let i=0;i<target.length;i++){
+		const el=target[i]
+		el.addEventListener('contextmenu',(event)=>{
 			event.preventDefault()
-			const {clientX: mouseX, clientY: mouseY} = event
-			contextMenu.style.top = `${mouseY}px`
-			contextMenu.style.left= `${mouseX}px`
+			/*
+			const {clientX : mouseX, clientY: mouseY} = event
+			contextMenu.style.top = mouseY + 'px'
+			contextMenu.style.left= mouseX + 'px'*/
+			const [posLeft,posTop] = menuPositioner(event)
+			contextMenu.style.left = posLeft
+			contextMenu.style.top = posTop
 			contextMenu.classList.add('visible')
 		})
 	}
+	// Side menu
+	const submenu = document.querySelectorAll('.mnt-cm-submenu')
+	const dropmenu= document.querySelectorAll('.mnt-cm-dropmenu')
+	for(let i=0;i<submenu.length;i++){
+		const el = submenu[i]
+		el.addEventListener('click',(event)=>{
+			
+		})
+	}
 }	
 // Side:	Function of monitored data
 const mntfunc = (target)=>{
@@ -234,13 +260,13 @@ const mntApplier = (target)=>{
 	mntfunc(target)
 	mntfold(target)
 	mntstyle(target)
+	mntmenu(target)
 }
 const mntInit = async()=>{
 	const isReady = await mntmain()
 	if(isReady){
 		const mntfolder = document.querySelectorAll('.mnt-folder')
 		mntApplier(mntfolder)
-		mntmenu()
 	}
 	
 	
diff --git a/template/index.html b/template/index.html
index c94891e..49c8558 100644
--- a/template/index.html
+++ b/template/index.html
@@ -17,8 +17,17 @@
 		<div id='main-function'>
 			<div id='mnt'>
 				<div id='mnt-cm' class='context-menu'>
-					<p class='mnt-cm-option'>New</p>
-					<p class='mnt-cm-option'>Remove</p>
+					<p id='mnt-cm-new' class='mnt-cm-option'>New</p>
+					<p id='mnt-cm-move' class='mnt-cm-option mnt-cm-submenu'>Move</p>
+					<div id='mnt-cm-movemenu' class='mnt-cm-dropmenu'>
+						<p id='mnt-movemenu-shortcut'>Move to Shortcut</p>
+					</div>
+					<p id='mnt-cm-remove' class='mnt-cm-option mnt-cm-submenu'>Remove</p>
+					<div id='mnt-cm-removemenu' class='mnt-cm-dropmenu'>
+						<p id='mnt-removemenu-delete'>Delete this record</p>
+						<p id='mnt-removemenu-remove'>Remove from this group</p>
+						<p id='mnt-removemenu-unmonitor'>Remove monitoring</p>
+					</div>
 				</div>
 				<div id='mnt-shortcut' class='mnt-folder mnt-dropzone'>
 					<p class='mnt-folder-header'>Shortcut</p> 

From 70e83f41cfc075701c9cfd62e7fcbb5a45b52dc2 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Mon, 24 Apr 2023 15:51:13 +0800
Subject: [PATCH 20/54] Style change for contextmenu

Use different tints to differentiate normal options , submenu options and options in submenu
---
 log.md                |  3 +++
 static/css/index.css  | 21 +++++++++++++++------
 template/index-mnt.js | 16 +++++++++++-----
 template/index.html   | 12 ++++++------
 4 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/log.md b/log.md
index 43d899c..2166c04 100644
--- a/log.md
+++ b/log.md
@@ -5,10 +5,13 @@
 	## 2023.04.24		version 0.5.5.1
 	-- Rewrite function
 	-- Improve contextMenu positioning accuracy
+	-- Style change
 	# Changed
 	1. Rewrite function in delegation way
 		1.1 mntmenu
+		-- finished
 	2. Improve positioning accuracy of contextMenu in mnt
+		-- finished
 ---
 	## 2023.04.20		version 0.5.5
 	-- Bug fix
diff --git a/static/css/index.css b/static/css/index.css
index 1e011f1..c5a5630 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -17,22 +17,31 @@
 	position:		fixed;
 	z-index:		9999;
 	width:			150px;
-	background:		rgb(201,219,228);
 	border-radius:	5px;
+	background:		rgb(228,237,241);
 	display:		none;
 }
 #mnt-cm.visible{
 	display:		block;
 }
-#mnt-cm-option{
+.mnt-cm-option{
+	padding:		8px 10px;	
+	cursor:			pointer;	
+}
+.mnt-cm-option:hover{
+	background:		rgb(180,205,217);
+}
+.mnt-cm-submenu{
+	background:		rgb(238,245,247);
 	padding:		8px 10px;
-	cursor:			pointer;
-	border-radius:	inherit;
+	cursor:			pointer;	
 }
-#mnt-cm-option:hover{
-	background:		rgb(181,199,208);
+.mnt-cm-submenu:hover{
+	background:		rgb(180,205,217);
 }
 .mnt-cm-dropmenu{
+	background:		rgb(119,164,187);
+	color:			rgb(248,250,252);
 	display:		none;
 }
 .mnt-folder{
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 121e805..66ec1d1 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -43,7 +43,7 @@ const mntstyle = (target)=>{
 // Side:	Context menu of monitored data
 const mntmenu = (target)=>{
 	
-	// Main menu
+	// Positioner
 	const contextMenu = document.getElementById('mnt-cm')
 	const menuPositioner = (event)=>{
 		const winX = document.body.clientWidth
@@ -70,14 +70,11 @@ const mntmenu = (target)=>{
 		}
 		return [posLeft,posTop]
 	}
+	// Main menu
 	for(let i=0;i<target.length;i++){
 		const el=target[i]
 		el.addEventListener('contextmenu',(event)=>{
 			event.preventDefault()
-			/*
-			const {clientX : mouseX, clientY: mouseY} = event
-			contextMenu.style.top = mouseY + 'px'
-			contextMenu.style.left= mouseX + 'px'*/
 			const [posLeft,posTop] = menuPositioner(event)
 			contextMenu.style.left = posLeft
 			contextMenu.style.top = posTop
@@ -93,6 +90,15 @@ const mntmenu = (target)=>{
 			
 		})
 	}
+	// Style
+	contextMenu.addEventListener('hover',(event)=>{
+		const isOption = event.target.classList.contains('mnt-cm-option')
+		const isSub = event.target.classList.contains('mnt-cm-submenu')
+		const isDrop = event.target.classList.contains('mnt-dropmenu-option')
+		if(isOption){
+			
+		}
+	})
 }	
 // Side:	Function of monitored data
 const mntfunc = (target)=>{
diff --git a/template/index.html b/template/index.html
index 49c8558..3d1f9f7 100644
--- a/template/index.html
+++ b/template/index.html
@@ -18,15 +18,15 @@
 			<div id='mnt'>
 				<div id='mnt-cm' class='context-menu'>
 					<p id='mnt-cm-new' class='mnt-cm-option'>New</p>
-					<p id='mnt-cm-move' class='mnt-cm-option mnt-cm-submenu'>Move</p>
+					<p id='mnt-cm-move' class='mnt-cm-submenu'>Move</p>
 					<div id='mnt-cm-movemenu' class='mnt-cm-dropmenu'>
-						<p id='mnt-movemenu-shortcut'>Move to Shortcut</p>
+						<p id='mnt-movemenu-shortcut' class='mnt-dropmenu-option'>Move to Shortcut</p>
 					</div>
-					<p id='mnt-cm-remove' class='mnt-cm-option mnt-cm-submenu'>Remove</p>
+					<p id='mnt-cm-remove' class='mnt-cm-submenu'>Remove</p>
 					<div id='mnt-cm-removemenu' class='mnt-cm-dropmenu'>
-						<p id='mnt-removemenu-delete'>Delete this record</p>
-						<p id='mnt-removemenu-remove'>Remove from this group</p>
-						<p id='mnt-removemenu-unmonitor'>Remove monitoring</p>
+						<p id='mnt-removemenu-delete' class='mnt-dropmenu-option'>Delete this record</p>
+						<p id='mnt-removemenu-remove' class='mnt-dropmenu-option'>Remove from this group</p>
+						<p id='mnt-removemenu-unmonitor' class='mnt-dropmenu-option'>Remove monitoring</p>
 					</div>
 				</div>
 				<div id='mnt-shortcut' class='mnt-folder mnt-dropzone'>

From 765f1c6b5075c10690e538545e3c7f97dac5ac90 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Tue, 25 Apr 2023 13:05:10 +0800
Subject: [PATCH 21/54] Multiple levels for contextmenu

Work in process
---
 log.md                |  9 +++++
 static/css/index.css  |  4 ++
 template/index-mnt.js | 89 +++++++++++++++++++++++++++++--------------
 template/index.html   | 22 ++++++-----
 4 files changed, 86 insertions(+), 38 deletions(-)

diff --git a/log.md b/log.md
index 2166c04..a818c63 100644
--- a/log.md
+++ b/log.md
@@ -1,6 +1,15 @@
 # Stembase
  File tagging system
 
+---
+	## 2023.04.25		version 0.5.5.2
+	-- Submenu function
+	# Added
+	1. Add multiple layers to contextMenu
+		-- finished
+	# Bugged
+	1. Submenu position is incorrect
+	
 ---
 	## 2023.04.24		version 0.5.5.1
 	-- Rewrite function
diff --git a/static/css/index.css b/static/css/index.css
index c5a5630..db269fe 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -43,6 +43,10 @@
 	background:		rgb(119,164,187);
 	color:			rgb(248,250,252);
 	display:		none;
+	position:		absolute;
+}
+.mnt-cm-dropmenu.visible{
+	display:		block;
 }
 .mnt-folder{
 	border-bottom:	5px solid rgb(255,238,214);
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 66ec1d1..cba90ba 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -45,29 +45,65 @@ const mntmenu = (target)=>{
 	
 	// Positioner
 	const contextMenu = document.getElementById('mnt-cm')
-	const menuPositioner = (event)=>{
-		const winX = document.body.clientWidth
-		const winY = document.body.clientHeight
-		const {clientX : mouseX, clientY: mouseY} = event
+	const menuPositioner = (event,isSub = false,dropMenu='')=>{
+		//const winX = document.body.clientWidth
+		//const winY = document.body.clientHeight
+		const winX = window.screen.width
+		const winY = window.screen.height
 		const menuX = contextMenu.style.width
-		const menuY = contextMenu.style.height
+		const menuY = contextMenu.style.height		
 		const secMargin = 10
-		let posLeft = posTop = ''
-		const overflowLimX = mouseX + menuX + secMargin
-		const overflowLimY = mouseY + menuY + secMargin
-		if(overflowLimX >= winX && overflowLimY >=winY){
-			posLeft = mouseX - menuX - secMargin + 'px'
-			posTop = mouseY - menuY - secMargin + 'px'
-		}else if(overflowLimX >= winX){
-			posLeft = mouseX - menuX - secMargin + 'px'
-			posTop = mouseY + secMargin + 'px'
-		}else if(overflowLimY >= winY){
-			posLeft = clientX + secMargin + 'px'
-			posTop = clientY - menuY - secMargin + 'px'
+		let posLeft = posTop = overflowLimX = overflowLimY = ''
+		console.log(contextMenu.style.width)
+		// Submenu
+		if(isSub){
+			const subX = dropMenu.style.width
+			const subY = dropMenu.style.height
+			const optionLeft = event.currentTarget.offsetLeft
+			const optionRight = optionLeft + menuX
+			const optionTop = event.currentTarget.offsetTop
+			console.log(event.currentTarget)
+			overflowLimX = optionRight + subX + secMargin
+			overflowLimY = optionTop - subY - secMargin
+			if(overflowLimX >= winX && overflowLimY <= 0){
+				posLeft = optionLeft - subX + 'px'
+				posTop = optionTop + subY + 'px'
+				console.log(1)
+			}else if(overflowLimX >= winX){
+				posLeft = optionLeft - subX + 'px'
+				posTop = optionTop + 'px'
+				console.log(2)
+			}else if(overflowLimY <= 0){
+				posLeft = optionRight + 'px'
+				posTop = optionTop + subY + 'px'
+				console.log(3)
+			}else{
+				posLeft = optionRight + 'px'
+				//posLeft = optionLeft + 'px'
+				posTop = optionTop + 'px'
+				console.log(optionLeft)
+				console.log(optionRight)
+			}
+		// Mainmenu
 		}else{
-			posLeft = clientX + secMargin + 'px'
-			posTop = clientY + secMargin + 'px'
+			const {clientX : mouseX, clientY: mouseY} = event
+			overflowLimX = mouseX + menuX + secMargin
+			overflowLimY = mouseY + menuY + secMargin
+			if(overflowLimX >= winX && overflowLimY >=winY){
+				posLeft = mouseX - menuX - secMargin + 'px'
+				posTop = mouseY - menuY - secMargin + 'px'
+			}else if(overflowLimX >= winX){
+				posLeft = mouseX - menuX - secMargin + 'px'
+				posTop = mouseY + secMargin + 'px'
+			}else if(overflowLimY >= winY){
+				posLeft = clientX + secMargin + 'px'
+				posTop = clientY - menuY - secMargin + 'px'
+			}else{
+				posLeft = clientX + secMargin + 'px'
+				posTop = clientY + secMargin + 'px'
+			}
 		}
+		
 		return [posLeft,posTop]
 	}
 	// Main menu
@@ -86,19 +122,14 @@ const mntmenu = (target)=>{
 	const dropmenu= document.querySelectorAll('.mnt-cm-dropmenu')
 	for(let i=0;i<submenu.length;i++){
 		const el = submenu[i]
+		const subel = dropmenu[i]
 		el.addEventListener('click',(event)=>{
-			
+			const [posLeft,posTop] = menuPositioner(event,true,subel)
+			subel.style.left = posLeft
+			subel.style.top = posTop
+			subel.classList.add('visible')
 		})
 	}
-	// Style
-	contextMenu.addEventListener('hover',(event)=>{
-		const isOption = event.target.classList.contains('mnt-cm-option')
-		const isSub = event.target.classList.contains('mnt-cm-submenu')
-		const isDrop = event.target.classList.contains('mnt-dropmenu-option')
-		if(isOption){
-			
-		}
-	})
 }	
 // Side:	Function of monitored data
 const mntfunc = (target)=>{
diff --git a/template/index.html b/template/index.html
index 3d1f9f7..9dfbba1 100644
--- a/template/index.html
+++ b/template/index.html
@@ -17,16 +17,20 @@
 		<div id='main-function'>
 			<div id='mnt'>
 				<div id='mnt-cm' class='context-menu'>
-					<p id='mnt-cm-new' class='mnt-cm-option'>New</p>
-					<p id='mnt-cm-move' class='mnt-cm-submenu'>Move</p>
-					<div id='mnt-cm-movemenu' class='mnt-cm-dropmenu'>
-						<p id='mnt-movemenu-shortcut' class='mnt-dropmenu-option'>Move to Shortcut</p>
+					<div>
+						<p id='mnt-cm-new' class='mnt-cm-option'>New</p>
+						<p id='mnt-cm-move' class='mnt-cm-submenu'>Move</p>				
+						<p id='mnt-cm-remove' class='mnt-cm-submenu'>Remove</p>
 					</div>
-					<p id='mnt-cm-remove' class='mnt-cm-submenu'>Remove</p>
-					<div id='mnt-cm-removemenu' class='mnt-cm-dropmenu'>
-						<p id='mnt-removemenu-delete' class='mnt-dropmenu-option'>Delete this record</p>
-						<p id='mnt-removemenu-remove' class='mnt-dropmenu-option'>Remove from this group</p>
-						<p id='mnt-removemenu-unmonitor' class='mnt-dropmenu-option'>Remove monitoring</p>
+					<div>
+						<div id='mnt-cm-movemenu' class='mnt-cm-dropmenu'>
+							<p id='mnt-movemenu-shortcut' class='mnt-dropmenu-option'>Move to Shortcut</p>
+						</div>
+						<div id='mnt-cm-removemenu' class='mnt-cm-dropmenu'>
+							<p id='mnt-removemenu-delete' class='mnt-dropmenu-option'>Delete this record</p>
+							<p id='mnt-removemenu-remove' class='mnt-dropmenu-option'>Remove from this group</p>
+							<p id='mnt-removemenu-unmonitor' class='mnt-dropmenu-option'>Remove monitoring</p>
+						</div>
 					</div>
 				</div>
 				<div id='mnt-shortcut' class='mnt-folder mnt-dropzone'>

From ae342bd408a3306751477ffcb77c904712fcae03 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Tue, 25 Apr 2023 13:21:09 +0800
Subject: [PATCH 22/54] Fix the false positioned value bug

Abandon style.width and style.height and apply with offsetWidth and offsetHeight. Because we need html data not css design data
---
 log.md                |  6 ++++++
 template/index-mnt.js | 24 +++++++++++-------------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/log.md b/log.md
index a818c63..ad3a914 100644
--- a/log.md
+++ b/log.md
@@ -1,6 +1,12 @@
 # Stembase
  File tagging system
 
+---
+	## 2023.04.25		version 0.5.5.3
+	-- Bug fix
+	# Fixed
+	1. Fix the false position value
+		-- finished
 ---
 	## 2023.04.25		version 0.5.5.2
 	-- Submenu function
diff --git a/template/index-mnt.js b/template/index-mnt.js
index cba90ba..7894b64 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -46,23 +46,21 @@ const mntmenu = (target)=>{
 	// Positioner
 	const contextMenu = document.getElementById('mnt-cm')
 	const menuPositioner = (event,isSub = false,dropMenu='')=>{
-		//const winX = document.body.clientWidth
-		//const winY = document.body.clientHeight
 		const winX = window.screen.width
-		const winY = window.screen.height
-		const menuX = contextMenu.style.width
-		const menuY = contextMenu.style.height		
+		const winY = window.screen.height		
+		const menuX = contextMenu.offsetWidth
+		const menuY = contextMenu.offsetHeight
 		const secMargin = 10
 		let posLeft = posTop = overflowLimX = overflowLimY = ''
-		console.log(contextMenu.style.width)
+		console.log(menuX)
 		// Submenu
 		if(isSub){
-			const subX = dropMenu.style.width
-			const subY = dropMenu.style.height
+			
+			const subX = dropMenu.offsetWidth
+			const subY = dropMenu.offsetHeight
 			const optionLeft = event.currentTarget.offsetLeft
 			const optionRight = optionLeft + menuX
 			const optionTop = event.currentTarget.offsetTop
-			console.log(event.currentTarget)
 			overflowLimX = optionRight + subX + secMargin
 			overflowLimY = optionTop - subY - secMargin
 			if(overflowLimX >= winX && overflowLimY <= 0){
@@ -96,11 +94,11 @@ const mntmenu = (target)=>{
 				posLeft = mouseX - menuX - secMargin + 'px'
 				posTop = mouseY + secMargin + 'px'
 			}else if(overflowLimY >= winY){
-				posLeft = clientX + secMargin + 'px'
-				posTop = clientY - menuY - secMargin + 'px'
+				posLeft = mouseX + secMargin + 'px'
+				posTop = mouseY - menuY - secMargin + 'px'
 			}else{
-				posLeft = clientX + secMargin + 'px'
-				posTop = clientY + secMargin + 'px'
+				posLeft = mouseX + secMargin + 'px'
+				posTop = mouseY + secMargin + 'px'
 			}
 		}
 		

From 6397ae8bef55b6473acadebedbf3f7fe6fc49ee0 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Tue, 25 Apr 2023 13:58:39 +0800
Subject: [PATCH 23/54] Prevent contextmenu out of page

Use clientWidth and clientHeight . Moreover, window.screen is invalid because of the limit of Electron, I cannot let contextmenu out of page without truncating
---
 log.md                |  2 ++
 template/index-mnt.js | 27 +++++++++++++++------------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/log.md b/log.md
index ad3a914..c9f8989 100644
--- a/log.md
+++ b/log.md
@@ -7,6 +7,8 @@
 	# Fixed
 	1. Fix the false position value
 		-- finished
+	2. Fix the contextmenu overflow out of page
+		-- finished
 ---
 	## 2023.04.25		version 0.5.5.2
 	-- Submenu function
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 7894b64..e6d1072 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -42,17 +42,17 @@ const mntstyle = (target)=>{
 }
 // Side:	Context menu of monitored data
 const mntmenu = (target)=>{
-	
 	// Positioner
 	const contextMenu = document.getElementById('mnt-cm')
 	const menuPositioner = (event,isSub = false,dropMenu='')=>{
-		const winX = window.screen.width
-		const winY = window.screen.height		
+		
+		const winX = document.body.clientWidth
+		const winY = document.body.clientHeight
 		const menuX = contextMenu.offsetWidth
 		const menuY = contextMenu.offsetHeight
 		const secMargin = 10
 		let posLeft = posTop = overflowLimX = overflowLimY = ''
-		console.log(menuX)
+		console.log(winX)
 		// Submenu
 		if(isSub){
 			
@@ -66,21 +66,15 @@ const mntmenu = (target)=>{
 			if(overflowLimX >= winX && overflowLimY <= 0){
 				posLeft = optionLeft - subX + 'px'
 				posTop = optionTop + subY + 'px'
-				console.log(1)
 			}else if(overflowLimX >= winX){
 				posLeft = optionLeft - subX + 'px'
 				posTop = optionTop + 'px'
-				console.log(2)
 			}else if(overflowLimY <= 0){
 				posLeft = optionRight + 'px'
 				posTop = optionTop + subY + 'px'
-				console.log(3)
 			}else{
 				posLeft = optionRight + 'px'
-				//posLeft = optionLeft + 'px'
 				posTop = optionTop + 'px'
-				console.log(optionLeft)
-				console.log(optionRight)
 			}
 		// Mainmenu
 		}else{
@@ -100,8 +94,7 @@ const mntmenu = (target)=>{
 				posLeft = mouseX + secMargin + 'px'
 				posTop = mouseY + secMargin + 'px'
 			}
-		}
-		
+		}	
 		return [posLeft,posTop]
 	}
 	// Main menu
@@ -128,6 +121,16 @@ const mntmenu = (target)=>{
 			subel.classList.add('visible')
 		})
 	}
+	// test
+	const page = document.body
+	page.addEventListener('contextmenu',(event)=>{
+		event.preventDefault()
+		const [posLeft,posTop] = menuPositioner(event)
+		contextMenu.style.left = posLeft
+		contextMenu.style.top = posTop
+		contextMenu.classList.add('visible')
+	})
+	
 }	
 // Side:	Function of monitored data
 const mntfunc = (target)=>{

From 4607f4c9dc5a5b063f8540c131c070183535413b Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Tue, 25 Apr 2023 14:21:25 +0800
Subject: [PATCH 24/54] Prevent submenu status is inherited

Auto search and remove visible status at every call of contextmenu
---
 log.md                |  2 ++
 template/index-mnt.js | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/log.md b/log.md
index c9f8989..d9d021b 100644
--- a/log.md
+++ b/log.md
@@ -9,6 +9,8 @@
 		-- finished
 	2. Fix the contextmenu overflow out of page
 		-- finished
+	3. Fix the submenu status is inherit to next contextmenu
+		-- finished
 ---
 	## 2023.04.25		version 0.5.5.2
 	-- Submenu function
diff --git a/template/index-mnt.js b/template/index-mnt.js
index e6d1072..b8ceb7f 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -52,7 +52,6 @@ const mntmenu = (target)=>{
 		const menuY = contextMenu.offsetHeight
 		const secMargin = 10
 		let posLeft = posTop = overflowLimX = overflowLimY = ''
-		console.log(winX)
 		// Submenu
 		if(isSub){
 			
@@ -66,15 +65,19 @@ const mntmenu = (target)=>{
 			if(overflowLimX >= winX && overflowLimY <= 0){
 				posLeft = optionLeft - subX + 'px'
 				posTop = optionTop + subY + 'px'
+				console.log(1)
 			}else if(overflowLimX >= winX){
 				posLeft = optionLeft - subX + 'px'
 				posTop = optionTop + 'px'
+				console.log(2)
 			}else if(overflowLimY <= 0){
 				posLeft = optionRight + 'px'
 				posTop = optionTop + subY + 'px'
+				console.log(3)
 			}else{
 				posLeft = optionRight + 'px'
 				posTop = optionTop + 'px'
+				console.log(4)
 			}
 		// Mainmenu
 		}else{
@@ -102,6 +105,10 @@ const mntmenu = (target)=>{
 		const el=target[i]
 		el.addEventListener('contextmenu',(event)=>{
 			event.preventDefault()
+			const prevMenu = document.querySelector('.mnt-cm-dropmenu.visible')
+			if(prevMenu){
+				prevMenu.classList.remove('visible')
+			}
 			const [posLeft,posTop] = menuPositioner(event)
 			contextMenu.style.left = posLeft
 			contextMenu.style.top = posTop
@@ -115,6 +122,10 @@ const mntmenu = (target)=>{
 		const el = submenu[i]
 		const subel = dropmenu[i]
 		el.addEventListener('click',(event)=>{
+			const prevMenu = document.querySelector('.mnt-cm-dropmenu.visible')
+			if(prevMenu){
+				prevMenu.classList.remove('visible')
+			}
 			const [posLeft,posTop] = menuPositioner(event,true,subel)
 			subel.style.left = posLeft
 			subel.style.top = posTop
@@ -125,6 +136,10 @@ const mntmenu = (target)=>{
 	const page = document.body
 	page.addEventListener('contextmenu',(event)=>{
 		event.preventDefault()
+		const prevMenu = document.querySelector('.mnt-cm-dropmenu.visible')
+		if(prevMenu){
+			prevMenu.classList.remove('visible')
+		}
 		const [posLeft,posTop] = menuPositioner(event)
 		contextMenu.style.left = posLeft
 		contextMenu.style.top = posTop

From e6bd4bac29fe45774c4aab3a808e2cece27ad4d5 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Tue, 25 Apr 2023 15:38:47 +0800
Subject: [PATCH 25/54] Fix the bug that positioner not work at first click

Replace display by visibility to solve problem. When use offset to get position if targeted element display is none it would be excluded to DOM tree (no rendering no offset)
---
 log.md                | 2 ++
 static/css/index.css  | 6 ++++--
 template/index-mnt.js | 1 +
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/log.md b/log.md
index d9d021b..70e1032 100644
--- a/log.md
+++ b/log.md
@@ -11,6 +11,8 @@
 		-- finished
 	3. Fix the submenu status is inherit to next contextmenu
 		-- finished
+	4. Fix position is not worked at first click
+		-- finished
 ---
 	## 2023.04.25		version 0.5.5.2
 	-- Submenu function
diff --git a/static/css/index.css b/static/css/index.css
index db269fe..d1eb63b 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -19,10 +19,10 @@
 	width:			150px;
 	border-radius:	5px;
 	background:		rgb(228,237,241);
-	display:		none;
+	visibility:		hidden;
 }
 #mnt-cm.visible{
-	display:		block;
+	visibility:		visible;
 }
 .mnt-cm-option{
 	padding:		8px 10px;	
@@ -42,11 +42,13 @@
 .mnt-cm-dropmenu{
 	background:		rgb(119,164,187);
 	color:			rgb(248,250,252);
+	/*visibility:		hidden;*/
 	display:		none;
 	position:		absolute;
 }
 .mnt-cm-dropmenu.visible{
 	display:		block;
+	/*visibility:		visible;*/
 }
 .mnt-folder{
 	border-bottom:	5px solid rgb(255,238,214);
diff --git a/template/index-mnt.js b/template/index-mnt.js
index b8ceb7f..42c81a7 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -40,6 +40,7 @@ const mntstyle = (target)=>{
 		})
 	}
 }
+
 // Side:	Context menu of monitored data
 const mntmenu = (target)=>{
 	// Positioner

From b6ff626bf6dc5dbef2dca013923916298371bd1d Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Wed, 26 Apr 2023 13:40:11 +0800
Subject: [PATCH 26/54] Finish submenu function in contextmenu

Use getBoundingClientRect to get accurate parent offset
---
 log.md                |  8 +++++++
 static/css/index.css  |  9 ++++++--
 template/index-mnt.js | 50 +++++++++++++++++++++++++++----------------
 template/index.html   | 18 ++++++++--------
 4 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/log.md b/log.md
index 70e1032..aa3c7b3 100644
--- a/log.md
+++ b/log.md
@@ -1,6 +1,14 @@
 # Stembase
  File tagging system
 
+---
+	## 2023.04.26		version 0.5.6
+	-- Bug fix
+	# Fixed
+	1. Submenu now can correctly positioning
+		-- finished
+	2. Fix the bug that when contextmenu is too low, submenu sink into page bottom
+		-- finished
 ---
 	## 2023.04.25		version 0.5.5.3
 	-- Bug fix
diff --git a/static/css/index.css b/static/css/index.css
index d1eb63b..f6481de 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -42,13 +42,18 @@
 .mnt-cm-dropmenu{
 	background:		rgb(119,164,187);
 	color:			rgb(248,250,252);
-	/*visibility:		hidden;*/
+	width:			150px;
 	display:		none;
+	z-index:		9999;
 	position:		absolute;
 }
 .mnt-cm-dropmenu.visible{
 	display:		block;
-	/*visibility:		visible;*/
+}
+.mnt-dropmenu-option{
+	white-space:	nowrap;
+	min-height:		31px;
+	width:			150px;
 }
 .mnt-folder{
 	border-bottom:	5px solid rgb(255,238,214);
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 42c81a7..3405c3b 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -45,40 +45,49 @@ const mntstyle = (target)=>{
 const mntmenu = (target)=>{
 	// Positioner
 	const contextMenu = document.getElementById('mnt-cm')
-	const menuPositioner = (event,isSub = false,dropMenu='')=>{
+	const menuPositioner = (event,isSub = false)=>{
 		
 		const winX = document.body.clientWidth
 		const winY = document.body.clientHeight
 		const menuX = contextMenu.offsetWidth
 		const menuY = contextMenu.offsetHeight
-		const secMargin = 10
+		const secMargin = 5
 		let posLeft = posTop = overflowLimX = overflowLimY = ''
 		// Submenu
 		if(isSub){
-			
+			/*
 			const subX = dropMenu.offsetWidth
-			const subY = dropMenu.offsetHeight
-			const optionLeft = event.currentTarget.offsetLeft
-			const optionRight = optionLeft + menuX
-			const optionTop = event.currentTarget.offsetTop
+			const subY = dropMenu.offsetHeight*/
+			const menuName = event.currentTarget.id + 'menu'
+			const dropMenu = document.getElementById(menuName)
+			const subX = 150
+			const subY = dropMenu.childElementCount*31
+			const upAdjustment = 30
+			const downAdjustment = 10
+			const cmPos = contextMenu.getBoundingClientRect()
+			const optPos = event.currentTarget.getBoundingClientRect()
+			const optionLeft = cmPos.left
+			const optionRight = cmPos.right
+			const optionTop = optPos.top
+			const optionBottom = optPos.bottom
 			overflowLimX = optionRight + subX + secMargin
-			overflowLimY = optionTop - subY - secMargin
-			if(overflowLimX >= winX && overflowLimY <= 0){
+			overflowLimY = optionTop + subY + secMargin
+			if(overflowLimX >= winX && overflowLimY >= winY){
 				posLeft = optionLeft - subX + 'px'
-				posTop = optionTop + subY + 'px'
-				console.log(1)
+				posTop = optionBottom - subY + downAdjustment + 'px'
+				
 			}else if(overflowLimX >= winX){
 				posLeft = optionLeft - subX + 'px'
-				posTop = optionTop + 'px'
-				console.log(2)
-			}else if(overflowLimY <= 0){
+				posTop = optionTop + upAdjustment + 'px'
+				
+			}else if(overflowLimY >= winY){
 				posLeft = optionRight + 'px'
-				posTop = optionTop + subY + 'px'
-				console.log(3)
+				posTop = optionBottom - subY + downAdjustment + 'px'
+				
 			}else{
 				posLeft = optionRight + 'px'
-				posTop = optionTop + 'px'
-				console.log(4)
+				posTop = optionTop + upAdjustment + 'px'
+				
 			}
 		// Mainmenu
 		}else{
@@ -97,6 +106,8 @@ const mntmenu = (target)=>{
 			}else{
 				posLeft = mouseX + secMargin + 'px'
 				posTop = mouseY + secMargin + 'px'
+				console.log(posLeft)
+				console.log(posTop)
 			}
 		}	
 		return [posLeft,posTop]
@@ -127,13 +138,14 @@ const mntmenu = (target)=>{
 			if(prevMenu){
 				prevMenu.classList.remove('visible')
 			}
-			const [posLeft,posTop] = menuPositioner(event,true,subel)
+			const [posLeft,posTop] = menuPositioner(event,true)
 			subel.style.left = posLeft
 			subel.style.top = posTop
 			subel.classList.add('visible')
 		})
 	}
 	// test
+	
 	const page = document.body
 	page.addEventListener('contextmenu',(event)=>{
 		event.preventDefault()
diff --git a/template/index.html b/template/index.html
index 9dfbba1..9ef125b 100644
--- a/template/index.html
+++ b/template/index.html
@@ -21,16 +21,16 @@
 						<p id='mnt-cm-new' class='mnt-cm-option'>New</p>
 						<p id='mnt-cm-move' class='mnt-cm-submenu'>Move</p>				
 						<p id='mnt-cm-remove' class='mnt-cm-submenu'>Remove</p>
+					</div>					
+				</div>
+				<div id='mnt-cm-sub'>
+					<div id='mnt-cm-movemenu' class='mnt-cm-dropmenu'>
+						<p id='mnt-movemenu-shortcut' class='mnt-dropmenu-option'>Move to Shortcut</p>
 					</div>
-					<div>
-						<div id='mnt-cm-movemenu' class='mnt-cm-dropmenu'>
-							<p id='mnt-movemenu-shortcut' class='mnt-dropmenu-option'>Move to Shortcut</p>
-						</div>
-						<div id='mnt-cm-removemenu' class='mnt-cm-dropmenu'>
-							<p id='mnt-removemenu-delete' class='mnt-dropmenu-option'>Delete this record</p>
-							<p id='mnt-removemenu-remove' class='mnt-dropmenu-option'>Remove from this group</p>
-							<p id='mnt-removemenu-unmonitor' class='mnt-dropmenu-option'>Remove monitoring</p>
-						</div>
+					<div id='mnt-cm-removemenu' class='mnt-cm-dropmenu'>
+						<p id='mnt-removemenu-delete' class='mnt-dropmenu-option'>Delete this record</p>
+						<p id='mnt-removemenu-remove' class='mnt-dropmenu-option'>Remove from group</p>
+						<p id='mnt-removemenu-unmonitor' class='mnt-dropmenu-option'>Remove monitoring</p>
 					</div>
 				</div>
 				<div id='mnt-shortcut' class='mnt-folder mnt-dropzone'>

From cf5d61bdeabb0db3a667684eb92dcfe5df921027 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Wed, 26 Apr 2023 14:01:31 +0800
Subject: [PATCH 27/54] Turn off submenu when contextmenu is off

Detect dropmenu and visible class to turn off
---
 log.md                | 2 ++
 template/index-mnt.js | 5 +----
 template/index-ux.js  | 6 +++++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/log.md b/log.md
index aa3c7b3..538c775 100644
--- a/log.md
+++ b/log.md
@@ -9,6 +9,8 @@
 		-- finished
 	2. Fix the bug that when contextmenu is too low, submenu sink into page bottom
 		-- finished
+	3. Fix the submenu is existed after contextmenu is off.
+		-- finished
 ---
 	## 2023.04.25		version 0.5.5.3
 	-- Bug fix
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 3405c3b..3551718 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -55,9 +55,6 @@ const mntmenu = (target)=>{
 		let posLeft = posTop = overflowLimX = overflowLimY = ''
 		// Submenu
 		if(isSub){
-			/*
-			const subX = dropMenu.offsetWidth
-			const subY = dropMenu.offsetHeight*/
 			const menuName = event.currentTarget.id + 'menu'
 			const dropMenu = document.getElementById(menuName)
 			const subX = 150
@@ -144,7 +141,7 @@ const mntmenu = (target)=>{
 			subel.classList.add('visible')
 		})
 	}
-	// test
+	// test: Should be removed after all context related function is completed
 	
 	const page = document.body
 	page.addEventListener('contextmenu',(event)=>{
diff --git a/template/index-ux.js b/template/index-ux.js
index 53b2f62..665e591 100644
--- a/template/index-ux.js
+++ b/template/index-ux.js
@@ -17,7 +17,11 @@ const uxContextMenuRemove = ()=>{
 	document.querySelector('body').addEventListener('click',(event)=>{
 		if(event.target.offsetParent !=contextMenu){
 			contextMenu.classList.remove('visible')
-		}
+			const subMenu = document.querySelector('.mnt-cm-dropmenu.visible')
+			if(subMenu){
+				subMenu.classList.remove('visible')
+			}
+		}	
 	})
 	
 }

From 01933f8d32a9c18e56dfa13ddb4992b9b01825a2 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Thu, 27 Apr 2023 08:06:21 +0800
Subject: [PATCH 28/54] Auto detect and create essential files before run

Auto detect if there are data and MonitoredGroups folder or create ones
---
 Stemconfig.json                          |   2 +
 log.md                                   |   7 ++
 main.js                                  |   8 +++
 preload.js                               |   3 +-
 static/js/MonitorSystem.js               |   8 +++
 template/index-mnt.js                    |  82 ++++++-----------------
 template/index-ux.js                     |   2 -
 "\344\270\255\346\226\207/1/Stemmeta.db" | Bin 20480 -> 20480 bytes
 "\344\270\255\346\226\207/Stemmeta.db"   | Bin 20480 -> 20480 bytes
 9 files changed, 47 insertions(+), 65 deletions(-)

diff --git a/Stemconfig.json b/Stemconfig.json
index 661bb5e..5651d8c 100644
--- a/Stemconfig.json
+++ b/Stemconfig.json
@@ -1,7 +1,9 @@
 {
     "TemplateDir": "./template/",
     "StaticDir": "./static/",
+	"StemdbStorage":"./data",
 	"StemdbDir":"./data/Stemdb",
+	"StemMGDir":"./data/MonitoredGroups",
     "StartDir": "./",
     "Debugmode": 1,
     "Width": 1280,
diff --git a/log.md b/log.md
index 538c775..2905034 100644
--- a/log.md
+++ b/log.md
@@ -1,9 +1,16 @@
 # Stembase
  File tagging system
 
+---
+	## 2023.04.27		version 0.5.6.1
+	-- Bug fix
+	# Fixed
+	1. Auto detect essential folders existence
+		-- finished
 ---
 	## 2023.04.26		version 0.5.6
 	-- Bug fix
+	-- Clear wasted codes
 	# Fixed
 	1. Submenu now can correctly positioning
 		-- finished
diff --git a/main.js b/main.js
index 97b225f..b0e8675 100644
--- a/main.js
+++ b/main.js
@@ -9,6 +9,14 @@ const db = new sqlite3.Database(Stemdb + '.db')
 process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
 app.allowRendererProcessReuse = false
 // Create a new db
+const dbStorage = env('StemdbStorage')
+if (!fs.existsSync(dbStorage)){
+	fs.mkdirSync(dbStorage,{recursive:true})
+}
+const mdbStorage = env('StemMGDir')
+if (!fs.existsSync(mdbStorage)){
+	fs.mkdirSync(mdbStorage,{recursive:true})
+}
 db.get('PRAGMA foreign_keys = ON')
 db.run(`create table "File" (
 	"id"	integer not null unique,
diff --git a/preload.js b/preload.js
index a81b8d6..e740c95 100644
--- a/preload.js
+++ b/preload.js
@@ -40,7 +40,8 @@ contextBridge.exposeInMainWorld('tag', {
 
 // MonitorSystem
 contextBridge.exposeInMainWorld('mnt', {
-	main:		()			=> ipcRenderer.invoke('mnt-main')
+	main:		()			=> ipcRenderer.invoke('mnt-main'),
+	update:		(i,j)			=> ipcRenderer.invoke('mnt-update',i,j)
 })
 
 
diff --git a/static/js/MonitorSystem.js b/static/js/MonitorSystem.js
index 237f0fd..4a9a7ef 100644
--- a/static/js/MonitorSystem.js
+++ b/static/js/MonitorSystem.js
@@ -5,6 +5,7 @@ const sqlite3 = require('sqlite3').verbose()
 const Stemdb = env('StemdbDir')
 const db = new sqlite3.Database(Stemdb + '.db')
 
+// Load all data
 ipcMain.handle('mnt-main', (event) =>{
 	const output = new Promise((resolve)=>{
 		const cmd = `select name from Monitor`
@@ -14,4 +15,11 @@ ipcMain.handle('mnt-main', (event) =>{
 		})
 	})
 	return output
+})
+// Update monitored group members
+ipcMain.handle('mnt-update',(event,folder,name)=>{
+	console.log(folder)
+	console.log(name)
+	const output = new Promise((resolve)=>{
+	})
 })
\ No newline at end of file
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 3551718..81d1e31 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -103,8 +103,7 @@ const mntmenu = (target)=>{
 			}else{
 				posLeft = mouseX + secMargin + 'px'
 				posTop = mouseY + secMargin + 'px'
-				console.log(posLeft)
-				console.log(posTop)
+				
 			}
 		}	
 		return [posLeft,posTop]
@@ -142,7 +141,7 @@ const mntmenu = (target)=>{
 		})
 	}
 	// test: Should be removed after all context related function is completed
-	
+	/*
 	const page = document.body
 	page.addEventListener('contextmenu',(event)=>{
 		event.preventDefault()
@@ -154,7 +153,7 @@ const mntmenu = (target)=>{
 		contextMenu.style.left = posLeft
 		contextMenu.style.top = posTop
 		contextMenu.classList.add('visible')
-	})
+	})*/
 	
 }	
 // Side:	Function of monitored data
@@ -187,7 +186,7 @@ const mntfunc = (target)=>{
 					mntselected[i].classList.remove('mnt-selected')
 					mntselected[i].style.background = ''
 				}
-				event.target.style.background = 'rgb(124,255,192'
+				event.target.style.background = 'rgb(124,255,192)'
 				event.target.classList.add('mnt-selected')
 			}		
 		})
@@ -205,7 +204,7 @@ const mntfunc = (target)=>{
 			return false
 		}
 		if(el.classList.contains('mnt-dropzone')){
-			el.addEventListener('drop',(event)=>{
+			el.addEventListener('drop',async(event)=>{
 				mntcancel(event)
 				const dropid = event.dataTransfer.getData('text/plain')
 				const dropdata = document.getElementById(dropid)
@@ -216,6 +215,10 @@ const mntfunc = (target)=>{
 				}
 				const content = event.currentTarget.querySelector('.mnt-folder-content')
 				content.appendChild(dropdata)
+				// Monitored group update
+				const dropzoneid = event.currentTarget.id
+				const header = document.querySelector('#' + dropzoneid + ' .mnt-folder-header')				
+				const mntupdate = await window.mnt.update(header.innerHTML,dropdata.innerHTML)
 			})
 			el.addEventListener('dragenter',mntcancel)
 			el.addEventListener('dragover',mntcancel)
@@ -248,64 +251,18 @@ const mntfunc = (target)=>{
 				mntexpand(content)
 			})
 		}
-	}
-	// Folder function
-	// Shortcut
-	// All List
-	// Drop folder
-	
-	/*
-	let counter= false
-	const mntdropzone = document.querySelectorAll('.mnt-dropzone')
-	const mntcancel = (event)=>{
-		event.preventDefault()
-		event.stopPropagation()
-		return false
-	}
-
-	const mntfoldercontent = document.querySelectorAll('.mnt-folder-content')
-	for(let i=0;i<mntdropzone.length;i++){
-		const target = mntdropzone[i]
-		const content = mntfoldercontent[i]
-		let isExpand = false
-		target.addEventListener('drop',(event)=>{
-			mntcancel(event)
-			const dropid = event.dataTransfer.getData('text/plain')
-			const dropdata = document.getElementById(dropid)
-			const dropclone = dropdata.cloneNode(true)
-			dropdata.parentNode.insertBefore(dropclone,dropdata.nextSibling)
-			content.appendChild(dropdata)
-		})
-		target.addEventListener('dragenter',mntcancel)
-		target.addEventListener('dragover',mntcancel)
-		target.addEventListener('dragenter',()=>{
-			if(!counter){
-				content.style.height = (content.clientHeight + 100) + 'px'
-				counter = 0
-			}
-			counter++
-		})
-		target.addEventListener('dragleave',()=>{
-			counter--
-			if(counter==0){
-				if(content.classList.contains('mnt-expanding')){
-					content.style.height = content.childElementCount*21 + 31 + 'px'
-				}else{
-					content.style.height = ''
-				}			
-				counter = false
-			}
-		})
-		target.addEventListener('drop',()=>{
-			counter = 0
-			if(content.classList.contains('mnt-expanding')){
-				content.style.height = content.childElementCount*21 + 31 + 'px'
-			}else{
-				content.style.height = ''
-			}	
+	}	
+}
+// Side:	Contextmenu function
+const mntmenufunc = async()=>{
+	// Create new monitored group
+	const mntcmnew = ()=>{
+		document.getElementById('mnt-cm-new').addEventListener('click',()=>{
+			console.log('create folders')
 		})
-	}	*/	
+	}
 }
+
 // Main:	Load all monitored data
 const mntmain = async()=>{
 	const mntdata = []
@@ -330,6 +287,7 @@ const mntInit = async()=>{
 	if(isReady){
 		const mntfolder = document.querySelectorAll('.mnt-folder')
 		mntApplier(mntfolder)
+		mntmenufunc()
 	}
 	
 	
diff --git a/template/index-ux.js b/template/index-ux.js
index 665e591..d45d32c 100644
--- a/template/index-ux.js
+++ b/template/index-ux.js
@@ -4,8 +4,6 @@ const uxScroll = (e)=>{
 	const targetPos = (targetDiv.getBoundingClientRect().right + targetDiv.getBoundingClientRect().left)/2
 	const movePos = targetPos + window.pageXOffset - offset
 	
-	console.log(targetPos)
-	console.log(movePos)
 	document.getElementById('fs-main').scrollTo({
 		left: movePos,
 		behavior: 'smooth'
diff --git "a/\344\270\255\346\226\207/1/Stemmeta.db" "b/\344\270\255\346\226\207/1/Stemmeta.db"
index 571738025e9ce7fda157f6d03dde24207a753fcb..4ef663438a364b0b509e4159c7b982d6dcfed0fc 100644
GIT binary patch
delta 124
zcmZozz}T>Wae_1>+e8^>Mz)O!OZd5%`5!Xyf8&44|8TRQz-4|OE>;!>esROZf`XjX
z$#3PwfeJn_@c#iS`LJ0~;Ss+aD>EY_D=Ua(VPR(G<m6&tU|{Bd#K8ZE{~iB#pdnZI
VdAM2l#Tg-Hux@^5FDSss3II+*AQ%7u

delta 89
zcmZozz}T>Wae_1>>qHr6M%Il9OZYjM_}?<{f8&3<S<vAj|Kzvw;y{sa4E%rizX3&_
s@=pw4o%}(cMTmuknVFN5i-CcGiT@n~|2zKgK<P*Po8Q?B3NW$&0P?>ZO8@`>

diff --git "a/\344\270\255\346\226\207/Stemmeta.db" "b/\344\270\255\346\226\207/Stemmeta.db"
index c03b4b10acb962339fa14b33f47f2b6922abbb7d..c46125870a2644a4924bb860eba35c563587d364 100644
GIT binary patch
delta 121
zcmZozz}T>Wae_1>>qHr6M%Il9OZYjM_+K&bf8&3(Sy12}zY-S<3j@EnVPZi+PAUf@
zkS%POpO?zTz`(%7|BZqF5C6B#f(ozr#aNjc8Ch7EnK?Nja<3WqU-N$lnsJ|>hnt08
QoDpIK%jWO)90H6i07L>EL;wH)

delta 81
zcmZozz}T>Wae_1>%S0JxMwX2UOZYdlIDFw3VqxGHHq6gU<zir9VC4V9!2f5npu$uB
di2=NP%*>pe5aI6({NJI%9Gkz}a|kdp0|0g_6*~X`


From cb90bde73dfdd63cc6d5ef26b1f431f3176e2f6e Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Thu, 27 Apr 2023 09:10:15 +0800
Subject: [PATCH 29/54] Database unable to open keeps showing up

Although knowing that problem may result in execution order it still cannot figure out what is happen
---
 log.md                                     |   2 +
 main.js                                    |  88 +++++++++++++--------
 template/index-mnt.js                      |   4 +
 "\344\270\255\346\226\207/1/2/Stemmeta.db" | Bin 20480 -> 20480 bytes
 4 files changed, 59 insertions(+), 35 deletions(-)

diff --git a/log.md b/log.md
index 2905034..0c3647a 100644
--- a/log.md
+++ b/log.md
@@ -7,6 +7,8 @@
 	# Fixed
 	1. Auto detect essential folders existence
 		-- finished
+	# Bugged
+	1. Keep warn 'Database unable to open'
 ---
 	## 2023.04.26		version 0.5.6
 	-- Bug fix
diff --git a/main.js b/main.js
index b0e8675..6a2b5a3 100644
--- a/main.js
+++ b/main.js
@@ -8,41 +8,51 @@ const sqlite3 = require('sqlite3').verbose()
 const db = new sqlite3.Database(Stemdb + '.db')
 process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
 app.allowRendererProcessReuse = false
+
 // Create a new db
-const dbStorage = env('StemdbStorage')
-if (!fs.existsSync(dbStorage)){
-	fs.mkdirSync(dbStorage,{recursive:true})
+const dbBuild = ()=>{
+	db.get('PRAGMA foreign_keys = ON')
+	db.run(`create table "File" (
+		"id"	integer not null unique,
+		"name"	text not null unique,
+		"file"	text not null,
+		primary key("id" autoincrement)
+	)`,()=>{})
+	db.run(`create table "Tag" (
+		"id"	integer not null unique,
+		"tag"	text not null unique,
+		primary key("id" autoincrement)
+	)`,()=>{})
+	db.run(`create table "Ref" (
+		"id"		integer not null unique,
+		"nameref"	text, 
+		"tagref"	text,
+		primary key("id" autoincrement)
+		foreign key('nameref') references File(name) on delete cascade on update cascade,
+		foreign key('tagref') references Tag(tag) on delete cascade on update cascade,
+		unique(nameref,tagref)
+	)`,()=>{})
+	db.run(`create table "Monitor" (
+		"id"	integer not null unique,
+		"name"	text not null unique,
+		primary key("id" autoincrement)
+	)`,()=>{return true})
+	
 }
-const mdbStorage = env('StemMGDir')
-if (!fs.existsSync(mdbStorage)){
-	fs.mkdirSync(mdbStorage,{recursive:true})
+// Check essential folders
+const firstBuild = ()=>{
+	
+	const dbStorage = env('StemdbStorage')
+	const mdbStorage = env('StemMGDir')
+	if (!fs.existsSync(dbStorage)){
+		fs.mkdirSync(dbStorage,{recursive:true})
+	}
+	
+	if (!fs.existsSync(mdbStorage)){
+		fs.mkdirSync(mdbStorage,{recursive:true})
+	}
+	dbBuild()
 }
-db.get('PRAGMA foreign_keys = ON')
-db.run(`create table "File" (
-	"id"	integer not null unique,
-	"name"	text not null unique,
-	"file"	text not null,
-	primary key("id" autoincrement)
-)`,()=>{})
-db.run(`create table "Tag" (
-	"id"	integer not null unique,
-	"tag"	text not null unique,
-	primary key("id" autoincrement)
-)`,()=>{})
-db.run(`create table "Ref" (
-	"id"		integer not null unique,
-	"nameref"	text, 
-	"tagref"	text,
-	primary key("id" autoincrement)
-	foreign key('nameref') references File(name) on delete cascade on update cascade,
-	foreign key('tagref') references Tag(tag) on delete cascade on update cascade,
-	unique(nameref,tagref)
-)`,()=>{})
-db.run(`create table "Monitor" (
-	"id"	integer not null unique,
-	"name"	text not null unique,
-	primary key("id" autoincrement)
-)`,()=>{})
 
 
 
@@ -82,12 +92,12 @@ exec('NET SESSION', function(err,so,se) {
       console.log(se.length === 0 ? "admin" : "not admin")
     })	*/
 
-const init = () =>{  
+const init = async() =>{  
 	const Taskmanager = () =>{
 		const funcScript = glob.sync(env('StaticDir') + '/js/*.js')
 		funcScript.forEach((i) =>{require(i)})
 	}
-	Taskmanager()  
+	Taskmanager() 
 	app.whenReady().then(() => {
 		WindowMain()
 		// Prevent from multiple windows create
@@ -98,8 +108,16 @@ const init = () =>{
 		})
 		
 	})
+	
+}
+const buildInit = async()=>{
+	const isReady = await firstBuild()
+}
+
+if(buildInit()){
+	console.log('a')
+	init()
 }
-init()
 // Release all resources of the app
 app.on('window-all-closed', () => {
 	if (process.platform !== 'darwin') {
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 81d1e31..4581119 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -273,6 +273,10 @@ const mntmain = async()=>{
 		mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
 	}
 	updateDiv.innerHTML = mntdata.join('')
+	const mntexpand = document.querySelectorAll('.mnt-folder.visible')
+	for(var i=0;i<mntexpand.length;i++){
+		mntexpand[i].style.height = mntexpand[i].childElementCount*21 + 31 + 'px'
+	}
 	return true
 }
 //Initailizer
diff --git "a/\344\270\255\346\226\207/1/2/Stemmeta.db" "b/\344\270\255\346\226\207/1/2/Stemmeta.db"
index b3b9d5c3df9fae23df5333e8d08d09738b782bb9..83f3c87a2ac55a9c8e6360e61da4ea38a8b5f6d8 100644
GIT binary patch
delta 148
zcmZozz}T>Wae_1>^F$eEM&^wPOZYjM_+K;df9HR_Sy13UzakeC3j@EnabiJ1PAWSi
zkS%CzV#3A1z`(@+je-9U|F_M83a|LZSeY3anV6WFIXNM6Zy5N0@V@~X@qk~Bn}uJT
m5n=)pI}5)cC(s05pb3m16F~Z3^K&zBFfxlW`lgm7G64WP1|aVM

delta 122
zcmZozz}T>Wae_1>(?l6(My8DkOZeFs`M)#pf8Q*q@RWaI0EaL;BMSq+ps|Sw7Xt$W
yBmW-;{y$JTUOr}KPELsM4+j1pP+?9Xb{2j?PM{86unuI?IN2GQMLB&_OA-M#L>#jK


From 08674996cad11124bd76fa2c82dce5db7103b447 Mon Sep 17 00:00:00 2001
From: etc1290 <52283388+etc1290@users.noreply.github.com>
Date: Thu, 27 Apr 2023 13:25:35 +0800
Subject: [PATCH 30/54] Improve UI - File Name Popover

Make a file-name-popover to show the file that have long file name
---
 static/css/hint.css | 655 ++++++++++++++++++++++++++++++++++++++++++++
 template/index.html |   1 +
 template/index.js   |   2 +-
 3 files changed, 657 insertions(+), 1 deletion(-)
 create mode 100644 static/css/hint.css

diff --git a/static/css/hint.css b/static/css/hint.css
new file mode 100644
index 0000000..c2a984b
--- /dev/null
+++ b/static/css/hint.css
@@ -0,0 +1,655 @@
+/*! Hint.css - v2.7.0 - 2021-10-01
+* https://kushagra.dev/lab/hint/
+* Copyright (c) 2021 Kushagra Gour */
+
+/*-------------------------------------*\
+	HINT.css - A CSS tooltip library
+\*-------------------------------------*/
+/**
+ * HINT.css is a tooltip library made in pure CSS.
+ *
+ * Source: https://github.com/chinchang/hint.css
+ * Demo: http://kushagragour.in/lab/hint/
+ *
+ */
+/**
+ * source: hint-core.scss
+ *
+ * Defines the basic styling for the tooltip.
+ * Each tooltip is made of 2 parts:
+ * 	1) body (:after)
+ * 	2) arrow (:before)
+ *
+ * Classes added:
+ * 	1) hint
+ */
+[class*="hint--"] {
+  position: relative;
+  display: inline-block;
+  /**
+	 * tooltip arrow
+	 */
+  /**
+	 * tooltip body
+	 */ }
+  [class*="hint--"]:before, [class*="hint--"]:after {
+    position: absolute;
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    visibility: hidden;
+    opacity: 0;
+    z-index: 1000000;
+    pointer-events: none;
+    -webkit-transition: 0.3s ease;
+    -moz-transition: 0.3s ease;
+    transition: 0.3s ease;
+    -webkit-transition-delay: 0ms;
+    -moz-transition-delay: 0ms;
+    transition-delay: 0ms; }
+  [class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
+    visibility: visible;
+    opacity: 1; }
+  [class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
+    -webkit-transition-delay: 100ms;
+    -moz-transition-delay: 100ms;
+    transition-delay: 100ms; }
+  [class*="hint--"]:before {
+    content: '';
+    position: absolute;
+    background: transparent;
+    border: 6px solid transparent;
+    z-index: 1000001; }
+  [class*="hint--"]:after {
+    background: #383838;
+    color: white;
+    padding: 8px 10px;
+    font-size: 12px;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    line-height: 12px;
+    white-space: pre-wrap; }
+  [class*="hint--"][aria-label]:after {
+    content: attr(aria-label); }
+  [class*="hint--"][data-hint]:after {
+    content: attr(data-hint); }
+
+[aria-label='']:before, [aria-label='']:after,
+[data-hint='']:before,
+[data-hint='']:after {
+  display: none !important; }
+
+/**
+ * source: hint-position.scss
+ *
+ * Defines the positoning logic for the tooltips.
+ *
+ * Classes added:
+ * 	1) hint--top
+ * 	2) hint--bottom
+ * 	3) hint--left
+ * 	4) hint--right
+ */
+/**
+ * set default color for tooltip arrows
+ */
+.hint--top-left:before {
+  border-top-color: #383838; }
+
+.hint--top-right:before {
+  border-top-color: #383838; }
+
+.hint--top:before {
+  border-top-color: #383838; }
+
+.hint--bottom-left:before {
+  border-bottom-color: #383838; }
+
+.hint--bottom-right:before {
+  border-bottom-color: #383838; }
+
+.hint--bottom:before {
+  border-bottom-color: #383838; }
+
+.hint--left:before {
+  border-left-color: #383838; }
+
+.hint--right:before {
+  border-right-color: #383838; }
+
+/**
+ * top tooltip
+ */
+.hint--top:before {
+  margin-bottom: -11px; }
+
+.hint--top:before, .hint--top:after {
+  bottom: 100%;
+  left: 50%; }
+
+.hint--top:before {
+  left: calc(50% - 6px); }
+
+.hint--top:after {
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  transform: translateX(-50%); }
+
+.hint--top:hover:before {
+  -webkit-transform: translateY(-8px);
+  -moz-transform: translateY(-8px);
+  transform: translateY(-8px); }
+
+.hint--top:hover:after {
+  -webkit-transform: translateX(-50%) translateY(-8px);
+  -moz-transform: translateX(-50%) translateY(-8px);
+  transform: translateX(-50%) translateY(-8px); }
+
+/**
+ * bottom tooltip
+ */
+.hint--bottom:before {
+  margin-top: -11px; }
+
+.hint--bottom:before, .hint--bottom:after {
+  top: 100%;
+  left: 50%; }
+
+.hint--bottom:before {
+  left: calc(50% - 6px); }
+
+.hint--bottom:after {
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  transform: translateX(-50%); }
+
+.hint--bottom:hover:before {
+  -webkit-transform: translateY(8px);
+  -moz-transform: translateY(8px);
+  transform: translateY(8px); }
+
+.hint--bottom:hover:after {
+  -webkit-transform: translateX(-50%) translateY(8px);
+  -moz-transform: translateX(-50%) translateY(8px);
+  transform: translateX(-50%) translateY(8px); }
+
+/**
+ * right tooltip
+ */
+.hint--right:before {
+  margin-left: -11px;
+  margin-bottom: -6px; }
+
+.hint--right:after {
+  margin-bottom: -14px; }
+
+.hint--right:before, .hint--right:after {
+  left: 100%;
+  bottom: 50%; }
+
+.hint--right:hover:before {
+  -webkit-transform: translateX(8px);
+  -moz-transform: translateX(8px);
+  transform: translateX(8px); }
+
+.hint--right:hover:after {
+  -webkit-transform: translateX(8px);
+  -moz-transform: translateX(8px);
+  transform: translateX(8px); }
+
+/**
+ * left tooltip
+ */
+.hint--left:before {
+  margin-right: -11px;
+  margin-bottom: -6px; }
+
+.hint--left:after {
+  margin-bottom: -14px; }
+
+.hint--left:before, .hint--left:after {
+  right: 100%;
+  bottom: 50%; }
+
+.hint--left:hover:before {
+  -webkit-transform: translateX(-8px);
+  -moz-transform: translateX(-8px);
+  transform: translateX(-8px); }
+
+.hint--left:hover:after {
+  -webkit-transform: translateX(-8px);
+  -moz-transform: translateX(-8px);
+  transform: translateX(-8px); }
+
+/**
+ * top-left tooltip
+ */
+.hint--top-left:before {
+  margin-bottom: -11px; }
+
+.hint--top-left:before, .hint--top-left:after {
+  bottom: 100%;
+  left: 50%; }
+
+.hint--top-left:before {
+  left: calc(50% - 6px); }
+
+.hint--top-left:after {
+  -webkit-transform: translateX(-100%);
+  -moz-transform: translateX(-100%);
+  transform: translateX(-100%); }
+
+.hint--top-left:after {
+  margin-left: 12px; }
+
+.hint--top-left:hover:before {
+  -webkit-transform: translateY(-8px);
+  -moz-transform: translateY(-8px);
+  transform: translateY(-8px); }
+
+.hint--top-left:hover:after {
+  -webkit-transform: translateX(-100%) translateY(-8px);
+  -moz-transform: translateX(-100%) translateY(-8px);
+  transform: translateX(-100%) translateY(-8px); }
+
+/**
+ * top-right tooltip
+ */
+.hint--top-right:before {
+  margin-bottom: -11px; }
+
+.hint--top-right:before, .hint--top-right:after {
+  bottom: 100%;
+  left: 50%; }
+
+.hint--top-right:before {
+  left: calc(50% - 6px); }
+
+.hint--top-right:after {
+  -webkit-transform: translateX(0);
+  -moz-transform: translateX(0);
+  transform: translateX(0); }
+
+.hint--top-right:after {
+  margin-left: -12px; }
+
+.hint--top-right:hover:before {
+  -webkit-transform: translateY(-8px);
+  -moz-transform: translateY(-8px);
+  transform: translateY(-8px); }
+
+.hint--top-right:hover:after {
+  -webkit-transform: translateY(-8px);
+  -moz-transform: translateY(-8px);
+  transform: translateY(-8px); }
+
+/**
+ * bottom-left tooltip
+ */
+.hint--bottom-left:before {
+  margin-top: -11px; }
+
+.hint--bottom-left:before, .hint--bottom-left:after {
+  top: 100%;
+  left: 50%; }
+
+.hint--bottom-left:before {
+  left: calc(50% - 6px); }
+
+.hint--bottom-left:after {
+  -webkit-transform: translateX(-100%);
+  -moz-transform: translateX(-100%);
+  transform: translateX(-100%); }
+
+.hint--bottom-left:after {
+  margin-left: 12px; }
+
+.hint--bottom-left:hover:before {
+  -webkit-transform: translateY(8px);
+  -moz-transform: translateY(8px);
+  transform: translateY(8px); }
+
+.hint--bottom-left:hover:after {
+  -webkit-transform: translateX(-100%) translateY(8px);
+  -moz-transform: translateX(-100%) translateY(8px);
+  transform: translateX(-100%) translateY(8px); }
+
+/**
+ * bottom-right tooltip
+ */
+.hint--bottom-right:before {
+  margin-top: -11px; }
+
+.hint--bottom-right:before, .hint--bottom-right:after {
+  top: 100%;
+  left: 50%; }
+
+.hint--bottom-right:before {
+  left: calc(50% - 6px); }
+
+.hint--bottom-right:after {
+  -webkit-transform: translateX(0);
+  -moz-transform: translateX(0);
+  transform: translateX(0); }
+
+.hint--bottom-right:after {
+  margin-left: -12px; }
+
+.hint--bottom-right:hover:before {
+  -webkit-transform: translateY(8px);
+  -moz-transform: translateY(8px);
+  transform: translateY(8px); }
+
+.hint--bottom-right:hover:after {
+  -webkit-transform: translateY(8px);
+  -moz-transform: translateY(8px);
+  transform: translateY(8px); }
+
+/**
+ * source: hint-sizes.scss
+ *
+ * Defines width restricted tooltips that can span
+ * across multiple lines.
+ *
+ * Classes added:
+ * 	1) hint--small
+ * 	2) hint--medium
+ * 	3) hint--large
+ *
+ */
+.hint--small:after,
+.hint--medium:after,
+.hint--large:after {
+  white-space: normal;
+  line-height: 1.4em;
+  word-wrap: break-word; }
+
+.hint--small:after {
+  width: 80px; }
+
+.hint--medium:after {
+  width: 150px; }
+
+.hint--large:after {
+  width: 300px; }
+
+/**
+ * source: hint-theme.scss
+ *
+ * Defines basic theme for tooltips.
+ *
+ */
+[class*="hint--"] {
+  /**
+	 * tooltip body
+	 */ }
+  [class*="hint--"]:after {
+    text-shadow: 0 -1px 0px black;
+    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }
+
+/**
+ * source: hint-color-types.scss
+ *
+ * Contains tooltips of various types based on color differences.
+ *
+ * Classes added:
+ * 	1) hint--error
+ * 	2) hint--warning
+ * 	3) hint--info
+ * 	4) hint--success
+ *
+ */
+/**
+ * Error
+ */
+.hint--error:after {
+  background-color: #b34e4d;
+  text-shadow: 0 -1px 0px #592726; }
+
+.hint--error.hint--top-left:before {
+  border-top-color: #b34e4d; }
+
+.hint--error.hint--top-right:before {
+  border-top-color: #b34e4d; }
+
+.hint--error.hint--top:before {
+  border-top-color: #b34e4d; }
+
+.hint--error.hint--bottom-left:before {
+  border-bottom-color: #b34e4d; }
+
+.hint--error.hint--bottom-right:before {
+  border-bottom-color: #b34e4d; }
+
+.hint--error.hint--bottom:before {
+  border-bottom-color: #b34e4d; }
+
+.hint--error.hint--left:before {
+  border-left-color: #b34e4d; }
+
+.hint--error.hint--right:before {
+  border-right-color: #b34e4d; }
+
+/**
+ * Warning
+ */
+.hint--warning:after {
+  background-color: #c09854;
+  text-shadow: 0 -1px 0px #6c5328; }
+
+.hint--warning.hint--top-left:before {
+  border-top-color: #c09854; }
+
+.hint--warning.hint--top-right:before {
+  border-top-color: #c09854; }
+
+.hint--warning.hint--top:before {
+  border-top-color: #c09854; }
+
+.hint--warning.hint--bottom-left:before {
+  border-bottom-color: #c09854; }
+
+.hint--warning.hint--bottom-right:before {
+  border-bottom-color: #c09854; }
+
+.hint--warning.hint--bottom:before {
+  border-bottom-color: #c09854; }
+
+.hint--warning.hint--left:before {
+  border-left-color: #c09854; }
+
+.hint--warning.hint--right:before {
+  border-right-color: #c09854; }
+
+/**
+ * Info
+ */
+.hint--info:after {
+  background-color: #3986ac;
+  text-shadow: 0 -1px 0px #1a3c4d; }
+
+.hint--info.hint--top-left:before {
+  border-top-color: #3986ac; }
+
+.hint--info.hint--top-right:before {
+  border-top-color: #3986ac; }
+
+.hint--info.hint--top:before {
+  border-top-color: #3986ac; }
+
+.hint--info.hint--bottom-left:before {
+  border-bottom-color: #3986ac; }
+
+.hint--info.hint--bottom-right:before {
+  border-bottom-color: #3986ac; }
+
+.hint--info.hint--bottom:before {
+  border-bottom-color: #3986ac; }
+
+.hint--info.hint--left:before {
+  border-left-color: #3986ac; }
+
+.hint--info.hint--right:before {
+  border-right-color: #3986ac; }
+
+/**
+ * Success
+ */
+.hint--success:after {
+  background-color: #458746;
+  text-shadow: 0 -1px 0px #1a321a; }
+
+.hint--success.hint--top-left:before {
+  border-top-color: #458746; }
+
+.hint--success.hint--top-right:before {
+  border-top-color: #458746; }
+
+.hint--success.hint--top:before {
+  border-top-color: #458746; }
+
+.hint--success.hint--bottom-left:before {
+  border-bottom-color: #458746; }
+
+.hint--success.hint--bottom-right:before {
+  border-bottom-color: #458746; }
+
+.hint--success.hint--bottom:before {
+  border-bottom-color: #458746; }
+
+.hint--success.hint--left:before {
+  border-left-color: #458746; }
+
+.hint--success.hint--right:before {
+  border-right-color: #458746; }
+
+/**
+ * source: hint-always.scss
+ *
+ * Defines a persisted tooltip which shows always.
+ *
+ * Classes added:
+ * 	1) hint--always
+ *
+ */
+.hint--always:after, .hint--always:before {
+  opacity: 1;
+  visibility: visible; }
+
+.hint--always.hint--top:before {
+  -webkit-transform: translateY(-8px);
+  -moz-transform: translateY(-8px);
+  transform: translateY(-8px); }
+
+.hint--always.hint--top:after {
+  -webkit-transform: translateX(-50%) translateY(-8px);
+  -moz-transform: translateX(-50%) translateY(-8px);
+  transform: translateX(-50%) translateY(-8px); }
+
+.hint--always.hint--top-left:before {
+  -webkit-transform: translateY(-8px);
+  -moz-transform: translateY(-8px);
+  transform: translateY(-8px); }
+
+.hint--always.hint--top-left:after {
+  -webkit-transform: translateX(-100%) translateY(-8px);
+  -moz-transform: translateX(-100%) translateY(-8px);
+  transform: translateX(-100%) translateY(-8px); }
+
+.hint--always.hint--top-right:before {
+  -webkit-transform: translateY(-8px);
+  -moz-transform: translateY(-8px);
+  transform: translateY(-8px); }
+
+.hint--always.hint--top-right:after {
+  -webkit-transform: translateY(-8px);
+  -moz-transform: translateY(-8px);
+  transform: translateY(-8px); }
+
+.hint--always.hint--bottom:before {
+  -webkit-transform: translateY(8px);
+  -moz-transform: translateY(8px);
+  transform: translateY(8px); }
+
+.hint--always.hint--bottom:after {
+  -webkit-transform: translateX(-50%) translateY(8px);
+  -moz-transform: translateX(-50%) translateY(8px);
+  transform: translateX(-50%) translateY(8px); }
+
+.hint--always.hint--bottom-left:before {
+  -webkit-transform: translateY(8px);
+  -moz-transform: translateY(8px);
+  transform: translateY(8px); }
+
+.hint--always.hint--bottom-left:after {
+  -webkit-transform: translateX(-100%) translateY(8px);
+  -moz-transform: translateX(-100%) translateY(8px);
+  transform: translateX(-100%) translateY(8px); }
+
+.hint--always.hint--bottom-right:before {
+  -webkit-transform: translateY(8px);
+  -moz-transform: translateY(8px);
+  transform: translateY(8px); }
+
+.hint--always.hint--bottom-right:after {
+  -webkit-transform: translateY(8px);
+  -moz-transform: translateY(8px);
+  transform: translateY(8px); }
+
+.hint--always.hint--left:before {
+  -webkit-transform: translateX(-8px);
+  -moz-transform: translateX(-8px);
+  transform: translateX(-8px); }
+
+.hint--always.hint--left:after {
+  -webkit-transform: translateX(-8px);
+  -moz-transform: translateX(-8px);
+  transform: translateX(-8px); }
+
+.hint--always.hint--right:before {
+  -webkit-transform: translateX(8px);
+  -moz-transform: translateX(8px);
+  transform: translateX(8px); }
+
+.hint--always.hint--right:after {
+  -webkit-transform: translateX(8px);
+  -moz-transform: translateX(8px);
+  transform: translateX(8px); }
+
+/**
+ * source: hint-rounded.scss
+ *
+ * Defines rounded corner tooltips.
+ *
+ * Classes added:
+ * 	1) hint--rounded
+ *
+ */
+.hint--rounded:after {
+  border-radius: 4px; }
+
+/**
+ * source: hint-effects.scss
+ *
+ * Defines various transition effects for the tooltips.
+ *
+ * Classes added:
+ * 	1) hint--no-animate
+ * 	2) hint--bounce
+ *
+ */
+.hint--no-animate:before, .hint--no-animate:after {
+  -webkit-transition-duration: 0ms;
+  -moz-transition-duration: 0ms;
+  transition-duration: 0ms; }
+
+.hint--bounce:before, .hint--bounce:after {
+  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
+
+.hint--no-shadow:before, .hint--no-shadow:after {
+  text-shadow: initial;
+  box-shadow: initial; }
+
+.hint--no-arrow:before {
+  display: none; }
diff --git a/template/index.html b/template/index.html
index 9ef125b..57fc440 100644
--- a/template/index.html
+++ b/template/index.html
@@ -7,6 +7,7 @@
     <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
 	<link rel='stylesheet' type='text/css' href='../static/css/styles.css'>
 	<link rel='stylesheet' type='text/css' href='../static/css/index.css'>
+	<link rel='stylesheet' href='../static/css/hint.css'>
     <title>Hello from Electron renderer!</title>
 </head>
 
diff --git a/template/index.js b/template/index.js
index c405c13..fbe4f67 100644
--- a/template/index.js
+++ b/template/index.js
@@ -168,7 +168,7 @@ const fsfunc = async (v=false,isDrive=false) => {
 	const fsdataset = []	
 	for(var i=0;i<file.length;i++){
 		if(size[i]){
-			const fsbtn = `<div class='fs-data-label' id='datalabel` + i +`'><button class='fs-data'>` + file[i] + `</button>`
+			const fsbtn = `<div class='fs-data-label' id='datalabel` + i +`'><button class='fs-data hint--bottom hint--medium' data-hint="` +file[i]+ `">` + file[i] + `</button>`
 			const fssize = `<p class='fs-data-size'>`+ size[i] + `</p>`
 			const fsmtime = `<p class='fs-data-mtime'>`+ mtime[i] +`</p></div>`
 			const fsdata = fsbtn + fssize + fsmtime

From eef6f9684ebff5bbe43044f5be09994597eafa39 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Thu, 27 Apr 2023 15:13:22 +0800
Subject: [PATCH 31/54] Fix mntmain error when no data

Give 0 when no data in db to prevent mntset.length is undefined
---
 log.md                     |  2 ++
 main.js                    | 30 +++++++++++++++---------------
 static/js/MonitorSystem.js | 11 +++++++----
 template/index-mnt.js      |  5 ++++-
 4 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/log.md b/log.md
index 0c3647a..8978497 100644
--- a/log.md
+++ b/log.md
@@ -7,6 +7,8 @@
 	# Fixed
 	1. Auto detect essential folders existence
 		-- finished
+	2. Fix the error in mntmain when no data 
+		-- finished
 	# Bugged
 	1. Keep warn 'Database unable to open'
 ---
diff --git a/main.js b/main.js
index 6a2b5a3..760b4b7 100644
--- a/main.js
+++ b/main.js
@@ -36,22 +36,25 @@ const dbBuild = ()=>{
 		"id"	integer not null unique,
 		"name"	text not null unique,
 		primary key("id" autoincrement)
-	)`,()=>{return true})
-	
+	)`,()=>{})
+
 }
 // Check essential folders
 const firstBuild = ()=>{
 	
 	const dbStorage = env('StemdbStorage')
 	const mdbStorage = env('StemMGDir')
+ 
 	if (!fs.existsSync(dbStorage)){
-		fs.mkdirSync(dbStorage,{recursive:true})
-	}
-	
-	if (!fs.existsSync(mdbStorage)){
-		fs.mkdirSync(mdbStorage,{recursive:true})
+		fs.mkdir(dbStorage,{recursive:true},()=>{
+			if (!fs.existsSync(mdbStorage)){
+				fs.mkdir(mdbStorage,{recursive:true},()=>{
+					dbBuild()
+				})
+			}
+		})
+		
 	}
-	dbBuild()
 }
 
 
@@ -92,7 +95,7 @@ exec('NET SESSION', function(err,so,se) {
       console.log(se.length === 0 ? "admin" : "not admin")
     })	*/
 
-const init = async() =>{  
+const init = () =>{  
 	const Taskmanager = () =>{
 		const funcScript = glob.sync(env('StaticDir') + '/js/*.js')
 		funcScript.forEach((i) =>{require(i)})
@@ -110,14 +113,11 @@ const init = async() =>{
 	})
 	
 }
-const buildInit = async()=>{
-	const isReady = await firstBuild()
-}
-
-if(buildInit()){
-	console.log('a')
+const apple =()=>{
+	firstBuild()
 	init()
 }
+apple()
 // Release all resources of the app
 app.on('window-all-closed', () => {
 	if (process.platform !== 'darwin') {
diff --git a/static/js/MonitorSystem.js b/static/js/MonitorSystem.js
index 4a9a7ef..37375f5 100644
--- a/static/js/MonitorSystem.js
+++ b/static/js/MonitorSystem.js
@@ -10,16 +10,19 @@ ipcMain.handle('mnt-main', (event) =>{
 	const output = new Promise((resolve)=>{
 		const cmd = `select name from Monitor`
 		db.all(cmd,(err,res)=>{
-			const data = res.map(i=>Object.values(i)[0])
-			resolve(data)
+			if(err){
+				console.log('first')
+				resolve(0)
+			}else{
+				const data = res.map(i=>Object.values(i)[0])
+				resolve(data)
+			}		
 		})
 	})
 	return output
 })
 // Update monitored group members
 ipcMain.handle('mnt-update',(event,folder,name)=>{
-	console.log(folder)
-	console.log(name)
 	const output = new Promise((resolve)=>{
 	})
 })
\ No newline at end of file
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 4581119..d8a058a 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -267,7 +267,10 @@ const mntmenufunc = async()=>{
 const mntmain = async()=>{
 	const mntdata = []
 	const updateDiv = document.getElementById('mnt-main-display')
-	const mntset = await window.mnt.main()
+	let mntset = await window.mnt.main()
+	if(mntset == undefined){
+		mntset = 0
+	}
 	for(var i=0;i<mntset.length;i++){
 		const id = `id='mnt-data-` + i + `'`
 		mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`

From 5686b52fd60b1202f9fb6b88eacaae33d4fd0329 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Thu, 27 Apr 2023 15:32:59 +0800
Subject: [PATCH 32/54] Fix 'Unable to open database'

Move create db to dbBuild
---
 log.md                |  4 ++--
 main.js               | 17 ++++++++---------
 template/index-tag.js |  3 ++-
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/log.md b/log.md
index 8978497..4cf24d2 100644
--- a/log.md
+++ b/log.md
@@ -9,8 +9,8 @@
 		-- finished
 	2. Fix the error in mntmain when no data 
 		-- finished
-	# Bugged
-	1. Keep warn 'Database unable to open'
+	3. Fix the unable to open database bug	
+		-- finished
 ---
 	## 2023.04.26		version 0.5.6
 	-- Bug fix
diff --git a/main.js b/main.js
index 760b4b7..d18fa4e 100644
--- a/main.js
+++ b/main.js
@@ -5,12 +5,13 @@ const glob = require('glob')
 const env = require('./static/js/env.js')
 const Stemdb= env('StemdbDir')
 const sqlite3 = require('sqlite3').verbose()
-const db = new sqlite3.Database(Stemdb + '.db')
+
 process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
 app.allowRendererProcessReuse = false
 
 // Create a new db
 const dbBuild = ()=>{
+	const db = new sqlite3.Database(Stemdb + '.db')
 	db.get('PRAGMA foreign_keys = ON')
 	db.run(`create table "File" (
 		"id"	integer not null unique,
@@ -48,9 +49,7 @@ const firstBuild = ()=>{
 	if (!fs.existsSync(dbStorage)){
 		fs.mkdir(dbStorage,{recursive:true},()=>{
 			if (!fs.existsSync(mdbStorage)){
-				fs.mkdir(mdbStorage,{recursive:true},()=>{
-					dbBuild()
-				})
+				fs.mkdir(mdbStorage,{recursive:true},()=>{})
 			}
 		})
 		
@@ -96,6 +95,8 @@ exec('NET SESSION', function(err,so,se) {
     })	*/
 
 const init = () =>{  
+	firstBuild()
+	dbBuild()
 	const Taskmanager = () =>{
 		const funcScript = glob.sync(env('StaticDir') + '/js/*.js')
 		funcScript.forEach((i) =>{require(i)})
@@ -113,11 +114,9 @@ const init = () =>{
 	})
 	
 }
-const apple =()=>{
-	firstBuild()
-	init()
-}
-apple()
+
+init()
+
 // Release all resources of the app
 app.on('window-all-closed', () => {
 	if (process.platform !== 'darwin') {
diff --git a/template/index-tag.js b/template/index-tag.js
index 4c94d09..0e74114 100644
--- a/template/index-tag.js
+++ b/template/index-tag.js
@@ -5,8 +5,9 @@ let isMonitored = false
 	// Main: Tag add
 const tagmain = (name) =>{
 	document.getElementById('tag-write').addEventListener('click', async()=>{
+		console.log('aa')
 		const taginput 	= document.getElementById('tag-input').value
-		const tagpath = fsgetPath()
+		const tagpath 	= fsgetPath()
 		const name 		= document.getElementById('ux-selected').innerHTML
 		if (taginput == ''){
 			const inputError = await window.tag.error('taginput')

From ddf2cc361a97ccf80649c3b682b8d7ff76fdfd19 Mon Sep 17 00:00:00 2001
From: etc1290 <52283388+etc1290@users.noreply.github.com>
Date: Thu, 27 Apr 2023 17:14:12 +0800
Subject: [PATCH 33/54] Update index.js

Make code more readable and
---
 template/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/template/index.js b/template/index.js
index fbe4f67..93975a7 100644
--- a/template/index.js
+++ b/template/index.js
@@ -168,7 +168,7 @@ const fsfunc = async (v=false,isDrive=false) => {
 	const fsdataset = []	
 	for(var i=0;i<file.length;i++){
 		if(size[i]){
-			const fsbtn = `<div class='fs-data-label' id='datalabel` + i +`'><button class='fs-data hint--bottom hint--medium' data-hint="` +file[i]+ `">` + file[i] + `</button>`
+			const fsbtn = `<div class='fs-data-label' id='datalabel${i}'><button class='fs-data hint--bottom hint--medium' aria-label="${file[i]}">${file[i]}</button>`
 			const fssize = `<p class='fs-data-size'>`+ size[i] + `</p>`
 			const fsmtime = `<p class='fs-data-mtime'>`+ mtime[i] +`</p></div>`
 			const fsdata = fsbtn + fssize + fsmtime

From f9233b3bead8322412ccc1567788592d71289efb Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Fri, 28 Apr 2023 08:09:38 +0800
Subject: [PATCH 34/54] Fix mntfunc path jump function

Check if clicked target is mnt-data to decide the timing of path jump
---
 log.md                | 6 ++++++
 template/index-mnt.js | 5 ++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/log.md b/log.md
index 4cf24d2..1fbd0a0 100644
--- a/log.md
+++ b/log.md
@@ -1,6 +1,12 @@
 # Stembase
  File tagging system
 
+---
+	## 2023.04.28		version 0.5.6.2
+	-- Bug fix
+	# Fixed
+	1. Fix the incorrect check in mntfunc jump function
+		-- finished
 ---
 	## 2023.04.27		version 0.5.6.1
 	-- Bug fix
diff --git a/template/index-mnt.js b/template/index-mnt.js
index d8a058a..49529cf 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -166,7 +166,10 @@ const mntfunc = (target)=>{
 		// Jump to monitored path
 		const el = target[i]
 		el.addEventListener('dblclick',(event)=>{
-			if(mntcheck(event)){
+			const mntcontentCheck = (event) =>{
+				return event.target.classList.contains('mnt-data')
+			}
+			if(mntcontentCheck(event)){
 				floorNum = 'fs-floor-0'
 				fsfunc(event.target.innerHTML)
 			}		

From f7e4365c4734f452380dd99037c91165fe49c343 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Fri, 28 Apr 2023 08:19:24 +0800
Subject: [PATCH 35/54] Fix the incorrect behavior of expanding function

Add a header check before expanding in mntfold
---
 log.md                |  2 ++
 template/index-mnt.js | 15 +++++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/log.md b/log.md
index 1fbd0a0..898bf70 100644
--- a/log.md
+++ b/log.md
@@ -7,6 +7,8 @@
 	# Fixed
 	1. Fix the incorrect check in mntfunc jump function
 		-- finished
+	2. Fix the incorrect behavior of expanding function
+		-- finished
 ---
 	## 2023.04.27		version 0.5.6.1
 	-- Bug fix
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 49529cf..5b12c1c 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -7,12 +7,15 @@ const mntfold = (target)=>{
 			const header = event.currentTarget.querySelector('.mnt-folder-header')
 			const content = event.currentTarget.querySelector('.mnt-folder-content')
 			const isExpand = content.classList.contains('mnt-expanding')
-			if(isExpand){
-				content.style.height = ''
-				content.classList.remove('mnt-expanding')
-			}else{
-				content.style.height = content.childElementCount*21 + 31 + 'px'
-				content.classList.add('mnt-expanding')
+			const isHeader = event.target == header
+			if(isHeader){
+				if(isExpand){
+					content.style.height = ''
+					content.classList.remove('mnt-expanding')
+				}else{
+					content.style.height = content.childElementCount*21 + 31 + 'px'
+					content.classList.add('mnt-expanding')
+				}
 			}
 		})
 	}

From 949a85d7ad32dee8155f7eba7e1e62833e04881d Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Fri, 28 Apr 2023 09:07:09 +0800
Subject: [PATCH 36/54] Monitored groups update function

Create database based on the name of  monitored group
---
 static/js/MonitorSystem.js | 21 ++++++++++++++++++++-
 template/index-mnt.js      |  1 +
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/static/js/MonitorSystem.js b/static/js/MonitorSystem.js
index 37375f5..76ceea9 100644
--- a/static/js/MonitorSystem.js
+++ b/static/js/MonitorSystem.js
@@ -11,7 +11,6 @@ ipcMain.handle('mnt-main', (event) =>{
 		const cmd = `select name from Monitor`
 		db.all(cmd,(err,res)=>{
 			if(err){
-				console.log('first')
 				resolve(0)
 			}else{
 				const data = res.map(i=>Object.values(i)[0])
@@ -24,5 +23,25 @@ ipcMain.handle('mnt-main', (event) =>{
 // Update monitored group members
 ipcMain.handle('mnt-update',(event,folder,name)=>{
 	const output = new Promise((resolve)=>{
+		const mdbStorage = env('StemMGDir')
+		const mdb = new sqlite3.Database(mdbStorage + '//' + folder + '.db')
+		mdb.run(`create table 'Members'(
+			"id" 	integer not null unique,
+			"name" 	text not null,
+			primary key("id" autoincrement),
+			unique(name))`,()=>{
+				const cmd = `insert or ignore into name(name) values(?)`
+				mdb.all(cmd,[name],()=>{resolve(true)})
+		} )
+		
+		/*
+		if (!fs.existsSync(dbStorage)){
+			fs.mkdir(dbStorage,{recursive:true},()=>{
+				if (!fs.existsSync(mdbStorage)){
+					fs.mkdir(mdbStorage,{recursive:true},()=>{})
+				}
+			})	
+		}*/
 	})
+	return output
 })
\ No newline at end of file
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 5b12c1c..5cf04a8 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -225,6 +225,7 @@ const mntfunc = (target)=>{
 				const dropzoneid = event.currentTarget.id
 				const header = document.querySelector('#' + dropzoneid + ' .mnt-folder-header')				
 				const mntupdate = await window.mnt.update(header.innerHTML,dropdata.innerHTML)
+				console.log(mntupdate)
 			})
 			el.addEventListener('dragenter',mntcancel)
 			el.addEventListener('dragover',mntcancel)

From 5bdab47d43f985998bd66b0c87abecc8216de4d0 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Fri, 28 Apr 2023 10:41:44 +0800
Subject: [PATCH 37/54] Updating monitored group database when dragging

When drag monitored object into monitored group, auto detect if this group exist ,append it,or create one before append
---
 log.md                     |  6 +++++
 preload.js                 |  3 ++-
 static/js/MonitorSystem.js | 28 +++++++++++++++++++--
 template/index-mnt.js      | 51 +++++++++++++++++++++++++++-----------
 template/index.html        |  2 +-
 5 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/log.md b/log.md
index 898bf70..1d4495f 100644
--- a/log.md
+++ b/log.md
@@ -1,6 +1,12 @@
 # Stembase
  File tagging system
 
+---
+	## 2023.04.28		version 0.5.7
+	-- Function implementation
+	# Added
+	1. Updating monitored group database when dragging in 
+		-- finished
 ---
 	## 2023.04.28		version 0.5.6.2
 	-- Bug fix
diff --git a/preload.js b/preload.js
index e740c95..7cbfca6 100644
--- a/preload.js
+++ b/preload.js
@@ -41,7 +41,8 @@ contextBridge.exposeInMainWorld('tag', {
 // MonitorSystem
 contextBridge.exposeInMainWorld('mnt', {
 	main:		()			=> ipcRenderer.invoke('mnt-main'),
-	update:		(i,j)			=> ipcRenderer.invoke('mnt-update',i,j)
+	load:		(i)			=> ipcRenderer.invoke('mnt-load',i),
+	update:		(i,j)		=> ipcRenderer.invoke('mnt-update',i,j)
 })
 
 
diff --git a/static/js/MonitorSystem.js b/static/js/MonitorSystem.js
index 76ceea9..36a39ca 100644
--- a/static/js/MonitorSystem.js
+++ b/static/js/MonitorSystem.js
@@ -4,7 +4,12 @@ const env = require('./env.js')
 const sqlite3 = require('sqlite3').verbose()
 const Stemdb = env('StemdbDir')
 const db = new sqlite3.Database(Stemdb + '.db')
+const mdbStorage = env('StemMGDir')
 
+
+const mdbLoader = (folder) =>{
+	return new sqlite3.Database(mdbStorage + '//' + folder + '.db')
+}	
 // Load all data
 ipcMain.handle('mnt-main', (event) =>{
 	const output = new Promise((resolve)=>{
@@ -20,17 +25,36 @@ ipcMain.handle('mnt-main', (event) =>{
 	})
 	return output
 })
+// Load monitored group data
+ipcMain.handle('mnt-load',(event,folder)=>{
+	const output = new Promise((resolve)=>{
+		const mdb = mdbLoader(folder)
+		const cmd = `select name from Members`
+		mdb.all(cmd,(err,res)=>{
+			if(err){
+				resolve(false)
+			}else{
+				const data = res.map(i=>Object.values(i)[0])
+				resolve(data)
+			}
+		})
+	})
+	return output
+})
 // Update monitored group members
 ipcMain.handle('mnt-update',(event,folder,name)=>{
 	const output = new Promise((resolve)=>{
+		/*
 		const mdbStorage = env('StemMGDir')
 		const mdb = new sqlite3.Database(mdbStorage + '//' + folder + '.db')
+		*/
+		const mdb = mdbLoader(folder)
 		mdb.run(`create table 'Members'(
 			"id" 	integer not null unique,
 			"name" 	text not null,
 			primary key("id" autoincrement),
 			unique(name))`,()=>{
-				const cmd = `insert or ignore into name(name) values(?)`
+				const cmd = `insert or ignore into Members(name) values(?)`
 				mdb.all(cmd,[name],()=>{resolve(true)})
 		} )
 		
@@ -44,4 +68,4 @@ ipcMain.handle('mnt-update',(event,folder,name)=>{
 		}*/
 	})
 	return output
-})
\ No newline at end of file
+})
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 5cf04a8..4b53288 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -270,23 +270,44 @@ const mntmenufunc = async()=>{
 	}
 }
 
-// Main:	Load all monitored data
-const mntmain = async()=>{
-	const mntdata = []
-	const updateDiv = document.getElementById('mnt-main-display')
-	let mntset = await window.mnt.main()
-	if(mntset == undefined){
-		mntset = 0
-	}
-	for(var i=0;i<mntset.length;i++){
-		const id = `id='mnt-data-` + i + `'`
-		mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
+//Side:		Monitored group loader
+const mntgroupwrite = async(target) =>{
+	const isLoaded = target.querySelector('.mnt-data')
+	if(!isLoaded){
+		const updateDiv = target.querySelector('.mnt-folder-content')
+		const header = target.querySelector('.mnt-folder-header')
+		const mntset = await window.mnt.load(header.innerHTML)
+		console.log(mntset)
 	}
-	updateDiv.innerHTML = mntdata.join('')
-	const mntexpand = document.querySelectorAll('.mnt-folder.visible')
-	for(var i=0;i<mntexpand.length;i++){
-		mntexpand[i].style.height = mntexpand[i].childElementCount*21 + 31 + 'px'
+}
+// Main:	Load all monitored data
+const mntmain = ()=>{
+	// All
+	const mntmainAll = async()=>{
+		const mntdata = []
+		const updateDiv = document.getElementById('mnt-main-display')
+		let mntset = await window.mnt.main()
+		if(mntset == undefined){
+			mntset = 0
+		}
+		for(var i=0;i<mntset.length;i++){
+			const id = `id='mnt-data-` + i + `'`
+			mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
+		}
+		updateDiv.innerHTML = mntdata.join('')
+		const mntexpand = document.querySelectorAll('.mnt-folder.visible')
+		for(var i=0;i<mntexpand.length;i++){
+			mntexpand[i].style.height = mntexpand[i].childElementCount*21 + 31 + 'px'
+		}
+	}	
+	// Shortcut
+	const mntmainShortcut = () =>{
+		const mntdata = []
+		const mntshortcut = document.getElementById('mnt-shortcut')
+		mntgroupwrite(mntshortcut)
 	}
+	mntmainAll()
+	mntmainShortcut()
 	return true
 }
 //Initailizer
diff --git a/template/index.html b/template/index.html
index 57fc440..6a1bc04 100644
--- a/template/index.html
+++ b/template/index.html
@@ -39,7 +39,7 @@
 					<div id='mnt-shortcut-display' class='mnt-folder-content'></div>
 				</div>
 				<div id='mnt-main' class='mnt-folder'>
-					<p class='mnt-folder-header'>All Files</p>
+					<p class='mnt-folder-header'>All</p>
 					<div id='mnt-main-display' class='mnt-folder-content'></div>
 				</div>
 			</div>

From 85b49c50a0bd5379bdf7aefa3d44db4e3af561b6 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Fri, 28 Apr 2023 10:52:04 +0800
Subject: [PATCH 38/54] Auto load monitored data when app start

Load monitored groups data when system is ready. Nevertheless, I decide to apply this feature in All and Shortcut only (perhaps i can add Favorite Group one day) out of performance consideration. Other monitored groups will be loaded once they are expanded , not removed with collapsing of course.
---
 log.md                |  2 ++
 template/index-mnt.js | 10 ++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/log.md b/log.md
index 1d4495f..9eb94ef 100644
--- a/log.md
+++ b/log.md
@@ -7,6 +7,8 @@
 	# Added
 	1. Updating monitored group database when dragging in 
 		-- finished
+	2. Auto load monitored data when app ready
+		-- finished
 ---
 	## 2023.04.28		version 0.5.6.2
 	-- Bug fix
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 4b53288..f26fb59 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -277,7 +277,12 @@ const mntgroupwrite = async(target) =>{
 		const updateDiv = target.querySelector('.mnt-folder-content')
 		const header = target.querySelector('.mnt-folder-header')
 		const mntset = await window.mnt.load(header.innerHTML)
-		console.log(mntset)
+		let mntdata = []
+		for(var i=0;i<mntset.length;i++){
+			const id = `id='mnt-data-` + i + `'`
+			mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
+		}
+		updateDiv.innerHTML = mntdata.join('')
 	}
 }
 // Main:	Load all monitored data
@@ -295,10 +300,11 @@ const mntmain = ()=>{
 			mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
 		}
 		updateDiv.innerHTML = mntdata.join('')
+		/*
 		const mntexpand = document.querySelectorAll('.mnt-folder.visible')
 		for(var i=0;i<mntexpand.length;i++){
 			mntexpand[i].style.height = mntexpand[i].childElementCount*21 + 31 + 'px'
-		}
+		}*/
 	}	
 	// Shortcut
 	const mntmainShortcut = () =>{

From 14f674b8a27180351a968da8fd747d3364e46270 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Fri, 28 Apr 2023 11:53:23 +0800
Subject: [PATCH 39/54] Rewiring monitored group highlight function

Merge monitored group highlight function into mntstyle
---
 log.md                                   |   4 +++
 template/index-mnt.js                    |  31 +++++++++++++----------
 "\344\270\255\346\226\207/1/Stemmeta.db" | Bin 20480 -> 20480 bytes
 "\344\270\255\346\226\207/Stemmeta.db"   | Bin 20480 -> 20480 bytes
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/log.md b/log.md
index 9eb94ef..2f61b23 100644
--- a/log.md
+++ b/log.md
@@ -4,11 +4,15 @@
 ---
 	## 2023.04.28		version 0.5.7
 	-- Function implementation
+	-- Function rewiring
 	# Added
 	1. Updating monitored group database when dragging in 
 		-- finished
 	2. Auto load monitored data when app ready
 		-- finished
+	# Changed
+	1. Merging highlight monitored group function into mntstyle
+		-- finished
 ---
 	## 2023.04.28		version 0.5.6.2
 	-- Bug fix
diff --git a/template/index-mnt.js b/template/index-mnt.js
index f26fb59..8d286f1 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -29,16 +29,21 @@ const mntstyle = (target)=>{
 	for(let i=0;i<target.length;i++){
 		const el = target[i]
 		el.addEventListener('mouseenter',(event)=>{
-			const content = event.currentTarget.querySelector('.mnt-folder-header')
+			const header = event.currentTarget.querySelector('.mnt-folder-header')
+			const content = event.currentTarget.querySelector('.mnt-folder-content')
 			const isDropzone = mntcheck(event)
 			if(isDropzone){
-				content.style.background = 'rgb(124,255,192)'
+				header.style.background = 'rgb(124,255,192)'
+				content.style.background = 'rgb(235,255,251)'
 			}else{
-				content.style.background = 'rgb(255,174,189)'
+				header.style.background = 'rgb(255,174,189)'
+				content.style.background = 'rgb(255,245,247)'
 			}
 		})
 		el.addEventListener('mouseleave',(event)=>{
-			const content = event.currentTarget.querySelector('.mnt-folder-header')
+			const header = event.currentTarget.querySelector('.mnt-folder-header')
+			const content = event.currentTarget.querySelector('.mnt-folder-content')
+			header.style.background = ''
 			content.style.background = ''
 		})
 	}
@@ -165,13 +170,14 @@ const mntfunc = (target)=>{
 	const mntcheck = (event)=>{
 		return event.currentTarget.classList.contains('mnt-dropzone')		
 	}
+	const mntcontentCheck = (event) =>{
+		return event.target.classList.contains('mnt-data')
+	}
 	for(let i=0;i<target.length;i++){
 		// Jump to monitored path
 		const el = target[i]
 		el.addEventListener('dblclick',(event)=>{
-			const mntcontentCheck = (event) =>{
-				return event.target.classList.contains('mnt-data')
-			}
+			
 			if(mntcontentCheck(event)){
 				floorNum = 'fs-floor-0'
 				fsfunc(event.target.innerHTML)
@@ -192,15 +198,12 @@ const mntfunc = (target)=>{
 					mntselected[i].classList.remove('mnt-selected')
 					mntselected[i].style.background = ''
 				}
-				event.target.style.background = 'rgb(124,255,192)'
-				event.target.classList.add('mnt-selected')
+				if(mntcontentCheck(event)){
+					event.target.style.background = 'rgb(124,255,192)'
+					event.target.classList.add('mnt-selected')
+				}			
 			}		
 		})
-		el.addEventListener('mouseup',(event)=>{
-			if(mntcheck(event)){
-				event.target.style.background = 'rgb(154,255,222)'
-			}			
-		})
 		// Folder Function
 		// Drop Folder
 		let counter = isExpand = false
diff --git "a/\344\270\255\346\226\207/1/Stemmeta.db" "b/\344\270\255\346\226\207/1/Stemmeta.db"
index 4ef663438a364b0b509e4159c7b982d6dcfed0fc..2f1a07b126813589f1abfee659163eb280a15722 100644
GIT binary patch
delta 21
ccmZozz}T>Wae_1>`$QRMM)r*f^Zgmw07!ua^Z)<=

delta 21
ccmZozz}T>Wae_1>+e8^>Mz)O!^ZglF0Z45H@c;k-

diff --git "a/\344\270\255\346\226\207/Stemmeta.db" "b/\344\270\255\346\226\207/Stemmeta.db"
index c46125870a2644a4924bb860eba35c563587d364..ac8236a54da07ca2f0a808a7dfd784115fd6472e 100644
GIT binary patch
delta 21
ccmZozz}T>Wae_1>+e8^>Mz)O!^ZglF0Z45H@c;k-

delta 21
ccmZozz}T>Wae_1>>qHr6M%Il9^ZglF07zK{?f?J)


From c72fb12e5c49c91bfabd59a2ec24f0a1adf48a32 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Fri, 28 Apr 2023 13:39:38 +0800
Subject: [PATCH 40/54] Add basic structure to contextmenu

Add some test function to contextmenu to demonstrate the trigger
---
 log.md                |  5 +++
 static/css/index.css  |  1 +
 template/index-mnt.js | 72 ++++++++++++++++++++++++-------------------
 template/index-tag.js |  1 +
 4 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/log.md b/log.md
index 2f61b23..14dd84f 100644
--- a/log.md
+++ b/log.md
@@ -5,14 +5,19 @@
 	## 2023.04.28		version 0.5.7
 	-- Function implementation
 	-- Function rewiring
+	-- Style change
 	# Added
 	1. Updating monitored group database when dragging in 
 		-- finished
 	2. Auto load monitored data when app ready
 		-- finished
+	3. Basic structure of contextmenu function
+		-- finished
 	# Changed
 	1. Merging highlight monitored group function into mntstyle
 		-- finished
+	2. Build mntbuild to control the processing of mnt building
+		-- finished
 ---
 	## 2023.04.28		version 0.5.6.2
 	-- Bug fix
diff --git a/static/css/index.css b/static/css/index.css
index f6481de..fb2902f 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -45,6 +45,7 @@
 	width:			150px;
 	display:		none;
 	z-index:		9999;
+	cursor:			pointer;
 	position:		absolute;
 }
 .mnt-cm-dropmenu.visible{
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 8d286f1..b00e65b 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -266,11 +266,17 @@ const mntfunc = (target)=>{
 // Side:	Contextmenu function
 const mntmenufunc = async()=>{
 	// Create new monitored group
-	const mntcmnew = ()=>{
-		document.getElementById('mnt-cm-new').addEventListener('click',()=>{
-			console.log('create folders')
-		})
-	}
+	document.getElementById('mnt-cm-new').addEventListener('click',()=>{
+		console.log('create folders')
+	})
+	// Add this member to Shortcut
+	document.getElementById('mnt-movemenu-shortcut').addEventListener('click',()=>{
+		console.log('add this to shorcut')
+	})
+	// Remove member from this monitored group
+	document.getElementById('mnt-removemenu-remove').addEventListener('click',()=>{
+		console.log('remove from this group')
+	})
 }
 
 //Side:		Monitored group loader
@@ -289,36 +295,40 @@ const mntgroupwrite = async(target) =>{
 	}
 }
 // Main:	Load all monitored data
-const mntmain = ()=>{
-	// All
-	const mntmainAll = async()=>{
-		const mntdata = []
-		const updateDiv = document.getElementById('mnt-main-display')
-		let mntset = await window.mnt.main()
-		if(mntset == undefined){
-			mntset = 0
-		}
-		for(var i=0;i<mntset.length;i++){
-			const id = `id='mnt-data-` + i + `'`
-			mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
-		}
-		updateDiv.innerHTML = mntdata.join('')
+const mntmain = async()=>{
+	const mntdata = []
+	const updateDiv = document.getElementById('mnt-main-display')
+	let mntset = await window.mnt.main()
+	if(mntset == undefined){
+		mntset = 0
+	}
+	for(var i=0;i<mntset.length;i++){
+		const id = `id='mnt-data-` + i + `'`
+		mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
+	}
+	updateDiv.innerHTML = mntdata.join('')
 		/*
 		const mntexpand = document.querySelectorAll('.mnt-folder.visible')
 		for(var i=0;i<mntexpand.length;i++){
 			mntexpand[i].style.height = mntexpand[i].childElementCount*21 + 31 + 'px'
-		}*/
-	}	
-	// Shortcut
-	const mntmainShortcut = () =>{
-		const mntdata = []
-		const mntshortcut = document.getElementById('mnt-shortcut')
-		mntgroupwrite(mntshortcut)
-	}
-	mntmainAll()
-	mntmainShortcut()
+		}*/	
 	return true
 }
+//Side:		Load Shortcut data
+const mntshortcut = () =>{
+	const mntdata = []
+	const mntshortcut = document.getElementById('mnt-shortcut')
+	mntgroupwrite(mntshortcut)
+	return true
+}
+//Side:		Initial page structure
+const mntbuild = ()=>{
+	const mainStatus = mntmain()
+	const shortcutStatus = mntshortcut()
+	if(mainStatus && shortcutStatus){
+		return true
+	}
+}
 //Initailizer
 const mntApplier = (target)=>{
 	mntfunc(target)
@@ -326,8 +336,8 @@ const mntApplier = (target)=>{
 	mntstyle(target)
 	mntmenu(target)
 }
-const mntInit = async()=>{
-	const isReady = await mntmain()
+const mntInit = ()=>{
+	const isReady = mntbuild()
 	if(isReady){
 		const mntfolder = document.querySelectorAll('.mnt-folder')
 		mntApplier(mntfolder)
diff --git a/template/index-tag.js b/template/index-tag.js
index 0e74114..09c3e5a 100644
--- a/template/index-tag.js
+++ b/template/index-tag.js
@@ -12,6 +12,7 @@ const tagmain = (name) =>{
 		if (taginput == ''){
 			const inputError = await window.tag.error('taginput')
 		}else{		
+		// Link to Monitor System 
 			const isMonitored = await window.tag.main(name,taginput,tagpath)
 			if(!isMonitored){
 				mntmain()

From f4b541574b747d0b522b9fa54101cd4245fe75f8 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Fri, 28 Apr 2023 15:23:19 +0800
Subject: [PATCH 41/54] mnt selected and check function rebuild

Split mntselected and mntcheck from  other functions because of massive demands.
Now mntselected would handle all selected related work  like add selected tag, selected style ,remove selected tag, if target is selectiale expli gratia.
mntcheck now handle all class type related work like if this target is belongs to xx class, this function is massively link to but not have to work with mntselected
---
 log.md                |  8 ++++++
 static/css/index.css  |  3 +++
 template/index-mnt.js | 61 ++++++++++++++++++++++++++++---------------
 template/index.html   |  2 +-
 4 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/log.md b/log.md
index 14dd84f..bb0acfe 100644
--- a/log.md
+++ b/log.md
@@ -13,11 +13,19 @@
 		-- finished
 	3. Basic structure of contextmenu function
 		-- finished
+	4. Add contextmenu selected function
+		-- finished
 	# Changed
 	1. Merging highlight monitored group function into mntstyle
 		-- finished
 	2. Build mntbuild to control the processing of mnt building
 		-- finished
+	3. Add submenu hover effect
+		-- finished
+	4. Rebuild mntcheck to handle all class type check 
+		-- finished
+	5. Rebuild mntselected to handle all selected related worked
+		-- finished
 ---
 	## 2023.04.28		version 0.5.6.2
 	-- Bug fix
diff --git a/static/css/index.css b/static/css/index.css
index fb2902f..8b272d0 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -56,6 +56,9 @@
 	min-height:		31px;
 	width:			150px;
 }
+.mnt-dropmenu-option:hover{
+	background:		rgb(146,182,200);
+}
 .mnt-folder{
 	border-bottom:	5px solid rgb(255,238,214);
 	
diff --git a/template/index-mnt.js b/template/index-mnt.js
index b00e65b..a478be7 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -1,4 +1,23 @@
-
+// Side:	Target class checker
+const mntcheck = (event,classname,isCurrent=false)=>{
+	if(isCurrent){
+		return event.currentTarget.classList.contains(classname)
+	}else{
+		return event.target.classList.contains(classname)
+	}
+}
+// Side:	Selected monitored members
+const mntselected = (event)=>{
+	const selected = document.querySelectorAll('.mnt-selected')
+	for(let i=0;i<selected.length;i++){
+		selected[i].classList.remove('mnt-selected')
+		selected[i].style.background = ''
+	}
+	if(mntcheck(event,'mnt-data')){
+		event.target.style.background = 'rgb(124,255,192)'
+		event.target.classList.add('mnt-selected')
+	}
+}
 // Side:	Monitored group collapse and expand
 const mntfold = (target)=>{
 	for(let i=0;i<target.length;i++){
@@ -23,15 +42,16 @@ const mntfold = (target)=>{
 }
 // Side:	The Style of Monitored system
 const mntstyle = (target)=>{
+	/*
 	const mntcheck = (event)=>{
 		return event.currentTarget.classList.contains('mnt-dropzone')
-	}
+	}*/
 	for(let i=0;i<target.length;i++){
 		const el = target[i]
 		el.addEventListener('mouseenter',(event)=>{
 			const header = event.currentTarget.querySelector('.mnt-folder-header')
 			const content = event.currentTarget.querySelector('.mnt-folder-content')
-			const isDropzone = mntcheck(event)
+			const isDropzone = mntcheck(event,'mnt-dropzone',true)
 			if(isDropzone){
 				header.style.background = 'rgb(124,255,192)'
 				content.style.background = 'rgb(235,255,251)'
@@ -120,7 +140,12 @@ const mntmenu = (target)=>{
 	for(let i=0;i<target.length;i++){
 		const el=target[i]
 		el.addEventListener('contextmenu',(event)=>{
+			// Select contextmenu target
+			mntselected(event)
+			
+			// Main function
 			event.preventDefault()
+			
 			const prevMenu = document.querySelector('.mnt-cm-dropmenu.visible')
 			if(prevMenu){
 				prevMenu.classList.remove('visible')
@@ -164,21 +189,24 @@ const mntmenu = (target)=>{
 	})*/
 	
 }	
+
+
 // Side:	Function of monitored data
 const mntfunc = (target)=>{
 	// Data function
+	/*
 	const mntcheck = (event)=>{
 		return event.currentTarget.classList.contains('mnt-dropzone')		
-	}
+	}*/
+	/*
 	const mntcontentCheck = (event) =>{
 		return event.target.classList.contains('mnt-data')
-	}
+	}*/
 	for(let i=0;i<target.length;i++){
 		// Jump to monitored path
 		const el = target[i]
 		el.addEventListener('dblclick',(event)=>{
-			
-			if(mntcontentCheck(event)){
+			if(mntcheck(event,'mnt-data')){
 				floorNum = 'fs-floor-0'
 				fsfunc(event.target.innerHTML)
 			}		
@@ -192,17 +220,7 @@ const mntfunc = (target)=>{
 		})
 		// Style
 		el.addEventListener('mousedown',(event)=>{
-			if(mntcheck(event)){
-				const mntselected = document.querySelectorAll('.mnt-selected')
-				for(let i=0;i<mntselected.length;i++){
-					mntselected[i].classList.remove('mnt-selected')
-					mntselected[i].style.background = ''
-				}
-				if(mntcontentCheck(event)){
-					event.target.style.background = 'rgb(124,255,192)'
-					event.target.classList.add('mnt-selected')
-				}			
-			}		
+			mntselected(event)		
 		})
 		// Folder Function
 		// Drop Folder
@@ -275,7 +293,8 @@ const mntmenufunc = async()=>{
 	})
 	// Remove member from this monitored group
 	document.getElementById('mnt-removemenu-remove').addEventListener('click',()=>{
-		console.log('remove from this group')
+		//const data = 
+		//const isRemove = await window.mnt.remove()
 	})
 }
 
@@ -288,7 +307,7 @@ const mntgroupwrite = async(target) =>{
 		const mntset = await window.mnt.load(header.innerHTML)
 		let mntdata = []
 		for(var i=0;i<mntset.length;i++){
-			const id = `id='mnt-data-` + i + `'`
+			const id = `id='mnt-` + header.innerHTML + `-data-` + i + `'`
 			mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
 		}
 		updateDiv.innerHTML = mntdata.join('')
@@ -303,7 +322,7 @@ const mntmain = async()=>{
 		mntset = 0
 	}
 	for(var i=0;i<mntset.length;i++){
-		const id = `id='mnt-data-` + i + `'`
+		const id = `id='mnt-main-data-` + i + `'`
 		mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
 	}
 	updateDiv.innerHTML = mntdata.join('')
diff --git a/template/index.html b/template/index.html
index 6a1bc04..13c684a 100644
--- a/template/index.html
+++ b/template/index.html
@@ -26,7 +26,7 @@
 				</div>
 				<div id='mnt-cm-sub'>
 					<div id='mnt-cm-movemenu' class='mnt-cm-dropmenu'>
-						<p id='mnt-movemenu-shortcut' class='mnt-dropmenu-option'>Move to Shortcut</p>
+						<p id='mnt-movemenu-shortcut' class='mnt-dropmenu-option'>Add to Shortcut</p>
 					</div>
 					<div id='mnt-cm-removemenu' class='mnt-cm-dropmenu'>
 						<p id='mnt-removemenu-delete' class='mnt-dropmenu-option'>Delete this record</p>

From c9ea9519507cff2341dd993c6360300d0501d1a9 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Tue, 2 May 2023 08:44:06 +0800
Subject: [PATCH 42/54] Fix monitored remove function not refresh window

Detecting if content is loaded function prevent from remove refreshing now solved
---
 log.md                     |  7 ++++
 preload.js                 |  1 +
 static/js/MonitorSystem.js | 46 +++++++++++++++---------
 template/index-mnt.js      | 74 ++++++++++++++++++++++----------------
 4 files changed, 81 insertions(+), 47 deletions(-)

diff --git a/log.md b/log.md
index bb0acfe..e4c7a2f 100644
--- a/log.md
+++ b/log.md
@@ -1,11 +1,18 @@
 # Stembase
  File tagging system
 
+---
+	## 2023.05.02		version 0.5.7.1
+	-- Bug Fix
+	# Fixed
+	1. Fix that remove function not refresh
+		-- finished
 ---
 	## 2023.04.28		version 0.5.7
 	-- Function implementation
 	-- Function rewiring
 	-- Style change
+	-- Clear wasted codes
 	# Added
 	1. Updating monitored group database when dragging in 
 		-- finished
diff --git a/preload.js b/preload.js
index 7cbfca6..0d2b18d 100644
--- a/preload.js
+++ b/preload.js
@@ -42,6 +42,7 @@ contextBridge.exposeInMainWorld('tag', {
 contextBridge.exposeInMainWorld('mnt', {
 	main:		()			=> ipcRenderer.invoke('mnt-main'),
 	load:		(i)			=> ipcRenderer.invoke('mnt-load',i),
+	remove:		(i,j)			=> ipcRenderer.invoke('mnt-remove',i,j),
 	update:		(i,j)		=> ipcRenderer.invoke('mnt-update',i,j)
 })
 
diff --git a/static/js/MonitorSystem.js b/static/js/MonitorSystem.js
index 36a39ca..018a9bc 100644
--- a/static/js/MonitorSystem.js
+++ b/static/js/MonitorSystem.js
@@ -41,31 +41,45 @@ ipcMain.handle('mnt-load',(event,folder)=>{
 	})
 	return output
 })
+// Remove monitored members
+ipcMain.handle('mnt-remove',(event,folder,dataset)=>{
+	console.log(folder)
+	
+	const output = new Promise((resolve)=>{
+		const cmd = `delete from Members where name = ?`
+		const mdb = mdbLoader(folder)
+		for(let i=0;i<dataset.length;i++){
+			mdb.run(cmd,dataset[i],(err)=>{
+				if(err){
+					resolve(false)
+				}else{
+					resolve(true)
+				}
+			})
+			
+		}
+	})
+	return output
+})
 // Update monitored group members
 ipcMain.handle('mnt-update',(event,folder,name)=>{
 	const output = new Promise((resolve)=>{
-		/*
-		const mdbStorage = env('StemMGDir')
-		const mdb = new sqlite3.Database(mdbStorage + '//' + folder + '.db')
-		*/
 		const mdb = mdbLoader(folder)
 		mdb.run(`create table 'Members'(
 			"id" 	integer not null unique,
 			"name" 	text not null,
 			primary key("id" autoincrement),
 			unique(name))`,()=>{
-				const cmd = `insert or ignore into Members(name) values(?)`
-				mdb.all(cmd,[name],()=>{resolve(true)})
-		} )
-		
-		/*
-		if (!fs.existsSync(dbStorage)){
-			fs.mkdir(dbStorage,{recursive:true},()=>{
-				if (!fs.existsSync(mdbStorage)){
-					fs.mkdir(mdbStorage,{recursive:true},()=>{})
-				}
-			})	
-		}*/
+				const cmd = `insert into Members(name) values(?)`
+				mdb.all(cmd,[name],(err,res)=>{
+					if(err){
+						resolve(true)
+					}else{
+						resolve(false)
+					}
+				})
+			}
+		)
 	})
 	return output
 })
diff --git a/template/index-mnt.js b/template/index-mnt.js
index a478be7..4a8aeb8 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -42,10 +42,6 @@ const mntfold = (target)=>{
 }
 // Side:	The Style of Monitored system
 const mntstyle = (target)=>{
-	/*
-	const mntcheck = (event)=>{
-		return event.currentTarget.classList.contains('mnt-dropzone')
-	}*/
 	for(let i=0;i<target.length;i++){
 		const el = target[i]
 		el.addEventListener('mouseenter',(event)=>{
@@ -189,8 +185,24 @@ const mntmenu = (target)=>{
 	})*/
 	
 }	
-
-
+//Side:		Monitored group loader
+const mntgroupwrite = async(target,isLoaded=true) =>{
+	if(isLoaded){
+		isLoaded = target.querySelector('.mnt-data')
+	}
+	if(!isLoaded){
+		const updateDiv = target.querySelector('.mnt-folder-content')
+		const header = target.querySelector('.mnt-folder-header')
+		const mntset = await window.mnt.load(header.innerHTML)
+		console.log(mntset)
+		let mntdata = []
+		for(var i=0;i<mntset.length;i++){
+			const id = `id='mnt-` + header.innerHTML + `-data-` + i + `'`
+			mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
+		}
+		updateDiv.innerHTML = mntdata.join('')
+	}
+}
 // Side:	Function of monitored data
 const mntfunc = (target)=>{
 	// Data function
@@ -236,17 +248,21 @@ const mntfunc = (target)=>{
 				const dropid = event.dataTransfer.getData('text/plain')
 				const dropdata = document.getElementById(dropid)
 				const isClone = dropdata.parentNode.parentNode.classList.contains('mnt-dropzone')
-				if(!isClone){
-					const dropclone = dropdata.cloneNode(true)
-					dropdata.parentNode.insertBefore(dropclone,dropdata.nextSibling)
-				}
 				const content = event.currentTarget.querySelector('.mnt-folder-content')
-				content.appendChild(dropdata)
+				
 				// Monitored group update
 				const dropzoneid = event.currentTarget.id
 				const header = document.querySelector('#' + dropzoneid + ' .mnt-folder-header')				
-				const mntupdate = await window.mnt.update(header.innerHTML,dropdata.innerHTML)
-				console.log(mntupdate)
+				const isExist = await window.mnt.update(header.innerHTML,dropdata.innerHTML)
+				if(!isExist){
+					// Clone issue not solved
+					content.appendChild(dropdata)
+					
+					if(!isClone){
+						const dropclone = dropdata.cloneNode(true)
+						dropdata.parentNode.insertBefore(dropclone,dropdata.nextSibling)
+					}
+				}
 			})
 			el.addEventListener('dragenter',mntcancel)
 			el.addEventListener('dragover',mntcancel)
@@ -292,27 +308,22 @@ const mntmenufunc = async()=>{
 		console.log('add this to shorcut')
 	})
 	// Remove member from this monitored group
-	document.getElementById('mnt-removemenu-remove').addEventListener('click',()=>{
-		//const data = 
-		//const isRemove = await window.mnt.remove()
+	document.getElementById('mnt-removemenu-remove').addEventListener('click',async()=>{
+		const dataset = document.querySelectorAll('.mnt-selected')
+		const data = []
+		for(var i=0;i<dataset.length;i++){
+			data[i] = dataset[i].innerHTML
+		}
+		const group = dataset[0].parentNode.parentNode
+		const folder = group.querySelector('.mnt-folder-header')
+		const isRemove = await window.mnt.remove(folder.innerHTML,data)	
+		if(isRemove){
+			mntgroupwrite(group,false)
+		}
 	})
 }
 
-//Side:		Monitored group loader
-const mntgroupwrite = async(target) =>{
-	const isLoaded = target.querySelector('.mnt-data')
-	if(!isLoaded){
-		const updateDiv = target.querySelector('.mnt-folder-content')
-		const header = target.querySelector('.mnt-folder-header')
-		const mntset = await window.mnt.load(header.innerHTML)
-		let mntdata = []
-		for(var i=0;i<mntset.length;i++){
-			const id = `id='mnt-` + header.innerHTML + `-data-` + i + `'`
-			mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
-		}
-		updateDiv.innerHTML = mntdata.join('')
-	}
-}
+
 // Main:	Load all monitored data
 const mntmain = async()=>{
 	const mntdata = []
@@ -333,6 +344,7 @@ const mntmain = async()=>{
 		}*/	
 	return true
 }
+
 //Side:		Load Shortcut data
 const mntshortcut = () =>{
 	const mntdata = []

From 006680c5822902f3f0641aca9e609748c2449e8d Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Tue, 2 May 2023 09:40:51 +0800
Subject: [PATCH 43/54] Fix duplicated bug in monitored group

After reloading, monitored data's id are reassigned. It leads to a certain pass of duplicate check. To avoid it, I add exist check in database before duplicate node
---
 log.md                |  2 ++
 template/index-mnt.js | 11 +++++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/log.md b/log.md
index e4c7a2f..f85d0fd 100644
--- a/log.md
+++ b/log.md
@@ -7,6 +7,8 @@
 	# Fixed
 	1. Fix that remove function not refresh
 		-- finished
+	2. Fix data can be duplicated in monitored group
+		-- finished
 ---
 	## 2023.04.28		version 0.5.7
 	-- Function implementation
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 4a8aeb8..5da9929 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -248,20 +248,19 @@ const mntfunc = (target)=>{
 				const dropid = event.dataTransfer.getData('text/plain')
 				const dropdata = document.getElementById(dropid)
 				const isClone = dropdata.parentNode.parentNode.classList.contains('mnt-dropzone')
+				
 				const content = event.currentTarget.querySelector('.mnt-folder-content')
 				
 				// Monitored group update
 				const dropzoneid = event.currentTarget.id
 				const header = document.querySelector('#' + dropzoneid + ' .mnt-folder-header')				
 				const isExist = await window.mnt.update(header.innerHTML,dropdata.innerHTML)
+				if(!isClone && !isExist){
+					const dropclone = dropdata.cloneNode(true)
+					dropdata.parentNode.insertBefore(dropclone,dropdata.nextSibling)
+				}
 				if(!isExist){
-					// Clone issue not solved
 					content.appendChild(dropdata)
-					
-					if(!isClone){
-						const dropclone = dropdata.cloneNode(true)
-						dropdata.parentNode.insertBefore(dropclone,dropdata.nextSibling)
-					}
 				}
 			})
 			el.addEventListener('dragenter',mntcancel)

From 4b5654b3b8f867468f09a2fc69198bfcd492ac5d Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Tue, 2 May 2023 10:34:50 +0800
Subject: [PATCH 44/54] Fix collapse height auto adjustment behavior

Add mntspan function to adjust collapse behavior. However, it's better to give detect function to mntspan rather than check in person
---
 log.md                |  3 +++
 template/index-mnt.js | 20 ++++++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/log.md b/log.md
index f85d0fd..aef3b2d 100644
--- a/log.md
+++ b/log.md
@@ -9,6 +9,9 @@
 		-- finished
 	2. Fix data can be duplicated in monitored group
 		-- finished
+	3. Fix collapse height auto adjustment bug in some function 
+		3.1 mntremove
+			-- finished
 ---
 	## 2023.04.28		version 0.5.7
 	-- Function implementation
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 5da9929..af2aff0 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -39,6 +39,17 @@ const mntfold = (target)=>{
 		})
 	}
 
+}
+// Side:	Monitored group span adjustment
+const mntspan = (content) =>{
+	const isExpand = content.classList.contains('mnt-expanding')
+	if(isExpand){
+		console.log(content.childElementCount)
+		content = content.style.height = content.childElementCount*21 + 31 + 'px'
+	}else{
+		console.log(200)
+	}
+	
 }
 // Side:	The Style of Monitored system
 const mntstyle = (target)=>{
@@ -194,13 +205,13 @@ const mntgroupwrite = async(target,isLoaded=true) =>{
 		const updateDiv = target.querySelector('.mnt-folder-content')
 		const header = target.querySelector('.mnt-folder-header')
 		const mntset = await window.mnt.load(header.innerHTML)
-		console.log(mntset)
 		let mntdata = []
 		for(var i=0;i<mntset.length;i++){
 			const id = `id='mnt-` + header.innerHTML + `-data-` + i + `'`
 			mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
 		}
 		updateDiv.innerHTML = mntdata.join('')
+		return true
 	}
 }
 // Side:	Function of monitored data
@@ -313,11 +324,15 @@ const mntmenufunc = async()=>{
 		for(var i=0;i<dataset.length;i++){
 			data[i] = dataset[i].innerHTML
 		}
+		const content = dataset[0].parentNode
 		const group = dataset[0].parentNode.parentNode
 		const folder = group.querySelector('.mnt-folder-header')
 		const isRemove = await window.mnt.remove(folder.innerHTML,data)	
 		if(isRemove){
-			mntgroupwrite(group,false)
+			const isReady = await mntgroupwrite(group,false)
+			if(isReady){
+				mntspan(content)
+			}
 		}
 	})
 }
@@ -336,6 +351,7 @@ const mntmain = async()=>{
 		mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
 	}
 	updateDiv.innerHTML = mntdata.join('')
+	
 		/*
 		const mntexpand = document.querySelectorAll('.mnt-folder.visible')
 		for(var i=0;i<mntexpand.length;i++){

From 4a51e938cc93ee13108074a3ae1a69099a70b3ee Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Tue, 2 May 2023 13:23:52 +0800
Subject: [PATCH 45/54] Fix height adjustment when dropping

Merge mntexpand to mntspan
---
 log.md                |  2 ++
 template/index-mnt.js | 33 +++++++++------------------------
 2 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/log.md b/log.md
index aef3b2d..f6467e5 100644
--- a/log.md
+++ b/log.md
@@ -4,6 +4,7 @@
 ---
 	## 2023.05.02		version 0.5.7.1
 	-- Bug Fix
+	-- Remove some wasted codes
 	# Fixed
 	1. Fix that remove function not refresh
 		-- finished
@@ -11,6 +12,7 @@
 		-- finished
 	3. Fix collapse height auto adjustment bug in some function 
 		3.1 mntremove
+		3.2 drop
 			-- finished
 ---
 	## 2023.04.28		version 0.5.7
diff --git a/template/index-mnt.js b/template/index-mnt.js
index af2aff0..547fc16 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -44,10 +44,10 @@ const mntfold = (target)=>{
 const mntspan = (content) =>{
 	const isExpand = content.classList.contains('mnt-expanding')
 	if(isExpand){
-		console.log(content.childElementCount)
-		content = content.style.height = content.childElementCount*21 + 31 + 'px'
+		content.style.height = content.childElementCount*21 + 31 + 'px'
 	}else{
-		console.log(200)
+		console.log('not expanding')
+		content.style.height = ''
 	}
 	
 }
@@ -211,20 +211,12 @@ const mntgroupwrite = async(target,isLoaded=true) =>{
 			mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
 		}
 		updateDiv.innerHTML = mntdata.join('')
-		return true
+		mntspan(updateDiv)
 	}
 }
 // Side:	Function of monitored data
 const mntfunc = (target)=>{
 	// Data function
-	/*
-	const mntcheck = (event)=>{
-		return event.currentTarget.classList.contains('mnt-dropzone')		
-	}*/
-	/*
-	const mntcontentCheck = (event) =>{
-		return event.target.classList.contains('mnt-data')
-	}*/
 	for(let i=0;i<target.length;i++){
 		// Jump to monitored path
 		const el = target[i]
@@ -272,6 +264,7 @@ const mntfunc = (target)=>{
 				}
 				if(!isExist){
 					content.appendChild(dropdata)
+					mntspan(content)
 				}
 			})
 			el.addEventListener('dragenter',mntcancel)
@@ -284,25 +277,20 @@ const mntfunc = (target)=>{
 				}
 				counter++
 			})
-			const mntexpand = (content)=>{
-				if(content.classList.contains('mnt-expanding')){
-					content.style.height = content.childElementCount*21 + 31 + 'px'
-				}else{
-					content.style.height = ''
-				}
-			}
+		
 			el.addEventListener('dragleave',(event)=>{
 				counter--
 				const content = event.currentTarget.querySelector('.mnt-folder-content')
 				if(counter==0){
-					mntexpand(content)
+				
+					mntspan(content)
 					counter = false
 				}
 			})
 			el.addEventListener('drop',(event)=>{
 				counter = 0
 				const content = event.currentTarget.querySelector('.mnt-folder-content')
-				mntexpand(content)
+			
 			})
 		}
 	}	
@@ -330,9 +318,6 @@ const mntmenufunc = async()=>{
 		const isRemove = await window.mnt.remove(folder.innerHTML,data)	
 		if(isRemove){
 			const isReady = await mntgroupwrite(group,false)
-			if(isReady){
-				mntspan(content)
-			}
 		}
 	})
 }

From e97454e010d9be9610e5893513dcc29fcd823a20 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Tue, 2 May 2023 13:31:00 +0800
Subject: [PATCH 46/54] Fix height adjustment when adding to monitored tag

Run mntspan after mntmain
---
 .gitignore            | 3 +++
 log.md                | 3 ++-
 template/index-mnt.js | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index edb816a..4ce3579 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,6 @@
 node_modules
 *.code-workspace
 *.db
+中文/1/2/Stemmeta.db
+中文/1/Stemmeta.db
+中文/Stemmeta.db
diff --git a/log.md b/log.md
index f6467e5..bc1b133 100644
--- a/log.md
+++ b/log.md
@@ -13,7 +13,8 @@
 	3. Fix collapse height auto adjustment bug in some function 
 		3.1 mntremove
 		3.2 drop
-			-- finished
+		3.3 mntmain
+		-- finished
 ---
 	## 2023.04.28		version 0.5.7
 	-- Function implementation
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 547fc16..2601ad6 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -336,7 +336,7 @@ const mntmain = async()=>{
 		mntdata[i] = `<p ` + id+ ` class='mnt-data' draggable='true'>` + mntset[i] + `</p>`
 	}
 	updateDiv.innerHTML = mntdata.join('')
-	
+	mntspan(updateDiv)
 		/*
 		const mntexpand = document.querySelectorAll('.mnt-folder.visible')
 		for(var i=0;i<mntexpand.length;i++){

From 92077d17d6e3ab13abb53e41288169667f619934 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Tue, 2 May 2023 16:07:44 +0800
Subject: [PATCH 47/54] Rewrite uxContextMenuRemove function

Rewrite function for global context remove,submenu remove,hide option remove
---
 log.md                | 10 ++++++++++
 static/css/index.css  |  4 ++++
 template/index-mnt.js | 12 +++++++-----
 template/index-ux.js  | 32 ++++++++++++++++++++++++--------
 template/index.html   |  4 ++--
 5 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/log.md b/log.md
index bc1b133..182b13f 100644
--- a/log.md
+++ b/log.md
@@ -1,6 +1,16 @@
 # Stembase
  File tagging system
 
+---
+	## 2023.05.03		version 0.5.8
+	-- Rewrite function
+	-- Function implementation
+	# Added
+	1. Add customized option hide function(contextmenu) globally
+		-- finished
+	# Changed
+	1. Rewrite contextmenu removal mechanism
+		-- finished
 ---
 	## 2023.05.02		version 0.5.7.1
 	-- Bug Fix
diff --git a/static/css/index.css b/static/css/index.css
index 8b272d0..e7f3e7f 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -55,10 +55,14 @@
 	white-space:	nowrap;
 	min-height:		31px;
 	width:			150px;
+	display:		block;
 }
 .mnt-dropmenu-option:hover{
 	background:		rgb(146,182,200);
 }
+.mnt-dropmenu-option.hide{
+	display:		none;
+}
 .mnt-folder{
 	border-bottom:	5px solid rgb(255,238,214);
 	
diff --git a/template/index-mnt.js b/template/index-mnt.js
index 2601ad6..e1ff792 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -150,13 +150,15 @@ const mntmenu = (target)=>{
 			// Select contextmenu target
 			mntselected(event)
 			
+			// Customized display
+		
+			if(event.currentTarget.id == 'mnt-main'){
+				console.log('work')
+				const hideOpt = document.getElementById('mnt-removemenu-remove')
+				hideOpt.classList.add('hide')
+			}
 			// Main function
 			event.preventDefault()
-			
-			const prevMenu = document.querySelector('.mnt-cm-dropmenu.visible')
-			if(prevMenu){
-				prevMenu.classList.remove('visible')
-			}
 			const [posLeft,posTop] = menuPositioner(event)
 			contextMenu.style.left = posLeft
 			contextMenu.style.top = posTop
diff --git a/template/index-ux.js b/template/index-ux.js
index d45d32c..d375680 100644
--- a/template/index-ux.js
+++ b/template/index-ux.js
@@ -11,15 +11,31 @@ const uxScroll = (e)=>{
 }
 
 const uxContextMenuRemove = ()=>{
-	const contextMenu = document.getElementById('mnt-cm')
-	document.querySelector('body').addEventListener('click',(event)=>{
-		if(event.target.offsetParent !=contextMenu){
-			contextMenu.classList.remove('visible')
-			const subMenu = document.querySelector('.mnt-cm-dropmenu.visible')
-			if(subMenu){
-				subMenu.classList.remove('visible')
+	const mainfunc = (isSub=false)=>{
+		const vsbMenu = document.querySelectorAll('.context-menu.visible')
+		const vsbSubMenu = document.querySelectorAll('.submenu.visible')
+		const hideOpt = document.querySelectorAll('.hide')
+		if(!event.target.offsetParent.classList.contains('context-menu')){
+			if(!isSub){
+				for(var i=0;i<vsbMenu.length;i++){
+					vsbMenu[i].classList.remove('visible')				
+				}
 			}
-		}	
+			for(var i=0;i<vsbSubMenu.length;i++){
+				vsbSubMenu[i].classList.remove('visible')
+			}
+			for(var i=0;i<hideOpt.length;i++){
+				hideOpt[i].classList.remove('hide')
+			}			
+		}
+	}
+	const body = document.querySelector('body')
+	body.addEventListener('contextmenu',(event)=>{
+		event.preventDefault()
+		mainfunc(true) 
+	})
+	body.addEventListener('click',(event)=>{
+		mainfunc()	
 	})
 	
 }
diff --git a/template/index.html b/template/index.html
index 13c684a..48228e6 100644
--- a/template/index.html
+++ b/template/index.html
@@ -25,10 +25,10 @@
 					</div>					
 				</div>
 				<div id='mnt-cm-sub'>
-					<div id='mnt-cm-movemenu' class='mnt-cm-dropmenu'>
+					<div id='mnt-cm-movemenu' class='mnt-cm-dropmenu submenu'>
 						<p id='mnt-movemenu-shortcut' class='mnt-dropmenu-option'>Add to Shortcut</p>
 					</div>
-					<div id='mnt-cm-removemenu' class='mnt-cm-dropmenu'>
+					<div id='mnt-cm-removemenu' class='mnt-cm-dropmenu submenu'>
 						<p id='mnt-removemenu-delete' class='mnt-dropmenu-option'>Delete this record</p>
 						<p id='mnt-removemenu-remove' class='mnt-dropmenu-option'>Remove from group</p>
 						<p id='mnt-removemenu-unmonitor' class='mnt-dropmenu-option'>Remove monitoring</p>

From 91d12a97f034001cdf8e5b3f0e8ba03ba9660088 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Wed, 3 May 2023 11:52:47 +0800
Subject: [PATCH 48/54] Rewrite contextmenu function in delegation way

Rewrite contextmenu function in delegation way by detecting function-section and call the corresponding contextmenu.
Secondly, move to index-ux due to the globalization
---
 log.md                                     |   2 +
 template/index-mnt.js                      |  10 +-
 template/index-ux.js                       | 150 ++++++++++++++++++++-
 template/index.html                        |   8 +-
 "\344\270\255\346\226\207/1/2/Stemmeta.db" | Bin 20480 -> 20480 bytes
 "\344\270\255\346\226\207/1/Stemmeta.db"   | Bin 20480 -> 20480 bytes
 "\344\270\255\346\226\207/Stemmeta.db"     | Bin 20480 -> 20480 bytes
 7 files changed, 159 insertions(+), 11 deletions(-)

diff --git a/log.md b/log.md
index 182b13f..ffd6164 100644
--- a/log.md
+++ b/log.md
@@ -11,6 +11,8 @@
 	# Changed
 	1. Rewrite contextmenu removal mechanism
 		-- finished
+	2. Rewrite contextmenu function in delegation way and transfer into index-ux
+		-- finished
 ---
 	## 2023.05.02		version 0.5.7.1
 	-- Bug Fix
diff --git a/template/index-mnt.js b/template/index-mnt.js
index e1ff792..9262eaf 100644
--- a/template/index-mnt.js
+++ b/template/index-mnt.js
@@ -46,7 +46,6 @@ const mntspan = (content) =>{
 	if(isExpand){
 		content.style.height = content.childElementCount*21 + 31 + 'px'
 	}else{
-		console.log('not expanding')
 		content.style.height = ''
 	}
 	
@@ -77,6 +76,7 @@ const mntstyle = (target)=>{
 }
 
 // Side:	Context menu of monitored data
+/*
 const mntmenu = (target)=>{
 	// Positioner
 	const contextMenu = document.getElementById('mnt-cm')
@@ -183,7 +183,7 @@ const mntmenu = (target)=>{
 		})
 	}
 	// test: Should be removed after all context related function is completed
-	/*
+	
 	const page = document.body
 	page.addEventListener('contextmenu',(event)=>{
 		event.preventDefault()
@@ -195,9 +195,9 @@ const mntmenu = (target)=>{
 		contextMenu.style.left = posLeft
 		contextMenu.style.top = posTop
 		contextMenu.classList.add('visible')
-	})*/
+	})
 	
-}	
+}	*/
 //Side:		Monitored group loader
 const mntgroupwrite = async(target,isLoaded=true) =>{
 	if(isLoaded){
@@ -367,7 +367,7 @@ const mntApplier = (target)=>{
 	mntfunc(target)
 	mntfold(target)
 	mntstyle(target)
-	mntmenu(target)
+	//mntmenu(target)
 }
 const mntInit = ()=>{
 	const isReady = mntbuild()
diff --git a/template/index-ux.js b/template/index-ux.js
index d375680..280b805 100644
--- a/template/index-ux.js
+++ b/template/index-ux.js
@@ -9,7 +9,152 @@ const uxScroll = (e)=>{
 		behavior: 'smooth'
 	})
 }
-
+// Contextmenu Creator
+const uxContextMenuCreate = ()=>{
+	// Positioner
+	//const contextMenu = document.getElementById('mnt-cm')
+	const menuPositioner = (event,isSub = false)=>{
+		const funcSection = event.target.closest('.function-section')
+		const contextMenu = funcSection.querySelector('.context-menu')
+		console.log(contextMenu)
+		const winX = document.body.clientWidth
+		const winY = document.body.clientHeight
+		const menuX = contextMenu.offsetWidth
+		const menuY = contextMenu.offsetHeight
+		const secMargin = 5
+		let posLeft = posTop = overflowLimX = overflowLimY = ''
+		// Submenu
+		if(isSub){
+			const menuName = event.currentTarget.id + 'menu'
+			const dropMenu = document.getElementById(menuName)
+			const subX = 150
+			const subY = dropMenu.childElementCount*31
+			const upAdjustment = 30
+			const downAdjustment = 10
+			const cmPos = contextMenu.getBoundingClientRect()
+			const optPos = event.currentTarget.getBoundingClientRect()
+			const optionLeft = cmPos.left
+			const optionRight = cmPos.right
+			const optionTop = optPos.top
+			const optionBottom = optPos.bottom
+			overflowLimX = optionRight + subX + secMargin
+			overflowLimY = optionTop + subY + secMargin
+			if(overflowLimX >= winX && overflowLimY >= winY){
+				posLeft = optionLeft - subX + 'px'
+				posTop = optionBottom - subY + downAdjustment + 'px'
+				
+			}else if(overflowLimX >= winX){
+				posLeft = optionLeft - subX + 'px'
+				posTop = optionTop + upAdjustment + 'px'
+				
+			}else if(overflowLimY >= winY){
+				posLeft = optionRight + 'px'
+				posTop = optionBottom - subY + downAdjustment + 'px'
+				
+			}else{
+				posLeft = optionRight + 'px'
+				posTop = optionTop + upAdjustment + 'px'
+				
+			}
+		// Mainmenu
+		}else{
+			const {clientX : mouseX, clientY: mouseY} = event
+			overflowLimX = mouseX + menuX + secMargin
+			overflowLimY = mouseY + menuY + secMargin
+			if(overflowLimX >= winX && overflowLimY >=winY){
+				posLeft = mouseX - menuX - secMargin + 'px'
+				posTop = mouseY - menuY - secMargin + 'px'
+			}else if(overflowLimX >= winX){
+				posLeft = mouseX - menuX - secMargin + 'px'
+				posTop = mouseY + secMargin + 'px'
+			}else if(overflowLimY >= winY){
+				posLeft = mouseX + secMargin + 'px'
+				posTop = mouseY - menuY - secMargin + 'px'
+			}else{
+				posLeft = mouseX + secMargin + 'px'
+				posTop = mouseY + secMargin + 'px'
+				
+			}
+		}	
+		return [posLeft,posTop]
+	}
+	// Main menu
+	/*
+	for(let i=0;i<target.length;i++){
+		const el=target[i]
+		el.addEventListener('contextmenu',(event)=>{
+			// Select contextmenu target
+			mntselected(event)
+			
+			// Customized display
+		
+			if(event.currentTarget.id == 'mnt-main'){
+				const hideOpt = document.getElementById('mnt-removemenu-remove')
+				hideOpt.classList.add('hide')
+			}
+			// Main function
+			event.preventDefault()
+			const [posLeft,posTop] = menuPositioner(event)
+			contextMenu.style.left = posLeft
+			contextMenu.style.top = posTop
+			contextMenu.classList.add('visible')
+		})
+	}*/
+	// Side menu
+	/*
+	const submenu = document.querySelectorAll('.mnt-cm-submenu')
+	const dropmenu= document.querySelectorAll('.mnt-cm-dropmenu')*/
+	const cmmenu = document.querySelectorAll('.context-menu')
+	for(var i=0;i<cmmenu.length;i++){
+		const cm = cmmenu[i]
+		const sub = document.getElementById(cm.id + '-sub')
+		const submenu = cm.querySelectorAll('.' + cm.id + '-submenu')
+		const dropmenu= sub.querySelectorAll('.submenu')
+		for(var j=0;j<submenu.length;j++){
+			const el= submenu[j]
+			const subel = dropmenu[j]
+			
+			el.addEventListener('click',(event)=>{
+				const [posLeft,posTop] = menuPositioner(event,true)
+				subel.style.left = posLeft
+				subel.style.top  = posTop
+				subel.classList.add('visible')
+			})
+		}
+	}
+	/*
+	const submenu = contextMenu.querySelectorAll(contextMenu.id + '-submenu')
+	const dropmenu= contextMenu.querySelectorAll(contextMenu.id + '-dropmenu')
+	for(let i=0;i<submenu.length;i++){
+		const el = submenu[i]
+		const subel = dropmenu[i]
+		el.addEventListener('click',(event)=>{
+			
+			const prevMenu = document.querySelector('.mnt-cm-dropmenu.visible')
+			if(prevMenu){
+				prevMenu.classList.remove('visible')
+			}
+			const [posLeft,posTop] = menuPositioner(event,true)
+			subel.style.left = posLeft
+			subel.style.top = posTop
+			subel.classList.add('visible')
+		})
+	}*/
+	// test: Should be removed after all context related function is completed
+	
+	const page = document.body
+	page.addEventListener('contextmenu',(event)=>{
+		event.preventDefault()
+		const funcSection = event.target.closest('.function-section')
+		const contextMenu = funcSection.querySelector('.context-menu')
+		const [posLeft,posTop] = menuPositioner(event)
+		contextMenu.style.left = posLeft
+		contextMenu.style.top = posTop
+		contextMenu.classList.add('visible')
+	})
+	
+}	
+// Contextmenu Removal and hide
 const uxContextMenuRemove = ()=>{
 	const mainfunc = (isSub=false)=>{
 		const vsbMenu = document.querySelectorAll('.context-menu.visible')
@@ -34,13 +179,14 @@ const uxContextMenuRemove = ()=>{
 		event.preventDefault()
 		mainfunc(true) 
 	})
-	body.addEventListener('click',(event)=>{
+	body.addEventListener('mousedown',()=>{
 		mainfunc()	
 	})
 	
 }
 // Initialize
 const uxInit = ()=>{
+	uxContextMenuCreate()
 	uxContextMenuRemove()
 }
 uxInit()
diff --git a/template/index.html b/template/index.html
index 48228e6..e1cc2ae 100644
--- a/template/index.html
+++ b/template/index.html
@@ -16,7 +16,7 @@
     <p id="info"></p>
 	<div id='fs-path'></div>
 		<div id='main-function'>
-			<div id='mnt'>
+			<div id='mnt' class='function-section'>
 				<div id='mnt-cm' class='context-menu'>
 					<div>
 						<p id='mnt-cm-new' class='mnt-cm-option'>New</p>
@@ -43,7 +43,7 @@
 					<div id='mnt-main-display' class='mnt-folder-content'></div>
 				</div>
 			</div>
-			<div id='fs'>
+			<div id='fs' class='function-section'>
 				<h1 id='fs-info'></h1>	
 				<div id='fs-toolbar'>
 					<button id='fs-up'>Up Level</button>
@@ -57,7 +57,7 @@ <h1 id='fs-info'></h1>
 				</div>
 			
 			</div>
-			<div id='tag'>
+			<div id='tag' class='function-section'>
 				<div id='tag-searchbar'>
 					<input id='tag-search' class='input-field'>
 					<button id='tag-searchbtn'>Search</button>
@@ -83,7 +83,7 @@ <h1 id='fs-info'></h1>
 			</div>
 		</div>
 			
-	<div id='buttonbar'>
+	<div id='buttonbar' class='function-section'>
 		<button id='fs-home'>Home</button>
 		<button id='fs-openDir'>Open Folder</button>
 		<button id='cw-setting'>Setting</button>
diff --git "a/\344\270\255\346\226\207/1/2/Stemmeta.db" "b/\344\270\255\346\226\207/1/2/Stemmeta.db"
index 83f3c87a2ac55a9c8e6360e61da4ea38a8b5f6d8..e422b52becca31cd7aeb68fc3e3c5ab7ecb5b436 100644
GIT binary patch
delta 21
ccmZozz}T>Wae_1>%S0JxMwX2U^Zgl_0Z2s!>i_@%

delta 21
ccmZozz}T>Wae_1>^F$eEM&^wP^Zgl_07x+f=l}o!

diff --git "a/\344\270\255\346\226\207/1/Stemmeta.db" "b/\344\270\255\346\226\207/1/Stemmeta.db"
index 2f1a07b126813589f1abfee659163eb280a15722..ab507fd2cd390b43a4d8beabf169380cc274e207 100644
GIT binary patch
delta 121
zcmZozz}T>Wae_1>$3z)tMvjdMOZa(M_^&eXf8&44|B(OcW<i0Y{5)LjEDZeOMu`Ol
zIjNH$$}0nvykg-0161^Z|J7zeg<JfSKj^bCv9kjy5uoHX2L4C<@A$9re+TM6#?Qme
S!Y|GU(ayg4k-e+{BRc>Y5GCCJ

delta 82
zcmZozz}T>Wae_1>`$QRMM)r*fOZd5%`5!Xyf8&44|8TRQ!e#!+59O7CVjmdz{{Tfl
kY!-BQ#6S6iz6en45d;4t{&)P}f$FaCZ+>JiE5OJG0EWvPvj6}9

diff --git "a/\344\270\255\346\226\207/Stemmeta.db" "b/\344\270\255\346\226\207/Stemmeta.db"
index ac8236a54da07ca2f0a808a7dfd784115fd6472e..f67f8955f8fac7d077ec95084ebcc7dbfb040557 100644
GIT binary patch
delta 21
ccmZozz}T>Wae_1>`$QRMM)r*f^Zgmw07!ua^Z)<=

delta 21
ccmZozz}T>Wae_1>+e8^>Mz)O!^ZglF0Z45H@c;k-


From 2ceb74b38e7bca3756c9245f4d01f61f5fa6ed23 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Wed, 3 May 2023 14:48:21 +0800
Subject: [PATCH 49/54] Implement global contextmenu target select function

Implement with array to realize dynamic function calling. I decide to keep this function at smaller scope to accept different main functions have their own selected style,mechanism and target acceptance. That's why I decide to call the corresponding function rather than unify them in ux
---
 log.md               |  3 +++
 template/index-ux.js | 24 +++++++++++++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/log.md b/log.md
index ffd6164..c11ebac 100644
--- a/log.md
+++ b/log.md
@@ -5,9 +5,12 @@
 	## 2023.05.03		version 0.5.8
 	-- Rewrite function
 	-- Function implementation
+	-- Clear wasted codes
 	# Added
 	1. Add customized option hide function(contextmenu) globally
 		-- finished
+	2. Add global context menu target select function with exception handler
+		-- finished
 	# Changed
 	1. Rewrite contextmenu removal mechanism
 		-- finished
diff --git a/template/index-ux.js b/template/index-ux.js
index 280b805..622cc21 100644
--- a/template/index-ux.js
+++ b/template/index-ux.js
@@ -9,6 +9,18 @@ const uxScroll = (e)=>{
 		behavior: 'smooth'
 	})
 }
+// Contextmenu Select
+const uxContextMenuSelect = (event,id)=>{
+	const selector = []
+	selector['mnt'] = (event)=>{mntselected(event)}
+	
+	try{
+		selector[id](event)
+	}catch(err){
+		console.log('System error message:' + err)
+	}
+	
+}
 // Contextmenu Creator
 const uxContextMenuCreate = ()=>{
 	// Positioner
@@ -16,7 +28,6 @@ const uxContextMenuCreate = ()=>{
 	const menuPositioner = (event,isSub = false)=>{
 		const funcSection = event.target.closest('.function-section')
 		const contextMenu = funcSection.querySelector('.context-menu')
-		console.log(contextMenu)
 		const winX = document.body.clientWidth
 		const winY = document.body.clientHeight
 		const menuX = contextMenu.offsetWidth
@@ -145,12 +156,16 @@ const uxContextMenuCreate = ()=>{
 	const page = document.body
 	page.addEventListener('contextmenu',(event)=>{
 		event.preventDefault()
+		// Display contextmenu
 		const funcSection = event.target.closest('.function-section')
 		const contextMenu = funcSection.querySelector('.context-menu')
 		const [posLeft,posTop] = menuPositioner(event)
 		contextMenu.style.left = posLeft
 		contextMenu.style.top = posTop
 		contextMenu.classList.add('visible')
+		
+		// Select target
+		uxContextMenuSelect(event,funcSection.id)
 	})
 	
 }	
@@ -165,14 +180,17 @@ const uxContextMenuRemove = ()=>{
 				for(var i=0;i<vsbMenu.length;i++){
 					vsbMenu[i].classList.remove('visible')				
 				}
-			}
+			}/*
 			for(var i=0;i<vsbSubMenu.length;i++){
 				vsbSubMenu[i].classList.remove('visible')
-			}
+			}*/
 			for(var i=0;i<hideOpt.length;i++){
 				hideOpt[i].classList.remove('hide')
 			}			
 		}
+		for(var i=0;i<vsbSubMenu.length;i++){
+				vsbSubMenu[i].classList.remove('visible')
+			}
 	}
 	const body = document.querySelector('body')
 	body.addEventListener('contextmenu',(event)=>{

From 8d38bbd59f05bbf271e1523a6672242c3d34b343 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Wed, 3 May 2023 15:54:58 +0800
Subject: [PATCH 50/54] Merge contextmenu related function

Merge all  index-ux contextmenu related function
---
 log.md               |  2 ++
 template/index-ux.js | 32 ++++++++++++++++++--------------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/log.md b/log.md
index c11ebac..6135ce1 100644
--- a/log.md
+++ b/log.md
@@ -16,6 +16,8 @@
 		-- finished
 	2. Rewrite contextmenu function in delegation way and transfer into index-ux
 		-- finished
+	3. Merge contextmenu related function
+		-- finished
 ---
 	## 2023.05.02		version 0.5.7.1
 	-- Bug Fix
diff --git a/template/index-ux.js b/template/index-ux.js
index 622cc21..2478340 100644
--- a/template/index-ux.js
+++ b/template/index-ux.js
@@ -9,18 +9,7 @@ const uxScroll = (e)=>{
 		behavior: 'smooth'
 	})
 }
-// Contextmenu Select
-const uxContextMenuSelect = (event,id)=>{
-	const selector = []
-	selector['mnt'] = (event)=>{mntselected(event)}
-	
-	try{
-		selector[id](event)
-	}catch(err){
-		console.log('System error message:' + err)
-	}
-	
-}
+
 // Contextmenu Creator
 const uxContextMenuCreate = ()=>{
 	// Positioner
@@ -164,8 +153,23 @@ const uxContextMenuCreate = ()=>{
 		contextMenu.style.top = posTop
 		contextMenu.classList.add('visible')
 		
-		// Select target
-		uxContextMenuSelect(event,funcSection.id)
+		// Contextmenu Select
+		const uxContextMenuSelect = ()=>{
+			const selector = []
+			selector['mnt'] = ()=>{mntselected(event)}
+			try{
+				selector[funcSection.id](event)
+			}catch(err){
+				console.log('System error message:' + err)
+			}
+		}
+		uxContextMenuSelect()
+		// Hiding controllers
+		const uxContextMenuOptHide = ()=>{
+			console.log(event.target)
+		}
+		uxContextMenuOptHide()
+		
 	})
 	
 }	

From 848e1dab050be2a36470ddd6de68c13f8f708a11 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Wed, 3 May 2023 16:10:23 +0800
Subject: [PATCH 51/54] Add contextmenu exception handler

Return false when contextmenu is not exist. This would happen when click at invalid area and those function sections that contextmenu is not set up
---
 log.md               | 2 ++
 template/index-ux.js | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/log.md b/log.md
index 6135ce1..5f0eb5a 100644
--- a/log.md
+++ b/log.md
@@ -11,6 +11,8 @@
 		-- finished
 	2. Add global context menu target select function with exception handler
 		-- finished
+	3. Add contextmenu create rxception handler
+		-- finished
 	# Changed
 	1. Rewrite contextmenu removal mechanism
 		-- finished
diff --git a/template/index-ux.js b/template/index-ux.js
index 2478340..0de4292 100644
--- a/template/index-ux.js
+++ b/template/index-ux.js
@@ -148,6 +148,9 @@ const uxContextMenuCreate = ()=>{
 		// Display contextmenu
 		const funcSection = event.target.closest('.function-section')
 		const contextMenu = funcSection.querySelector('.context-menu')
+		if(!contextMenu){
+			return false
+		}
 		const [posLeft,posTop] = menuPositioner(event)
 		contextMenu.style.left = posLeft
 		contextMenu.style.top = posTop

From 8b74f3696f04cdf1ac1e5e60a89c6b4b2d088064 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Wed, 3 May 2023 16:41:32 +0800
Subject: [PATCH 52/54] Add contextmenu hide option handler

Use a nested array dynamic function to handle different function section and different conditions. However, there is a bug in uxContextMenuRemove interrupt this function . hide setting should work after above function done
---
 log.md               |  2 ++
 template/index-ux.js | 25 +++++++++++++++++--------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/log.md b/log.md
index 5f0eb5a..ba9efdc 100644
--- a/log.md
+++ b/log.md
@@ -13,6 +13,8 @@
 		-- finished
 	3. Add contextmenu create rxception handler
 		-- finished
+	4. Add contextmenu hide setting applier
+		-- finished
 	# Changed
 	1. Rewrite contextmenu removal mechanism
 		-- finished
diff --git a/template/index-ux.js b/template/index-ux.js
index 0de4292..572df35 100644
--- a/template/index-ux.js
+++ b/template/index-ux.js
@@ -140,8 +140,6 @@ const uxContextMenuCreate = ()=>{
 			subel.classList.add('visible')
 		})
 	}*/
-	// test: Should be removed after all context related function is completed
-	
 	const page = document.body
 	page.addEventListener('contextmenu',(event)=>{
 		event.preventDefault()
@@ -161,15 +159,26 @@ const uxContextMenuCreate = ()=>{
 			const selector = []
 			selector['mnt'] = ()=>{mntselected(event)}
 			try{
-				selector[funcSection.id](event)
-			}catch(err){
-				console.log('System error message:' + err)
-			}
+				selector[funcSection.id]()
+			}catch(err){}
 		}
 		uxContextMenuSelect()
-		// Hiding controllers
+		// Hiding controller
 		const uxContextMenuOptHide = ()=>{
-			console.log(event.target)
+			const hideRule = []
+			hideRule['mnt'] = ()=>{
+				const subRule = []
+				subRule['mnt-main'] = ()=>{
+					const hideOpt = document.getElementById('mnt-removemenu-remove')
+					hideOpt.classList.add('hide')
+				}
+				const group = event.target.closest('.mnt-folder')
+		
+				subRule[group.id]()
+			}
+			try{
+				hideRule[funcSection.id]()
+			}catch(err){}
 		}
 		uxContextMenuOptHide()
 		

From 56bed37b679daa031d3d313ef4381d7af3372e54 Mon Sep 17 00:00:00 2001
From: Paiiimannnoitla <121204598+Paiiimannnoitla@users.noreply.github.com>
Date: Thu, 4 May 2023 11:32:48 +0800
Subject: [PATCH 53/54] Rewrite contextmenu remove function by custom event

I create a new event call passcheck and bubble it. It is designed for afterward contextmenu related check . Because eventlistener is not traditional function, we cannot apply the concept of async/await on it. To mimic the behavior, the best way to achieve it is by dispachEvent.
---
 log.md                | 6 ++++++
 template/index-tag.js | 4 ++--
 template/index-ux.js  | 6 +++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/log.md b/log.md
index ba9efdc..9c6fef6 100644
--- a/log.md
+++ b/log.md
@@ -1,6 +1,12 @@
 # Stembase
  File tagging system
 
+---
+	## 2023.05.04		version 0.5.8.1
+	-- Rewrite function
+	# Changed
+	1. Rewrite the behavior of uxContextMenuRemove in custom event to fix prority bug
+		-- finished
 ---
 	## 2023.05.03		version 0.5.8
 	-- Rewrite function
diff --git a/template/index-tag.js b/template/index-tag.js
index 09c3e5a..80ce9d5 100644
--- a/template/index-tag.js
+++ b/template/index-tag.js
@@ -89,7 +89,7 @@ const tagmatch = async()=>{
 	})
 		// Main match function
 	tagsearchbar.addEventListener('input',async()=>{
-		const evt = new Event('click')
+		//const evt = new Event('click')
 		const input = tagsearchbar.value
 		const matchBlock = []
 		const tagset = await tag.match(input)
@@ -243,7 +243,7 @@ const tagsearch = ()=>{
 	}
 	tagbtn.addEventListener('click', async()=>{
 		searchBlock = []
-		const evt = new Event('click')
+		//const evt = new Event('click')
 		const input = taginput.value
 		tagset = await tag.query(input,'tagref','tagref')
 		const fileset = await tag.query(input,'nameref','nameref',false)
diff --git a/template/index-ux.js b/template/index-ux.js
index 572df35..7eb3e77 100644
--- a/template/index-ux.js
+++ b/template/index-ux.js
@@ -141,8 +141,9 @@ const uxContextMenuCreate = ()=>{
 		})
 	}*/
 	const page = document.body
-	page.addEventListener('contextmenu',(event)=>{
+	page.addEventListener('passcheck',(event)=>{
 		event.preventDefault()
+		console.log(event.target)
 		// Display contextmenu
 		const funcSection = event.target.closest('.function-section')
 		const contextMenu = funcSection.querySelector('.context-menu')
@@ -212,6 +213,9 @@ const uxContextMenuRemove = ()=>{
 	body.addEventListener('contextmenu',(event)=>{
 		event.preventDefault()
 		mainfunc(true) 
+		const evt = new Event('passcheck',{'bubbles':true})
+		event.target.dispatchEvent(evt)
+		
 	})
 	body.addEventListener('mousedown',()=>{
 		mainfunc()	

From d15890d7c659c397b526a89cab0e116c0c1cec8b Mon Sep 17 00:00:00 2001
From: etc1290 <52283388+etc1290@users.noreply.github.com>
Date: Fri, 5 May 2023 10:02:19 +0800
Subject: [PATCH 54/54] Test Long File Name Hidden

hint function and long text name hidden function can't cooperate each other due to  overflow-x/y issue.
---
 static/css/hint.css  | 2 +-
 static/css/index.css | 8 ++++++--
 template/index.js    | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/static/css/hint.css b/static/css/hint.css
index c2a984b..4189c19 100644
--- a/static/css/hint.css
+++ b/static/css/hint.css
@@ -290,7 +290,7 @@
 
 .hint--bottom-left:before, .hint--bottom-left:after {
   top: 100%;
-  left: 50%; }
+  left: 70%; }
 
 .hint--bottom-left:before {
   left: calc(50% - 6px); }
diff --git a/static/css/index.css b/static/css/index.css
index e7f3e7f..ea842a3 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -122,8 +122,11 @@
 }
 .fs-data{
 	width:			50%;
-	text-align:		left;
-	display:		inline-block;	
+	text-align:		left;	
+	text-overflow: 	ellipsis;
+	overflow-x: 	hidden;
+    /* overflow-y: 	visible; */
+	white-space: 	nowrap;
 	padding:		15px;
 }
 .fs-data:hover{
@@ -133,6 +136,7 @@
 /* Columbia Blue */
 .fs-data-label{
 	width:			532px;
+	overflow-y: 	visible;
 }
 .fs-data-label:hover{
 	background:		rgb(211,229,238);
diff --git a/template/index.js b/template/index.js
index 93975a7..9c48f9b 100644
--- a/template/index.js
+++ b/template/index.js
@@ -168,7 +168,7 @@ const fsfunc = async (v=false,isDrive=false) => {
 	const fsdataset = []	
 	for(var i=0;i<file.length;i++){
 		if(size[i]){
-			const fsbtn = `<div class='fs-data-label' id='datalabel${i}'><button class='fs-data hint--bottom hint--medium' aria-label="${file[i]}">${file[i]}</button>`
+			const fsbtn = `<div class='fs-data-label' id='datalabel${i}'><button class='fs-data hint--bottom-left hint--medium' aria-label="${file[i]}">${file[i]}</button>`
 			const fssize = `<p class='fs-data-size'>`+ size[i] + `</p>`
 			const fsmtime = `<p class='fs-data-mtime'>`+ mtime[i] +`</p></div>`
 			const fsdata = fsbtn + fssize + fsmtime