From 86644e22bc2cecddf250d0d0cfb6d63f309be7a3 Mon Sep 17 00:00:00 2001
From: Callum Alpass <callumalpass@gmail.com>
Date: Sun, 29 Jun 2025 10:52:37 +1000
Subject: [PATCH] Change task-related icons and update CSS styling for improved
 UI clarity and interactivity.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Update icon usage:
  - In TaskLinkWidget.ts and TaskCard.ts, replace the default "pencil" icon with Obsidian’s built-in "ellipsis-vertical" icon.  (#80)
  - This change clarifies that the icon now represents a menu/options action rather than a direct edit.

• Adjust task card styling:
  - In task-card-bem.css, modify the top position of the recurring-indicator from 6px to 8px for better vertical alignment.

• Refine task inline widget styles:
  - In task-inline-widget.css, set the opacity of the pencil icon from 0.4 to 0, effectively hiding it since it’s no longer used for editing.
  - Add a hover effect for completed task titles, enhancing visual feedback by changing the text color and opacity.
  - Enhance the hover style for task titles by adding a pointer cursor, transition effect, slight padding, and a border-radius to improve the interactive appearance.

These adjustments aim to streamline the UI elements and provide clearer interactive cues for users.
---
 src/editor/TaskLinkWidget.ts  |  2 +-
 src/ui/TaskCard.ts            |  4 ++--
 styles/task-card-bem.css      |  2 +-
 styles/task-inline-widget.css | 19 ++++++++++++++++++-
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/editor/TaskLinkWidget.ts b/src/editor/TaskLinkWidget.ts
index 4fb76998..c4edff57 100644
--- a/src/editor/TaskLinkWidget.ts
+++ b/src/editor/TaskLinkWidget.ts
@@ -348,7 +348,7 @@ export class TaskLinkWidget extends WidgetType {
             attr: { 'title': 'Task options' },
             text: ''
         });
-        setIcon(pencilIcon, 'pencil');
+        setIcon(pencilIcon, 'ellipsis-vertical');
         
         // Store data for interactions
         container.dataset.taskPath = this.taskInfo.path;
diff --git a/src/ui/TaskCard.ts b/src/ui/TaskCard.ts
index e12dba04..8292747f 100644
--- a/src/ui/TaskCard.ts
+++ b/src/ui/TaskCard.ts
@@ -253,8 +253,8 @@ export function createTaskCard(task: TaskInfo, plugin: TaskNotesPlugin, options:
         }
     });
     
-    // Use Obsidian's built-in pencil icon
-    setIcon(contextIcon, 'pencil');
+    // Use Obsidian's built-in ellipsis-vertical icon
+    setIcon(contextIcon, 'ellipsis-vertical');
     
     contextIcon.addEventListener('click', async (e) => {
         e.stopPropagation();
diff --git a/styles/task-card-bem.css b/styles/task-card-bem.css
index 73c651a0..7673ad67 100644
--- a/styles/task-card-bem.css
+++ b/styles/task-card-bem.css
@@ -217,7 +217,7 @@
 
 .tasknotes-plugin .task-card__recurring-indicator {
     position: absolute;
-    top: 6px;
+    top: 8px;
     right: 26px;
     width: 16px;
     height: 16px;
diff --git a/styles/task-inline-widget.css b/styles/task-inline-widget.css
index 815c1a63..6d4c4804 100644
--- a/styles/task-inline-widget.css
+++ b/styles/task-inline-widget.css
@@ -157,7 +157,7 @@
 
 /* Pencil icon styling */
 .tasknotes-plugin .task-inline-preview__pencil {
-    opacity: 0.4;
+    opacity: 0;
     cursor: pointer;
     display: inline-block;
     width: 12px;
@@ -200,6 +200,12 @@
     color: var(--text-muted);
 }
 
+/* Completed task title hover effect */
+.tasknotes-plugin .task-inline-preview--completed .task-inline-preview__title:hover {
+    color: var(--interactive-accent);
+    opacity: 0.9;
+}
+
 .tasknotes-plugin span.task-inline-preview.task-inline-preview--completed,
 .tasknotes-plugin.task-inline-preview.task-inline-preview--completed,
 .tasknotes-plugin .task-inline-preview--completed {
@@ -303,6 +309,17 @@
     max-width: 250px; /* Give more room for task titles */
     flex-shrink: 1; /* Allow shrinking if needed */
     vertical-align: middle;
+    cursor: pointer;
+    transition: color 0.15s ease;
+    border-radius: 2px;
+    padding: 1px 2px;
+    margin: -1px -2px;
+}
+
+/* Task title hover effect */
+.tasknotes-plugin .task-inline-preview__title:hover {
+    color: var(--interactive-accent);
+    background-color: var(--background-modifier-hover);
 }
 
 /* Priority indicator */