Merge branch 'feature/actions-selector-cards'

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "zettelflow",
 	"name": "ZettelFlow",
-	"version": "2.4.1",
+	"version": "2.4.2",
 	"minAppVersion": "1.4.11",
 	"description": "Helps you to create and manage your notes in a Zettelkasten way via Canvas.",
 	"author": "RafaelGB",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zettelflow",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "A plugin for Obsidian that allows you to create and manage notes in a ZettelFlow-like way.",
   "main": "main.js",
   "scripts": {
@@ -19,21 +19,21 @@
     "@types/react": "18.3.2",
     "@types/react-dom": "18.3.0",
     "@types/uuid": "9.0.8",
-    "@typescript-eslint/eslint-plugin": "7.9.0",
+    "@typescript-eslint/eslint-plugin": "7.10.0",
     "@typescript-eslint/parser": "7.9.0",
     "builtin-modules": "4.0.0",
     "codemirror": "6.0.1",
     "esbuild": "^0.20.2",
-    "esbuild-sass-plugin": "3.2.0",
+    "esbuild-sass-plugin": "3.3.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "7.34.1",
     "jest": "29.7.0",
     "obsidian": "1.5.7-1",
-    "ts-jest": "29.1.2",
+    "ts-jest": "29.1.3",
     "tslib": "2.6.2",
     "typescript": "5.4.5",
     "zustand": "4.5.2",
-    "sass": "1.77.1"
+    "sass": "1.77.2"
   },
   "dependencies": {
     "@popperjs/core": "2.11.8",

src/actions/backlink/BackLinkAction.tsx

@@ -17,6 +17,8 @@ export class BackLinkAction extends CustomZettelAction {
   };
   settings = backlinkSettings;
 
+  link = "https://rafaelgb.github.io/Obsidian-ZettelFlow/actions/Backlink";
+  purpose = "Add a backlink of the in-building note to another note.";
   public component(props: WrappedActionBuilderProps) {
     return <BacklinkWrapper {...props} />;
   }

src/actions/calendar/CalendarAction.tsx

@@ -17,6 +17,9 @@ export class CalendarAction extends CustomZettelAction {
   };
   settings = calendarSettings;
 
+  link = "https://rafaelgb.github.io/Obsidian-ZettelFlow/actions/Calendar";
+  purpose = "Add a calendar (date/time) to your note.";
+
   component(props: WrappedActionBuilderProps) {
     return <CalendarWrapper {...props} />;
   }

src/actions/checkbox/CheckboxAction.tsx

@@ -18,6 +18,8 @@ export class CheckboxAction extends CustomZettelAction {
 
   settings = checkboxSettings;
 
+  link = "https://rafaelgb.github.io/Obsidian-ZettelFlow/actions/Checkbox";
+  purpose = "Add a checkbox property. Works with boolean values.";
   component(props: WrappedActionBuilderProps) {
     return <CheckboxWrapper {...props} />;
   }

src/actions/cssClasses/CssClassesAction.tsx

@@ -17,6 +17,9 @@ export class CssClassesAction extends CustomZettelAction {
 
   settings = cssclassesSettings;
 
+  link = "https://rafaelgb.github.io/Obsidian-ZettelFlow/actions/CssClasses";
+  purpose =
+    "Native Obsidian property to add CSS classes just for the note where it is added.";
   component(props: WrappedActionBuilderProps) {
     return <CssClassesWrapper {...props} />;
   }

src/actions/number/NumberAction.tsx

@@ -19,6 +19,8 @@ export class NumberAction extends CustomZettelAction {
   };
   settings = numberSettings;
 
+  link = "https://rafaelgb.github.io/Obsidian-ZettelFlow/actions/Number";
+  purpose = "Add a number property.";
   component(props: WrappedActionBuilderProps) {
     return <NumberWrapper {...props} />;
   }

src/actions/prompt/PromptAction.tsx

@@ -17,6 +17,10 @@ export class PromptAction extends CustomZettelAction {
     zone: "frontmatter",
   };
   settings = promptSettings;
+
+  link = "https://rafaelgb.github.io/Obsidian-ZettelFlow/actions/Prompt";
+  purpose = "Add text as property/context/body to the note.";
+
   component(props: WrappedActionBuilderProps) {
     return <PromptWrapper {...props} />;
   }

src/actions/script/ScriptAction.tsx

@@ -13,6 +13,9 @@ export class ScriptAction extends CustomZettelAction {
   };
   settings = scriptSettings;
 
+  link = "https://rafaelgb.github.io/Obsidian-ZettelFlow/actions/Script";
+  purpose = "Run a JS script when the note is created/edited.";
+
   async execute(info: ExecuteInfo) {
     try {
       const element = info.element as CodeElement;

src/actions/selector/SelectorAction.tsx

@@ -16,6 +16,10 @@ export class SelectorAction extends CustomZettelAction {
     zone: "frontmatter",
   };
   settings = elementTypeSelectorSettings;
+
+  link = "https://rafaelgb.github.io/Obsidian-ZettelFlow/actions/Selector";
+  purpose =
+    "Create multiple options to select from and add the selected one to the note.";
   component(props: WrappedActionBuilderProps) {
     return <SelectorWrapper {...props} />;
   }

src/actions/tags/TagsAction.tsx

@@ -17,6 +17,9 @@ export class TagsAction extends CustomZettelAction {
 
   settings = tagsSettings;
 
+  link = "https://rafaelgb.github.io/Obsidian-ZettelFlow/actions/Tags";
+  purpose = "Add Obsidian tags to the note.";
+
   component(props: WrappedActionBuilderProps) {
     return <TagsWrapper {...props} />;
   }

src/actions/taskManagement/TaskManagementAction.tsx

@@ -18,6 +18,11 @@ export class TaskManagementAction extends CustomZettelAction {
 
   settings = taskManagementSettings;
 
+  link =
+    "https://rafaelgb.github.io/Obsidian-ZettelFlow/actions/TaskManagement";
+  purpose =
+    "Rollover unfinished tasks from one/multiple notes to the created/modified one.";
+
   getIcon(): string {
     return TaskManagementAction.ICON;
   }

src/architecture/api/CustomZettelAction.tsx

@@ -15,6 +15,8 @@ export abstract class CustomZettelAction implements ICustomZettelAction {
   abstract id: string;
   abstract defaultAction: Action;
   abstract settings: ActionSetting;
+  abstract link: string;
+  abstract purpose: string;
   async execute(_: ExecuteInfo) {
     // Do nothing by default
   }

src/styles/components/actionAddMenu.scss

@@ -0,0 +1,148 @@
+.zettelkasten-flow__actions-management-add {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+    padding: 10px 20px;
+    flex-direction: column;
+}
+
+.zettelkasten-flow__actions-management-add-button-active,
+.zettelkasten-flow__actions-management-add-button {
+    color: var(--text-normal);
+    width: 35px;
+    height: 35;
+    border: none;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s;
+    font-size: 24px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.zettelkasten-flow__actions-management-add-button {
+    background-color: var(--background-modifier-info);
+}
+
+.zettelkasten-flow__actions-management-add-button-active {
+    background-color: var(--background-modifier-success);
+    transform: rotate(45deg);
+}
+
+.zettelkasten-flow__actions-management-add-menu,
+.zettelkasten-flow__actions-management-add-menu-show {
+    background-color: var(--background-secondary);
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    min-width: 600px;
+    margin-top: 20px;
+    min-height: 300px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transition: opacity 0.3s, max-height 0.3s;
+}
+
+.zettelkasten-flow__actions-management-add-menu {
+    opacity: 0;
+    max-height: 0;
+}
+
+.zettelkasten-flow__actions-management-add-menu-show{
+    opacity: 1;
+    max-height: 1000px;
+}
+
+.zettelkasten-flow__actions-management-add-menu-search {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid var(--background-modifier-border);
+    margin-bottom: 10px;
+    font-size: 16px;
+}
+
+.zettelkasten-flow__actions-management-add-card {
+    background-color: var(--background-primary);
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.3s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 10px;
+    flex: 1;
+    /* Para que crezca verticalmente */
+}
+
+.zettelkasten-flow__actions-management-add-card:hover {
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+.zettelkasten-flow__actions-management-add-card-icon {
+    margin-bottom: 10px;
+}
+
+.zettelkasten-flow__actions-management-add-card-header {
+    width: 100%;
+    text-align: center;
+}
+
+.zettelkasten-flow__actions-management-add-card-header label {
+    font-weight: bold;
+    font-size: 18px;
+}
+
+.zettelkasten-flow__actions-management-add-card-link {
+    text-decoration: none;
+    color: var(--text-accent);
+    font-size: 14px;
+    margin-top: 5px;
+    display: inline-block;
+}
+
+.zettelkasten-flow__actions-management-add-card-body {
+    font-size: 14px;
+    color: var(--text-muted);
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-height: 3em;
+    line-height: 1.5em;
+}
+
+.zettelkasten-flow__actions-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: space-between;
+}
+
+.zettelkasten-flow__actions-list>.zettelkasten-flow__actions-management-add-card {
+    flex: 1 1 calc(33.333% - 10px);
+    /* Tres columnas */
+    max-width: calc(33.333% - 10px);
+    /* Tres columnas */
+}
+
+@media (max-width: 600px) {
+    .zettelkasten-flow__actions-management-add {
+        flex-direction: column;
+    }
+
+    .zettelkasten-flow__actions-list {
+        flex-direction: column;
+    }
+
+
+    .zettelkasten-flow__actions-list>.zettelkasten-flow__actions-management-add-card {
+        flex: 1 1 100%;
+        max-width: 100%;
+    }
+}

src/styles/main.scss

@@ -24,6 +24,7 @@
 @import 'components/input.scss';
 @import 'components/selector.scss';
 @import 'components/progressBar.scss';
+@import 'components/actionAddMenu.scss';
 
 /* This section warning the user with red tones */
 .zettelkasten-flow__settings-developer-section {
@@ -162,32 +163,4 @@
 .zettelkasten-flow__welcome-tutorial li {
     /* space between list items */
     padding-bottom: 0.35rem;
-}
-
-/********************
-*   ACTION MANAGEMENT
-*********************/
-.zettelkasten-flow__actions-management-add {
-    background-color: var(--background-secondary);
-    color: var(--text-normal);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 10px;
-    padding: 10px 20px;
-    border-radius: 5px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    transition: background-color 0.3s, box-shadow 0.3s;
-    width: 100%;
-}
-
-.zettelkasten-flow__actions-management-add:hover {
-    background-color: var(--background-modifier-success);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-@media (max-width: 600px) {
-    .zettelkasten-flow__actions-management-add {
-        flex-direction: column;
-    }
 }

src/zettelkasten/modals/handlers/components/actionsManagment/ActionAccordion.tsx

@@ -8,20 +8,6 @@ import { Droppable, useDragHandle } from "architecture/components/dnd";
 import { ACTIONS_ACCORDION_DND_ID } from "../shared/Identifiers";
 import { v4 as uuid4 } from "uuid";
 
-const URL = "https://rafaelgb.github.io/Obsidian-ZettelFlow/actions/";
-const ACTION_LABEL_URL: Record<string, string> = {
-  script: "Script",
-  prompt: "Prompt",
-  number: "Number",
-  selector: "Selector",
-  cssclasses: "CssClasses",
-  tags: "Tags",
-  checkbox: "Checkbox",
-  calendar: "Calendar",
-  backlink: "Backlink",
-  "task-management": "TaskManagement",
-};
-
 export function ActionAccordion(props: ActionAccordionProps) {
   const { action, onRemove, index } = props;
   const [accordionOpen, setAccordionOpen] = useState(false);
@@ -59,7 +45,7 @@ export function ActionAccordion(props: ActionAccordionProps) {
         <div className={c("accordion-header")}>
           <div className={c("accordion-header-info")}>
             <a
-              href={`${URL}${ACTION_LABEL_URL[action.type] || action.type}`}
+              href={`${actionsStore.getAction(action.type).link}`}
               style={{ color: "inherit", textDecoration: "none" }}
               title={`${action.type} documentation`}
               className={c("accordion-header-label")}