feat: support task section title clickable & add openInRightSidebar s…

…etting
ahonn · Oct 13, 2022 · e995860 · e995860
1 parent c37f1c0
commit e995860
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 6 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -50,6 +50,7 @@ function App() {
   useEffect(() => {
     if (visible) {
       inputRef.current?.focus();
+      refreshAll();
 
       const keydownHandler = (ev: KeyboardEvent) => {
         if (ev.key === 'Escape') {
@@ -61,7 +62,7 @@ function App() {
         document.removeEventListener('keydown', keydownHandler);
       };
     }
-  }, [visible]);
+  }, [visible, refreshAll]);
 
   useEffect(() => {
     if (themeMode === 'dark') {

diff --git a/src/api.ts b/src/api.ts
@@ -23,11 +23,25 @@ export async function toggleTaskStatus(
   );
 }
 
-export function openTask(task: TaskEntityObject) {
+interface IOpenTaskOptions {
+  openInRightSidebar?: boolean;
+}
+
+export function openTask(task: TaskEntityObject, opts?: IOpenTaskOptions) {
   const { uuid } = task;
+  if (opts?.openInRightSidebar) {
+    return window.logseq.Editor.openInRightSidebar(uuid);
+  }
   return window.logseq.Editor.scrollToBlockInPage(task.page.name, uuid);
 }
 
+export function openTaskPage(page: TaskEntityObject['page'], opts?: IOpenTaskOptions) {
+  if (opts?.openInRightSidebar) {
+    return window.logseq.Editor.openInRightSidebar(page.uuid);
+  }
+  return window.logseq.Editor.scrollToBlockInPage(page.name, page.uuid);
+}
+
 export async function toggleTaskMarker(task: TaskEntityObject, options: IToggleOptions) {
   const { uuid, rawContent, marker } = task;
   let newMarker = marker === TaskMarker.TODO ? TaskMarker.DOING : TaskMarker.TODO;

diff --git a/src/components/TaskItem.tsx b/src/components/TaskItem.tsx
@@ -15,6 +15,7 @@ import {
   setTaskScheduled,
   toggleTaskStatus,
 } from '../api';
+import { settingsState } from '../state/settings';
 
 export interface ITaskItemProps {
   task: TaskEntityObject;
@@ -25,6 +26,7 @@ const TaskItem: React.FC<ITaskItemProps> = (props) => {
   const { task, onChange } = props;
   const themeStyle = useRecoilValue(themeStyleState);
   const { preferredDateFormat, preferredTodo } = useRecoilValue(userConfigsState);
+  const { openInRightSidebar } = useRecoilValue(settingsState);
   const [checked, setChecked] = React.useState(task.completed);
 
   const isExpiredTask = useMemo(() => {
@@ -36,7 +38,9 @@ const TaskItem: React.FC<ITaskItemProps> = (props) => {
   }, [task.scheduled]);
 
   const openTaskBlock = () => {
-    openTask(task);
+    openTask(task, {
+      openInRightSidebar,
+    });
     window.logseq.hideMainUI();
   };
 

diff --git a/src/components/TaskSection.tsx b/src/components/TaskSection.tsx
@@ -10,6 +10,8 @@ import { tasksState } from '../state/tasks';
 import { themeStyleState } from '../state/theme';
 import { visibleState } from '../state/visible';
 import TaskItem from './TaskItem';
+import { settingsState } from '../state/settings';
+import { openTaskPage } from '../api';
 
 export enum GroupBy {
   Page,
@@ -30,6 +32,7 @@ const TaskSection: React.FC<ITaskSectionProps> = (props) => {
   const tasksLoadable = useRecoilValueLoadable(tasksState(query));
   const refresh = useRecoilRefresher_UNSTABLE(tasksState(query));
   const themeStyle = useRecoilValue(themeStyleState);
+  const { openInRightSidebar } = useRecoilValue(settingsState);
 
   useEffect(() => {
     switch (tasksLoadable.state) {
@@ -70,9 +73,17 @@ const TaskSection: React.FC<ITaskSectionProps> = (props) => {
       </h2>
       <div>
         {(Object.entries(taskGroups) ?? []).map(([name, tasks]) => {
+          const [{ page }] = tasks;
           return (
             <div key={name}>
-              {name && <h3 className="py-1 text-sm text-gray-400">{name}</h3>}
+              {name && (
+                <h3
+                  className="py-1 text-sm text-gray-400 cursor-pointer"
+                  onClick={() => openTaskPage(page, { openInRightSidebar })}
+                >
+                  {name}
+                </h3>
+              )}
               {(tasks ?? []).map((task) => (
                 <TaskItem key={task.uuid} task={task} onChange={refresh} />
               ))}

diff --git a/src/settings.ts b/src/settings.ts
@@ -40,7 +40,14 @@ const settings: SettingSchemaDesc[] = [
     description: '🌚  secondary color of dark mode!',
     default: '#002B37',
     inputAs: 'color'
-  }
+  },
+  {
+    key: 'openInRightSidebar',
+    type: 'boolean',
+    title: 'Open task in right sidebar',
+    description: '👉 open task in the right sidebar',
+    default: false,
+  },
 ];
 
 export default settings;
diff --git a/src/state/settings.ts b/src/state/settings.ts
@@ -6,6 +6,7 @@ interface IPluginSettings {
   darkPrimaryBackgroundColor: string;
   darkSecondaryBackgroundColor: string;
   sectionTitleColor: string;
+  openInRightSidebar: boolean;
 }
 
 const DEFAULT_SETTINGS = {
@@ -14,10 +15,11 @@ const DEFAULT_SETTINGS = {
   lightSecondaryBackgroundColor: '#f7f7f7',
   darkPrimaryBackgroundColor: '#002B37',
   darkSecondaryBackgroundColor: '#106ba3',
+  openInRightSidebar: false,
 };
 
 const settingsChangedEffect: AtomEffect<IPluginSettings> = ({ setSelf }) => {
-  setSelf(logseq.settings as unknown as IPluginSettings);
+  setSelf({ ...logseq.settings } as unknown as IPluginSettings);
   const unlisten = logseq.onSettingsChanged((newSettings) => {
     setSelf(newSettings);
   });