From 0c6eff2c13f9630eb4aab65f74de8a59a412fa42 Mon Sep 17 00:00:00 2001
From: Roland Broekema <broekema41@gmail.com>
Date: Mon, 26 May 2025 22:29:56 +0200
Subject: [PATCH] Refs #11: finishing up and testing wih a create contacts
 folder button for new users so that they do not need to start with opening
 the settings

---
 src/ui/sidebar/components/SidebarRootView.tsx | 33 ++++++++++++-------
 src/ui/sidebar/sidebarView.tsx                | 28 ++++++++++++++--
 2 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/src/ui/sidebar/components/SidebarRootView.tsx b/src/ui/sidebar/components/SidebarRootView.tsx
index 49666a1..f065a21 100644
--- a/src/ui/sidebar/components/SidebarRootView.tsx
+++ b/src/ui/sidebar/components/SidebarRootView.tsx
@@ -18,14 +18,17 @@ import { processAvatar } from "src/util/avatarActions";
 import { Sort } from "src/util/constants";
 import myScrollTo from "src/util/myScrollTo";
 
-export const SidebarRootView = () => {
+interface SidebarRootViewProps {
+  createDefaultPluginFolder: () => Promise<void>;
+}
+
+export const SidebarRootView = (props: SidebarRootViewProps) => {
 	const app = getApp();
   const { vault, workspace } = app;
-
   const [contacts, setContacts] = React.useState<Contact[]>([]);
   const [displayInsightsView, setDisplayInsightsView] = React.useState<boolean>(false);
 	const [sort, setSort] = React.useState<Sort>(Sort.NAME);
-	const settings = getSettings();
+	let settings = getSettings();
 
 	const parseContacts = () => {
 		const contactsFolder = vault.getAbstractFileByPath(
@@ -44,7 +47,10 @@ export const SidebarRootView = () => {
 
 	React.useEffect(() => {
 		parseContacts();
-    const offSettings = onSettingsChange(parseContacts.bind(this));
+    const offSettings = onSettingsChange(() => {
+      settings = getSettings();
+      parseContacts.call(this);
+    });
 
     return () => {
       offSettings();
@@ -155,15 +161,18 @@ export const SidebarRootView = () => {
               }} />
           :
             <>
-              <div className="action-card">
-                <div className="action-card-content">
-                  <p>Your contacts folder is currently set to the <strong>root of your vault</strong>.</p>
-                  <p>We advise to create a specific folder prevent system processing</p>
-                  <button className="action-card-button"
-                  >Make contacts folder
-                  </button>
+              {!settings.contactsFolder ?
+                <div className="action-card">
+                  <div className="action-card-content">
+                    <p>
+                      Your contacts folder is currently set to the <strong>root of your vault</strong>. We advise to create a specific folder prevent system processing.
+                    </p>
+                    <p>
+                      <button onClick={props.createDefaultPluginFolder} className="action-card-button">Make contacts folder</button>
+                    </p>
+                  </div>
                 </div>
-              </div>
+              : null }
 
               <div className="action-card">
                 <div className="action-card-content">
diff --git a/src/ui/sidebar/sidebarView.tsx b/src/ui/sidebar/sidebarView.tsx
index 6687803..0df376a 100644
--- a/src/ui/sidebar/sidebarView.tsx
+++ b/src/ui/sidebar/sidebarView.tsx
@@ -1,4 +1,4 @@
-import { ItemView, WorkspaceLeaf } from "obsidian";
+import { ItemView, Notice, WorkspaceLeaf } from "obsidian";
 import * as React from "react";
 import { createRoot } from "react-dom/client";
 import { clearApp, setApp } from "src/context/sharedAppContext";
@@ -15,6 +15,28 @@ export class ContactsView extends ItemView {
 		super(leaf);
 		this.plugin = plugin;
 	}
+
+  async createDefaultPluginFolder(): Promise<void> {
+    const vault = this.app.vault;
+    const folderPath = "Contacts"; // You can move this to a constant if you prefer
+
+    try {
+      const folderExists = await vault.adapter.exists(folderPath);
+      if (!folderExists) {
+        await vault.createFolder(folderPath);
+        this.plugin.settings.contactsFolder = folderPath;
+        await this.plugin.saveSettings();
+        setSettings(this.plugin.settings);
+      } else {
+        this.plugin.settings.contactsFolder = folderPath;
+        await this.plugin.saveSettings();
+        setSettings(this.plugin.settings);
+      }
+    } catch (err) {
+      new Notice('Failed to create folder default Contacts folder');
+    }
+  }
+
 	getViewType(): string {
 		return CONTACTS_VIEW_CONFIG.type;
 	}
@@ -31,7 +53,9 @@ export class ContactsView extends ItemView {
 		setApp(this.app);
     setSettings(this.plugin.settings);
 		this.root.render(
-				<SidebarRootView />
+				<SidebarRootView
+          createDefaultPluginFolder={this.createDefaultPluginFolder.bind(this)}
+        />
 		);
 	}