mirror of
https://github.com/h3poteto/whalebird-desktop
synced 2024-12-24 07:50:47 +01:00
243 lines
8.0 KiB
TypeScript
243 lines
8.0 KiB
TypeScript
import { CSSProperties, useContext, useEffect, useState } from 'react'
|
|
import { FaGear, FaIdCard, FaPlus, FaTrash } from 'react-icons/fa6'
|
|
import { Account, db } from '@/db'
|
|
import NewAccount from '@/components/accounts/New'
|
|
import Settings from '@/components/Settings'
|
|
import { useRouter } from 'next/router'
|
|
import { FormattedMessage, useIntl } from 'react-intl'
|
|
import { Context } from '@/provider/i18n'
|
|
import { useHotkeys } from 'react-hotkeys-hook'
|
|
import {
|
|
Avatar,
|
|
Badge,
|
|
IconButton,
|
|
List,
|
|
ListItem,
|
|
ListItemPrefix,
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverHandler
|
|
} from '@material-tailwind/react'
|
|
import Thirdparty from '../Thirdparty'
|
|
import { useUnreads } from '@/provider/unreads'
|
|
import { useAccounts } from '@/provider/accounts'
|
|
import { invoke } from '@/utils/invoke'
|
|
|
|
type LayoutProps = {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export default function Layout({ children }: LayoutProps) {
|
|
const [accounts, setAccounts] = useState<Array<Account>>([])
|
|
const [openNewModal, setOpenNewModal] = useState(false)
|
|
const [openSettings, setOpenSettings] = useState(false)
|
|
const [openThirdparty, setOpenThirdparty] = useState(false)
|
|
const [style, setStyle] = useState<CSSProperties>({})
|
|
const [openPopover, setOpenPopover] = useState(false)
|
|
const [theme, setTheme] = useState('theme-blue')
|
|
const [isDark, setIsDark] = useState(false)
|
|
|
|
const { switchLang } = useContext(Context)
|
|
const router = useRouter()
|
|
const { formatMessage } = useIntl()
|
|
const { unreads } = useUnreads()
|
|
const { addAccount, removeAccount, removeAll } = useAccounts()
|
|
|
|
for (let i = 1; i < 9; i++) {
|
|
useHotkeys(`mod+${i}`, () => {
|
|
const acct = accounts[i - 1]
|
|
if (acct && acct.id) {
|
|
router.push(`/accounts/${acct.id}`)
|
|
}
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
loadSettings()
|
|
const fn = async () => {
|
|
const acct = await db.accounts.toArray()
|
|
setAccounts(acct)
|
|
if (acct.length === 0) {
|
|
setOpenNewModal(true)
|
|
}
|
|
acct.forEach(async account => {
|
|
addAccount(account)
|
|
})
|
|
}
|
|
fn()
|
|
|
|
return () => {
|
|
removeAll()
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
console.log('isDark', isDark)
|
|
document.body.className = isDark ? 'dark' : 'light'
|
|
}, [isDark])
|
|
|
|
const closeNewModal = async () => {
|
|
const acct = await db.accounts.toArray()
|
|
setAccounts(acct)
|
|
setOpenNewModal(false)
|
|
if (acct.length === 0) {
|
|
setOpenNewModal(true)
|
|
} else if (!router.query.id) {
|
|
router.push(`/accounts/${acct[0].id}`)
|
|
}
|
|
}
|
|
|
|
const openAccount = (id: number) => {
|
|
router.push(`/accounts/${id}`)
|
|
}
|
|
|
|
const openContextMenu = (id: number) => {
|
|
document.getElementById(`${id}`).click()
|
|
}
|
|
|
|
const deleteAccount = async (account: Account) => {
|
|
removeAccount(account)
|
|
await db.accounts.delete(account.id)
|
|
const acct = await db.accounts.toArray()
|
|
setAccounts(acct)
|
|
if (acct.length === 0) {
|
|
router.push('/')
|
|
setOpenNewModal(true)
|
|
}
|
|
}
|
|
|
|
const selectedClassName = (id: number) => {
|
|
if (id === parseInt(router.query.id as string)) {
|
|
return 'theme-bg cursor-pointer text-center'
|
|
} else {
|
|
return 'cursor-pointer text-center'
|
|
}
|
|
}
|
|
|
|
const loadSettings = () => {
|
|
if (typeof localStorage !== 'undefined') {
|
|
const lang = localStorage.getItem('language')
|
|
switchLang(lang)
|
|
const fontSize = localStorage.getItem('fontSize')
|
|
if (parseInt(fontSize)) {
|
|
setStyle({
|
|
fontSize: `${fontSize}px`
|
|
})
|
|
}
|
|
const t = localStorage.getItem('theme')
|
|
if (t && t.length > 0) {
|
|
setTheme(t)
|
|
}
|
|
const dark = localStorage.getItem('color-mode')
|
|
if (dark && dark === 'dark') {
|
|
setIsDark(true)
|
|
} else {
|
|
setIsDark(false)
|
|
}
|
|
const proxyMode = localStorage.getItem('proxyMode')
|
|
const proxyProtocol = localStorage.getItem('proxyProtocol')
|
|
const proxyHost = localStorage.getItem('proxyHost')
|
|
const proxyPort = localStorage.getItem('proxyPort')
|
|
invoke('set-proxy', { mode: proxyMode, protocol: proxyProtocol, host: proxyHost, port: proxyPort })
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={`app flex flex-col min-h-screen ${theme}`} style={style}>
|
|
<main className="flex w-full box-border my-0 mx-auto min-h-screen bg-white dark:bg-gray-900">
|
|
<aside className="w-16 theme-account-bg flex flex-col justify-between">
|
|
<div>
|
|
{accounts.map(account => (
|
|
<div key={account.id} className={selectedClassName(account.id)}>
|
|
<Popover>
|
|
<PopoverHandler>
|
|
<span id={`${account.id}`} />
|
|
</PopoverHandler>
|
|
<PopoverContent>
|
|
<List className="py-2 px-0">
|
|
<ListItem onClick={() => deleteAccount(account)} className="py-2 px-4 rounded-none">
|
|
<ListItemPrefix>
|
|
<FaTrash />
|
|
</ListItemPrefix>
|
|
<FormattedMessage id="accounts.remove" />
|
|
</ListItem>
|
|
</List>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<Badge className="mt-1" color="green" invisible={!(unreads[account.id.toString()] > 0)}>
|
|
<Avatar
|
|
alt={account.domain}
|
|
src={account.avatar}
|
|
title={`${account.username}@${account.domain}`}
|
|
aria-label={`${account.username}@${account.domain}`}
|
|
className="p-1"
|
|
onClick={() => openAccount(account.id)}
|
|
onContextMenu={() => openContextMenu(account.id)}
|
|
/>
|
|
</Badge>
|
|
</div>
|
|
))}
|
|
<div className="flex flex-col items-center">
|
|
<IconButton
|
|
variant="text"
|
|
size="lg"
|
|
onClick={() => setOpenNewModal(true)}
|
|
title={formatMessage({ id: 'accounts.new.title' })}
|
|
aria-label={formatMessage({ id: 'accounts.new.title' })}
|
|
>
|
|
<FaPlus className="text-gray-400 text-xl" />
|
|
</IconButton>
|
|
</div>
|
|
<NewAccount opened={openNewModal} close={closeNewModal} />
|
|
</div>
|
|
<div className="settings text-gray-400 flex flex-col items-center mb-2">
|
|
<Popover open={openPopover} handler={setOpenPopover}>
|
|
<PopoverHandler>
|
|
<IconButton
|
|
variant="text"
|
|
size="lg"
|
|
title={formatMessage({ id: 'settings.title' })}
|
|
aria-label={formatMessage({ id: 'settings.title' })}
|
|
>
|
|
<FaGear className="text-gray-400 text-xl" />
|
|
</IconButton>
|
|
</PopoverHandler>
|
|
<PopoverContent>
|
|
<List className="py-2 px-0">
|
|
<ListItem
|
|
onClick={() => {
|
|
setOpenSettings(true)
|
|
setOpenPopover(false)
|
|
}}
|
|
className="py-2 px-4 rounded-none"
|
|
>
|
|
<ListItemPrefix>
|
|
<FaGear />
|
|
</ListItemPrefix>
|
|
<FormattedMessage id="settings.title" />
|
|
</ListItem>
|
|
<ListItem
|
|
onClick={() => {
|
|
setOpenThirdparty(true)
|
|
setOpenPopover(false)
|
|
}}
|
|
className="py-2 px-4 rounded-none"
|
|
>
|
|
<ListItemPrefix>
|
|
<FaIdCard />
|
|
</ListItemPrefix>
|
|
<FormattedMessage id="thirdparty.title" />
|
|
</ListItem>
|
|
</List>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</aside>
|
|
{children}
|
|
<Settings opened={openSettings} close={() => setOpenSettings(false)} reloadSettings={loadSettings} />
|
|
<Thirdparty opened={openThirdparty} close={() => setOpenThirdparty(false)} />
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|