Repository: onlook-dev/onlook
File: apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/radius.tsx (TypeScript)

Code before:
import * as React from "react";
import { Button } from "@onlook/ui/button";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuTrigger,
} from "@onlook/ui/dropdown-menu";
import { Icons } from "@onlook/ui/icons";
import { observer } from "mobx-react-lite";
import { useState } from "react";
import { useBoxControl } from "../hooks/use-box-control";
import { useDropdownControl } from "../hooks/use-dropdown-manager";
import { HoverOnlyTooltip } from "../hover-tooltip";
import { InputRange } from "../inputs/input-range";
import { SpacingInputs } from "../inputs/spacing-inputs";

export const Radius = observer(() => {
    const [activeTab, setActiveTab] = useState('all');
    const { boxState, handleBoxChange, handleUnitChange, handleIndividualChange } = useBoxControl('radius');

    const { isOpen, onOpenChange } = useDropdownControl({
        id: 'radius-dropdown'
    });

    const getRadiusIcon = () => {
        const topLeft = boxState.borderTopLeftRadius.num ?? 0;
        const topRight = boxState.borderTopRightRadius.num ?? 0;
        const bottomRight = boxState.borderBottomRightRadius.num ?? 0;
        const bottomLeft = boxState.borderBottomLeftRadius.num ?? 0;

        // All corners zero
        if (topLeft === 0 && topRight === 0 && bottomRight === 0 && bottomLeft === 0) {
            return Icons.RadiusEmpty;
        }

        // All corners same non-zero
        const allSame = topLeft === topRight && topRight === bottomRight && bottomRight === bottomLeft && topLeft !== 0;
        if (allSame) {
            return Icons.RadiusFull;
        }

        // One corner only
        if (topLeft !== 0 && topRight === 0 && bottomRight === 0 && bottomLeft === 0) {
            return Icons.RadiusTL;
        }
        if (topRight !== 0 && topLeft === 0 && bottomRight === 0 && bottomLeft === 0) {
            return Icons.RadiusTR;
        }
        if (bottomRight !== 0 && topLeft === 0 && topRight === 0 && bottomLeft === 0) {
            return Icons.RadiusBR;
        }

Review comment (refactor):
Please refactor this, use functions and make it more readable. it's hard to read conditions.
Also you are giving fallback as 0 so you don't need to specify `===0`, simply do `if(!topLeft) or if(topLeft)`

Code after:
import * as React from "react";
import { Button } from "@onlook/ui/button";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuTrigger,
} from "@onlook/ui/dropdown-menu";
import { Icons } from "@onlook/ui/icons";
import { observer } from "mobx-react-lite";
import { useState } from "react";
import { useBoxControl } from "../hooks/use-box-control";
import { useDropdownControl } from "../hooks/use-dropdown-manager";
import { HoverOnlyTooltip } from "../hover-tooltip";
import { InputRange } from "../inputs/input-range";
import { SpacingInputs } from "../inputs/spacing-inputs";

export const Radius = observer(() => {
    const [activeTab, setActiveTab] = useState('all');
    const { boxState, handleBoxChange, handleUnitChange, handleIndividualChange } = useBoxControl('radius');

    const { isOpen, onOpenChange } = useDropdownControl({
        id: 'radius-dropdown'
    });

    const getRadiusIcon = () => {
        const topLeft = boxState.borderTopLeftRadius.num ?? 0;
        const topRight = boxState.borderTopRightRadius.num ?? 0;
        const bottomRight = boxState.borderBottomRightRadius.num ?? 0;
        const bottomLeft = boxState.borderBottomLeftRadius.num ?? 0;

        // No radius on any corner
        if (!topLeft && !topRight && !bottomRight && !bottomLeft) {
            return Icons.RadiusEmpty;
        }

        // All corners have the same non-zero radius
        const allSame = topLeft === topRight && topRight === bottomRight && bottomRight === bottomLeft && topLeft;
        if (allSame) {
            return Icons.RadiusFull;
        }

        // All corners have some radius but values differ
        if (topLeft && topRight && bottomRight && bottomLeft) {
            return Icons.RadiusFull;
        }

        // Three corners
        if (!topLeft && topRight && bottomRight && bottomLeft) return Icons.RadiusTRBRBL;
        if (topLeft && !topRight && bottomRight && bottomLeft) return Icons.RadiusBRBLTL;
        if (topLeft && topRight && !bottomRight && bottomLeft) return Icons.RadiusTRBLTL;
        if (topLeft && topRight && bottomRight && !bottomLeft) return Icons.RadiusTRBRTL;