beenull/WebChat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

perf: optimize style and update deps

Browse source
This commit is contained in:
molvqingtai 2024-09-25 01:25:02 +08:00
parent e373993899
commit e9e73bd128
9 changed files with 618 additions and 576 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

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

2
eslint.config.ts
View file

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

24
package.json
View file

@ -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"

1112
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

2
src/app/content/components/LikeButton.tsx
View file

@ -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'
)}

14
src/app/content/index.tsx
View file

@ -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>
<RemeshRoot store={store}>
<App />
</RemeshRoot>
// </React.StrictMode>
<React.StrictMode>
<RemeshRoot store={store}>
<App />
</RemeshRoot>
</React.StrictMode>
)
return root
},

4
src/app/content/views/AppContainer/index.tsx
View file

@ -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

27
src/app/content/views/Header/index.tsx
View file

@ -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>
)
}

8
src/components/ui/Markdown.tsx
View file

@ -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} />