enhance file menu styles with new focus and unfocus background colors

Author: lorens-osman-dev

main.ts

@@ -7,7 +7,7 @@ export default class clusterPlugin extends Plugin {
 	settings: clusterPluginSettings;
 
 	async onload() {
-		console.log("loading Cluster  sdfsdf plugin");
+		console.log("loading Cluster plugin");
 		const file = this.app.workspace.getActiveFile() as TFile;
 
 		await this.loadSettings();

src/mainParts/fileMenu.ts

@@ -28,7 +28,6 @@ export function fileMenu(plugin: Plugin, SimpleFocus: SimpleFocusClass) {
         ||
         (file instanceof TFolder && file.path.startsWith(clusters) && file.path.endsWith(clusters))
       ) {
-        menu.addSeparator()
         menu.addItem((item) => {
           item
             .setTitle("New cluster")
@@ -42,7 +41,6 @@ export function fileMenu(plugin: Plugin, SimpleFocus: SimpleFocusClass) {
       }
       //- Child menu
       if (file instanceof TFile && file.path.startsWith(clusters)) {
-        menu.addSeparator()
         menu.addItem((item) => {
           item
             .setTitle("New Child")

src/style/parts/file-menu.scss

@@ -1,6 +1,7 @@
 //-FILE MENU -------------------*/
 .menu-item:has(.menu-item-icon .lucide-folder-git-2) {
   background-color: var(--background-menu-cluster);
+  margin-bottom: 2px;
 }
 
 .menu-item.selected:has(.menu-item-icon .lucide-folder-git-2) {
@@ -30,4 +31,22 @@
 
 .menu-item.selected:has(.menu-item-icon .lucide-disc) {
   background-color: var(--background-menu-orphan-selected);
+}
+
+.menu-item:has(.menu-item-icon .lucide-focus) {
+  background-color: var(--background-menu-focus);
+  margin-bottom: 2px;
+}
+
+.menu-item.selected:has(.menu-item-icon .lucide-focus) {
+  background-color: var(--background-menu-focus-selected);
+}
+
+.menu-item:has(.menu-item-icon .lucide-log-out) {
+  background-color: var(--background-menu-un-focus);
+  margin-bottom: 2px;
+}
+
+.menu-item.selected:has(.menu-item-icon .lucide-log-out) {
+  background-color: var(--background-menu-un-focus-selected);
 }

src/style/parts/variables.scss

@@ -17,6 +17,10 @@
   --background-menu-sibling-selected: hsl(210deg 50% 30% / 80%) !important;
   --background-menu-orphan: hsl(303deg 50% 30%/ 40%) !important;
   --background-menu-orphan-selected: hsl(303deg 50% 30%/ 80%) !important;
+  --background-menu-focus: hsl(130deg 50% 30%/ 40%) !important;
+  --background-menu-focus-selected: hsl(130deg 50% 30%/ 80%) !important;
+  --background-menu-un-focus: hsl(60deg 50% 30%/ 40%) !important;
+  --background-menu-un-focus-selected: hsl(60deg 50% 30%/ 80%) !important;
   //- buttons container colors
   --background-button-container-clusters: hsl(220deg 50% 30% / 30%);
   --background-button-container-orphans: hsl(303deg 50% 30%/ 30%);
@@ -53,6 +57,10 @@
   --background-menu-sibling-selected: hsl(210deg 50% 30% / 80%) !important;
   --background-menu-orphan: hsl(303deg 50% 30%/ 40%) !important;
   --background-menu-orphan-selected: hsl(303deg 50% 30%/ 80%) !important;
+  --background-menu-focus: hsl(130deg 50% 30%/ 40%) !important;
+  --background-menu-focus-selected: hsl(130deg 50% 30%/ 80%) !important;
+  --background-menu-un-focus: hsl(60deg 50% 30%/ 40%) !important;
+  --background-menu-un-focus-selected: hsl(60deg 50% 30%/ 80%) !important;
   //- buttons container colors
   --background-button-container-clusters: hsl(220deg 30% 50%);
   --background-button-container-orphans: hsl(303deg 30% 50%);