= ({ errorType, children }) => {
const fallbackRender = useCallback(
(fallbackProps: ErrorFallbackProps) =>
createElement(getErrorFallback(errorType), fallbackProps),
diff --git a/src/renderer/src/components/common/ErrorElement.tsx b/src/renderer/src/components/common/ErrorElement.tsx
index b9d3c1dff..f1d23d8bc 100644
--- a/src/renderer/src/components/common/ErrorElement.tsx
+++ b/src/renderer/src/components/common/ErrorElement.tsx
@@ -3,11 +3,7 @@ import { getNewIssueUrl } from "@renderer/lib/issues"
import { clearLocalPersistStoreData } from "@renderer/store/utils/clear"
import { captureException } from "@sentry/react"
import { useEffect, useRef } from "react"
-import {
- isRouteErrorResponse,
- useNavigate,
- useRouteError,
-} from "react-router-dom"
+import { isRouteErrorResponse, useNavigate, useRouteError } from "react-router-dom"
import { toast } from "sonner"
import { Button } from "../ui/button"
@@ -16,18 +12,15 @@ import { PoweredByFooter } from "./PoweredByFooter"
export function ErrorElement() {
const error = useRouteError()
const navigate = useNavigate()
- const message = isRouteErrorResponse(error) ?
- `${error.status} ${error.statusText}` :
- error instanceof Error ?
- error.message :
- JSON.stringify(error)
+ const message = isRouteErrorResponse(error)
+ ? `${error.status} ${error.statusText}`
+ : error instanceof Error
+ ? error.message
+ : JSON.stringify(error)
const stack = error instanceof Error ? error.stack : null
useEffect(() => {
- console.error(
- "Error handled by React Router default ErrorBoundary:",
- error,
- )
+ console.error("Error handled by React Router default ErrorBoundary:", error)
captureException(error)
}, [error])
@@ -50,9 +43,7 @@ export function ErrorElement() {
- Sorry, {APP_NAME} has encountered an error
-
+ Sorry, {APP_NAME} has encountered an error
{message}
{import.meta.env.DEV && stack ? (
@@ -62,10 +53,8 @@ export function ErrorElement() {
) : null}
- {APP_NAME}
- {" "}
- has a temporary problem, click the button below to try
- reloading the app or another solution?
+ {APP_NAME} has a temporary problem, click the button below to try reloading the app or
+ another solution?
@@ -109,17 +98,7 @@ export const FallbackIssue = ({
className="ml-2 cursor-pointer text-theme-accent-500 duration-200 hover:text-accent"
href={getNewIssueUrl({
title: `Error: ${message}`,
- body: [
- "### Error",
- "",
- message,
- "",
- "### Stack",
- "",
- "```",
- stack,
- "```",
- ].join("\n"),
+ body: ["### Error", "", message, "", "### Stack", "", "```", stack, "```"].join("\n"),
label: "bug",
})}
target="_blank"
diff --git a/src/renderer/src/components/common/ExPromise.tsx b/src/renderer/src/components/common/ExPromise.tsx
index 430bb0fc5..a48419d7f 100644
--- a/src/renderer/src/components/common/ExPromise.tsx
+++ b/src/renderer/src/components/common/ExPromise.tsx
@@ -1,7 +1,4 @@
-import {
- useLayoutEffect,
- useState,
-} from "react"
+import { useLayoutEffect, useState } from "react"
const NOT_RESOLVED = Symbol("NOT_RESOLVED")
export const ExPromise =
({
diff --git a/src/renderer/src/components/common/Fragment.tsx b/src/renderer/src/components/common/Fragment.tsx
index 47f6ab897..b33a49227 100644
--- a/src/renderer/src/components/common/Fragment.tsx
+++ b/src/renderer/src/components/common/Fragment.tsx
@@ -1,7 +1,6 @@
import type { FC, ReactNode } from "react"
import { Fragment } from "react"
-export const SafeFragment: FC<{ children: ReactNode }> = ({
- children,
- ..._rest
-}) => {children}
+export const SafeFragment: FC<{ children: ReactNode }> = ({ children, ..._rest }) => (
+ {children}
+)
diff --git a/src/renderer/src/components/common/ImpressionTracker.tsx b/src/renderer/src/components/common/ImpressionTracker.tsx
index b49455c79..90797f11e 100644
--- a/src/renderer/src/components/common/ImpressionTracker.tsx
+++ b/src/renderer/src/components/common/ImpressionTracker.tsx
@@ -6,9 +6,7 @@ type ImpressionProps = {
onTrack?: () => any
properties?: Record
}
-export const ImpressionView: Component<
- { shouldTrack?: boolean } & ImpressionProps
-> = (props) => {
+export const ImpressionView: Component<{ shouldTrack?: boolean } & ImpressionProps> = (props) => {
const { shouldTrack = true, ...rest } = props
if (!shouldTrack) {
return <>{props.children}
diff --git a/src/renderer/src/components/common/LoadRemixAsyncComponent.tsx b/src/renderer/src/components/common/LoadRemixAsyncComponent.tsx
index 551eafaab..e91defd7a 100644
--- a/src/renderer/src/components/common/LoadRemixAsyncComponent.tsx
+++ b/src/renderer/src/components/common/LoadRemixAsyncComponent.tsx
@@ -1,15 +1,11 @@
import type { FC, ReactNode } from "react"
-import {
- createElement,
- useEffect,
- useState,
-} from "react"
+import { createElement, useEffect, useState } from "react"
import { LoadingCircle } from "../ui/loading"
export const LoadRemixAsyncComponent: FC<{
loader: () => Promise
- Header: FC<{ loader: () => any, [key: string]: any }>
+ Header: FC<{ loader: () => any; [key: string]: any }>
}> = ({ loader, Header }) => {
const [loading, setLoading] = useState(true)
diff --git a/src/renderer/src/components/common/NotFound.tsx b/src/renderer/src/components/common/NotFound.tsx
index 0802d1139..1b6867c7c 100644
--- a/src/renderer/src/components/common/NotFound.tsx
+++ b/src/renderer/src/components/common/NotFound.tsx
@@ -47,15 +47,11 @@ export const NotFound = () => {
You have come to a desert of knowledge where there is nothing.
- Current path:
- {" "}
- {location.pathname}
+ Current path: {location.pathname}
- navigate("/")}>
- Back to Home
-
+ navigate("/")}>Back to Home
diff --git a/src/renderer/src/components/common/PoweredByFooter.tsx b/src/renderer/src/components/common/PoweredByFooter.tsx
index efb09c137..037352b10 100644
--- a/src/renderer/src/components/common/PoweredByFooter.tsx
+++ b/src/renderer/src/components/common/PoweredByFooter.tsx
@@ -5,10 +5,7 @@ import { Logo } from "../icons/logo"
export const PoweredByFooter: Component = ({ className }) => (
- Powered by
- {" "}
- ,
- HTMLStyleElement
- > &
- Record
+ } & React.DetailedHTMLProps, HTMLStyleElement> &
+ Record
> = memo(({ children, ...rest }) => (
))
-const weakMapElementKey = new WeakMap<
- HTMLStyleElement | HTMLLinkElement,
- string
->()
+const weakMapElementKey = new WeakMap()
const cloneStylesElement = (_mutationRecord?: MutationRecord) => {
const $styles = document.head.querySelectorAll("style").values()
const reactNodes = [] as ReactNode[]
@@ -85,8 +79,7 @@ export const ShadowDOM: FC>> & {
} = (props) => {
const { ...rest } = props
- const [stylesElements, setStylesElements] =
- useState(cloneStylesElement)
+ const [stylesElements, setStylesElements] = useState(cloneStylesElement)
useLayoutEffect(() => {
const mutationObserver = new MutationObserver((e) => {
@@ -139,12 +132,9 @@ function getLinkedStaticStyleSheets() {
.querySelectorAll("link[rel=stylesheet]")
.values() as unknown as HTMLLinkElement[]
- const styleSheetMap = new WeakMap<
- Element | ProcessingInstruction,
- CSSStyleSheet
- >()
+ const styleSheetMap = new WeakMap()
- const cssArray = [] as { cssText: string, ref: HTMLLinkElement }[]
+ const cssArray = [] as { cssText: string; ref: HTMLLinkElement }[]
for (const sheet of document.styleSheets) {
if (!sheet.href) continue
diff --git a/src/renderer/src/components/errors/FeedFoundCanBeFollowErrorFallback.tsx b/src/renderer/src/components/errors/FeedFoundCanBeFollowErrorFallback.tsx
index 4a02d7610..cba2ffc95 100644
--- a/src/renderer/src/components/errors/FeedFoundCanBeFollowErrorFallback.tsx
+++ b/src/renderer/src/components/errors/FeedFoundCanBeFollowErrorFallback.tsx
@@ -36,8 +36,7 @@ export const FeedFoundCanBeFollowErrorFallback: FC = ({
= ({
- resetError,
- error,
-}) => {
+export const FeedNotFoundErrorFallback: FC = ({ resetError, error }) => {
if (!(error instanceof FeedNotFound)) {
throw error
}
diff --git a/src/renderer/src/components/errors/ModalError.tsx b/src/renderer/src/components/errors/ModalError.tsx
index 2aa44d38e..8e722e2cb 100644
--- a/src/renderer/src/components/errors/ModalError.tsx
+++ b/src/renderer/src/components/errors/ModalError.tsx
@@ -31,18 +31,15 @@ export const ModalErrorFallback: FC = (props) => {
) : null}
- The App has a temporary problem, click the button below to try
- reloading the app or another solution?
+ The App has a temporary problem, click the button below to try reloading the app or
+ another solution?
modal.dismiss()} variant="outline">
Close Modal
- window.location.reload()}
- variant="outline"
- >
+ window.location.reload()} variant="outline">
Reload
diff --git a/src/renderer/src/components/errors/PageError.tsx b/src/renderer/src/components/errors/PageError.tsx
index e749845d6..96c4e31d1 100644
--- a/src/renderer/src/components/errors/PageError.tsx
+++ b/src/renderer/src/components/errors/PageError.tsx
@@ -23,8 +23,8 @@ export const PageErrorFallback: FC = (props) => {
) : null}
- The App has a temporary problem, click the button below to try
- reloading the app or another solution?
+ The App has a temporary problem, click the button below to try reloading the app or
+ another solution?
@@ -32,10 +32,7 @@ export const PageErrorFallback: FC
= (props) => {
Retry
- window.location.reload()}
- variant="outline"
- >
+ window.location.reload()} variant="outline">
Reload
+
)
@@ -128,11 +123,7 @@ export function FeedIcon({
height: size * 2,
})
ImageElement = (
-
+
)
@@ -166,9 +157,7 @@ export function FeedIcon({
break
}
default: {
- ImageElement = (
-
-
+
{ImageElement}
-
+
)
diff --git a/src/renderer/src/components/header.tsx b/src/renderer/src/components/header.tsx
index 81b73f5af..785f2f07d 100644
--- a/src/renderer/src/components/header.tsx
+++ b/src/renderer/src/components/header.tsx
@@ -2,10 +2,7 @@ import { whoami } from "@renderer/atoms/user"
import { cn } from "@renderer/lib/utils"
import { usePresentUserProfileModal } from "@renderer/modules/profile/hooks"
import type { MotionValue } from "framer-motion"
-import {
- useMotionValueEvent,
- useScroll,
-} from "framer-motion"
+import { useMotionValueEvent, useScroll } from "framer-motion"
import type { FC } from "react"
import { cloneElement, useState } from "react"
import { Link } from "react-router-dom"
@@ -76,14 +73,9 @@ const HoverableLink: FC<{
- {cloneElement(icon, { className: `size-3 ${icon.props.className}` })}
-
+ {cloneElement(icon, { className: `size-3 ${icon.props.className}` })}
{label}
diff --git a/src/renderer/src/components/icons/PhCloudX.tsx b/src/renderer/src/components/icons/PhCloudX.tsx
index f82bdb8de..2abdaa7ac 100644
--- a/src/renderer/src/components/icons/PhCloudX.tsx
+++ b/src/renderer/src/components/icons/PhCloudX.tsx
@@ -2,6 +2,17 @@ import type { SVGProps } from "react"
export function PhCloudX(props: SVGProps) {
return (
-
+
)
}
diff --git a/src/renderer/src/components/icons/follow.tsx b/src/renderer/src/components/icons/follow.tsx
index 6e0aba0dc..50310f552 100644
--- a/src/renderer/src/components/icons/follow.tsx
+++ b/src/renderer/src/components/icons/follow.tsx
@@ -1,10 +1,5 @@
export const FollowIcon: Component = (props) => (
-
+
diff --git a/src/renderer/src/components/icons/logo.tsx b/src/renderer/src/components/icons/logo.tsx
index 8e799c5d8..a15e6f888 100644
--- a/src/renderer/src/components/icons/logo.tsx
+++ b/src/renderer/src/components/icons/logo.tsx
@@ -1,50 +1,29 @@
import { forwardRef } from "react"
-export const Logo = forwardRef>(
- (props, ref) => (
-
-
-
-
-
-
- ),
-)
+export const Logo = forwardRef>((props, ref) => (
+
+
+
+
+
+
+))
diff --git a/src/renderer/src/components/ui/auto-completion/AutoCompletion.tsx b/src/renderer/src/components/ui/auto-completion/AutoCompletion.tsx
index a54b639d4..27ca7c304 100644
--- a/src/renderer/src/components/ui/auto-completion/AutoCompletion.tsx
+++ b/src/renderer/src/components/ui/auto-completion/AutoCompletion.tsx
@@ -23,8 +23,7 @@ export type Suggestion = {
name: string
value: string
}
-export interface AutocompleteProps
- extends React.InputHTMLAttributes {
+export interface AutocompleteProps extends React.InputHTMLAttributes {
suggestions: Suggestion[]
renderSuggestion?: (suggestion: Suggestion) => any
@@ -59,11 +58,8 @@ export const Autocomplete = forwardRef(
},
forwardedRef,
) => {
- const [filterableSuggestions, setFilterableSuggestions] =
- useState(suggestions)
- const [inputValue, setInputValue] = useState(
- inputProps.value || inputProps.defaultValue || "",
- )
+ const [filterableSuggestions, setFilterableSuggestions] = useState(suggestions)
+ const [inputValue, setInputValue] = useState(inputProps.value || inputProps.defaultValue || "")
const doFilter = useEventCallback(() => {
const fuse = new Fuse(suggestions, {
@@ -101,15 +97,16 @@ export const Autocomplete = forwardRef(
setIsOpen(false)
})
- const handleInputKeyDown: React.KeyboardEventHandler =
- useEventCallback((e) => {
+ const handleInputKeyDown: React.KeyboardEventHandler = useEventCallback(
+ (e) => {
if (e.key === "Enter") {
e.preventDefault()
onConfirm?.((e.target as HTMLInputElement).value)
setIsOpen(false)
}
inputProps.onKeyDown?.(e)
- })
+ },
+ )
const inputRef = useRef(null)
useImperativeHandle(forwardedRef, () => inputRef.current!)
@@ -122,18 +119,14 @@ export const Autocomplete = forwardRef(
if (!$input) return
const handleKeyDown = (e: KeyboardEvent) => {
const currentActiveIndex = currentActiveIndexRef.current
- const filterableSuggestionsLength =
- filterableSuggestionsRef.current.length
+ const filterableSuggestionsLength = filterableSuggestionsRef.current.length
const filterableSuggestions = filterableSuggestionsRef.current
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
e.preventDefault()
const nextIndex =
- currentActiveIndex +
- (e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0)
- setCurrentActiveIndex(
- Math.max(0, Math.min(nextIndex, filterableSuggestionsLength - 1)),
- )
+ currentActiveIndex + (e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0)
+ setCurrentActiveIndex(Math.max(0, Math.min(nextIndex, filterableSuggestionsLength - 1)))
} else if (
(e.key === "Enter" || e.key === "Tab") &&
currentActiveIndex >= 0 &&
@@ -220,19 +213,16 @@ export const Autocomplete = forwardRef(
}, [])}
style={merge(
{},
- portal && inputRect ?
- {
+ portal && inputRect
+ ? {
width: `${inputRect.width}px`,
left: `${inputRect.x}px`,
top: `${inputRect.y + inputRect.height}px`,
bottom: dropdownPos === "up" ? 0 : undefined,
- transform:
- dropdownPos === "up" ?
- `translateY(-${dropdownHeight}px)` :
- undefined,
+ transform: dropdownPos === "up" ? `translateY(-${dropdownHeight}px)` : undefined,
maxHeight,
- } :
- {},
+ }
+ : {},
)}
>
(
className={cn(
"cursor-default px-4 py-1.5 text-sm",
- currentActiveIndex === index &&
- "bg-theme-item-hover dark:bg-neutral-800",
+ currentActiveIndex === index && "bg-theme-item-hover dark:bg-neutral-800",
)}
key={suggestion.value}
onMouseDown={handleClick}
@@ -272,11 +261,10 @@ export const Autocomplete = forwardRef(
)
- const handleFocus: React.FocusEventHandler =
- useEventCallback((e) => {
- setIsOpen(true)
- inputProps.onFocus?.(e)
- })
+ const handleFocus: React.FocusEventHandler = useEventCallback((e) => {
+ setIsOpen(true)
+ inputProps.onFocus?.(e)
+ })
return (
diff --git a/src/renderer/src/components/ui/auto-resize-height.tsx b/src/renderer/src/components/ui/auto-resize-height.tsx
index 492991d45..1f5d32f35 100644
--- a/src/renderer/src/components/ui/auto-resize-height.tsx
+++ b/src/renderer/src/components/ui/auto-resize-height.tsx
@@ -35,8 +35,7 @@ export const AutoResizeHeight: React.FC
= ({
const style = getComputedStyle(target)
const marginHeight =
- Number.parseFloat(style.marginTop) +
- Number.parseFloat(style.marginBottom)
+ Number.parseFloat(style.marginTop) + Number.parseFloat(style.marginBottom)
// add margin top
setHeight(observedHeight + marginHeight)
})
@@ -55,12 +54,12 @@ export const AutoResizeHeight: React.FC = ({
initial={false}
animate={{ height }}
transition={
- spring ?
- {
+ spring
+ ? {
...softSpringPreset,
duration,
- } :
- {
+ }
+ : {
duration,
}
}
diff --git a/src/renderer/src/components/ui/avatar.tsx b/src/renderer/src/components/ui/avatar.tsx
index c1cd1868f..5c3f940d2 100644
--- a/src/renderer/src/components/ui/avatar.tsx
+++ b/src/renderer/src/components/ui/avatar.tsx
@@ -8,10 +8,7 @@ const Avatar = React.forwardRef<
>(({ className, ...props }, ref) => (
buttonRef.current?.click()}
- />
- )}
+ {shortcut && buttonRef.current?.click()} />}
- {typeof icon === "function" ?
- React.createElement(icon, {
- className: "size-4 grayscale text-current",
- }) :
- icon}
+ {typeof icon === "function"
+ ? React.createElement(icon, {
+ className: "size-4 grayscale text-current",
+ })
+ : icon}
{children}
-
+
{tooltip}
{!!shortcut && (
-
- {shortcut}
-
+ {shortcut}
)}
@@ -125,21 +110,20 @@ const HotKeyTrigger = ({
})
return null
}
-export const MotionButtonBase = React.forwardRef<
- HTMLButtonElement,
- HTMLMotionProps<"button">
->(({ children, ...rest }, ref) => (
-
- {children}
-
-))
+export const MotionButtonBase = React.forwardRef>(
+ ({ children, ...rest }, ref) => (
+
+ {children}
+
+ ),
+)
MotionButtonBase.displayName = "MotionButtonBase"
@@ -147,64 +131,55 @@ export const Button = React.forwardRef<
HTMLButtonElement,
React.PropsWithChildren<
Omit, "children"> &
- BaseButtonProps &
- VariantProps & {
- buttonClassName?: string
- }
+ BaseButtonProps &
+ VariantProps & {
+ buttonClassName?: string
+ }
>
->(
- (
- { className, buttonClassName, isLoading, variant, status, ...props },
- ref,
- ) => {
- const handleClick: React.MouseEventHandler =
- React.useCallback(
- (e) => {
- if (isLoading || props.disabled) {
- e.preventDefault()
- return
- }
+>(({ className, buttonClassName, isLoading, variant, status, ...props }, ref) => {
+ const handleClick: React.MouseEventHandler = React.useCallback(
+ (e) => {
+ if (isLoading || props.disabled) {
+ e.preventDefault()
+ return
+ }
- props.onClick?.(e)
- },
- [isLoading, props],
- )
- return (
-
+
+ {isLoading && (
+
+
)}
- {...props}
- onClick={handleClick}
- >
-
- {isLoading && (
-
-
- )}
- {props.children}
-
-
- )
- },
-)
+ {props.children}
+
+
+ )
+})
export const IconButton = React.forwardRef<
HTMLButtonElement,
- React.DetailedHTMLProps<
- React.ButtonHTMLAttributes,
- HTMLButtonElement
- > &
- React.PropsWithChildren<{
- icon: React.JSX.Element
- }>
+ React.DetailedHTMLProps, HTMLButtonElement> &
+ React.PropsWithChildren<{
+ icon: React.JSX.Element
+ }>
>((props, ref) => {
const { icon, ...rest } = props
return (
@@ -233,9 +208,7 @@ export const IconButton = React.forwardRef<
),
})}
-
- {props.children}
-
+ {props.children}
)
})
diff --git a/src/renderer/src/components/ui/button/variants.tsx b/src/renderer/src/components/ui/button/variants.tsx
index 98adc7218..93d87ffc4 100644
--- a/src/renderer/src/components/ui/button/variants.tsx
+++ b/src/renderer/src/components/ui/button/variants.tsx
@@ -57,10 +57,7 @@ export const styledButtonVariant = cva(
"hover:contrast-[1.10] active:contrast-125",
"focus:text-accent focus:outline-none",
),
- ghost: cn(
- "px-1.5 font-semibold",
- "hover:bg-theme-button-hover",
- ),
+ ghost: cn("px-1.5 font-semibold", "hover:bg-theme-button-hover"),
},
},
diff --git a/src/renderer/src/components/ui/card.tsx b/src/renderer/src/components/ui/card.tsx
index e9308a1d2..1358cd7e6 100644
--- a/src/renderer/src/components/ui/card.tsx
+++ b/src/renderer/src/components/ui/card.tsx
@@ -1,78 +1,55 @@
import { cn } from "@renderer/lib/utils"
import * as React from "react"
-const Card = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
+const Card = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ ),
+)
Card.displayName = "Card"
-const CardHeader = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
+const CardHeader = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ ),
+)
CardHeader.displayName = "CardHeader"
-const CardTitle = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
- >(
+ ({ className, ...props }, ref) => (
+
>(({ className, ...props }, ref) => (
-
+
))
CardDescription.displayName = "CardDescription"
-const CardContent = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
+const CardContent = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ ),
+)
CardContent.displayName = "CardContent"
-const CardFooter = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
+const CardFooter = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ ),
+)
CardFooter.displayName = "CardFooter"
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
diff --git a/src/renderer/src/components/ui/checkbox.tsx b/src/renderer/src/components/ui/checkbox.tsx
index db4fd91e9..bde6501ae 100644
--- a/src/renderer/src/components/ui/checkbox.tsx
+++ b/src/renderer/src/components/ui/checkbox.tsx
@@ -8,17 +8,17 @@ const Checkbox = React.forwardRef<
onCheckedChange?: (checked: boolean) => void
}
>(({ className, onCheckedChange, ...props }, ref) => (
-
{copied ? (
-
diff --git a/src/renderer/src/components/ui/code-highlighter/shiki/Shiki.tsx b/src/renderer/src/components/ui/code-highlighter/shiki/Shiki.tsx
index 9544fb476..4f71379bd 100644
--- a/src/renderer/src/components/ui/code-highlighter/shiki/Shiki.tsx
+++ b/src/renderer/src/components/ui/code-highlighter/shiki/Shiki.tsx
@@ -1,18 +1,10 @@
-import {
- useUISettingKey,
- useUISettingSelector,
-} from "@renderer/atoms/settings/ui"
+import { useUISettingKey, useUISettingSelector } from "@renderer/atoms/settings/ui"
import { isElectronBuild } from "@renderer/constants"
import { tipcClient } from "@renderer/lib/client"
import { cn } from "@renderer/lib/utils"
import { useIsomorphicLayoutEffect } from "foxact/use-isomorphic-layout-effect"
import type { FC } from "react"
-import {
- useInsertionEffect,
- useMemo,
- useRef,
- useState,
-} from "react"
+import { useInsertionEffect, useMemo, useRef, useState } from "react"
import type {
BundledLanguage,
BundledTheme,
@@ -20,10 +12,7 @@ import type {
DynamicImportThemeRegistration,
HighlighterCore,
} from "shiki"
-import {
- createHighlighterCoreSync,
- createJavaScriptRegexEngine,
-} from "shiki/core"
+import { createHighlighterCoreSync, createJavaScriptRegexEngine } from "shiki/core"
import { CopyButton } from "../copy-button"
import { shikiTransformers } from "./shared"
@@ -48,12 +37,8 @@ export interface ShikiProps {
theme?: string
}
-let langModule: Record<
- BundledLanguage,
- DynamicImportLanguageRegistration
-> | null = null
-let themeModule: Record | null =
- null
+let langModule: Record | null = null
+let themeModule: Record | null = null
let bundledLanguagesKeysSet: Set | null = null
export const ShikiHighLighter: FC = (props) => {
@@ -75,9 +60,7 @@ const ShikiHighLighterRender: FC<
}
> = (props) => {
const { code, language, className, theme: overrideTheme, shiki } = props
- const [currentLanguage, setCurrentLanguage] = useState(
- language || "plaintext",
- )
+ const [currentLanguage, setCurrentLanguage] = useState(language || "plaintext")
const guessCodeLanguage = useUISettingKey("guessCodeLanguage")
useInsertionEffect(() => {
@@ -96,16 +79,14 @@ const ShikiHighLighterRender: FC<
}
function guessLanguage() {
- tipcClient
- ?.detectCodeStringLanguage({ codeString: code })
- .then((result) => {
- for (const item of result) {
- if (bundledLanguagesKeysSet?.has(item.languageId)) {
- setCurrentLanguage(item.languageId)
- break
- }
+ tipcClient?.detectCodeStringLanguage({ codeString: code }).then((result) => {
+ for (const item of result) {
+ if (bundledLanguagesKeysSet?.has(item.languageId)) {
+ setCurrentLanguage(item.languageId)
+ break
}
- })
+ }
+ })
}
}, [guessCodeLanguage])
@@ -114,9 +95,7 @@ const ShikiHighLighterRender: FC<
const [loaded, setLoaded] = useState(false)
- const codeTheme = useUISettingSelector(
- (s) => overrideTheme || s.codeHighlightTheme,
- )
+ const codeTheme = useUISettingSelector((s) => overrideTheme || s.codeHighlightTheme)
useIsomorphicLayoutEffect(() => {
let isMounted = true
setLoaded(false)
@@ -138,14 +117,14 @@ const ShikiHighLighterRender: FC<
if (!currentLanguage || !codeTheme) return
const [{ bundledLanguages }, { bundledThemes }] =
- langModule && themeModule ?
- [
+ langModule && themeModule
+ ? [
{
bundledLanguages: langModule,
},
{ bundledThemes: themeModule },
- ] :
- await Promise.all([import("shiki/langs"), import("shiki/themes")])
+ ]
+ : await Promise.all([import("shiki/langs"), import("shiki/themes")])
langModule = bundledLanguages
themeModule = bundledThemes
@@ -194,9 +173,7 @@ const ShikiHighLighterRender: FC<
)
}
- return (
-
+
= (props) => {
React.useEffect(() => {
setIsOpened(currentId === id)
}, [currentId, id])
- return (
-
)}
- {props.children}
-
+ {props.children}
)
export const CollapseContent: Component<{
diff --git a/src/renderer/src/components/ui/collapse/hooks.tsx b/src/renderer/src/components/ui/collapse/hooks.tsx
index e6dbef1c6..aa29d88c7 100644
--- a/src/renderer/src/components/ui/collapse/hooks.tsx
+++ b/src/renderer/src/components/ui/collapse/hooks.tsx
@@ -15,5 +15,4 @@ export const [
____CollapseGroupItemStateContext,
] = createContextState>({})
export const useCollapseId = () => useContext(____CollapseStateContext)
-export const useCollapseGroupItem = () =>
- useContext(____CollapseGroupItemStateContext)
+export const useCollapseGroupItem = () => useContext(____CollapseGroupItemStateContext)
diff --git a/src/renderer/src/components/ui/context-menu/context-menu.tsx b/src/renderer/src/components/ui/context-menu/context-menu.tsx
index 7133d3ca2..301cd897a 100644
--- a/src/renderer/src/components/ui/context-menu/context-menu.tsx
+++ b/src/renderer/src/components/ui/context-menu/context-menu.tsx
@@ -112,8 +112,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
{children}
))
-ContextMenuCheckboxItem.displayName =
- ContextMenuPrimitive.CheckboxItem.displayName
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName
const ContextMenuLabel = React.forwardRef<
React.ElementRef,
@@ -123,11 +122,7 @@ const ContextMenuLabel = React.forwardRef<
>(({ className, inset, ...props }, ref) => (
(() =>
formatTime(props.date, displayAbsoluteTimeAfterDay, dateFormatTemplate),
)
@@ -65,13 +52,8 @@ export const RelativeTime: FC<{
useEffect(() => {
const updateRelativeTime = () => {
- setRelative(
- formatTime(props.date, displayAbsoluteTimeAfterDay, dateFormatTemplate),
- )
- const updateInterval = getUpdateInterval(
- props.date,
- displayAbsoluteTimeAfterDay,
- )
+ setRelative(formatTime(props.date, displayAbsoluteTimeAfterDay, dateFormatTemplate))
+ const updateInterval = getUpdateInterval(props.date, displayAbsoluteTimeAfterDay)
if (updateInterval !== null) {
timerRef.current = setTimeout(updateRelativeTime, updateInterval)
@@ -92,9 +74,7 @@ export const RelativeTime: FC<{
return (
{/* https://github.com/radix-ui/primitives/issues/2248#issuecomment-2147056904 */}
-
- {relative}
-
+ {relative}
{formated}
@@ -109,11 +89,7 @@ export const RelativeDay = ({ date }: { date: Date }) => {
// Remove the time part for comparison
const nowDate = new Date(now.getFullYear(), now.getMonth(), now.getDate())
- const inputDate = new Date(
- date.getFullYear(),
- date.getMonth(),
- date.getDate(),
- )
+ const inputDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
const diffTime = nowDate.getTime() - inputDate.getTime()
const diffDays = diffTime / (1000 * 3600 * 24)
@@ -131,9 +107,7 @@ export const RelativeDay = ({ date }: { date: Date }) => {
}
}
const timerRef = useRef(null)
- const [dateString, setDateString] = useState(() =>
- formatDateString(date),
- )
+ const [dateString, setDateString] = useState(() => formatDateString(date))
useEffect(() => {
const updateInterval = getUpdateInterval(date, 3)
@@ -155,9 +129,7 @@ export const RelativeDay = ({ date }: { date: Date }) => {
}
return (
-
- {dateString}
-
+ {dateString}
{formated}
diff --git a/src/renderer/src/components/ui/divider/Divider.tsx b/src/renderer/src/components/ui/divider/Divider.tsx
index 4f379f937..c789e1d63 100644
--- a/src/renderer/src/components/ui/divider/Divider.tsx
+++ b/src/renderer/src/components/ui/divider/Divider.tsx
@@ -1,16 +1,13 @@
import { cn } from "@renderer/lib/utils"
import type { DetailedHTMLProps, FC, HTMLAttributes } from "react"
-export const Divider: FC<
- DetailedHTMLProps, HTMLHRElement>
-> = (props) => {
+export const Divider: FC, HTMLHRElement>> = (
+ props,
+) => {
const { className, ...rest } = props
return (
,
- HTMLDivElement
- > & {
+ props: React.DetailedHTMLProps, HTMLDivElement> & {
isDragging?: boolean
},
) => {
diff --git a/src/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx b/src/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx
index cbac086e6..a3034e389 100644
--- a/src/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx
+++ b/src/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx
@@ -33,8 +33,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
,
@@ -49,8 +48,7 @@ const DropdownMenuSubContent = React.forwardRef<
{...props}
/>
))
-DropdownMenuSubContent.displayName =
- DropdownMenuPrimitive.SubContent.displayName
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
const DropdownMenuContent = React.forwardRef<
React.ElementRef,
@@ -89,9 +87,7 @@ const DropdownMenuItem = React.forwardRef<
{...props}
>
{props.icon && (
-
- {props.icon}
-
+ {props.icon}
)}
{props.children}
{/* Justify Fill */}
@@ -121,8 +117,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
{children}
))
-DropdownMenuCheckboxItem.displayName =
- DropdownMenuPrimitive.CheckboxItem.displayName
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
const DropdownMenuLabel = React.forwardRef<
React.ElementRef,
@@ -132,11 +127,7 @@ const DropdownMenuLabel = React.forwardRef<
>(({ className, inset, ...props }, ref) => (
) => (
- ) => (
+ (
- {} as FormFieldContextValue,
-)
+const FormFieldContext = React.createContext({} as FormFieldContextValue)
const FormField = <
TFieldValues extends FieldValues = FieldValues,
@@ -57,22 +55,19 @@ type FormItemContextValue = {
id: string
}
-const FormItemContext = React.createContext(
- {} as FormItemContextValue,
+const FormItemContext = React.createContext({} as FormItemContextValue)
+
+const FormItem = React.forwardRef>(
+ ({ className, ...props }, ref) => {
+ const id = React.useId()
+
+ return (
+ ({ id }), [id])}>
+
+
+ )
+ },
)
-
-const FormItem = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => {
- const id = React.useId()
-
- return (
- ({ id }), [id])}>
-
-
- )
-})
FormItem.displayName = "FormItem"
const FormLabel = React.forwardRef<
@@ -96,18 +91,13 @@ const FormControl = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef
>(({ ...props }, ref) => {
- const { error, formItemId, formDescriptionId, formMessageId } =
- useFormField()
+ const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
return (
, HTMLInputElement>,
- "ref"
- >
+ Omit, HTMLInputElement>, "ref">
>(({ className, ...props }, ref) => {
const inputProps = useInputComposition(props)
return (
@@ -25,9 +22,7 @@ export const Input = forwardRef<
"focus:!bg-accent/5",
"border border-border",
"dark:text-zinc-200 dark:placeholder:text-zinc-500",
- props.type === "password" ?
- "font-mono placeholder:font-sans" :
- "font-sans",
+ props.type === "password" ? "font-mono placeholder:font-sans" : "font-sans",
"w-full",
className,
)}
diff --git a/src/renderer/src/components/ui/input/TextArea.tsx b/src/renderer/src/components/ui/input/TextArea.tsx
index 5baa7f54c..dfe53ce79 100644
--- a/src/renderer/src/components/ui/input/TextArea.tsx
+++ b/src/renderer/src/components/ui/input/TextArea.tsx
@@ -5,113 +5,106 @@ import { stopPropagation } from "@renderer/lib/dom"
import { cn } from "@renderer/lib/utils"
import clsx from "clsx"
import { useMotionValue } from "framer-motion"
-import type {
- DetailedHTMLProps,
- PropsWithChildren,
- TextareaHTMLAttributes,
-} from "react"
+import type { DetailedHTMLProps, PropsWithChildren, TextareaHTMLAttributes } from "react"
import { forwardRef, useCallback, useState } from "react"
const roundedMap = {
- "sm": "rounded-sm",
- "md": "rounded-md",
- "lg": "rounded-lg",
- "xl": "rounded-xl",
+ sm: "rounded-sm",
+ md: "rounded-md",
+ lg: "rounded-lg",
+ xl: "rounded-xl",
"2xl": "rounded-2xl",
"3xl": "rounded-3xl",
- "default": "rounded",
+ default: "rounded",
}
export const TextArea = forwardRef<
HTMLTextAreaElement,
- DetailedHTMLProps<
- TextareaHTMLAttributes,
- HTMLTextAreaElement
- > &
- PropsWithChildren<{
- wrapperClassName?: string
- onCmdEnter?: (e: React.KeyboardEvent) => void
- rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "default"
- bordered?: boolean
- }>
+ DetailedHTMLProps, HTMLTextAreaElement> &
+ PropsWithChildren<{
+ wrapperClassName?: string
+ onCmdEnter?: (e: React.KeyboardEvent) => void
+ rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "default"
+ bordered?: boolean
+ }>
>((props, ref) => {
- const {
+ const {
+ className,
+ wrapperClassName,
+ children,
+ rounded = "xl",
+ bordered = true,
+ onCmdEnter,
+ ...rest
+ } = props
+ const mouseX = useMotionValue(0)
+ const mouseY = useMotionValue(0)
+ const handleMouseMove = useCallback(
+ ({ clientX, clientY, currentTarget }: React.MouseEvent) => {
+ const bounds = currentTarget.getBoundingClientRect()
+ mouseX.set(clientX - bounds.left)
+ mouseY.set(clientY - bounds.top)
+ },
+ [mouseX, mouseY],
+ )
+
+ const inputProps = useInputComposition(props)
+ const [isFocus, setIsFocus] = useState(false)
+ return (
+
+ {bordered && (
+
+ )}
+