Repository: supabase/supabase
File: apps/studio/components/grid/components/menu/ColumnMenu.tsx (TypeScript)

Code before:
        <DropdownMenuItem
          className={cn(
            'space-x-2',
            currentSort?.ascending && 'bg-surface-200 dark:bg-surface-400 text-foreground'
          )}
          onClick={() => onSortColumn(true)}
        >
          <ArrowUp size={14} strokeWidth={currentSort?.ascending ? 3 : 1.5} />
          <span>Sort Ascending</span>
        </DropdownMenuItem>
        <DropdownMenuItem
          className={cn(
            'space-x-2',
            currentSort &&
              !currentSort.ascending &&
              'bg-surface-200 dark:bg-surface-400 text-foreground'
          )}
          onClick={() => onSortColumn(false)}
        >
          <ArrowDown size={14} strokeWidth={currentSort && !currentSort.ascending ? 3 : 1.5} />
          <span>Sort Descending</span>
        </DropdownMenuItem>
        {snap.editable && (
          <>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              className="space-x-2"
              onClick={(e) => {
                e.stopPropagation()
                copyToClipboard(columnName)
              }}
            >
              <Copy size={12} />
              <span>Copy name</span>
            </DropdownMenuItem>
            <Tooltip>
              <TooltipTrigger asChild className={`${isEncrypted ? 'opacity-50' : ''}`}>
                <DropdownMenuItem
                  className="space-x-2"
                  onClick={onEditColumn}
                  disabled={isEncrypted}
                >
                  <Edit size={14} strokeWidth={1.5} />
                  <span>Edit column</span>
                </DropdownMenuItem>
              </TooltipTrigger>
              {isEncrypted && (
                <TooltipContent side="bottom">Encrypted columns cannot be edited</TooltipContent>
              )}
            </Tooltip>
          </>

Review comment (refactor):
You should move this in the dropdown items above `snap.editable` since it doesn't require the table to be editable.

Code after:
        <DropdownMenuItem
          className={cn(
            'space-x-2',
            currentSort?.ascending && 'bg-surface-200 dark:bg-surface-400 text-foreground'
          )}
          onClick={() => onSortColumn(true)}
        >
          <ArrowUp size={14} strokeWidth={currentSort?.ascending ? 3 : 1.5} />
          <span>Sort Ascending</span>
        </DropdownMenuItem>
        <DropdownMenuItem
          className={cn(
            'space-x-2',
            currentSort &&
              !currentSort.ascending &&
              'bg-surface-200 dark:bg-surface-400 text-foreground'
          )}
          onClick={() => onSortColumn(false)}
        >
          <ArrowDown size={14} strokeWidth={currentSort && !currentSort.ascending ? 3 : 1.5} />
          <span>Sort Descending</span>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem
          className="space-x-2"
          onClick={(e) => {
            e.stopPropagation()
            copyToClipboard(columnName)
          }}
        >
          <Copy size={12} />
          <span>Copy name</span>
        </DropdownMenuItem>
        {snap.editable && (
          <>
            <Tooltip>
              <TooltipTrigger asChild className={`${isEncrypted ? 'opacity-50' : ''}`}>
                <DropdownMenuItem
                  className="space-x-2"
                  onClick={onEditColumn}
                  disabled={isEncrypted}
                >
                  <Edit size={14} strokeWidth={1.5} />
                  <span>Edit column</span>
                </DropdownMenuItem>
              </TooltipTrigger>
              {isEncrypted && (
                <TooltipContent side="bottom">Encrypted columns cannot be edited</TooltipContent>
              )}
            </Tooltip>
          </>