Add release notes modal

Author: wong2

package.json

@@ -57,6 +57,7 @@
     "browser-image-compression": "^2.0.2",
     "cachified": "^3.5.4",
     "clsx": "^2.0.0",
+    "compare-versions": "^6.1.0",
     "cookie": "^0.6.0",
     "dayjs": "^1.11.10",
     "eventsource-parser": "^1.1.1",

src/app/components/Dialog.tsx

@@ -38,15 +38,15 @@ const Dialog: FC<PropsWithChildren<Props>> = (props) => {
           >
             <HeadlessDialog.Panel
               className={cx(
-                'mx-auto rounded-3xl bg-primary-background shadow-2xl max-h-full overflow-hidden flex flex-col',
+                'mx-auto rounded-2xl bg-primary-background shadow-2xl max-h-full overflow-hidden flex flex-col',
                 props.className,
               )}
             >
               {props.title ? (
                 <HeadlessDialog.Title
                   className={cx(
                     !props.borderless && 'border-b',
-                    'border-solid border-primary-border flex flex-row justify-center items-center py-4 px-5',
+                    'border-solid border-primary-border flex flex-row justify-center items-center py-3 px-5',
                   )}
                 >
                   <span className="ml-auto" />

src/app/components/Layout.tsx

@@ -1,9 +1,10 @@
 import { Outlet } from '@tanstack/react-router'
 import { useAtomValue } from 'jotai'
 import { followArcThemeAtom, themeColorAtom } from '~app/state'
+import ReleaseNotesModal from './Modals/ReleaseNotesModal'
 import DiscountModal from './Premium/DiscountModal'
-import Sidebar from './Sidebar'
 import PremiumModal from './Premium/Modal'
+import Sidebar from './Sidebar'
 
 function Layout() {
   const themeColor = useAtomValue(themeColorAtom)
@@ -19,6 +20,7 @@ function Layout() {
       </div>
       <DiscountModal />
       <PremiumModal />
+      <ReleaseNotesModal />
     </main>
   )
 }

src/app/components/Modals/ReleaseNotesModal.tsx

@@ -0,0 +1,28 @@
+import { useAtom } from 'jotai'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { releaseNotesAtom } from '~app/state'
+import Dialog from '../Dialog'
+
+const ReleaseNotesModal: FC = () => {
+  const { t } = useTranslation()
+  const [notes, setNotes] = useAtom(releaseNotesAtom)
+  return (
+    <Dialog title={t('Recent Updates')} open={notes.length > 0} onClose={() => setNotes([])} className="w-[600px]">
+      <div className="flex flex-col gap-3 px-5 py-5">
+        {notes.map((note, i) => {
+          return (
+            <div key={i} className="flex flex-row gap-2 items-center">
+              <div className="flex-none rounded-full p-1 text-green-400 bg-green-400/10">
+                <div className="h-2 w-2 rounded-full bg-current" />
+              </div>
+              <span className="text-primary-text font-medium">{t(note)}</span>
+            </div>
+          )
+        })}
+      </div>
+    </Dialog>
+  )
+}
+
+export default ReleaseNotesModal

src/app/components/Sidebar/index.tsx

@@ -9,12 +9,13 @@ import feedbackIcon from '~/assets/icons/feedback.svg'
 import githubIcon from '~/assets/icons/github.svg'
 import settingIcon from '~/assets/icons/setting.svg'
 import themeIcon from '~/assets/icons/theme.svg'
-import logo from '~/assets/santa-logo.png'
 import minimalLogo from '~/assets/minimal-logo.svg'
+import logo from '~/assets/santa-logo.png'
 import { cx } from '~/utils'
 import { useEnabledBots } from '~app/hooks/use-enabled-bots'
-import { showDiscountModalAtom, sidebarCollapsedAtom } from '~app/state'
+import { releaseNotesAtom, showDiscountModalAtom, sidebarCollapsedAtom } from '~app/state'
 import { getPremiumActivation } from '~services/premium'
+import { checkReleaseNotes } from '~services/release-notes'
 import * as api from '~services/server-api'
 import { getAppOpenTimes, getPremiumModalOpenTimes } from '~services/storage/open-times'
 import GuideModal from '../GuideModal'
@@ -40,19 +41,25 @@ function Sidebar() {
   const [themeSettingModalOpen, setThemeSettingModalOpen] = useState(false)
   const enabledBots = useEnabledBots()
   const setShowDiscountModal = useSetAtom(showDiscountModalAtom)
+  const setReleaseNotes = useSetAtom(releaseNotesAtom)
 
   useEffect(() => {
-    Promise.all([getAppOpenTimes(), getPremiumModalOpenTimes()]).then(async ([appOpenTimes, premiumModalOpenTimes]) => {
-      if (getPremiumActivation()) {
-        return
-      }
-      const { show, campaign } = await api.checkDiscount({ appOpenTimes, premiumModalOpenTimes })
-      if (show) {
-        setShowDiscountModal(true)
-      } else if (campaign) {
-        setShowDiscountModal(campaign)
-      }
-    })
+    Promise.all([getAppOpenTimes(), getPremiumModalOpenTimes(), checkReleaseNotes()]).then(
+      async ([appOpenTimes, premiumModalOpenTimes, releaseNotes]) => {
+        if (!getPremiumActivation()) {
+          const { show, campaign } = await api.checkDiscount({ appOpenTimes, premiumModalOpenTimes })
+          if (show) {
+            setShowDiscountModal(true)
+            return
+          }
+          if (campaign) {
+            setShowDiscountModal(campaign)
+            return
+          }
+        }
+        setReleaseNotes(releaseNotes)
+      },
+    )
   }, [])
 
   return (

src/app/i18n/locales/japanese.json

@@ -96,5 +96,7 @@
   "Webapp mode uses your login session in current browser": "Webアプリモードでは、現在のブラウザでのログインセッションが使用されます",
   "Your keys are stored locally": "キーはローカルに保存されます",
   "Login to Claude.ai": "Claude.aiにログインする",
-  "Login to Bard": "Bardにログインする"
+  "Login to Bard": "Bardにログインする",
+  "Recent Updates": "最近の更新",
+  "Added a separate Gemini Pro bot, can be enabled in the settings": "独立したGemini Proボットを追加しました。設定で有効にできます"
 }

src/app/i18n/locales/simplified-chinese.json

@@ -97,5 +97,7 @@
   "Webapp mode uses your login session in current browser": "Webapp模式会使用当前浏览器中的登录状态",
   "Your keys are stored locally": "您的key只会保存在本地",
   "Login to Claude.ai": "登录Claude.ai",
-  "Login to Bard": "登录Bard"
+  "Login to Bard": "登录Bard",
+  "Recent Updates": "最近更新",
+  "Added a separate Gemini Pro bot, can be enabled in the settings": "添加了Gemini Pro，可在设置中启用"
 }

src/app/state/index.ts

@@ -31,3 +31,4 @@ export const followArcThemeAtom = atomWithStorage('followArcTheme', false)
 export const sidePanelBotAtom = atomWithStorage<BotId>('sidePanelBot', 'chatgpt')
 export const showDiscountModalAtom = atom<false | true | Campaign>(false)
 export const showPremiumModalAtom = atom<false | true | FeatureId>(false)
+export const releaseNotesAtom = atom<string[]>([])

src/services/release-notes.ts

@@ -0,0 +1,23 @@
+import { compareVersions } from 'compare-versions'
+import Browser from 'webextension-polyfill'
+import { getVersion } from '~utils'
+
+const RELEASE_NOTES = [
+  {
+    version: '1.45.0',
+    notes: ['Added a separate Gemini Pro bot, can be enabled in the settings'],
+  },
+]
+
+export async function checkReleaseNotes(): Promise<string[]> {
+  const version = getVersion()
+  const { lastCheckReleaseNotesVersion } = await Browser.storage.sync.get('lastCheckReleaseNotesVersion')
+  Browser.storage.sync.set({ lastCheckReleaseNotesVersion: version })
+  if (!lastCheckReleaseNotesVersion) {
+    return []
+  }
+  return RELEASE_NOTES.slice(0, 3)
+    .filter(({ version: v }) => compareVersions(v, lastCheckReleaseNotesVersion) > 0)
+    .map(({ notes }) => notes)
+    .flat()
+}

yarn.lock

@@ -2498,6 +2498,7 @@ __metadata:
     cachified: "npm:^3.5.4"
     chrome-types: "npm:^0.1.240"
     clsx: "npm:^2.0.0"
+    compare-versions: "npm:^6.1.0"
     cookie: "npm:^0.6.0"
     dayjs: "npm:^1.11.10"
     eslint: "npm:^8.53.0"
@@ -2717,6 +2718,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"compare-versions@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "compare-versions@npm:6.1.0"
+  checksum: 5378edc8a53ac98ed907da463e1d6c26f1ed2664006d6a0d54bbdf7f046a36c43e244740854fc0edfc1e09253b9a0b7c98d1282dfee9f6f1a87199599f611218
+  languageName: node
+  linkType: hard
+
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"