chore: format

This commit is contained in:
codytseng
2025-04-06 20:22:49 +08:00
parent 3bb34dae66
commit ccbce0e317
6 changed files with 402 additions and 430 deletions

View File

@@ -5,7 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Jumble</title> <title>Jumble</title>
<meta name="description" content="A user-friendly Nostr client focused on relay feed browsing and relay discovery" /> <meta
name="description"
content="A user-friendly Nostr client focused on relay feed browsing and relay discovery"
/>
<meta <meta
name="keywords" name="keywords"
content="jumble, nostr, web, client, relay, feed, social, pwa, simple, clean" content="jumble, nostr, web, client, relay, feed, social, pwa, simple, clean"

View File

@@ -1,4 +1,6 @@
import Note from '@/components/Note'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { ScrollArea } from '@/components/ui/scroll-area'
import { useToast } from '@/hooks/use-toast' import { useToast } from '@/hooks/use-toast'
import { createCommentDraftEvent, createShortTextNoteDraftEvent } from '@/lib/draft-event' import { createCommentDraftEvent, createShortTextNoteDraftEvent } from '@/lib/draft-event'
import { useNostr } from '@/providers/NostrProvider' import { useNostr } from '@/providers/NostrProvider'
@@ -14,9 +16,6 @@ import Preview from './Preview'
import SendOnlyToSwitch from './SendOnlyToSwitch' import SendOnlyToSwitch from './SendOnlyToSwitch'
import Uploader from './Uploader' import Uploader from './Uploader'
import { preprocessContent } from './utils' import { preprocessContent } from './utils'
import Note from '@/components/Note'
import { ScrollArea } from "@/components/ui/scroll-area"
export default function NormalPostContent({ export default function NormalPostContent({
defaultContent = '', defaultContent = '',

View File

@@ -1,11 +1,9 @@
import * as React from "react" import * as React from 'react'
import useEmblaCarousel, { import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
type UseEmblaCarouselType, import { ArrowLeft, ArrowRight } from 'lucide-react'
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"
import { cn } from "@/lib/utils" import { cn } from '@/lib/utils'
import { Button } from "@/components/ui/button" import { Button } from '@/components/ui/button'
type CarouselApi = UseEmblaCarouselType[1] type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel> type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
@@ -15,7 +13,7 @@ type CarouselPlugin = UseCarouselParameters[1]
type CarouselProps = { type CarouselProps = {
opts?: CarouselOptions opts?: CarouselOptions
plugins?: CarouselPlugin plugins?: CarouselPlugin
orientation?: "horizontal" | "vertical" orientation?: 'horizontal' | 'vertical'
setApi?: (api: CarouselApi) => void setApi?: (api: CarouselApi) => void
} }
@@ -34,7 +32,7 @@ function useCarousel() {
const context = React.useContext(CarouselContext) const context = React.useContext(CarouselContext)
if (!context) { if (!context) {
throw new Error("useCarousel must be used within a <Carousel />") throw new Error('useCarousel must be used within a <Carousel />')
} }
return context return context
@@ -43,23 +41,11 @@ function useCarousel() {
const Carousel = React.forwardRef< const Carousel = React.forwardRef<
HTMLDivElement, HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & CarouselProps React.HTMLAttributes<HTMLDivElement> & CarouselProps
>( >(({ orientation = 'horizontal', opts, setApi, plugins, className, children, ...props }, ref) => {
(
{
orientation = "horizontal",
opts,
setApi,
plugins,
className,
children,
...props
},
ref
) => {
const [carouselRef, api] = useEmblaCarousel( const [carouselRef, api] = useEmblaCarousel(
{ {
...opts, ...opts,
axis: orientation === "horizontal" ? "x" : "y", axis: orientation === 'horizontal' ? 'x' : 'y'
}, },
plugins plugins
) )
@@ -85,10 +71,10 @@ const Carousel = React.forwardRef<
const handleKeyDown = React.useCallback( const handleKeyDown = React.useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => { (event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.key === "ArrowLeft") { if (event.key === 'ArrowLeft') {
event.preventDefault() event.preventDefault()
scrollPrev() scrollPrev()
} else if (event.key === "ArrowRight") { } else if (event.key === 'ArrowRight') {
event.preventDefault() event.preventDefault()
scrollNext() scrollNext()
} }
@@ -110,11 +96,11 @@ const Carousel = React.forwardRef<
} }
onSelect(api) onSelect(api)
api.on("reInit", onSelect) api.on('reInit', onSelect)
api.on("select", onSelect) api.on('select', onSelect)
return () => { return () => {
api?.off("select", onSelect) api?.off('select', onSelect)
} }
}, [api, onSelect]) }, [api, onSelect])
@@ -124,18 +110,17 @@ const Carousel = React.forwardRef<
carouselRef, carouselRef,
api: api, api: api,
opts, opts,
orientation: orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
scrollPrev, scrollPrev,
scrollNext, scrollNext,
canScrollPrev, canScrollPrev,
canScrollNext, canScrollNext
}} }}
> >
<div <div
ref={ref} ref={ref}
onKeyDownCapture={handleKeyDown} onKeyDownCapture={handleKeyDown}
className={cn("relative", className)} className={cn('relative', className)}
role="region" role="region"
aria-roledescription="carousel" aria-roledescription="carousel"
{...props} {...props}
@@ -144,14 +129,11 @@ const Carousel = React.forwardRef<
</div> </div>
</CarouselContext.Provider> </CarouselContext.Provider>
) )
} })
) Carousel.displayName = 'Carousel'
Carousel.displayName = "Carousel"
const CarouselContent = React.forwardRef< const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
HTMLDivElement, ({ className, ...props }, ref) => {
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const { carouselRef, orientation } = useCarousel() const { carouselRef, orientation } = useCarousel()
return ( return (
@@ -159,21 +141,20 @@ const CarouselContent = React.forwardRef<
<div <div
ref={ref} ref={ref}
className={cn( className={cn(
"flex", 'flex',
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
className className
)} )}
{...props} {...props}
/> />
</div> </div>
) )
}) }
CarouselContent.displayName = "CarouselContent" )
CarouselContent.displayName = 'CarouselContent'
const CarouselItem = React.forwardRef< const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
HTMLDivElement, ({ className, ...props }, ref) => {
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const { orientation } = useCarousel() const { orientation } = useCarousel()
return ( return (
@@ -182,20 +163,19 @@ const CarouselItem = React.forwardRef<
role="group" role="group"
aria-roledescription="slide" aria-roledescription="slide"
className={cn( className={cn(
"min-w-0 shrink-0 grow-0 basis-full", 'min-w-0 shrink-0 grow-0 basis-full',
orientation === "horizontal" ? "pl-4" : "pt-4", orientation === 'horizontal' ? 'pl-4' : 'pt-4',
className className
)} )}
{...props} {...props}
/> />
) )
}) }
CarouselItem.displayName = "CarouselItem" )
CarouselItem.displayName = 'CarouselItem'
const CarouselPrevious = React.forwardRef< const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
HTMLButtonElement, ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
const { orientation, scrollPrev, canScrollPrev } = useCarousel() const { orientation, scrollPrev, canScrollPrev } = useCarousel()
return ( return (
@@ -204,10 +184,10 @@ const CarouselPrevious = React.forwardRef<
variant={variant} variant={variant}
size={size} size={size}
className={cn( className={cn(
"absolute h-8 w-8 rounded-full", 'absolute h-8 w-8 rounded-full',
orientation === "horizontal" orientation === 'horizontal'
? "-left-12 top-1/2 -translate-y-1/2" ? '-left-12 top-1/2 -translate-y-1/2'
: "-top-12 left-1/2 -translate-x-1/2 rotate-90", : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
className className
)} )}
disabled={!canScrollPrev} disabled={!canScrollPrev}
@@ -218,13 +198,12 @@ const CarouselPrevious = React.forwardRef<
<span className="sr-only">Previous slide</span> <span className="sr-only">Previous slide</span>
</Button> </Button>
) )
}) }
CarouselPrevious.displayName = "CarouselPrevious" )
CarouselPrevious.displayName = 'CarouselPrevious'
const CarouselNext = React.forwardRef< const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
HTMLButtonElement, ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
const { orientation, scrollNext, canScrollNext } = useCarousel() const { orientation, scrollNext, canScrollNext } = useCarousel()
return ( return (
@@ -233,10 +212,10 @@ const CarouselNext = React.forwardRef<
variant={variant} variant={variant}
size={size} size={size}
className={cn( className={cn(
"absolute h-8 w-8 rounded-full", 'absolute h-8 w-8 rounded-full',
orientation === "horizontal" orientation === 'horizontal'
? "-right-12 top-1/2 -translate-y-1/2" ? '-right-12 top-1/2 -translate-y-1/2'
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
className className
)} )}
disabled={!canScrollNext} disabled={!canScrollNext}
@@ -247,14 +226,8 @@ const CarouselNext = React.forwardRef<
<span className="sr-only">Next slide</span> <span className="sr-only">Next slide</span>
</Button> </Button>
) )
})
CarouselNext.displayName = "CarouselNext"
export {
type CarouselApi,
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
} }
)
CarouselNext.displayName = 'CarouselNext'
export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }

View File

@@ -1,7 +1,7 @@
import * as React from "react" import * as React from 'react'
import * as TabsPrimitive from "@radix-ui/react-tabs" import * as TabsPrimitive from '@radix-ui/react-tabs'
import { cn } from "@/lib/utils" import { cn } from '@/lib/utils'
const Tabs = TabsPrimitive.Root const Tabs = TabsPrimitive.Root
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
<TabsPrimitive.List <TabsPrimitive.List
ref={ref} ref={ref}
className={cn( className={cn(
"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground", 'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
className className
)} )}
{...props} {...props}
@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger <TabsPrimitive.Trigger
ref={ref} ref={ref}
className={cn( className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow", 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
className className
)} )}
{...props} {...props}
@@ -42,7 +42,7 @@ const TabsContent = React.forwardRef<
<TabsPrimitive.Content <TabsPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
className className
)} )}
{...props} {...props}

View File

@@ -1,10 +1,7 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
darkMode: ['class'], darkMode: ['class'],
content: [ content: ['./index.html', './src/**/*.{ts,tsx}'],
'./index.html',
'./src/**/*.{ts,tsx}',
],
theme: { theme: {
extend: { extend: {
borderRadius: { borderRadius: {