fix: 🐛

This commit is contained in:
codytseng
2025-03-15 11:37:09 +08:00
parent eb15544195
commit 5c9f67c7e9
4 changed files with 17 additions and 12 deletions

View File

@@ -10,7 +10,7 @@ export function Titlebar({
return ( return (
<div <div
className={cn( className={cn(
'sticky top-0 w-full h-12 z-40 bg-background [&_svg]:size-5 [&_svg]:shrink-0', 'sticky top-0 w-full h-12 z-40 bg-background [&_svg]:size-5 [&_svg]:shrink-0 select-none',
className className
)} )}
> >

View File

@@ -2,6 +2,7 @@ import FeedSwitcher from '@/components/FeedSwitcher'
import { Drawer, DrawerContent } from '@/components/ui/drawer' import { Drawer, DrawerContent } from '@/components/ui/drawer'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { simplifyUrl } from '@/lib/url' import { simplifyUrl } from '@/lib/url'
import { cn } from '@/lib/utils'
import { useFeed } from '@/providers/FeedProvider' import { useFeed } from '@/providers/FeedProvider'
import { useRelaySets } from '@/providers/RelaySetsProvider' import { useRelaySets } from '@/providers/RelaySetsProvider'
import { useScreenSize } from '@/providers/ScreenSizeProvider' import { useScreenSize } from '@/providers/ScreenSizeProvider'
@@ -9,14 +10,14 @@ import { ChevronDown, Server, UsersRound } from 'lucide-react'
import { forwardRef, HTMLAttributes, useState } from 'react' import { forwardRef, HTMLAttributes, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
export default function FeedButton() { export default function FeedButton({ className }: { className?: string }) {
const { isSmallScreen } = useScreenSize() const { isSmallScreen } = useScreenSize()
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
if (isSmallScreen) { if (isSmallScreen) {
return ( return (
<> <>
<FeedSwitcherTrigger onClick={() => setOpen(true)} /> <FeedSwitcherTrigger className={className} onClick={() => setOpen(true)} />
<Drawer open={open} onOpenChange={setOpen}> <Drawer open={open} onOpenChange={setOpen}>
<DrawerContent className="max-h-[80vh]"> <DrawerContent className="max-h-[80vh]">
<div className="p-4 overflow-auto"> <div className="p-4 overflow-auto">
@@ -31,7 +32,7 @@ export default function FeedButton() {
return ( return (
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<FeedSwitcherTrigger /> <FeedSwitcherTrigger className={className} />
</PopoverTrigger> </PopoverTrigger>
<PopoverContent side="bottom" className="w-96 p-4 max-h-[80vh] overflow-auto"> <PopoverContent side="bottom" className="w-96 p-4 max-h-[80vh] overflow-auto">
<FeedSwitcher close={() => setOpen(false)} /> <FeedSwitcher close={() => setOpen(false)} />
@@ -41,7 +42,7 @@ export default function FeedButton() {
} }
const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
(props, ref) => { ({ className, ...props }, ref) => {
const { t } = useTranslation() const { t } = useTranslation()
const { feedType, relayUrls, activeRelaySetId } = useFeed() const { feedType, relayUrls, activeRelaySetId } = useFeed()
const { relaySets } = useRelaySets() const { relaySets } = useRelaySets()
@@ -61,12 +62,12 @@ const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
return ( return (
<div <div
className="flex items-center gap-2 clickable px-3 h-full rounded-lg" className={cn('flex items-center gap-2 clickable px-3 h-full rounded-lg', className)}
ref={ref} ref={ref}
{...props} {...props}
> >
{feedType === 'following' ? <UsersRound /> : <Server />} {feedType === 'following' ? <UsersRound /> : <Server />}
<div className="text-lg font-semibold">{title}</div> <div className="text-lg font-semibold truncate">{title}</div>
<ChevronDown /> <ChevronDown />
</div> </div>
) )

View File

@@ -66,8 +66,8 @@ function NoteListPageTitlebar({ temporaryRelayUrls = [] }: { temporaryRelayUrls?
return ( return (
<div className="flex gap-1 items-center h-full justify-between"> <div className="flex gap-1 items-center h-full justify-between">
<FeedButton /> <FeedButton className="flex-1 max-w-fit w-0" />
<div> <div className="shrink-0">
{temporaryRelayUrls.length > 0 && ( {temporaryRelayUrls.length > 0 && (
<SaveRelayDropdownMenu urls={temporaryRelayUrls} atTitlebar /> <SaveRelayDropdownMenu urls={temporaryRelayUrls} atTitlebar />
)} )}

View File

@@ -129,9 +129,13 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
</div> </div>
<ProfileAbout about={about} className="text-wrap break-words whitespace-pre-wrap mt-2" /> <ProfileAbout about={about} className="text-wrap break-words whitespace-pre-wrap mt-2" />
{website && ( {website && (
<div className="flex gap-1 items-center text-primary mt-2"> <div className="flex gap-1 items-center text-primary mt-2 truncate">
<Link size={14} /> <Link size={14} className="shrink-0" />
<a href={website} target="_blank" className="hover:underline"> <a
href={website}
target="_blank"
className="hover:underline truncate flex-1 max-w-fit w-0"
>
{website} {website}
</a> </a>
</div> </div>