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

Merge branch 'develop-theme' into develop

Browse source
This commit is contained in:
molvqingtai 2024-10-27 12:06:24 +08:00
commit a2eb8c2915
20 changed files with 61 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -14,4 +14,5 @@ web-ext.config.ts
*.pem
*.xpi
*.zip
.idea

7
src/app/content/App.tsx
View file

@ -38,6 +38,7 @@ export default function App() {
const appStatusDomain = useRemeshDomain(AppStatusDomain())
const appStatusLoadIsFinished = useRemeshQuery(appStatusDomain.query.StatusLoadIsFinishedQuery())
const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery())
const notUserInfo = userInfoLoadFinished && !userInfoSetFinished
useEffect(() => {
@ -63,7 +64,7 @@ export default function App() {
return (
appStatusLoadIsFinished && (
<>
<AppMain>
<AppMain className={userInfo?.themeMode}>
<Header />
<Main />
<Footer />
@ -76,9 +77,9 @@ export default function App() {
</AnimatePresence>
<Toaster richColors offset="70px" visibleToasts={1} position="top-center"></Toaster>
</AppMain>
<AppButton></AppButton>
<AppButton className={userInfo?.themeMode}></AppButton>
<DanmakuContainer ref={danmakuContainerRef} />
<DanmakuContainer ref={danmakuContainerRef} className={userInfo?.themeMode} />
</>
)
)

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

@ -20,7 +20,7 @@ const DanmakuMessage: FC<PromptItemProps> = ({ data, className, onClick, onMouse
onMouseLeave={onMouseLeave}
onClick={onClick}
className={cn(
'flex justify-center pointer-events-auto visible gap-x-2 border px-2.5 py-0.5 rounded-full bg-primary/30 text-base font-medium text-white backdrop-blur-md',
'flex justify-center pointer-events-auto visible gap-x-2 border px-2.5 py-0.5 rounded-full bg-primary/30 text-base font-medium text-white dark:bg-slate-800 dark:text-slate-50 backdrop-blur-md',
className
)}
>

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

@ -30,7 +30,7 @@ const EmojiButton: FC<EmojiButtonProps> = ({ onSelect }) => {
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button variant="ghost" size="icon">
<Button variant="ghost" size="icon" className="dark:text-white">
<SmileIcon size={20} />
</Button>
</PopoverTrigger>

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 select-none',
'grid items-center overflow-hidden rounded-full leading-none transition-all select-none dark:bg-slate-200',
checked ? 'text-orange-500' : 'text-slate-500',
count ? 'grid-cols-[auto_1fr] gap-x-1' : 'grid-cols-[auto_0fr] gap-x-0'
)}

4
src/app/content/components/MessageInput.tsx
View file

@ -45,7 +45,7 @@ const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
onKeyDown={onKeyDown}
autoFocus={autoFocus}
maxLength={maxLength}
className="box-border resize-none whitespace-pre-wrap break-words border-none bg-gray-50 pb-5 [field-sizing:content] [word-break:break-word] focus:ring-0 focus:ring-offset-0"
className="box-border resize-none whitespace-pre-wrap break-words border-none bg-gray-50 pb-5 [field-sizing:content] [word-break:break-word] focus:ring-0 focus:ring-offset-0 dark:bg-slate-800"
rows={2}
value={value}
spellCheck={false}
@ -56,7 +56,7 @@ const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
disabled={disabled}
/>
</ScrollArea>
<div className="absolute bottom-1 right-3 rounded-lg text-xs text-slate-400">
<div className="absolute bottom-1 right-3 rounded-lg text-xs text-slate-400 dark:text-slate-50">
{value?.length ?? 0}/{maxLength}
</div>
</div>

11
src/app/content/components/MessageItem.tsx
View file

@ -46,7 +46,10 @@ const MessageItem: FC<MessageItemProps> = (props) => {
return (
<div
data-index={props.index}
className={cn('box-border grid grid-cols-[auto_1fr] gap-x-2 px-4 first:pt-4 last:pb-4', props.className)}
className={cn(
'box-border grid grid-cols-[auto_1fr] gap-x-2 px-4 first:pt-4 last:pb-4 dark:text-slate-50',
props.className
)}
>
<Avatar>
<AvatarImage src={props.data.userAvatar} className="size-full" alt="avatar" />
@ -54,14 +57,14 @@ const MessageItem: FC<MessageItemProps> = (props) => {
</Avatar>
<div className="overflow-hidden">
<div className="grid grid-cols-[1fr_auto] items-center gap-x-2 leading-none">
<div className="truncate text-sm font-semibold text-slate-600">{props.data.username}</div>
<FormatDate className="text-xs text-slate-400" date={props.data.date}></FormatDate>
<div className="truncate text-sm font-semibold text-slate-600 dark:text-slate-50">{props.data.username}</div>
<FormatDate className="text-xs text-slate-400 dark:text-slate-100" date={props.data.date}></FormatDate>
</div>
<div>
<div className="pb-2">
<Markdown>{content}</Markdown>
</div>
<div className="grid grid-flow-col justify-end gap-x-2 leading-none">
<div className="grid grid-flow-col justify-end gap-x-2 leading-none dark:text-slate-600">
<LikeButton
checked={props.like}
onChange={(checked) => handleLikeChange(checked)}

7
src/app/content/components/PromptItem.tsx
View file

@ -12,8 +12,11 @@ export interface PromptItemProps {
const PromptItem: FC<PromptItemProps> = ({ data, className }) => {
return (
<div className={cn('flex justify-center py-1 px-4', className)}>
<Badge variant="secondary" className="gap-x-2 rounded-full px-2 font-medium text-slate-400">
<div className={cn('flex justify-center py-1 px-4 ', className)}>
<Badge
variant="secondary"
className="gap-x-2 rounded-full px-2 font-medium text-slate-400 dark:bg-slate-600 dark:text-slate-50"
>
<Avatar className="size-4">
<AvatarImage src={data.userAvatar} className="size-full" alt="avatar" />
<AvatarFallback>{data.username.at(0)}</AvatarFallback>

12
src/app/content/views/AppButton/index.tsx
View file

@ -8,7 +8,6 @@ import { EVENT } from '@/constants/event'
import UserInfoDomain from '@/domain/UserInfo'
import useTriggerAway from '@/hooks/useTriggerAway'
import { checkSystemDarkMode, cn } from '@/utils'
import ToastDomain from '@/domain/Toast'
import LogoIcon0 from '@/assets/images/logo-0.svg'
import LogoIcon1 from '@/assets/images/logo-1.svg'
import LogoIcon2 from '@/assets/images/logo-2.svg'
@ -20,16 +19,18 @@ import AppStatusDomain from '@/domain/AppStatus'
import { getDay } from 'date-fns'
import { messenger } from '@/messenger'
import useDarg from '@/hooks/useDarg'
import { useWindowSize } from 'react-use'
const AppButton: FC = () => {
export interface AppButtonProps {
className?: string
}
const AppButton: FC<AppButtonProps> = ({ className }) => {
const send = useRemeshSend()
const appStatusDomain = useRemeshDomain(AppStatusDomain())
const appOpenStatus = useRemeshQuery(appStatusDomain.query.OpenQuery())
const hasUnreadQuery = useRemeshQuery(appStatusDomain.query.HasUnreadQuery())
const userInfoDomain = useRemeshDomain(UserInfoDomain())
const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery())
const toastDomain = useRemeshDomain(ToastDomain())
const appPosition = useRemeshQuery(appStatusDomain.query.PositionQuery())
const DayLogo = [LogoIcon0, LogoIcon1, LogoIcon2, LogoIcon3, LogoIcon4, LogoIcon5, LogoIcon6][getDay(Date())]
@ -73,7 +74,6 @@ const AppButton: FC = () => {
const handleSwitchTheme = () => {
if (userInfo) {
send(toastDomain.command.WarningCommand('Developer is too lazy~'))
send(userInfoDomain.command.UpdateUserInfoCommand({ ...userInfo, themeMode: isDarkMode ? 'light' : 'dark' }))
} else {
handleOpenOptionsPage()
@ -91,7 +91,7 @@ const AppButton: FC = () => {
return (
<div
ref={appMenuRef}
className="fixed bottom-5 right-5 z-infinity grid w-min select-none justify-center gap-y-3"
className={cn('fixed bottom-5 right-5 z-infinity grid w-min select-none justify-center gap-y-3', className)}
style={{
left: `calc(${appPosition.x}px)`,
bottom: `calc(100vh - ${appPosition.y}px)`,

8
src/app/content/views/AppMain/index.tsx
View file

@ -8,9 +8,10 @@ import { useWindowSize } from 'react-use'
export interface AppMainProps {
children?: ReactNode
className?: string
}
const AppMain: FC<AppMainProps> = ({ children }) => {
const AppMain: FC<AppMainProps> = ({ children, className }) => {
const appStatusDomain = useRemeshDomain(AppStatusDomain())
const appOpenStatus = useRemeshQuery(appStatusDomain.query.OpenQuery())
const { x, y } = useRemeshQuery(appStatusDomain.query.PositionQuery())
@ -44,7 +45,8 @@ const AppMain: FC<AppMainProps> = ({ children }) => {
bottom: `calc(100vh - ${y}px + 22px)`
}}
className={cn(
'fixed inset-y-10 right-10 z-infinity mb-0 mt-auto box-border grid max-h-[min(calc(100vh_-60px),_1000px)] grid-flow-col grid-rows-[auto_1fr_auto] rounded-xl bg-slate-50 font-sans shadow-2xl',
`fixed inset-y-10 right-10 z-infinity mb-0 mt-auto box-border grid max-h-[min(calc(100vh_-60px),_1000px)] grid-flow-col grid-rows-[auto_1fr_auto] rounded-xl bg-slate-50 dark:bg-slate-950 font-sans shadow-2xl`,
className,
{ 'transition-transform': isAnimationComplete }
)}
>
@ -52,7 +54,7 @@ const AppMain: FC<AppMainProps> = ({ children }) => {
<div
ref={setRef}
className={cn(
'absolute inset-y-3 z-20 w-1 cursor-ew-resize rounded-xl bg-slate-100 opacity-0 shadow transition-opacity duration-200 ease-in hover:opacity-100',
'absolute inset-y-3 z-infinity w-1 dark:bg-slate-500 cursor-ew-resize rounded-xl bg-slate-100 opacity-0 shadow transition-opacity duration-200 ease-in hover:opacity-100',
isOnRightSide ? '-left-0.5' : '-right-0.5'
)}
></div>

2
src/app/content/views/Footer/index.tsx
View file

@ -243,7 +243,7 @@ const Footer: FC = () => {
const root = document.querySelector(__NAME__)?.shadowRoot
return (
<div className="relative z-10 grid gap-y-2 px-4 pb-4 pt-2 before:pointer-events-none before:absolute before:inset-x-4 before:-top-2 before:h-2 before:bg-gradient-to-t before:from-slate-50 before:from-30% before:to-transparent">
<div className="relative z-10 grid gap-y-2 rounded-b-xl px-4 pb-4 pt-2 before:pointer-events-none before:absolute before:inset-x-4 before:-top-2 before:h-2 before:bg-gradient-to-t before:from-slate-50 before:from-30% before:to-transparent dark:bg-slate-950">
<Presence present={autoCompleteListShow}>
<Portal
container={root}

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

@ -18,8 +18,8 @@ const Header: FC = () => {
const [scrollParentRef, setScrollParentRef] = useState<HTMLDivElement | null>(null)
return (
<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">
<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 dark:bg-slate-950">
<Avatar className="size-8 dark:text-slate-50">
<AvatarImage src={siteInfo.icon} alt="favicon" />
<AvatarFallback>
<Globe2Icon size="100%" className="text-gray-400" />
@ -28,7 +28,7 @@ const Header: FC = () => {
<HoverCard>
<HoverCardTrigger asChild>
<Button className="overflow-hidden p-2" variant="link">
<span className="truncate text-lg font-semibold text-slate-600">
<span className="truncate text-lg font-semibold text-slate-600 dark:text-slate-50">
{siteInfo.hostname.replace(/^www\./i, '')}
</span>
</Button>
@ -68,7 +68,7 @@ const Header: FC = () => {
)}
></span>
</span>
<span>ONLINE {onlineCount > 99 ? '99+' : onlineCount}</span>
<span className="dark:text-slate-50">ONLINE {onlineCount > 99 ? '99+' : onlineCount}</span>
</div>
</Button>
</HoverCardTrigger>

22
src/app/options/App.tsx
View file

@ -4,17 +4,23 @@ import ProfileForm from './components/ProfileForm'
import BadgeList from './components/BadgeList'
import Layout from './components/Layout'
import VersionLink from './components/VersionLink'
import { useRemeshDomain, useRemeshQuery } from 'remesh-react'
import UserInfoDomain from '@/domain/UserInfo'
function App() {
const userInfoDomain = useRemeshDomain(UserInfoDomain())
const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery())
return (
<Layout>
<VersionLink></VersionLink>
<Main>
<ProfileForm></ProfileForm>
<Toaster richColors position="top-center" />
</Main>
<BadgeList></BadgeList>
</Layout>
<div className={userInfo?.themeMode}>
<Layout>
<VersionLink></VersionLink>
<Main>
<ProfileForm></ProfileForm>
<Toaster richColors position="top-center" />
</Main>
<BadgeList></BadgeList>
</Layout>
</div>
)
}

2
src/app/options/components/Layout.tsx
View file

@ -7,7 +7,7 @@ export interface LayoutProps {
const Layout: FC<LayoutProps> = ({ children }) => {
return (
<div className="h-screen w-screen bg-gray-50 bg-[url(@/assets/images/texture.png)] font-sans">
<div className={`h-screen w-screen bg-gray-50 bg-[url(@/assets/images/texture.png)] font-sans dark:bg-slate-950`}>
<div className="fixed left-0 top-0 h-full w-screen overflow-hidden">
<Meteors number={30} />
</div>

2
src/app/options/components/Main.tsx
View file

@ -7,7 +7,7 @@ export interface MainProps {
const Main: FC<MainProps> = ({ children }) => {
return (
<main className="grid min-h-screen min-w-screen items-center justify-center">
<div className="relative rounded-xl bg-slate-50 shadow-lg">{children}</div>
<div className="relative rounded-xl bg-slate-50 shadow-lg dark:bg-slate-900 dark:text-slate-50">{children}</div>
</main>
)
}

7
src/app/options/components/ProfileForm.tsx
View file

@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form'
import { valibotResolver } from '@hookform/resolvers/valibot'
import { useRemeshDomain, useRemeshQuery, useRemeshSend } from 'remesh-react'
import { nanoid } from 'nanoid'
import { useEffect } from 'react'
import { ReactNode, useEffect, type FC } from 'react'
import AvatarSelect from './AvatarSelect'
import { Button } from '@/components/ui/Button'
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/Form'
@ -54,8 +54,7 @@ const formSchema = v.object({
notificationEnabled: v.boolean(),
notificationType: v.pipe(v.string(), v.union([v.literal('all'), v.literal('at')], 'Please select notification type.'))
})
const ProfileForm = () => {
const ProfileForm: FC = () => {
const send = useRemeshSend()
const toast = ToastImpl.value
@ -101,7 +100,7 @@ const ProfileForm = () => {
control={form.control}
name="avatar"
render={({ field }) => (
<FormItem className="absolute inset-x-1 top-0 mx-auto grid w-fit -translate-y-1/3 justify-items-center">
<FormItem className="absolute inset-x-1 top-0 mx-auto grid w-fit -translate-y-1/3 justify-items-center">
<FormControl>
<div className="flex flex-col items-center gap-2">
<BlurFade key={form.getValues().avatar} duration={0.1}>

2
src/components/Markdown.tsx
View file

@ -113,7 +113,7 @@ const Markdown: FC<MarkdownProps> = ({ children = '', className }) => {
)
}}
remarkPlugins={[remarkGfm, remarkBreaks]}
className={cn(className, 'prose prose-sm prose-slate break-words')}
className={cn(className, 'prose prose-sm prose-slate break-words dark:text-slate-400')}
>
{children}
</ReactMarkdown>

2
src/components/ui/Avatar.tsx
View file

@ -29,7 +29,7 @@ const AvatarFallback = React.forwardRef<
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Fallback
ref={ref}
className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted dark:text-slate-400', className)}
{...props}
/>
))

2
src/components/ui/ScrollArea.tsx
View file

@ -7,7 +7,7 @@ const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & { scrollLock?: boolean }
>(({ className, children, scrollLock = true, ...props }, ref) => (
<ScrollAreaPrimitive.Root className={cn('relative grid grid-rows-[1fr] overflow-hidden', className)} {...props}>
<ScrollAreaPrimitive.Root className={cn('relative grid grid-rows-[1fr] overflow-hidden dark:bg-slate-900 z-50', className)} {...props}>
<ScrollAreaPrimitive.Viewport
ref={ref}
className={cn('size-full rounded-[inherit]', scrollLock ? 'overscroll-none' : 'overscroll-auto')}

2
src/hooks/useResizable.ts
View file

@ -18,7 +18,7 @@ const useResizable = (options: ResizableOptions) => {
if (newSize !== size) {
setSize(newSize)
}
}, [initSize, minSize, maxSize, size])
}, [initSize, minSize, maxSize])
const position = useRef(0)