feat: add environment indicator

Signed-off-by: Innei <i@innei.in>
realSunyz · Jul 18, 2024 · b833889 · b833889
1 parent b99222b
commit b833889
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "build": "npm run typecheck && electron-vite build --outDir=dist && electron-forge make",
     "build:web": "vite build",
     "dev": "electron-vite dev --outDir=dist",
+    "dev:debug": "export DEBUG=true && vite --debug",
     "dev:web": "vite",
     "lint": "eslint",
     "lint:fix": "eslint --fix",

diff --git a/scripts/lib.ts b/scripts/lib.ts
@@ -2,7 +2,7 @@ import { execSync } from "node:child_process"
 
 export const getGitHash = () => {
   try {
-    execSync("git rev-parse HEAD").toString().trim()
+    return execSync("git rev-parse HEAD").toString().trim()
   } catch (e) {
     console.error("Failed to get git hash", e)
   }

diff --git a/src/renderer/src/components/common/ErrorElement.tsx b/src/renderer/src/components/common/ErrorElement.tsx
@@ -45,7 +45,7 @@ export function ErrorElement() {
       <div className="drag-region fixed inset-x-0 top-0 h-12" />
       <div className="center flex flex-col">
         <i className="i-mgc-bug-cute-re size-12 text-red-400" />
-        <h2 className="mt-12 text-2xl">
+        <h2 className="mb-4 mt-12 text-2xl">
           Sorry, the app has encountered an error
         </h2>
       </div>

diff --git a/src/renderer/src/global.d.ts b/src/renderer/src/global.d.ts
@@ -17,6 +17,7 @@ declare global {
   export const SENTRY_RELEASE: { id: string }
   export const APP_DEV_CWD: string
   export const GIT_COMMIT_SHA: string
+  export const DEBUG: boolean
   export interface Window {
     SENTRY_RELEASE: typeof SENTRY_RELEASE
   }

diff --git a/src/renderer/src/modules/app/EnvironmentIndicator.tsx b/src/renderer/src/modules/app/EnvironmentIndicator.tsx
@@ -0,0 +1,16 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@renderer/components/ui/tooltip"
+
+export const EnvironmentIndicator = () => (
+  <Tooltip>
+    <TooltipTrigger>
+      <div className="fixed bottom-0 left-0 rounded-tr bg-theme-accent px-1 py-0.5 text-xs text-white">
+        {import.meta.env.MODE}
+      </div>
+    </TooltipTrigger>
+    <TooltipContent>{import.meta.env.BASE_URL}</TooltipContent>
+  </Tooltip>
+)
diff --git a/src/renderer/src/modules/feed-column/index.tsx b/src/renderer/src/modules/feed-column/index.tsx
@@ -48,14 +48,15 @@ const useBackHome = (active: number) => {
 
 const useUnreadByView = () => {
   useAuthQuery(Queries.subscription.byView())
-  const idByView = useSubscriptionStore((state) =>
-    state.dataIdByView,
-  )
+  const idByView = useSubscriptionStore((state) => state.dataIdByView)
   const totalUnread = useFeedUnreadStore((state) => {
     const unread = {} as Record<number, number>
 
     for (const view in idByView) {
-      unread[view] = idByView[view].reduce((acc, feedId) => acc + (state.data[feedId] || 0), 0)
+      unread[view] = idByView[view].reduce(
+        (acc, feedId) => acc + (state.data[feedId] || 0),
+        0,
+      )
     }
     return unread
   })
@@ -156,7 +157,7 @@ export function FeedColumn({ children }: PropsWithChildren) {
       >
         {normalStyle && (
           <div
-            className="flex items-center gap-1 text-xl font-bold"
+            className="relative flex items-center gap-1 text-xl font-bold"
             onClick={(e) => {
               e.stopPropagation()
               navigateBackHome()
@@ -201,7 +202,13 @@ export function FeedColumn({ children }: PropsWithChildren) {
             }}
           >
             {item.icon}
-            <div className="text-[10px] font-medium leading-none">{unreadByView[index] > 99 ? <span className="-mr-0.5">99+</span> : unreadByView[index]}</div>
+            <div className="text-[10px] font-medium leading-none">
+              {unreadByView[index] > 99 ? (
+                <span className="-mr-0.5">99+</span>
+              ) : (
+                unreadByView[index]
+              )}
+            </div>
           </ActionButton>
         ))}
       </div>

diff --git a/src/renderer/src/pages/(main)/layout.tsx b/src/renderer/src/pages/(main)/layout.tsx
@@ -4,6 +4,7 @@ import { DeclarativeModal } from "@renderer/components/ui/modal/stacked/declarat
 import { NoopChildren } from "@renderer/components/ui/modal/stacked/utils"
 import { RootPortal } from "@renderer/components/ui/portal"
 import { preventDefault } from "@renderer/lib/dom"
+import { EnvironmentIndicator } from "@renderer/modules/app/EnvironmentIndicator"
 import { NetworkStatusIndicator } from "@renderer/modules/app/NetworkStatusIndicator"
 import { LoginModalContent } from "@renderer/modules/auth/LoginModalContent"
 import { FeedColumn } from "@renderer/modules/feed-column"
@@ -22,11 +23,14 @@ export function Component() {
           {APP_VERSION?.[0] === "0" && (
             <div className="pointer-events-none absolute bottom-3 w-full text-center text-xs opacity-20">
               Early Access
+              {" "}
+              {GIT_COMMIT_SHA ? `(${GIT_COMMIT_SHA.slice(0, 7).toUpperCase()})` : ""}
             </div>
           )}
           <AutoUpdater />
 
           <NetworkStatusIndicator />
+          {!import.meta.env.PROD && <EnvironmentIndicator />}
         </FeedColumn>
       </div>
       {/* NOTE: tabIndex for main element can get by `document.activeElement` */}

diff --git a/src/renderer/src/store/entry/store.ts b/src/renderer/src/store/entry/store.ts
@@ -206,6 +206,7 @@ class EntryActions {
       ...state,
       starIds: newStarIds,
     }))
+
     // Update database
     runTransactionInScope(() => {
       EntryService.upsertMany(entries)

diff --git a/src/renderer/src/store/utils/helper.ts b/src/renderer/src/store/utils/helper.ts
@@ -33,13 +33,15 @@ export const createZustandStore =
     name: string,
   ) =>
     (store: T) => {
-      const newStore = createWithEqualityFn(
-        devtools(store, {
-          enabled: import.meta.env.DEV,
-          name,
-        }),
-        shallow,
-      )
+      const newStore = import.meta.env.DEV ?
+        createWithEqualityFn(
+          devtools(store, {
+            enabled: DEBUG,
+            name,
+          }),
+          shallow,
+        ) :
+        createWithEqualityFn(store, shallow)
 
       storeMap[name] = newStore
       window.store =

diff --git a/vite.config.ts b/vite.config.ts
@@ -45,6 +45,10 @@ export default defineConfig({
     APP_NAME: JSON.stringify(pkg.name),
     APP_DEV_CWD: JSON.stringify(process.cwd()),
 
-    GIT_COMMIT_SHA: JSON.stringify(process.env.VERCEL_GIT_COMMIT_SHA || getGitHash()),
+    GIT_COMMIT_SHA: JSON.stringify(
+      process.env.VERCEL_GIT_COMMIT_SHA || getGitHash(),
+    ),
+
+    DEBUG: process.env.DEBUG === "true",
   },
 })