[Simple Reminder] Update the UI when no reminders are active (raycast…

…#12368) * fix: update the UI when no reminders are actibe * Update menubar on changes * Update CHANGELOG.md and optimise images --------- Co-authored-by: Per Nielsen Tikær <[email protected]> Co-authored-by: raycastbot <[email protected]>
comoser · May 16, 2024 · 90b0d52 · 90b0d52
1 parent c0c28a7
commit 90b0d52
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 16 deletions.
diff --git a/extensions/simple-reminder/CHANGELOG.md b/extensions/simple-reminder/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Simple Reminder Changelog
 
+## [Reminder Menu Bar] - 2024-05-15
+
+- Add empty reminder action in reminder menu bar to show the user that no reminders are set and that they can add a new reminder
+- Add a title to the reminder menu bar showing the next reminder coming up
+- Reminder title in the menu bar will be shown as distance when 2 or less are remaining (e.g. daily in 5 minutes) 
+- Change the icon in the menu bar to reflect the system theme preference
+
 ## [Reminder Menu Bar] - 2024-05-07
 
 - Add a menu bar command to check the reminder list in the macOS menu bar

diff --git a/extensions/simple-reminder/assets/menu-bar-logo.png b/extensions/simple-reminder/assets/menu-bar-logo.png
diff --git a/extensions/simple-reminder/assets/[email protected] b/extensions/simple-reminder/assets/[email protected]
diff --git a/extensions/simple-reminder/package-lock.json b/extensions/simple-reminder/package-lock.json
diff --git a/extensions/simple-reminder/package.json b/extensions/simple-reminder/package.json
@@ -59,8 +59,8 @@
     }
   ],
   "dependencies": {
-    "@raycast/api": "^1.69.3",
-    "@raycast/utils": "^1.13.3",
+    "@raycast/api": "^1.73.3",
+    "@raycast/utils": "^1.15.0",
     "chrono-node": "^2.6.3",
     "natural": "^6.2.0",
     "date-fns": "^3.6.0"

diff --git a/extensions/simple-reminder/src/handlers/createNewReminder.ts b/extensions/simple-reminder/src/handlers/createNewReminder.ts
@@ -1,7 +1,8 @@
-import { Reminder } from "../types/reminder";
 import { LocalStorage, showToast, Toast } from "@raycast/api";
+import { Reminder } from "../types/reminder";
 import { dateSortPredicate } from "../utils/dateSortPredicate";
 import Style = Toast.Style;
+import { updateMenubar } from "../utils/updateMenubar";
 
 type CreateNewReminderProps = {
   reminder: Reminder;
@@ -21,4 +22,5 @@ export async function createNewReminder(props: CreateNewReminderProps) {
   await LocalStorage.setItem(props.reminder.id, JSON.stringify(props.reminder));
   props.setSearchText("");
   await showToast(Style.Success, "Reminder set", "When the time is right, we'll notify you!");
+  await updateMenubar();
 }
diff --git a/extensions/simple-reminder/src/handlers/deleteExistingReminder.ts b/extensions/simple-reminder/src/handlers/deleteExistingReminder.ts
@@ -2,6 +2,7 @@ import { Alert, Color, confirmAlert, Icon, LocalStorage, showToast, Toast } from
 import { Reminder } from "../types/reminder";
 import ActionStyle = Alert.ActionStyle;
 import Style = Toast.Style;
+import { updateMenubar } from "../utils/updateMenubar";
 
 type DeleteReminderProps = {
   reminderId: string;
@@ -31,5 +32,6 @@ export async function deleteExistingReminder(props: DeleteReminderProps) {
     props.setReminders(props.existingReminders.filter((existingReminder) => existingReminder.id !== props.reminderId));
     await LocalStorage.removeItem(props.reminderId);
     await showToast(Style.Success, "Reminder deleted", "This reminder will no longer pester you!");
+    await updateMenubar();
   }
 }
diff --git a/extensions/simple-reminder/src/handlers/setRecurrenceForReminder.ts b/extensions/simple-reminder/src/handlers/setRecurrenceForReminder.ts
@@ -1,6 +1,7 @@
-import { LocalStorage } from "@raycast/api";
+import { LocalStorage, showToast, Toast } from "@raycast/api";
 import { Frequency } from "../types/frequency";
 import { Reminder } from "../types/reminder";
+import Style = Toast.Style;
 
 type SetRecurrenceForReminderProps = {
   reminderId: string;
@@ -14,4 +15,5 @@ export async function setRecurrenceForReminder(props: SetRecurrenceForReminderPr
   reminder.frequency = props.frequency;
   props.setReminders([...props.existingReminders]);
   await LocalStorage.setItem(reminder.id, JSON.stringify(reminder));
+  await showToast(Style.Success, "Recurrence set", `Happening ${props.frequency}`);
 }
diff --git a/extensions/simple-reminder/src/reminderMenuBar.tsx b/extensions/simple-reminder/src/reminderMenuBar.tsx
@@ -1,9 +1,21 @@
-import { Action, MenuBarExtra, Clipboard } from "@raycast/api";
-import { hasFrequencyPredicate, hasNoFrequencyPredicate } from "./utils/arrayPredicates";
+import { MenuBarExtra, Clipboard, open, Cache } from "@raycast/api";
 import { useMemo, useState } from "react";
+import { formatDistance } from "date-fns/formatDistance";
 import { useFetchStoredReminders } from "./hooks/useFetchStoredReminders";
+import { hasFrequencyPredicate, hasNoFrequencyPredicate } from "./utils/arrayPredicates";
+import { getNextReminder } from "./utils/getNextReminder";
 import { Reminder } from "./types/reminder";
 
+const addReminderDeeplink = `raycast://extensions/comoser/simple-reminder/index`;
+const raycastApplication = { name: "Raycast", path: "/Applications/Raycast.app" };
+const TWO_HOURS_IN_MS = 2 * 60 * 60 * 1000;
+
+function getDateTimeStringForMenuBarTitle(date: Date): string {
+  if (date.getTime() - new Date().getTime() < TWO_HOURS_IN_MS)
+    return formatDistance(date, new Date().toLocaleString(), { addSuffix: true });
+  return date.toLocaleString();
+}
+
 export default function Command() {
   const [isLoading, setIsLoading] = useState(true);
   const [reminders, setReminders] = useState<Reminder[]>([]);
@@ -12,12 +24,30 @@ export default function Command() {
 
   useFetchStoredReminders(setReminders, setIsLoading);
 
+  const showNextReminderInMenuBarTitle = () => {
+    const nextReminder = getNextReminder(reminders);
+    if (!nextReminder) return "No reminders set";
+    return `${nextReminder.topic} ${getDateTimeStringForMenuBarTitle(nextReminder.date)}`;
+  };
+
   const onCopyReminderTopicAction = (reminderTopic: string) => {
     return async () => await Clipboard.copy(reminderTopic);
   };
 
+  const onOpenAddReminderAction = () => {
+    void open(addReminderDeeplink, raycastApplication);
+  };
+
   return (
-    <MenuBarExtra isLoading={isLoading} icon="logo.png" tooltip="Simple Reminder">
+    <MenuBarExtra
+      isLoading={isLoading}
+      icon="menu-bar-logo.png"
+      title={showNextReminderInMenuBarTitle()}
+      tooltip="Simple Reminder"
+    >
+      {!isLoading && !recurrentReminders.length && !otherReminders.length && (
+        <MenuBarExtra.Item title="Add a reminder" onAction={onOpenAddReminderAction} />
+      )}
       {recurrentReminders.length ? (
         <MenuBarExtra.Section title="Recurrent reminders">
           {recurrentReminders.map((reminder) => (

diff --git a/extensions/simple-reminder/src/utils/getNextReminder.ts b/extensions/simple-reminder/src/utils/getNextReminder.ts
@@ -0,0 +1,5 @@
+import { Reminder } from "../types/reminder";
+
+export function getNextReminder(reminders: Reminder[]): Reminder | undefined {
+  return reminders.find((reminder) => reminder.date.getTime() > new Date().getTime());
+}
diff --git a/extensions/simple-reminder/src/utils/updateMenubar.ts b/extensions/simple-reminder/src/utils/updateMenubar.ts
@@ -0,0 +1,9 @@
+import { launchCommand, LaunchType } from "@raycast/api";
+
+export async function updateMenubar() {
+  try {
+    await launchCommand({ name: "reminderMenuBar", type: LaunchType.Background });
+  } catch {
+    // Silent fail, since this will automatically update in 1 minute or when the user clicks the reminder menu bar
+  }
+}