feat(agenda3): ✨ support plugin mode

haydenull · Nov 6, 2023 · 50eed1a · 50eed1a
1 parent f0bba8f
commit 50eed1a
Show file tree

Hide file tree

Showing 13 changed files with 308 additions and 198 deletions.
diff --git a/.env.plugin b/.env.plugin
@@ -0,0 +1 @@
+VITE_MODE=plugin
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "logseq-plugin-agenda",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.2",
   "main": "dist/index.html",
   "private": true,
   "logseq": {

diff --git a/src/apps/MainApp.tsx b/src/apps/MainApp.tsx
@@ -7,7 +7,6 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom'
 import Sider from '@/components/Sider'
 import { MENUS } from '@/constants/elements'
 import { subscriptionSchedulesAtom } from '@/model/schedule'
-import Dashboard from '@/pages/NewDashboard'
 import ProjectDetail from '@/pages/ProjectDetail'
 import { getInitialSettings } from '@/util/baseInfo'
 import { ANTD_THEME_CONFIG, DEFAULT_SETTINGS } from '@/util/constants'
@@ -17,7 +16,9 @@ import useTheme from '../hooks/useTheme'
 import { fullEventsAtom, journalEventsAtom, projectEventsAtom } from '../model/events'
 import { getInternalEvents } from '../util/events'
 
-const MainApp = () => {
+const MainApp: React.FC<{
+  defaultRoute?: string
+}> = ({ defaultRoute }) => {
   // TODO: 使用 only-write 减少重新渲染
   const [, setSubscriptionSchedules] = useAtom(subscriptionSchedulesAtom)
 
@@ -31,27 +32,36 @@ const MainApp = () => {
   const homePageElement = MENUS.find((item) => item.value === homePage)?.element
   const menus = logKey?.enabled ? MENUS : MENUS.filter((item) => item.value !== 'dailyLog')
 
-  // useEffect(() => {
-  //   async function fetchSchedules() {
-  //     const res = await getInternalEvents()
-  //     if (res) {
-  //       const { fullEvents, journalEvents, projectEventsMap } = res
-  //       setFullEvents(fullEvents)
-  //       setJournalEvents(journalEvents)
-  //       setProjectEvents(projectEventsMap)
-  //     }
-
-  //     const { subscriptionList } = getInitialSettings()
-  //     setSubscriptionSchedules(await getSubCalendarSchedules(subscriptionList))
-  //   }
-  //   fetchSchedules()
-  // }, [])
+  useEffect(() => {
+    async function fetchSchedules() {
+      const res = await getInternalEvents()
+      if (res) {
+        const { fullEvents, journalEvents, projectEventsMap } = res
+        setFullEvents(fullEvents)
+        setJournalEvents(journalEvents)
+        setProjectEvents(projectEventsMap)
+      }
+
+      const { subscriptionList } = getInitialSettings()
+      setSubscriptionSchedules(await getSubCalendarSchedules(subscriptionList))
+    }
+    fetchSchedules()
+  }, [])
 
   return (
     <ConfigProvider theme={ANTD_THEME_CONFIG[theme]}>
       <StyleProvider hashPriority="high">
         <main className="w-screen h-screen flex">
-          <Dashboard />
+          <MemoryRouter>
+            <Sider defaultRoute={defaultRoute} menus={menus} />
+            <Routes>
+              <Route path="/" element={homePageElement} />
+              {menus.map((item) => (
+                <Route path={item.path} element={item.element} key={item.value} />
+              ))}
+              <Route path="/project/:projectId" element={<ProjectDetail />} />
+            </Routes>
+          </MemoryRouter>
         </main>
       </StyleProvider>
     </ConfigProvider>

diff --git a/src/apps/NewMainApp.tsx b/src/apps/NewMainApp.tsx
@@ -0,0 +1,22 @@
+import { StyleProvider } from '@ant-design/cssinjs'
+import { CloseOutlined } from '@ant-design/icons'
+import { Button, ConfigProvider } from 'antd'
+
+import Dashboard from '@/pages/NewDashboard'
+import { NEW_ANTD_THEME_CONFIG } from '@/util/constants'
+import { cn } from '@/util/util'
+
+const theme = 'green'
+const NewMainApp = () => {
+  return (
+    <ConfigProvider theme={NEW_ANTD_THEME_CONFIG[theme]}>
+      <StyleProvider hashPriority="high">
+        <main className="w-screen h-screen flex flex-col">
+          <Dashboard />
+        </main>
+      </StyleProvider>
+    </ConfigProvider>
+  )
+}
+
+export default NewMainApp
diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
@@ -5,18 +5,31 @@ import { useEffect } from 'react'
 
 import { type Settings, settingsAtom } from '@/newModel/settings'
 
+const isPlugin = import.meta.env.VITE_MODE === 'plugin'
 const useSettings = () => {
   const [settings, setAtomSettings] = useAtom(settingsAtom)
   const { set: setLocalStorage, value: valueLocalStorage } = useLocalStorageValue<Settings>('settings')
 
   const setSettings = (key: string, value: string | boolean | undefined) => {
     const newSettings = set(clone(settings), key, value)
-    setLocalStorage(newSettings)
     setAtomSettings(newSettings)
+    if (isPlugin) {
+      const oldSettings = logseq.settings ?? {}
+      logseq.updateSettings({
+        ...oldSettings,
+        ...newSettings,
+      })
+    } else {
+      setLocalStorage(newSettings)
+    }
   }
   // initial settings
   useEffect(() => {
-    setAtomSettings(valueLocalStorage ?? {})
+    if (isPlugin) {
+      setAtomSettings((logseq.settings as Settings) ?? {})
+    } else {
+      setAtomSettings(valueLocalStorage ?? {})
+    }
   }, [])
   return {
     settings,

diff --git a/src/main.tsx b/src/main.tsx
@@ -25,6 +25,7 @@ import initializeTodoist from '@/register/todoist'
 import { getInitialSettings, initializeSettings } from '@/util/baseInfo'
 import { listenEsc, log, managePluginTheme, setPluginTheme, toggleAppTransparent } from '@/util/util'
 
+import NewMainApp from './apps/NewMainApp'
 import TaskListApp from './apps/TaskListApp'
 import i18n from './locales/i18n'
 import './style/index.less'
@@ -58,7 +59,7 @@ if (import.meta.env.VITE_MODE === 'web') {
     settings: window.mockSettings,
   })
   // logseq.provideStyle(`.drawer[data-drawer-name="agenda"] {display: none;}`)
-  renderApp()
+  renderApp(true)
   // renderModalApp({ type: 'createTask' })
   // renderPomodoroApp('pomodoro')
   // renderModalApp({ type: 'addDailyLog' })
@@ -82,7 +83,17 @@ if (import.meta.env.VITE_MODE === 'web') {
     // ===== logseq plugin model start =====
     logseq.provideModel({
       show() {
-        renderApp()
+        renderApp(false)
+        managePluginTheme()
+        logseq.showMainUI()
+        window.isMounted = false
+      },
+      showAgenda3() {
+        if (window.isMounted !== true) {
+          renderApp(true)
+          window.isMounted = true
+        }
+        setPluginTheme('light')
         logseq.showMainUI()
       },
       hide() {
@@ -104,8 +115,12 @@ if (import.meta.env.VITE_MODE === 'web') {
       key: 'logseq-plugin-agenda',
       template: '<a data-on-click="show" class="button"><i class="ti ti-comet"></i></a>',
     })
+    logseq.App.registerUIItem('toolbar', {
+      key: 'Agenda-beta',
+      template: '<a data-on-click="showAgenda3" class="button" style="color: orange;"><i class="ti ti-comet"></i></a>',
+    })
     logseq.on('ui:visible:changed', (e) => {
-      if (!e.visible && window.currentApp !== 'pomodoro') {
+      if (!e.visible && window.currentApp !== 'pomodoro' && window.currentApp !== 'agenda3App') {
         root && root.unmount()
       }
     })
@@ -170,22 +185,30 @@ if (import.meta.env.VITE_MODE === 'web') {
   })
 }
 
-async function renderApp() {
-  window.currentApp = 'app'
-  // togglePomodoro(false)
-  // toggleAppTransparent(false)
-  // let defaultRoute = ''
-  // const page = await logseq.Editor.getCurrentPage()
-  // const { projectList = [] } = getInitialSettings()
-  // if (projectList.some((project) => Boolean(project.id) && project.id === page?.originalName)) {
-  //   defaultRoute = `project/${encodeURIComponent(page?.originalName)}`
-  // }
+async function renderApp(isVersion3 = false) {
+  window.currentApp = isVersion3 ? 'agenda3App' : 'app'
+  togglePomodoro(false)
+  toggleAppTransparent(false)
+  let defaultRoute = ''
+  const page = await logseq.Editor.getCurrentPage()
+  const { projectList = [] } = getInitialSettings()
+  if (projectList.some((project) => Boolean(project.id) && project.id === page?.originalName)) {
+    defaultRoute = `project/${encodeURIComponent(page?.originalName)}`
+  }
+
+  const html = document.querySelector('html')
+  const body = document.querySelector('body')
+  if (isVersion3) {
+    html?.classList.add('agenda3')
+    body?.classList.add('agenda3')
+  } else {
+    html?.classList.remove('agenda3')
+    body?.classList.remove('agenda3')
+  }
 
   root = createRoot(document.getElementById('root')!)
   root.render(
-    <React.StrictMode>
-      <MainApp />
-    </React.StrictMode>,
+    <React.StrictMode>{isVersion3 ? <NewMainApp /> : <MainApp defaultRoute={defaultRoute} />}</React.StrictMode>,
   )
 }
 

diff --git a/src/pages/NewDashboard/components/KanBan.tsx b/src/pages/NewDashboard/components/KanBan.tsx
@@ -77,8 +77,13 @@ const KanBan = (props, ref) => {
   const navToLogseqBlock = (task: AgendaTaskWithStart) => {
     if (!currentGraph) return
     const uuid = task.recurringPast ? task.id.split('_')[0] : task.id
-    // example: logseq://graph/zio?block-id=65385ad5-f4e9-4423-8595-a5e4236cc8ad
-    window.open(`logseq://graph/${currentGraph.name}?block-id=${uuid}`, '_blank')
+    if (import.meta.env.VITE_MODE === 'plugin') {
+      logseq.Editor.scrollToBlockInPage(task.project.originalName, uuid)
+      logseq.hideMainUI()
+    } else {
+      // example: logseq://graph/zio?block-id=65385ad5-f4e9-4423-8595-a5e4236cc8ad
+      window.open(`logseq://graph/${currentGraph.name}?block-id=${uuid}`, '_blank')
+    }
   }
 
   // scroll to today

diff --git a/src/pages/NewDashboard/components/MultipleView.tsx b/src/pages/NewDashboard/components/MultipleView.tsx
@@ -2,7 +2,7 @@ import { LeftOutlined, RightOutlined, SettingOutlined, UserOutlined } from '@ant
 import { Avatar, Button, Segmented, Tabs } from 'antd'
 import { useAtom } from 'jotai'
 import { useRef, useState } from 'react'
-import { FiSettings } from 'react-icons/fi'
+import { FiPower, FiSettings, FiX, FiXCircle } from 'react-icons/fi'
 import { LuCalendarDays, LuKanbanSquare } from 'react-icons/lu'
 
 import i18n from '@/locales/i18n'
@@ -110,6 +110,9 @@ const MultipleView = ({ className }: { className?: string }) => {
           <SettingsModal>
             <FiSettings className="text-lg cursor-pointer" data-umami-event="Settings Button" />
           </SettingsModal>
+          {import.meta.env.VITE_MODE === 'plugin' ? (
+            <FiXCircle className="text-lg cursor-pointer" onClick={() => logseq.hideMainUI()} />
+          ) : null}
         </div>
       </div>
       <div className="flex-1 h-0">

diff --git a/src/pages/NewDashboard/index.tsx b/src/pages/NewDashboard/index.tsx
@@ -7,6 +7,7 @@ import useAgendaTasks from '@/hooks/useAgendaTasks'
 import useNewProjects from '@/hooks/useNewProjects'
 import { appAtom } from '@/newModel/app'
 import { logseqAtom } from '@/newModel/logseq'
+import { cn } from '@/util/util'
 
 import Backlog from './components/Backlog'
 import MultipleView from './components/MultipleView'
@@ -56,7 +57,14 @@ const Dashboard = () => {
     })
   }, [])
   return (
-    <div className="flex w-screen h-screen bg-gray-100 before:absolute before:pointer-events-none before:h-[180px] before:w-[240px] before:left-1/2 before:top-1/2 before:bg-gradient-conic before:from-sky-200 before:via-blue-200 before:blur-2xl before:content-['']  before:dark:from-sky-900 before:dark:via-[#0141ff] before:dark:opacity-40">
+    <div
+      className={cn(
+        "flex w-screen h-screen bg-gray-100 before:absolute before:pointer-events-none before:h-[180px] before:w-[240px] before:left-1/2 before:top-1/2 before:bg-gradient-conic before:from-sky-200 before:via-blue-200 before:blur-2xl before:content-['']  before:dark:from-sky-900 before:dark:via-[#0141ff] before:dark:opacity-40",
+        {
+          'pt-[30px]': import.meta.env.VITE_MODE === 'plugin',
+        },
+      )}
+    >
       {/* ========== projects sidebar ========== */}
       <ProjectSidebar className="hidden" />
 
@@ -67,16 +75,8 @@ const Dashboard = () => {
       {app.view === 'calendar' ? <Backlog /> : <TimeBox onChangeType={() => setTimeBoxType('actual')} />}
 
       {/* ========== Toolbar ======== */}
-      <div></div>
+      {/* <div></div> */}
 
-      {/* ========== Float Button ========= */}
-      {/* <FloatButton.Group trigger="hover" type="primary" icon={<TbComet />}>
-        <FloatButton tooltip="Backlog" />
-        <FloatButton tooltip="Daily Log" />
-        <FloatButton tooltip="Weekly Review" />
-        <FloatButton tooltip="Analytics" />
-        <FloatButton tooltip="Settings" icon={<TbSettings />} />
-      </FloatButton.Group> */}
       <Analytics />
       <Modal
         open={connectionErrorModal}

diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
@@ -114,7 +114,9 @@ const Settings: React.FC<{
       projectList: 1,
       dailyLogTagList: 1,
     })
+    const oldSettings = logseq.settings ?? {}
     logseq.updateSettings({
+      ...oldSettings,
       calendarList: [],
       // ensure subscription list is array
       subscriptionList: [],