perf: optimize style and update deps

.gitignore

@@ -3,6 +3,7 @@ node_modules
 .output
 stats.html
 .wxt
+.million
 web-ext.config.ts
 
 *.DS_Store

eslint.config.ts

@@ -24,7 +24,7 @@ export default [
     }
   },
   {
-    ignores: ['**/.output/*', '**/.wxt/*', '**/ui/**', '**/lib/**']
+    ignores: ['**/.output/*', '**/.wxt/*', '**/ui/**', '**/lib/**', '**.million**']
   },
   {
     rules: {

package.json

@@ -65,7 +65,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "idb-keyval": "^6.2.1",
-    "lucide-react": "^0.441.0",
+    "lucide-react": "^0.445.0",
     "nanoid": "^5.0.7",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
@@ -85,26 +85,26 @@
     "trystero": "^0.20.0",
     "type-fest": "^4.26.1",
     "unstorage": "^1.12.0",
-    "valibot": "^0.42.0",
+    "valibot": "^0.42.1",
     "webextension-polyfill": "^0.12.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "@eslint-react/eslint-plugin": "^1.14.1",
-    "@eslint/js": "^9.10.0",
+    "@eslint-react/eslint-plugin": "^1.14.2",
+    "@eslint/js": "^9.11.1",
     "@types/eslint": "^9.6.1",
-    "@types/eslint-plugin-tailwindcss": "^3.17.0",
     "@types/eslint__js": "^8.42.3",
-    "@types/node": "^22.5.5",
-    "@types/react": "^18.3.7",
+    "@types/eslint-plugin-tailwindcss": "^3.17.0",
+    "@types/node": "^22.6.1",
+    "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
     "@types/webextension-polyfill": "^0.12.1",
-    "@typescript-eslint/parser": "^8.6.0",
+    "@typescript-eslint/parser": "^8.7.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
-    "eslint": "^9.10.0",
+    "eslint": "^9.11.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-tailwindcss": "^3.17.4",
@@ -116,12 +116,12 @@
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "rimraf": "^5.0.10",
-    "tailwindcss": "^3.4.12",
+    "tailwindcss": "^3.4.13",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.6.2",
-    "typescript-eslint": "^8.6.0",
+    "typescript-eslint": "^8.7.0",
     "webext-bridge": "^6.0.1",
-    "wxt": "^0.19.9"
+    "wxt": "^0.19.10"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --fix --flag unstable_ts_config"

src/app/content/components/LikeButton.tsx

@@ -33,7 +33,7 @@ const LikeButton: FC<LikeButtonProps> & { Icon: FC<LikeButtonIconProps> } = ({
       onClick={handleClick}
       variant="secondary"
       className={cn(
-        'grid items-center overflow-hidden rounded-full leading-none transition-all',
+        'grid items-center overflow-hidden rounded-full leading-none transition-all select-none',
         checked ? 'text-orange-500' : 'text-slate-500',
         count ? 'grid-cols-[auto_1fr] gap-x-1' : 'grid-cols-[auto_0fr] gap-x-0'
       )}

src/app/content/index.tsx

@@ -8,8 +8,8 @@ import { createShadowRootUi } from 'wxt/client'
 
 import App from './App'
 import { IndexDBStorageImpl, BrowserSyncStorageImpl } from '@/domain/impls/Storage'
-// import { PeerRoomImpl } from '@/domain/impls/PeerRoom'
-import { PeerRoomImpl } from '@/domain/impls/PeerRoom2'
+import { PeerRoomImpl } from '@/domain/impls/PeerRoom'
+// import { PeerRoomImpl } from '@/domain/impls/PeerRoom2'
 import '@/assets/styles/tailwind.css'
 import { createElement } from '@/utils'
 import { ToastImpl } from '@/domain/impls/Toast'
@@ -34,11 +34,11 @@ export default defineContentScript({
 
         const root = createRoot(app)
         root.render(
-          // <React.StrictMode>
+          <React.StrictMode>
             <RemeshRoot store={store}>
               <App />
             </RemeshRoot>
-          // </React.StrictMode>
+          </React.StrictMode>
         )
         return root
       },

src/app/content/views/AppContainer/index.tsx

@@ -7,7 +7,7 @@ export interface AppContainerProps {
 
 const AppContainer: FC<AppContainerProps> = ({ children }) => {
   const { size, ref } = useResizable({
-    initSize: Math.max(375, window.innerWidth / 5),
+    initSize: Math.max(375, window.innerWidth / 6),
     maxSize: Math.max(750, window.innerWidth / 3),
     minSize: Math.max(375, window.innerWidth / 5),
     direction: 'left'
@@ -18,7 +18,7 @@ const AppContainer: FC<AppContainerProps> = ({ children }) => {
       style={{
         width: `${size}px`
       }}
-      className="fixed bottom-10 right-10 top-5 z-infinity box-border grid min-h-[750px] grid-flow-col grid-rows-[auto_1fr_auto] rounded-xl bg-slate-50  font-sans shadow-2xl"
+      className="fixed bottom-10 right-10 z-infinity box-border grid h-full max-h-[1200px] grid-flow-col grid-rows-[auto_1fr_auto] rounded-xl bg-slate-50  font-sans shadow-2xl"
     >
       {children}
       <div

src/app/content/views/Header/index.tsx

@@ -3,7 +3,7 @@ import { Globe2Icon } from 'lucide-react'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/Avatar'
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/HoverCard'
 import { Button } from '@/components/ui/Button'
-import { getSiteInfo } from '@/utils'
+import { cn, getSiteInfo } from '@/utils'
 import { useRemeshDomain, useRemeshQuery } from 'remesh-react'
 import RoomDomain from '@/domain/Room'
 
@@ -12,9 +12,10 @@ const Header: FC = () => {
   const roomDomain = useRemeshDomain(RoomDomain())
   const userList = useRemeshQuery(roomDomain.query.UserListQuery())
   const peerId = useRemeshQuery(roomDomain.query.PeerIdQuery())
+  const onlineCount = userList.length > 99 ? '99+' : userList.length
 
   return (
-    <div className="z-10 grid h-12 grid-flow-col items-center justify-between gap-x-4 rounded-t-xl bg-white px-4 backdrop-blur-lg">
+    <div className="z-10 grid h-12 grid-flow-col grid-cols-[theme('spacing.20')_auto_theme('spacing.20')] items-center justify-between rounded-t-xl bg-white px-4 backdrop-blur-lg">
       <Avatar className="size-8">
         <AvatarImage src={siteInfo.icon} alt="favicon" />
         <AvatarFallback>
@@ -25,8 +26,8 @@ const Header: FC = () => {
         <HoverCardTrigger asChild>
           <Button className="overflow-hidden" variant="link">
             <span className="truncate text-lg font-medium text-slate-600">
-              {/* {siteInfo.hostname.replace(/^www\./i, '')} */}
-              {peerId}
+              {siteInfo.hostname.replace(/^www\./i, '')}
+              {/* {peerId} */}
             </span>
           </Button>
         </HoverCardTrigger>
@@ -47,7 +48,23 @@ const Header: FC = () => {
           </div>
         </HoverCardContent>
       </HoverCard>
-      <div className="text-sm text-slate-500">Online {userList.length}</div>
+      <div className="flex items-center gap-x-1 text-sm text-slate-500">
+        <span className="relative flex size-2">
+          <span
+            className={cn(
+              'absolute inline-flex size-full animate-ping rounded-full opacity-75',
+              onlineCount === 1 ? 'bg-orange-400' : 'bg-green-400'
+            )}
+          ></span>
+          <span
+            className={cn(
+              'relative inline-flex size-2 rounded-full',
+              onlineCount === 1 ? 'bg-orange-500' : 'bg-green-500'
+            )}
+          ></span>
+        </span>
+        <span>ONLINE {onlineCount}</span>
+      </div>
     </div>
   )
 }

src/components/ui/Markdown.tsx

@@ -52,6 +52,14 @@ const Markdown: FC<MarkdownProps> = ({ children = '', className }) => {
         img: ({ className, alt, ...props }) => (
           <img className={cn('my-2 max-w-[100%] rounded', className)} alt={alt} {...props} />
         ),
+        a: ({ className, ...props }) => (
+          <a
+            className={cn('text-blue-500', className)}
+            target={props.href || '_blank'}
+            rel="noopener noreferrer"
+            {...props}
+          />
+        ),
         ul: ({ className, ...props }) => {
           Reflect.deleteProperty(props, 'ordered')
           return <ul className={cn('text-sm [&:not([depth="0"])]:my-0 ', className)} {...props} />